uwp masterdetail 控件中的分组项目

Question

我正在尝试调整 uwp 社区工具包的 MasterDetail 控件以对主视图中的元素进行分组，并且是否可以像在语义视图中一样添加放大和缩小。

经过一些实施测试和不成功的实验，我回来了。我检查了这段代码，从社区工具包的 master/detail 示例开始，但是当导航到 Master/Detail 页面时我有一个 "Incorrect parameter" 异常。

    <Page.Resources>
    <!-- datatemplate -->
    <CollectionViewSource x:Name="grpStatus" IsSourceGrouped="true" Source="{x:Bind Path=ViewModel.GrpSource}" ItemsPath="Items"/>

    <DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="model:GrpItemsList">
        <TextBlock Text="{x:Bind Path=GrpName}" FontSize="20" />
    </DataTemplate>
    <DataTemplate x:Key="ZoomedOutHeaderTemplate" x:DataType="model:GrpItemsList">
        <TextBlock Text="{x:Bind Path=GrpName}" FontSize="15" />
    </DataTemplate>

    <!-- restyling -->
    <Style TargetType="ListView">
        <Setter Property="Template">
            <Setter.Value>
                <!-- Control template for listView -->
                <ControlTemplate TargetType="ListView">
                    <SemanticZoom>
                        <SemanticZoom.ZoomedInView>
                            <GridView ItemsSource="{Binding grpStatus.View}"
                                      ItemTemplate="{StaticResource itmTemplate}">
                                <GridView.GroupStyle>
                                    <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" />
                                </GridView.GroupStyle>
                            </GridView>
                        </SemanticZoom.ZoomedInView>
                        <SemanticZoom.ZoomedOutView>
                            <ListView ItemsSource="{Binding grpStatus.Source}"
                                      ItemTemplate="{StaticResource ZoomedOutHeaderTemplate}" />
                        </SemanticZoom.ZoomedOutView>
                    </SemanticZoom>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <DataTemplate x:Key="itmTemplate" x:DataType="model:SampleOrder">
        ... sample default
    </DataTemplate>
...
</Page.Resources>

并且在model/viewmodel

public class GrpItemsList
{
    public GrpItemsList(List<SampleOrder> objLst)
    {
        Items = new ObservableCollection<SampleOrder>(objLst);
    }
    public String GrpName { get; set; }
    public ObservableCollection<SampleOrder> Items { get; private set; }
}

在MasterDetailViewModel.cs

    ...
    public ObservableCollection<GrpItemsList> GrpSource { get; set; } = new ObservableCollection<GrpItemsList>();

    public async Task LoadDataAsync(MasterDetailsViewState viewState)
    {
        var data = await SampleDataService.GetSampleModelDataAsync();

        GrpSource.Clear();
        GrpItemsList gItm = null;
        foreach(String sStat in data.Select(x => x.Status).Distinct())
        {
            gItm = new GrpItemsList(data.Where(x => x.Status == sStat).ToList());
            gItm.GrpName = sStat;
            GrpSource.Add(gItm);
        }
    }

感谢您的帮助。

Answer 1

这可以通过重新设计控件样式并添加语义缩放功能来实现 (docs). You can find the default style for the MasterDetailsView on GitHub. Where the ListView is currently，按照文档 link

中的说明进行适当的缩放更改

uwp masterdetail 控件中的分组项目

Grouped item in uwp masterdetail control

c#

uwp

windows-community-toolkit