WinUI - Need help binding a child item for a NavigationView

Webbert 0
Viewed 32

I'm trying to create a 2 level navigation using dynamic data via binding similar to

  • Sports Car
    • Mustang
    • Ferrari
  • Family Car
    • Flintstone Mobile
    • Mini Van

Using the code in the Microsoft documentation: https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.navigationviewitem.menuitemssource?view=winui-2.8

I want to change the data type of Children from Category to Car public class Car { public string CarName {get; set;} }

When I click to expand a menu item, the application blows up and I don't really have any idea why. System.ArgumentException("Value does not fall within the expected range."). There is no stack trace.

Any help is appreciated. Here is my template.

    <DataTemplate x:Key="NavigationViewMenuItem" x:DataType="local:Category">
        <NavigationViewItem Content="{x:Bind Name}" MenuItemsSource="{x:Bind Cars}">
            <NavigationViewItem.MenuItems>
                <DataTemplate x:DataType="local:Car">
                    <NavigationViewItem Content="{x:Bind CarName}"/>
                </DataTemplate>
            </NavigationViewItem.MenuItems>
        </NavigationViewItem>
    </DataTemplate>

Any help is appreciated.

winui-3
1 Answers

You might be facing some reported issues about NavigationView with DataTemplates.

Though I'd use DataTemplateSelector for your case and the best thing is that this works.

Here is the code:

MenuItemDataTemplateSelector.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace WinUI3NavigationViewTest;

public class MenuItemDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate? CategoryTemplate { get; set; }
    public DataTemplate? CarTemplate { get; set; }

    protected override DataTemplate? SelectTemplateCore(object item)
    {
        return item switch
        {
            Category => CategoryTemplate,
            Car => CarTemplate,
            _ => null,
        };
    }
}

MainWindow.xaml

<Window
    x:Class="WinUI3NavigationViewTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:WinUI3NavigationViewTest"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.Resources>
            <DataTemplate
                x:Key="CategoryMenuItemTemplate"
                x:DataType="local:Category">
                <NavigationViewItem
                    Content="{x:Bind Name}"
                    MenuItemsSource="{x:Bind Cars}" />
            </DataTemplate>
            <DataTemplate
                x:Key="CarMenuItemTemplate"
                x:DataType="local:Car">
                <NavigationViewItem Content="{x:Bind Name}" />
            </DataTemplate>
            <local:MenuItemDataTemplateSelector
                x:Key="ItemTemplateSelector"
                CarTemplate="{StaticResource CarMenuItemTemplate}"
                CategoryTemplate="{StaticResource CategoryMenuItemTemplate}" />
        </Grid.Resources>
        <NavigationView
            MenuItemTemplateSelector="{StaticResource ItemTemplateSelector}"
            MenuItemsSource="{x:Bind Categories}" />
    </Grid>

</Window>
Andrew KeepCoding0
Related