1

我正在尝试调整 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>

在模型/视图模型中

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);
        }
    }

感谢您的帮助。

4

1 回答 1

0

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

于 2018-03-21T14:30:40.120 回答