Сгруппированный элемент в элементе управления uwp masterdetail

Question

Я пытаюсь адаптировать элемент управления MasterDetail набора инструментов сообщества uwp, чтобы сгруппировать элементы в главном представлении и, если возможно, добавить увеличение и уменьшение, как в семантическом представлении.

Я возвращаюсь после некоторых тестов реализации и неудачных экспериментов. Я проверяю этот код, начиная с образца master / detail из набора инструментов сообщества, но у меня возникает исключение "Неправильный параметр" при переходе на страницу Master/Detail.

    <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>

И в модели /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 (документы). Вы можете найти стиль по умолчанию для MasterDetailsView на GitHub. Там, где в данный момент находится ListView, внесите соответствующие изменения для увеличения, как указано в ссылке на документацию.