Using MenuItem.SubmenuItemTemplateKey on the top level menu items - wpf

Question

It seems that the style of the top level MenuItem UIElements is different than the lower level MenuItems. I would like to use the same style on the top level as the sub levels. How can I replace the style of the top level with that of the sub level?
I see there is a resourcekey for both styles...
MenuItem.SubmenuItemTemplateKey and
MenuItem.TopLevelItemTemplateKey

Answer 1

Create a Controltemplate for targettype of menuitem and use it for both:
<ControlTemplate x:Key="MyMenuItemTemplateKey" TargetType="MenuItem">
<Grid Name="Border" Height="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
<ColumnDefinition Width="13"/>
</Grid.ColumnDefinitions>
<Border Name="BorderIcon" Grid.Column="0" BorderBrush="Red" BorderThickness="0,0,1,0">
<ContentPresenter Name="Icon" Margin="5,0,5,0" VerticalAlignment="Center" ContentSource="Icon"/>
</Border>
<ContentPresenter Name="HeaderHost" Grid.Column="1" ContentSource="Header" Margin="5,0,0,0" VerticalAlignment="Center" RecognizesAccessKey="True"/>
<TextBlock x:Name="InputGestureText" Grid.Column="2" Text="{TemplateBinding InputGestureText}" Margin="10,2,2,2" VerticalAlignment="Center" DockPanel.Dock="Right" />
<Border Name="BorderChecked" Grid.Column="3" CornerRadius="2" Background="Transparent" Margin="5,2,5,2"/>
<Border Name="BorderDisable" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Transparent"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Hidden"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="Blue"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="BorderChecked" Property="Background" Value="Green"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="BorderDisable" Property="Background" Value="#3FFFFFFF"/>
</Trigger>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
And the make a style where you define both templates with the same templatekey:
<Style x:Key="MyMenuItemStyle" TargetType="MenuItem">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FontFamily" Value="Verdana"/>
<Setter Property="FontSize" Value="8.5pt"/>
<Style.Triggers>
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Template" Value="{StaticResource MyMenuItemTemplateKey}"/>
</Trigger>
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="Template" Value="{StaticResource MyMenuItemTemplateKey}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>