Czy istnieje sposób wyświetlania elementów o różnej szerokości w kodzie wpf wrappanel

Question

Próbuję coś jak kafelek Windows 8 i chcesz wyświetlić płytki o różnej szerokości i/lub wysokości. WrapPanel powoduje, że każda kolumna jest równa szerokości i wysokości, pozostawiając puste przestrzenie wokół mniejszych elementów. Czy istnieje sposób lub panel do wyświetlania elementów, takich jak StackPanel, gdzie każdy element może mieć indywidualne wymiary i zawinąć jak WrapPanel? To jest moja . Wymieniłem kafelek DataTemplate na prosty Border i TextBlock. Szerokość to auto, a Tiles wygląda dobrze, z wyjątkiem WrapPanel, tworząc równe wielkości komórek.

  <ItemsControl ItemsSource="{Binding Path=Contents}" HorizontalContentAlignment="Left"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel Orientation="Vertical" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Border Background="#B1DBFC" Height="200px" BorderBrush="#404648" Margin="5"> 
         <TextBlock VerticalAlignment="Center" Text="{Binding Path=Name}" /> 
        </Border> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 

można zobaczyć z obrazka że width każdej kolumny jest szerokość najszerszej pozycji.

Jeśli ustawię szerokość wyraźnie na granicy, rzeczy stają się bardziej brzydkie.

Answer 1

Zachowanie szukasz jest domyślny zachowanie WrapPanel jak widać na poniższym przykładzie.

<WrapPanel > 
    <WrapPanel.Resources> 
     <Style TargetType="{x:Type Rectangle}"> 
      <Setter Property="Width" 
        Value="80" /> 
      <Setter Property="Height" 
        Value="80" /> 
      <Setter Property="Margin" 
        Value="3" /> 
      <Setter Property="Fill" 
        Value="#4DB4DD" /> 
     </Style> 
    </WrapPanel.Resources> 

    <Rectangle Width="150" /> 
    <Rectangle /> 
    <Rectangle /> 
    <Rectangle /> 
    <Rectangle Width="200"/> 
    <Rectangle /> 
    <Rectangle /> 
    <Rectangle /> 
    <Rectangle Width="220"/> 
    <Rectangle /> 
    <Rectangle /> 

</WrapPanel> 

która produkuje następujący wynik:

Jak widać, szerokość każdego elementu jest honorowane.

Twój problem jest spowodowany przez ustawienie orientacji szablonu WrapPanel na Vertical. Jest to układanie elementów od góry do dołu, a nie od lewej do prawej, co oznacza, że ​​jest to właściwość Height, którą musisz ustawić (lub możesz powrócić do układu poziomego, jak w moim przykładzie).

Porównaj dane wyjściowe z moim zrzutem ekranu, gdy panel jest ustawiony poziomo; każdy wiersz wiersz jest rozmiarem najwyższego . Nie wierz mi? Spróbuj ustawić jedną z właściwości na większą wartość, a zauważysz, że rozmiar wiersza wzrośnie, a linia Rectangles nie będzie już ustawiona pionowo.

Czytając komentarze Myślę, że najlepszym sposobem, aby zacząć, to należy wykonać następujące czynności:

• Mają WrapPanel znoszącej swoją zawartość poziomo.
• Przedmioty powinny mieć jednolity wzór: Height.
• Ograniczenie Height z WrapPanel do określonego rozmiaru, aby nie uzyskać pionowych pasków przewijania.

Wysokość swój WrapPanel powinny być opracowane za pomocą następującego wzoru:

((Wysokość elementu + Top Margines dolny margines) x liczba rzędów))

Szerokość każdego elementu również wymaga trochę przemyśleń, aby panel ułożył przedmioty poziomo, tak jak interfejs metra (w kolejce, zamiast przestawiać).

Dostępne są dwa rozmiary płytek; mały ma szerokość 80 pikseli, a duży ma szerokość 166 pikseli. Szerokość dużej płytki przerabia się tak:

(szerokość poz * 2) + (lewy + prawy margines margines)

Gwarantuje płytki kolejce poprawnie.

Więc teraz mój XAML wygląda mniej więcej tak:

<ScrollViewer HorizontalScrollBarVisibility="Auto" 
       VerticalScrollBarVisibility="Disabled"> 
    <StackPanel Orientation="Horizontal" 
       Margin="10,0"> 
     <StackPanel.Resources> 
      <Style TargetType="{x:Type Rectangle}"> 
       <Setter Property="Width" 
         Value="80" /> 
       <Setter Property="Height" 
         Value="80" /> 
       <Setter Property="Margin" 
         Value="3" /> 
       <Setter Property="Fill" 
         Value="#4DB4DD" /> 
      </Style> 
      <Style TargetType="{x:Type WrapPanel}"> 
       <Setter Property="Margin" 
         Value="0,0,25,0" /> 
       <Setter Property="MaxWidth" 
         Value="516" /> 
      </Style> 
     </StackPanel.Resources> 
     <WrapPanel Height="258"> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
     </WrapPanel> 
     <WrapPanel Height="258"> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
     </WrapPanel> 
    </StackPanel> 
</ScrollViewer> 

która produkuje następujący wynik:

To powinno dać wystarczająco dużo informacji, aby uruchomić ponownie czynnik to do pełna kontrola. Jeśli to zrobisz, wtedy należy pamiętać o następujących kwestiach:

• właściwości układu (mały rozmiar elementu, duży rozmiar elementu, szczelin itp) powinny być obliczone zamiast zakodowanego tak, że jeśli chcesz zmienić, na przykład, marginesy, układ nadal będzie działał poprawnie (IE płytki będą nadal wyrównane).
• Chciałbym ograniczyć liczbę "płytek", które można wyświetlić (w bieżącym przykładzie, jeśli płytki nie mieszczą się w układzie, są po prostu ukryte, co prawdopodobnie nie jest tym, czego potrzebujesz).