How to get AccessKey to work with DataTemplate in NavigationView

Question

I am using WinUI 3 and WindowsAppSDK. When I use a NavigationView and set AccessKey on the NavigationViewItem, it works ... until I also define the MenuItemTemplate. As soon as a DataTemplate is used for the MenuItemTemplate, the access keys stop working. Any thoughts on how to work around this?

Here is an example. Any thoughts?

  <NavigationView>
      <NavigationView.MenuItems>
          <NavigationViewItem AccessKey="N">Nibble</NavigationViewItem>
          <NavigationViewItem AccessKey="P">Pancake</NavigationViewItem>
      </NavigationView.MenuItems>
      <!-- uncomment this to break the access key functionality
      <NavigationView.MenuItemTemplate>
          <DataTemplate x:DataType="NavigationViewItem">
              <StackPanel>
                  <ContentPresenter Content="{Binding Icon}" Margin="0,0,8,0"/>
                  <TextBlock Text="{Binding Content}"/>
              </StackPanel>
          </DataTemplate>
      </NavigationView.MenuItemTemplate>
      -->
  </NavigationView>

score 0 · Accepted Answer · answered Mar 05 '23 at 12:55

I guess the AccessKey doesn't work because the original menu items, NavigationViewItems that has AccessKeys, get wrapped with NavigationViewItem.

Instead, this code will be something similar to what you are trying to achive:

using Microsoft.UI.Xaml.Controls;
using System.Collections.Generic;

namespace WinUI3App;

public class MenuItem
{
    public MenuItem(string text, Symbol icon, string accessKey)
    {
        Text = text;
        Icon = icon;
        AccessKey = accessKey;
    }

    public string Text { get; }

    public Symbol Icon { get; }

    public string AccessKey { get; }
}

public sealed partial class MainPage : Page
{
    public List<MenuItem> MenuItems = new()
    {
        new MenuItem(text: "Nibble", icon: Symbol.Emoji, accessKey: "N"),
        new MenuItem(text: "Pancake", icon: Symbol.Emoji2, accessKey: "P"),
    };

    public MainPage()
    {
        this.InitializeComponent();
    }
}

<Page
    x:Class="WinUI3App.MainPage"
    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:WinUI3App"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <NavigationView MenuItemsSource="{x:Bind MenuItems, Mode=OneWay}">
        <NavigationView.MenuItemTemplate>
            <DataTemplate x:DataType="local:MenuItem">
                <NavigationViewItem AccessKey="{x:Bind AccessKey}">
                    <Grid ColumnDefinitions="Auto,*">
                        <SymbolIcon
                            Grid.Column="0"
                            Symbol="{x:Bind Icon, Mode=OneWay}" />
                        <TextBlock
                            Grid.Column="1"
                            Text="{x:Bind Text, Mode=OneWay}" />
                    </Grid>
                </NavigationViewItem>
            </DataTemplate>
        </NavigationView.MenuItemTemplate>
    </NavigationView>

</Page>

Thanks!! Using a NavigationViewItem for the outer element of the DataTemplate worked. — sjb-sjb, Mar 05 '23 at 14:50

score 0 · Answer 2 · answered Mar 05 '23 at 14:53

Posting this to spell out the answer in case anyone would like to see it in full:

<NavigationView>
    <NavigationView.MenuItems>
        <NavigationViewItem AccessKey="N">
            Nibble
        </NavigationViewItem>
        <NavigationViewItem AccessKey="P">
            Pancake
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <NavigationView.MenuItemTemplate>
        <DataTemplate x:DataType="NavigationViewItem">
            <NavigationViewItem AccessKey="{Binding AccessKey}">
                <StackPanel>
                    <ContentPresenter Content="{Binding Icon}" Margin="0,0,8,0"/>
                    <TextBlock Text="{Binding Content}"/>
                </StackPanel>
            </NavigationViewItem>
        </DataTemplate>
    </NavigationView.MenuItemTemplate>
</NavigationView>

How to get AccessKey to work with DataTemplate in NavigationView

2 Answers2