Keyboard navigation no longer works in WPF menu with templates - wpf

Question

In a WPF menu that is data bound to a collection, I can style everything correctly, but navigation with the keyboard no longer works as expected.
Consider the XAML below (you can paste it in a tool like KaXaml).
Two things:
Opening a menu and navigating to the right with the arrow keys will by default select the first item in the opened menu item. For example:
Click on 'One'
Press right arrow --> Menu two opens but nothing is selected
Press right arrow again --> Menu three opens and first item is selected
Navigating the subitems doesn't work. When pressing the right arrow, the next top-level menu item is opened, instead of drilling down into the subitem
Click on 'Two'
Press left arrow
Press right arrow --> We drill down, selecting One > A > I
Press right arrow --> There's nothing to drill down into, so we move on to MenuItem Two
Press right arrow --> Instead of drilling down into Two > 'Bound property' > 'Another bound property', we move on to top-level MenuItem 'Three'
How can I ensure the 'default' menu behavior when navigating with the keys?
This is the XAML you can test it with:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Menu VerticalAlignment="Top">
<MenuItem Header="One">
<MenuItem Header="A">
<MenuItem Header="I" />
<MenuItem Header="II" />
<MenuItem Header="III" />
</MenuItem>
<MenuItem Header="B"/>
<MenuItem Header="C"/>
</MenuItem>
<MenuItem Header="Two">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<MenuItem>
<MenuItem.HeaderTemplate>
<DataTemplate>
<TextBlock>
<Run Text="Bound property" />
</TextBlock>
</DataTemplate>
</MenuItem.HeaderTemplate>
<MenuItem Header="Something"/>
<MenuItem Header="Something else"/>
</MenuItem>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
<MenuItem Header="A"/>
<MenuItem Header="B"/>
<MenuItem Header="C"/>
</MenuItem>
<MenuItem Header="Three">
<MenuItem Header="A">
<MenuItem Header="I" />
<MenuItem Header="II" />
<MenuItem Header="III" />
</MenuItem>
<MenuItem Header="B"/>
<MenuItem Header="C"/>
</MenuItem>
</Menu>
</Grid>
</Page>
Update
The special thing is that the sub MenuItems in my ControlTemplate should be added for each DataBound MenuItem. This is because I have an ObservableCollection with which I will build up the MenuItems inside MenuItem "Two". For each of these MenuItems, I need the same sub MenuItems. They will be bound to a Command that is the same for each of the MenuItems, except for the CommandParameter.
So what I want in the end is:
Two
Bound property 1
Something
Something else
Bound property 2
Something
Something else
Bound property 3
Something
Something else

Answer 1

You should not create MenuItem elements inside the template of your MenuItem. You should style your items so they have the bound content.
I've added XML as a source for your menu items, so "Two" item has content bound to XML (you can replace it with your collection). For this solution you should have a collection for your submenu items (one for all top items, not per a single top item). The keyboard navigation works correct in the example below.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<XmlDataProvider x:Key="MenuProvider" XPath="Items">
<x:XData>
<Items xmlns="">
<Item Title="Bound property 1" Parameter="1" />
<Item Title="Bound property 2" Parameter="2" />
<Item Title="Bound property 3" Parameter="3" />
</Items>
</x:XData>
</XmlDataProvider>
<XmlDataProvider x:Key="SubMenuProvider" XPath="Items">
<x:XData>
<Items xmlns="">
<Item Title="Something" />
<Item Title="Something else" />
</Items>
</x:XData>
</XmlDataProvider>
</Page.Resources>
<Grid>
<Menu VerticalAlignment="Top">
<MenuItem Header="One">
<MenuItem Header="A">
<MenuItem Header="I" />
<MenuItem Header="II" />
<MenuItem Header="III" />
</MenuItem>
<MenuItem Header="B" />
<MenuItem Header="C" />
</MenuItem>
<MenuItem Header="Two" ItemsSource="{Binding Source={StaticResource MenuProvider}, XPath=*}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding XPath=#Title}" />
<Setter Property="ItemsSource" Value="{Binding Source={StaticResource SubMenuProvider}, XPath=*}" />
<Setter Property="Tag" Value="{Binding XPath=#Parameter}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding XPath=#Title}" />
<Setter Property="CommandParameter" Value="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=MenuItem}}" />
</Style>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem>
<MenuItem Header="Three">
<MenuItem Header="A">
<MenuItem Header="I" />
<MenuItem Header="II" />
<MenuItem Header="III" />
</MenuItem>
<MenuItem Header="B" />
<MenuItem Header="C" />
</MenuItem>
</Menu>
</Grid>
</Page>

Answer 2

I did restyle the menu item Two while keeping your desired needs
<MenuItem Header="Two">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header"
Value="Bound property" />
<Setter Property="ItemsSource">
<Setter.Value>
<!--binding sub menu items to a collection-->
<x:ArrayExtension Type="sys:String"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:String>Something</sys:String>
<sys:String>Something else</sys:String>
</x:ArrayExtension>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
<MenuItem />
<MenuItem />
<MenuItem />
</MenuItem>
example above solves the navigation issue while keeping the binding to child items as desired.
give it a try and see how close it is.