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>

Answer 1

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>