0

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.

Nisha
  • 3
  • 5
  • I have checked your provided scenario, and I found that the NavigationViewItem inside your **DataTemplateGroupSidebarMenuItem** template doesn’t set the ItemSource property, so that these elements inside NavigationViewItem can’t found their data source. You could compare your code with the [Treeview folder group sample](https://github.com/microsoft/Xaml-Controls-Gallery/blob/master/XamlControlsGallery/ControlPages/TreeViewPage.xaml). Here you will see a DataTemplate named **FolderTemplate** contains TreeViewItem and the TreeViewItem set the ItemsSource property. – dear_vv Jun 29 '21 at 09:33
  • Therefore, this issue might be related to the setting of Itemsource, I suggest you could refer to the above sample to set ItemSource for the NavigationViewItem inside your DataTemplateGroupSidebarMenuItem template. – dear_vv Jun 29 '21 at 09:33
  • Ok, I'll add MenuItemSource="collection of **FolderSidebarItemViewModelBase**" inside DataTemplateGroupSidebarMenuItem but as per template selector, when that FolderSidebarItemViewModelBase is encountered, we will pick DataTemplateSidebarMenuItem datatemplate right ? How that works ? – Nisha Jun 29 '21 at 12:15
  • I'm a bit confused about your description. Could you please tell me What "My Folder datatype has a property IsGroup" means? – dear_vv Jun 30 '21 at 08:17

0 Answers0