具有水平组的垂直 ListView

Question

我正在尝试让 ListView 在同一行显示具有相同属性的项目，以便 ListView 绑定到 Items（或其分组版本），定义如下这个：

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

看起来像这样：

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

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

我也尝试过嵌套 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 分组的项目，以便轻松绑定。为此，我们可以使用 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 中使用它，以便项目可以根据子项目的数量进行拉伸。

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

最终输出将是

可以找到完整的 Repo Here

祝你好运。

具有水平组的垂直 ListView

Vertical ListView with horizontal groups

c#

xaml

listview

uwp

uwp-xaml