Question

我试图让ListView在同一行显示具有相同属性的项目，以便绑定到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)
};

看起来像这样：

Sketch of the desired ListView

（同一行上的方框应该是相同的大小）

我尝试将ListView绑定到CollectionViewSource，它绑定到Items.GroupBy(x => x.Num)，但我无法让ListView垂直堆叠组，并在组内使用水平堆栈。

我还试过一种嵌套ListViews的方法，基本上是这样的：

<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分组的项目，以便轻松绑定。为此，我们可以使用Linq创建IGrouping列表。喜欢下面。

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

然后我将它绑定到ListView

MainList.ItemsSource = FinalItems;

现在，对于需要根据子项展开项目的第二部分，UWP Community Toolkit有一个名为AdaptiveGridView的控件，可根据可用的Width拉伸项目

您可以在嵌套ListView中使用它，以便Items可以根据SubItems的数量进行拉伸。

因此，您的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

祝你好运。

具有水平组的垂直ListView

1 个答案: