Month: April 2015

How to Style a MenuItem with no Icon or Separator in WPF

Alexandru 1 Comment

First of all, you should be using Microsoft Expression Blend to do any sort of control styling in WPF. It’s probably already installed on your system as it comes with different flavors of Visual Studio. I created a copy of the default MenuItemStyle template and started surgery on the hideous icon and separator that normally gets packaged with the simple MenuItem control.

I had to set the following line (found in two separate places):

<ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>

To a column with zero width:

<ColumnDefinition SharedSizeGroup="MenuItemIconColumnGroup" Width="0"/>

I also had to remove rectangles which normally fill with the separator. So for example, this line:

<Rectangle Fill="{StaticResource Menu.Static.Separator}" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>

Had to be collapsed as follows:

<Rectangle Visibility="Collapsed" Fill="{StaticResource Menu.Static.Separator}" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>

This line:

<Rectangle Fill="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>

It also had to be collapsed:

<Rectangle Visibility="Collapsed" Fill="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>

In the end, you get a set of resources as follows (its a heavy control, so it has a lot of markup):

<SolidColorBrush x:Key="MenuItem.Highlight.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="MenuItem.Highlight.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/>
<SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Background" Color="#0A000000"/>
<SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Border" Color="#21000000"/>
<SolidColorBrush x:Key="MenuItem.Selected.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="MenuItem.Selected.Background" Color="#3D26A0DA"/>
<Geometry x:Key="Checkmark">F1 M 10.0,1.2 L 4.7,9.1 L 4.5,9.1 L 0,5.2 L 1.3,3.5 L 4.3,6.1L 8.3,0 L 10.0,1.2 Z</Geometry>
<SolidColorBrush x:Key="Menu.Static.Foreground" Color="#FF212121"/>
<ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
	<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Height="22" SnapsToDevicePixels="true">
		<Grid Margin="-1">
			<Grid.ColumnDefinitions>
				<ColumnDefinition SharedSizeGroup="MenuItemIconColumnGroup" Width="0"/>
				<ColumnDefinition Width="13"/>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="30"/>
				<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
				<ColumnDefinition Width="20"/>
			</Grid.ColumnDefinitions>
			<ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
			<Border x:Name="GlyphPanel" BorderBrush="{StaticResource MenuItem.Selected.Border}" BorderThickness="1" Background="{StaticResource MenuItem.Selected.Background}" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
				<Path x:Name="Glyph" Data="{StaticResource Checkmark}" Fill="{StaticResource Menu.Static.Foreground}" FlowDirection="LeftToRight" Height="11" Width="10"/>
			</Border>
			<ContentPresenter x:Name="menuHeaderContainer" Grid.Column="2" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
			<TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>
		</Grid>
	</Border>
	<ControlTemplate.Triggers>
		<Trigger Property="Icon" Value="{x:Null}">
			<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
		</Trigger>
		<Trigger Property="IsChecked" Value="True">
			<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
			<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
		</Trigger>
		<Trigger Property="IsHighlighted" Value="True">
			<Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/>
			<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
		</Trigger>
		<Trigger Property="IsEnabled" Value="False">
			<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>
			<Setter Property="Fill" TargetName="Glyph" Value="{StaticResource Menu.Disabled.Foreground}"/>
		</Trigger>
		<MultiTrigger>
			<MultiTrigger.Conditions>
				<Condition Property="IsHighlighted" Value="True"/>
				<Condition Property="IsEnabled" Value="False"/>
			</MultiTrigger.Conditions>
			<Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Background}"/>
			<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Border}"/>
		</MultiTrigger>
	</ControlTemplate.Triggers>
</ControlTemplate>
<SolidColorBrush x:Key="Menu.Static.Border" Color="#FF999999"/>
<SolidColorBrush x:Key="Menu.Static.Background" Color="#FFF0F0F0"/>
<SolidColorBrush x:Key="Menu.Static.Separator" Color="#FFD7D7D7"/>
<Geometry x:Key="UpArrow">M 0,4 L 3.5,0 L 7,4 Z</Geometry>
<Style x:Key="MenuScrollButton" BasedOn="{x:Null}" TargetType="{x:Type RepeatButton}">
	<Setter Property="ClickMode" Value="Hover"/>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type RepeatButton}">
				<Border x:Name="templateRoot" BorderBrush="Transparent" BorderThickness="1" Background="Transparent" SnapsToDevicePixels="true">
					<ContentPresenter HorizontalAlignment="Center" Margin="6" VerticalAlignment="Center"/>
				</Border>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>
