基于 Itemsource {Binding} 到 ObservableCollection 的动态 ListView 显示<"这可以改变和规定 listview 样式"?>答案

【问题标题】：Dynamic ListView display based on Itemsource {Binding} to ObservableCollection<"this can change and dictates listview style"?>基于 Itemsource {Binding} 到 ObservableCollection 的动态 ListView 显示<"这可以改变和规定 listview 样式"?>
【发布时间】：2020-10-07 10:07:27
【问题描述】：

问题摘要：在运行时按顺序在 xaml 页面的视图模型（绑定到页面的 ListView）中操作相同的单个 ObservableCollection 的正确方法是什么显示不同的数据集，每个数据变体通过StyleSelector 提供自己的ListView-Style？

说明：
我有一个带有单个 ListView 的 UWP xaml 页面，我希望此列表视图显示用户可能希望查看的所有不同的可能数据集。例如：一个数据集可以是 1 到 15 列数据，所有数据都带有标题。 ListView 的 ItemSource 将使用绑定到 ObservableCollection 来填充它。 ObservableCollection 可以手动填充，也可以使用来自DataTable 的多个SQL 之一。

    <ListView x:Name="UserPageListView"
              ItemsSource="{Binding MainListData, Mode=TwoWay}"                  
              Grid.Column="1"
              Width="auto"
              Background="Gray"
              ItemContainerStyleSelector="{StaticResource UserPage_StyleSelector}">
    </ListView>

我已经尝试绑定ItemContainerStyleSelector 以提供xaml ListView Style（存储在ResourceDictionary 中），基于ObservableCollection 的数据类型，或者至少是这样的想法.

我不知道ObservableCollection 的数据类型应该是通用的还是每个要查看的数据集定义的类。后者是有道理的，因为StyleSelector 需要它来提供相关Style 的逻辑。

我使用 StyleSelector 而不是 DataTemplateSelector，因为我希望选择器包含 HeaderTemplate 和 ItemTemplate（列标题随不同的数据集而变化）：

public class UserPage_StyleSelector:StyleSelector
{
    public Style WatchlistStyle { get; set; }
    public Style UserDetailStyle { get; set; }

    protected override Style SelectStyleCore(object item, DependencyObject container)
    {
        if (item is WatchlistData)
            return WatchlistStyle;
        if (item is UserDetailData)
            return UserDetailStyle;

        return base.SelectStyleCore(item, container);
    }
}

StyleResourceDictionary 中的示例：

    <Style TargetType="ListView"
       x:Key="UserDetail_ListView"
       x:Name="UserDetail_ListView">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid Padding="12" 
                      Background="{ThemeResource SystemBaseLowColor}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="UserDetails"
                               Style="{ThemeResource CaptionTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0"
                   Text="{Binding Details}"
                   FontSize="12"
                   VerticalAlignment="Center"/>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

StyleSelector 在 xaml 页面中定义：

<Page.Resources>
    <viewModels:UserPage_StyleSelector x:Key="UserPage_StyleSelector"
                                       WatchlistStyle="{StaticResource WatchList_ListView}"
                                       UserDetailStyle="{StaticResource UserDetail_ListView}"/>

</Page.Resources>

ResourceDictionary 在 app.xaml.cs 中定义。我是否因为使用了错误的方法而使这项工作过于复杂？

【问题讨论】：

标签： xaml listview mvvm uwp viewmodel

【解决方案1】：

ItemContainerStyle 目标类型是ListViewItem，所以你不能在ItemContainerStyleSelector 中创建ListView 样式。

根据您的要求(headers of columns change with the different data sets)，您需要为不同的标题和列制作GroupStyleSelector 和ItemTemplateSelector。

<GroupStyle>
    <GroupStyle.HeaderTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <TextBlock
                    Margin="5"
                    FontSize="25"
                    Foreground="Gray"
                    Text="{Binding Name}"
                    />
            </StackPanel>
        </DataTemplate>
    </GroupStyle.HeaderTemplate>
</GroupStyle>

更多详情请参考document。

【讨论】：