具有两级分组的 WinRT ListView答案

【问题标题】：WinRT ListView with two level grouping具有两级分组的 WinRT ListView
【发布时间】：2014-07-13 17:27:21
【问题描述】：

我正在尝试使用 WinRT ListView 组件在两个级别上进行嵌套分组。到目前为止，我无法传输我为 WPF 找到的示例，因为 WinRT 组件缺少 WPF 中存在的一些属性 - 例如，WinRT 中的 CollectionViewSource 没有用于定义的 GroupDescriptions 属性几组。

我试图制作的视图是这样的：

到目前为止，我已经能够在 WinRT 中获得这样的视图 - 缺少版本级别：

到目前为止，我提出的 XAML 有两个 CollectionViewSource 对象，我将 categoryViewSource 的 Source 设置为 versionViewSource 的 View。 ListView 的 ItemsSource 绑定到 categoryViewSource。这显然在某种程度上有效，因为我正在显示一些数据。

<UserControl.Resources>
    <DataTemplate x:Key="versionTemplate">
        <TextBlock Margin="10" Style="{StaticResource SubheaderTextBlockStyle}" Foreground="{ThemeResource AccentColorBrush}">
                            <Run Text="{Binding VersionString}" /><Run Text=" (" /><Run Text="{Binding ReleaseDateString}" /><Run Text=")" />
        </TextBlock>
    </DataTemplate>
    <DataTemplate x:Key="categoryTemplate">
        <TextBlock Margin="10" Style="{StaticResource SubheaderTextBlockStyle}" Foreground="{ThemeResource AccentColorBrush}" Text="{Binding Category}" />
    </DataTemplate>
    <DataTemplate x:Key="releaseNoteTemplate">
        <TextBlock Margin="10" Style="{StaticResource BodyTextBlockStyle}" Text="{Binding Text}" />
    </DataTemplate>
    <local:ReleaseNotesTemplateSelector x:Key="releaseNotesTemplateSelector"
                                          VersionTemplate="{StaticResource versionTemplate}"
                                          CategoryTemplate="{StaticResource categoryTemplate}"/>
    <CollectionViewSource x:Name="versionViewSource" IsSourceGrouped="True" ItemsPath="Categories" />
    <CollectionViewSource x:Name="categoryViewSource" IsSourceGrouped="True" ItemsPath="Items" />
</UserControl.Resources>

<ListView ItemsSource="{Binding Source={StaticResource categoryViewSource}}" 
          ItemTemplate="{StaticResource releaseNoteTemplate}"
          IsItemClickEnabled="False">
    <ListView.GroupStyle>
        <GroupStyle HeaderTemplateSelector="{StaticResource releaseNotesTemplateSelector}" />
    </ListView.GroupStyle>
</ListView>

Source 属性在后面的代码中设置如下：

if (this.DataContext is ReleaseNotesViewModel)
{
    this.versionViewSource.Source = this.ViewModel.Versions;
    this.categoryViewSource.Source = this.versionViewSource.View;
}

ReleaseNotesTemplateSelector 的工作方式如下：

public class ReleaseNotesTemplateSelector : DataTemplateSelector
{
    public DataTemplate VersionTemplate { get; set; }
    public DataTemplate CategoryTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        if (item is ReleaseNoteVersionViewModel)
            return this.VersionTemplate;
        else if (item is ReleaseNoteCategoryViewModel)
            return this.CategoryTemplate;

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

我当然可以继续使用硬类型视图，但如果可能的话，我宁愿使用动态生成的视图。有没有人建议我如何获得嵌套分组以在第一组级别显示版本号？

【问题讨论】：

标签： xaml windows-runtime winrt-xaml

【解决方案1】：

我在 MSDN 论坛上发布了同样的问题，并从微软的一个人那里得到了这个答案：http://social.msdn.microsoft.com/Forums/en-US/e9d82eb7-86e4-4d06-b35e-f555b97efe74/winrt-listview-with-two-level-grouping?forum=winappswithcsharp

所以，我只是将示例修改为每个版本的动态类别，这非常适合我的 ViewModel。当不尝试使用大多数示例所涉及的 CollectionViewSource 分组时，完成我需要的工作要容易得多。

这是我的最终 XAML 代码：

<ListView ItemsSource="{Binding Versions}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Margin="0,10,0,5" Style="{StaticResource SubheaderTextBlockStyle}" Foreground="{ThemeResource AccentColorBrush}">
                            <Run Text="{Binding VersionString}" /><Run Text=" (" /><Run Text="{Binding ReleaseDateString}" /><Run Text=")" />
                </TextBlock>
                <ListView ItemsSource="{Binding Categories}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Margin="0,5,0,2" Style="{StaticResource SubheaderTextBlockStyle}" Text="{Binding Category}" />
                                <ListView ItemsSource="{Binding Items}">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel>
                                                <TextBlock Margin="5,2,0,0" Style="{StaticResource BodyTextBlockStyle}" LineStackingStrategy="MaxHeight">
                                                    <Run>-</Run><Run Text="{Binding Text}" />
                                                </TextBlock>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

结果如下：

【讨论】：