<MenuScrollingVisibilityConverter x:Key="MenuScrollingVisibilityConverter"/>
<Geometry x:Key="DownArrow">M 0,0 L 3.5,4 L 7,0 Z</Geometry>
<Style x:Key="{ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}" BasedOn="{x:Null}" TargetType="{x:Type ScrollViewer}">
	<Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
	<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type ScrollViewer}">
				<Grid SnapsToDevicePixels="true">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="*"/>
					</Grid.ColumnDefinitions>
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto"/>
						<RowDefinition Height="*"/>
						<RowDefinition Height="Auto"/>
					</Grid.RowDefinitions>
					<Border Grid.Column="0" Grid.Row="1">
						<ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" Margin="{TemplateBinding Padding}"/>
					</Border>
					<RepeatButton Grid.Column="0" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="{x:Static ScrollBar.LineUpCommand}" Focusable="false" Grid.Row="0" Style="{StaticResource MenuScrollButton}">
						<RepeatButton.Visibility>
							<MultiBinding ConverterParameter="0" Converter="{StaticResource MenuScrollingVisibilityConverter}" FallbackValue="Visibility.Collapsed">
								<Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/>
								<Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/>
								<Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
								<Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
							</MultiBinding>
						</RepeatButton.Visibility>
						<Path Data="{StaticResource UpArrow}" Fill="{StaticResource Menu.Static.Foreground}"/>
					</RepeatButton>
					<RepeatButton Grid.Column="0" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="{x:Static ScrollBar.LineDownCommand}" Focusable="false" Grid.Row="2" Style="{StaticResource MenuScrollButton}">
						<RepeatButton.Visibility>
							<MultiBinding ConverterParameter="100" Converter="{StaticResource MenuScrollingVisibilityConverter}" FallbackValue="Visibility.Collapsed">
								<Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/>
								<Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/>
								<Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
								<Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
							</MultiBinding>
						</RepeatButton.Visibility>
						<Path Data="{StaticResource DownArrow}" Fill="{StaticResource Menu.Static.Foreground}"/>
					</RepeatButton>
				</Grid>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>
<ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
	<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
		<Grid VerticalAlignment="Center">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto"/>
				<ColumnDefinition Width="Auto"/>
			</Grid.ColumnDefinitions>
			<ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
			<Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
			<ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
			<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" PlacementTarget="{Binding ElementName=templateRoot}">
				<Border x:Name="SubMenuBorder" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" Background="{StaticResource Menu.Static.Background}" Padding="2">
					<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
						<Grid RenderOptions.ClearTypeHint="Enabled">
							<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
								<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
							</Canvas>
							<Rectangle Visibility="Collapsed" Fill="{StaticResource Menu.Static.Separator}" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
							<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
						</Grid>
					</ScrollViewer>
				</Border>
			</Popup>
		</Grid>
	</Border>
	<ControlTemplate.Triggers>
		<Trigger Property="IsSuspendingPopupAnimation" Value="true">
			<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
		</Trigger>
		<Trigger Property="Icon" Value="{x:Null}">
			<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
		</Trigger>
		<Trigger Property="IsChecked" Value="true">
			<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
			<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
		</Trigger>
		<Trigger Property="IsHighlighted" Value="True">
			<Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/>
			<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
		</Trigger>
		<Trigger Property="IsEnabled" Value="False">
			<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>
			<Setter Property="Fill" TargetName="GlyphPanel" Value="{StaticResource Menu.Disabled.Foreground}"/>
		</Trigger>
		<Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false">
			<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
			<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
		</Trigger>
	</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
	<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
		<Grid VerticalAlignment="Center">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto"/>
				<ColumnDefinition Width="Auto"/>
			</Grid.ColumnDefinitions>
			<ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
			<Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{StaticResource Menu.Static.Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
			<ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
		</Grid>
	</Border>
	<ControlTemplate.Triggers>
		<Trigger Property="Icon" Value="{x:Null}">
			<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
		</Trigger>
		<Trigger Property="IsChecked" Value="true">
			<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
			<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
		</Trigger>
		<Trigger Property="IsHighlighted" Value="True">
			<Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/>
			<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
		</Trigger>
		<Trigger Property="IsEnabled" Value="False">
			<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>
			<Setter Property="Fill" TargetName="GlyphPanel" Value="{StaticResource Menu.Disabled.Foreground}"/>
		</Trigger>
		<MultiTrigger>
			<MultiTrigger.Conditions>
				<Condition Property="IsHighlighted" Value="True"/>
				<Condition Property="IsEnabled" Value="False"/>
			</MultiTrigger.Conditions>
			<Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Background}"/>
			<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Border}"/>
		</MultiTrigger>
	</ControlTemplate.Triggers>
