Vertikal Listview mit horizontalen Gruppen

Question

Ich versuche, ein Listview zu bekommen Elemente mit dem gleichen Objekt in der gleichen Zeile angezeigt werden, so dass ein Listview Items gebunden (oder eine gruppierte Version davon), wie folgt definiert:

class Thing { 
    public Thing(int num) { Num = num; } 
    public int Num { get; set; } 
} 

List<Thing> Items = new List<Thing> { 
    new Thing(1), new Thing(2), new Thing(4), 
    new Thing(5), new Thing(3), new Thing(4), 
    new Thing(6), new Thing(4), new Thing(6), 
    new Thing(3) 
}; 

würde wie folgt aussehen:

(die Felder auf der gleichen Reihe sollen die gleiche Größe sein)

Ich habe versucht, den ListView an eine CollectionViewSource zu binden, die an Items.GroupBy(x => x.Num) gebunden war, aber ich konnte nicht die ListView die Gruppen vertikal stapeln und horizontale Stapel innerhalb der Gruppe verwenden.

Ich habe auch versucht, einen Ansatz mit verschachtelten Listviews, im Grunde wie folgt:

<ListView ItemsSource="{x:Bind ItemsGrouped}"> 
    <ListView.ItemTemplate> 
     <DataTemplate x:DataType="local:ThingGroup> 
      <ListView ItemsSource="{x:Bind Items}"> 
       <ListView.ItemsPanel> 
        <ItemsPanelTemplate> 
         <ItemsStackPanel Orientation="Horizontal" /> 
        </ItemsPanelTemplate> 
       </ListView.ItemsPanel> 
      </ListView> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

Es ist wirklich falsch gefühlt, und ich konnte immer noch nicht die Einzelteile erhalten die volle zur Verfügung stehende Breite zu strecken, so dass ich würde gerne einen Ansatz mit dem einzelnen ListView und Gruppen finden.

Answer 1

Sie müssen 2 Probleme hier angehen.

Zuerst müssen Sie sicherstellen, dass Sie Artikel erhalten, die von Ihrem Num gruppiert sind, damit es leicht zu binden ist. Dazu können wir Linq verwenden, um eine IGrouping Liste zu erstellen. Wie unten.

List<IGrouping<int, Thing>> FinalItems = Items 
      .OrderBy(a => a.Num) 
      .GroupBy(a => a.Num) 
      .ToList(); 

Dann bin ich Bindung, die an die Listview

MainList.ItemsSource = FinalItems; 

Nun zum zweiten Teil, wo Sie brauchen, um die Gegenstände zu strecken, basierend auf den Unterpunkten, UWP Community Toolkit eine Steuer AdaptiveGridView genannt hat, die Elemente basierend auf streckt verfügbar Width

Sie können dies in Ihrer geschachtelten ListView verwenden, damit Elemente basierend auf der Anzahl der SubItems gedehnt werden können.

So wird Ihr XAML etwas wie unten sein.

<ListView x:Name="MainList" Margin="0,20"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Toolkit:AdaptiveGridView ItemsSource="{Binding ''}" DesiredWidth="100"> 
       <GridView.ItemTemplate> 
        <DataTemplate> 
         <Border BorderBrush="Black" BorderThickness="2" > 
          <TextBlock Text="{Binding Num}" Margin="10,0" VerticalAlignment="Center"/> 
         </Border> 
        </DataTemplate> 
       </GridView.ItemTemplate> 
      </Toolkit:AdaptiveGridView> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     </Style> 
    </ListView.ItemContainerStyle> 
</ListView> 

Und die letzte Ausgabe wird

Voll Repo Here

Good Luck zu finden sind.