Grouped item in uwp masterdetail control

Question

I am trying to adapt the MasterDetail control of the uwp community toolkit to group the elements in the main view and if it is possible to add a zoom in and zoom out as in a semantic view.

I come back after some implementation tests and unsuccessful experiments. I check this code, sarting from the master/detail sample from the community toolkit, but I have an "Incorrect parameter" exception when navigate to the Master/Detail page.

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

And in 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; }
}

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

Thank you for your help.

Answer 1

This can be accomplished by restyling the control and adding the SemanticZoom functionality (docs). You can find the default style for the MasterDetailsView on GitHub. Where the ListView is currently, make the appropriate changes for zooming as noted in the documentation link