</ControlTemplate>
<Geometry x:Key="RightArrow">M 0,0 L 4,3.5 L 0,7 Z</Geometry>
<ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
	<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Height="22" SnapsToDevicePixels="true">
		<Grid Margin="-1">
			<Grid.ColumnDefinitions>
				<ColumnDefinition SharedSizeGroup="MenuItemIconColumnGroup" Width="0"/>
				<ColumnDefinition Width="13"/>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="30"/>
				<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
				<ColumnDefinition Width="20"/>
			</Grid.ColumnDefinitions>
			<ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
			<Border x:Name="GlyphPanel" BorderBrush="{StaticResource MenuItem.Highlight.Border}" BorderThickness="1" Background="{StaticResource MenuItem.Highlight.Background}" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
				<Path x:Name="Glyph" Data="{DynamicResource Checkmark}" Fill="{StaticResource Menu.Static.Foreground}" FlowDirection="LeftToRight" Height="11" Width="9"/>
			</Border>
			<ContentPresenter Grid.Column="2" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
			<TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>
			<Path x:Name="RightArrow" Grid.Column="5" Data="{StaticResource RightArrow}" Fill="{StaticResource Menu.Static.Foreground}" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Center"/>
			<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="-2" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right" VerticalOffset="-3">
				<Border x:Name="SubMenuBorder" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" Background="{StaticResource Menu.Static.Background}" Padding="2">
					<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
						<Grid RenderOptions.ClearTypeHint="Enabled">
							<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
								<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
							</Canvas>
							<Rectangle Visibility="Collapsed" Fill="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
							<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
						</Grid>
					</ScrollViewer>
				</Border>
			</Popup>
		</Grid>
	</Border>
	<ControlTemplate.Triggers>
		<Trigger Property="IsSuspendingPopupAnimation" Value="true">
			<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
		</Trigger>
		<Trigger Property="Icon" Value="{x:Null}">
			<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
		</Trigger>
		<Trigger Property="IsChecked" Value="True">
			<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
			<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
		</Trigger>
		<Trigger Property="IsHighlighted" Value="True">
			<Setter Property="Background" TargetName="templateRoot" Value="Transparent"/>
			<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
		</Trigger>
		<Trigger Property="IsEnabled" Value="False">
			<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>
			<Setter Property="Fill" TargetName="Glyph" Value="{StaticResource Menu.Disabled.Foreground}"/>
			<Setter Property="Fill" TargetName="RightArrow" Value="{StaticResource Menu.Disabled.Foreground}"/>
		</Trigger>
		<Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false">
			<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
			<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
		</Trigger>
	</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="MenuItemStyle1" TargetType="{x:Type MenuItem}">
	<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
	<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
	<Setter Property="Background" Value="Transparent"/>
	<Setter Property="BorderBrush" Value="Transparent"/>
	<Setter Property="BorderThickness" Value="1"/>
	<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
	<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
	<Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>
	<Style.Triggers>
		<Trigger Property="Role" Value="TopLevelHeader">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderBrush" Value="Transparent"/>
			<Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/>
			<Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>
			<Setter Property="Padding" Value="6,0"/>
		</Trigger>
		<Trigger Property="Role" Value="TopLevelItem">
			<Setter Property="Background" Value="{StaticResource Menu.Static.Background}"/>
			<Setter Property="BorderBrush" Value="{StaticResource Menu.Static.Border}"/>
			<Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/>
			<Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>
			<Setter Property="Padding" Value="6,0"/>
		</Trigger>
		<Trigger Property="Role" Value="SubmenuHeader">
			<Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>
		</Trigger>
	</Style.Triggers>
</Style>

You can add the above into your window’s resources and set the style on each menu item:

<Menu>
	<MenuItem Header="File" Style="{DynamicResource MenuItemStyle1}">
		<MenuItem Header="Open" Style="{DynamicResource MenuItemStyle1}"/>
		<MenuItem Header="Save" Style="{DynamicResource MenuItemStyle1}"/>
		<MenuItem Header="Close" Style="{DynamicResource MenuItemStyle1}"/>
	</MenuItem>
	<MenuItem Header="Tools" Style="{DynamicResource MenuItemStyle1}">
		<MenuItem Header="Settings" Style="{DynamicResource MenuItemStyle1}">
			<MenuItem Header="Local" Style="{DynamicResource MenuItemStyle1}"/>
			<MenuItem Header="Remote" Style="{DynamicResource MenuItemStyle1}"/>
		</MenuItem>
	</MenuItem>
</Menu>