WinRT ListView具有两级分组

时间:2014-07-13 17:27:22

标签: xaml windows-runtime winrt-xaml

我尝试使用WinRT ListView组件在两个级别上进行嵌套分组。到目前为止,我还没有能够传输我为WPF找到的样本,因为WinRT组件缺少WPF中存在的一些属性 - 例如WinRT中的CollectionViewSource没有GroupDescriptions属性用于定义多个组。

我试图制作的观点是这样的: Hard typed XAML view with nested virtual groups

到目前为止,我已经能够在WinRT中获得这样的视图 - 缺少版本级别: enter image description here

到目前为止,我提出的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);
    }
}

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

1 个答案:

答案 0 :(得分: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>

结果如下:

Screenshot