ItemsPanel als autoResizable Matrix

Question

Ich arbeite an einem Fenster, in dem ich im Grunde eine Listbox habe (gebildet aus Bindung an eine ObservableCollection). Diese Gegenstände haben ein Bild, einen Titel und andere Sachen. Ich möchte die Listbox (über itemTemplate) so gestalten, dass sie nur aus den Bildern meiner ObservableCollection von Items besteht. Ich habe UniformGrid verwendet, aber das Problem ist, dass ich es nicht schaffen kann, die Anzahl der Spalten abhängig von der WindowSize zu ändern. Als ein Beispiel habe ich 10 Gegenstände. Die Bilder haben eine Breite von 100 Pixeln. Das Fenster hat eine Breite von 1000 px. Technisch sollte es 10 Elemente in einer Reihe erscheinen. Wenn ich das Fenster auf 500 px skaliere, sollte ich 2 Zeilen mit 5 Bildern/Zeile haben. Wenn ich es auf 700 px vergrößere, sollte es eine Reihe von 4 Bildern sein, und die zweite mit 3 Bildern. Wenn ich die UniformGrid-Spalte festlege, wird sie sich nicht ändern, wenn ich die Größe des Fensters ändere. Ich habe versucht, die HorizontalAlignment oder VerticalAlignments der Listbox nach oben/Mitte/etc. ... Bisher habe ich so weit gekommen:

<ListBox x:Name="ListBoxItems" ItemsSource="{Binding}"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <UniformGrid x:Name="UniformGridTest" Columns="?"/> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel> 
       <Image Name="ListItemImage" Source="{Binding LocImage.Source}" 
         RenderOptions.BitmapScalingMode="HighQuality" 
         MaxHeight="100" MaxWidth="100" Margin="0,0,5,0" 
         MouseDown="ListItemImage_MouseDown"/> 
      </StackPanel> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>` 

ich eine ListBox verwenden, weil ich meine auswählbaren Elemente haben muß. Ich hoffe, ich erklärte Ihnen gut genug, damit Sie es verstehen. Vielen Dank! Adrian.

Answer 1

Sie sollten versuchen WrapPanel. Es passt so viele Gegenstände, wie es Ihre Breite erlaubt, der Rest wird in die nächste Zeile verschoben. Irgendwann sollte es so aussehen, wie Sie es brauchen. Aber in diesem Fall haben Sie bei bestimmten Breitenwerten rechts einige Leerzeichen.

<ListBox x:Name="ListBoxItems" ItemsSource="{Binding}"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel x:Name="WrapPanel"/> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel > 
       <Image Name="ListItemImage" Source="{Binding LocImage.Source}" RenderOptions.BitmapScalingMode="HighQuality" MaxHeight="100" MaxWidth="100" Margin="0,0,5,0" MouseDown="ListItemImage_MouseDown"/> 
      </StackPanel> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>