Question

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

我在一些实施测试和不成功的实验后回来。我检查了这个代码，从社区工具包中的主/详细示例中查看，但导航到主/详细信息页面时，我有一个“不正确的参数”异常。

    <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

这可以通过重新设置控件并添加SemanticZoom功能(docs)来实现。您可以在GitHub上找到默认的style for the MasterDetailsView。在ListView is currently的位置，根据文档链接中的说明对缩放进行适当的更改

uwp masterdetail控件中的分组项

1 个答案: