c# - How to implement Navigation view with groups/headers and menu items in UWP

Question

I want to implement NavigationView with dynamic headers and menu items using data templates.

Like this in Microsoft ToDo

I have code as this:

<muxc:NavigationView
        x:Name="SidebarNavigationView"
        MenuItemsSource="{x:Bind ViewModel.SidebarItems, Mode=OneWay}"
        MenuItemTemplateSelector="{StaticResource SidebarMenuItemTemplateSelector}"
        SelectedItem="{x:Bind ViewModel.SelectedSidebarItem, Mode=TwoWay}"
        ItemInvoked="SidebarNavigationView_ItemInvoked">

I have MenuItemTemplateSelector with 3 different templates and 3 datatypes

<local:SidebarMenuItemTemplateSelector
            x:Key="SidebarMenuItemTemplateSelector"
            NavItemTemplate="{StaticResource DataTemplateSidebarMenuItem}"
            HeaderTemplate ="{StaticResource DataTemplateGroupSidebarMenuItem}"
            NavSeparatorTemplate="{StaticResource DataTemplateSeparatorMenuItem}"/>

public class SidebarMenuItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate NavItemTemplate { get; set; }
    public DataTemplate NavSeparatorTemplate { get; set; }
    public DataTemplate HeaderTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item)
    {
        if (item is SeparatorSidebarItemViewModel)
        {
            return NavSeparatorTemplate;
        }
        else if (item is GroupSidebarItemViewModel)
        {
            return HeaderTemplate;
        }
        return NavItemTemplate;
    }
}

and each dataTemplate looks like

<DataTemplate x:Key="DataTemplateSidebarMenuItem" x:DataType="sidebar:FolderSidebarItemViewModelBase">
     <muxc:NavigationViewItem>
                <Grid>
                    Some elements
                </Grid>
         </muxc:NavigationViewItem>
</DataTemplate>

<DataTemplate x:Key="DataTemplateGroupSidebarMenuItem" x:DataType="sidebar:GroupSidebarItemViewModel">
        <muxc:NavigationViewItem>
                    <Grid>
                        Some elements including toggle(collpse) button
                    </Grid>
             </muxc:NavigationViewItem>
 </DataTemplate>

<DataTemplate x:Key="DataTemplateSeparatorMenuItem" x:DataType="sidebar:SeparatorSidebarItemViewModel">
                <muxc:NavigationViewItemSeparator/>
 </DataTemplate>

The problem is: I have folders inside group and right now I implemented everything as NavigationMenuItem because of which when I select group item with some folders inside it, it is crashing as it can't move focus to one folder.

Note: My Folder datatype (which is basically MenuItem) has a property "IsGroup".

Solution required: I want my folders to look as NavigationMenuItem if not grouped and to look inside NavigationMenuItemHeader(group) if IsGroup property is true.

Great if you can help. Thanks in advance.

标签： c#.netuwp-xamlbottomnavigationviewxamarin.uwp