垂直のListView

Question

私は、同じ行に同じプロパティを持つ項目を表示するリストビューを取得しようとしているように、このように定義されたItemsにバインドされたListViewコントロール（またはそのグループ化されたバージョン）、：

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) 
}; 

は次のようになり：

（ボックスを同じ行に同じ大きさになっている）

私はItems.GroupBy(x => x.Num)に結合させたCollectionViewSourceにリストビューを結合しようとしましたが、私は、ListViewコントロールが垂直グループをスタックするために取得し、グループ内の水平スタックを使用できませんでした。

は私も基本的にこのように、ネストされたリストビューでのアプローチを試してみた：それは本当に間違っていると感じた

<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> 

、と私はまだフル可能な幅に伸ばすためのアイテムを得ることができませんでしたので、私単一のListViewとグループでアプローチを見つけたい。

Answer 1

現在地2つの問題に取り組む必要があります。

まず、あなたは結合しやすいことができるようにあなたのNumによってグループ化されたアイテムを受けていることを確認する必要があります。そのために我々はIGroupingリストを作成するLinqを使用することができます。下のように。

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

は、それから私は、ListViewコントロール

MainList.ItemsSource = FinalItems; 

に今、あなたは、サブ項目に基づいて項目を伸ばすために必要な第二部のために、UWP Community Toolkitはに基づいてアイテムを伸ばしAdaptiveGridViewと呼ばれるコントロールを持っていることをバインドしています利用可能Width

これは、ネストされたリストビュー内でこれを使用して、アイテムがサブアイテムの数に基づいてストレッチすることができます。

あなたのXAMLは以下のようになります。

<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> 

、最終出力は

詳しいレポはHere

幸運を見つけることができます。