TemplateSelector for UWP NavigationView

Question

how do I correctly use the MenuItemTemplateSelector for UWP NavigationView? I have looked up some samples from the internet and tried them (Code below). But it did not work as it should it just prints the class name. Currently im running on Windows version 1809. I have already tried using the same template in a listView and it works, so I was wondering if there might be bug in NavigationView, or am I missing something? Thanks in advance :)

This is what my code looks like:

Create template selector:

public class NavigationItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate DriveTemplate { get; set; }
    public DataTemplate PathTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        return SelectTemplateCore(item);
    }

    protected override DataTemplate SelectTemplateCore(object item)
    {
        if (item is Drive) return DriveTemplate;
        if (item is FileSystemElement) return PathTemplate;

        return base.SelectTemplateCore(item);
    }
}

Put something like this in your page resources:

 <Page.Resources>
    <DataTemplate x:Key="FileSystemDataTemplate" x:DataType="entities:FileSystemElement">
        <StackPanel>
            <TextBlock Text="{x:Bind Name}" />
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="DriveDataTemplate" x:DataType="entities:Drive">
        <StackPanel>
            <SymbolIcon Symbol="{x:Bind Icon}" />
            <TextBlock Text="{x:Bind Name}" />
        </StackPanel>
    </DataTemplate>
    <entities:NavigationItemTemplateSelector x:Key="NVMenuItemsSelector" 
                                             DriveTemplate="{StaticResource DriveDataTemplate}" 
                                             PathTemplate="{StaticResource FileSystemDataTemplate}">
    </entities:NavigationItemTemplateSelector>
</Page.Resources>

Tell NavigationView it should use this TemplateSelector

<NavigationView MenuItemsSource="{x:Bind ViewModel.NavigationItems, Mode=OneWay}" 
                MenuItemTemplateSelector="{StaticResource NVMenuItemsSelector}">

Please refer this case [reply](https://stackoverflow.com/a/53955542/7254781). — Nico Zhu, Mar 22 '19 at 09:34

score 1 · Answer 1 · answered Mar 21 '19 at 20:53

Check out this link.

Cannot bind Icon property in NavigationView MenuItemTemplate

I believe wrapping your StackPanels in a ContentPresenter will fix your issue.

<DataTemplate x:Key="FileSystemDataTemplate" x:DataType="entities:FileSystemElement">
    <ContentPresenter>
        <StackPanel>
            <TextBlock Text="{x:Bind Name}" />
        </StackPanel>
    </ContentPresenter>
</DataTemplate>
<DataTemplate x:Key="DriveDataTemplate" x:DataType="entities:Drive">
    <ContentPresenter>
        <StackPanel>
            <SymbolIcon Symbol="{x:Bind Icon}" />
            <TextBlock Text="{x:Bind Name}" />
        </StackPanel>
    </ContentPresenter>
</DataTemplate>

score 1 · Accepted Answer · answered Mar 22 '19 at 10:44

1

After looking on above links I decided to put an NavigationViewItem inside my Templates

<DataTemplate x:Key="DriveDataTemplate" x:DataType="entities:Drive">
        <NavigationViewItem Icon="{x:Bind SymbolIcon}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{x:Bind Name}" />
            </StackPanel>
        </NavigationViewItem>
</DataTemplate>

And it works. Seems like you have to put NavigationViewItem as first child.

answered Mar 22 '19 at 10:44

P. Steininger

172
1
8

Thanks for posting that. I have a muxc:NavigationView that had originally used one DataTemplate whose child was a Grid. When I added a second DataTemplate and used MenuItemTemplateSelector to pick between the two I was getting a hard crash - the objects sent to my DataTemplateSelector class seemed to be corrupted. When I changed my DataTemplates to use a NavigationViewItem as the child of the DataTemplate the crash went away. I never would have guessed this as a workaround... – Rich S Oct 29 '21 at 21:55

TemplateSelector for UWP NavigationView

2 Answers2