WPF Menu Customization

Thursday, August 02, 2012 3:58 PM

Moderator

You need to restyle the control. I have extracted the default styles/templates for you using blend for you to cut, paste and tweak...

Using Expression Blend

Added a Menu and MenuItem to the page

Right clicked Menu and select "Edit Template" & "Edit a Copy..." - Makes a copy of all styles and templates relating to the Menu bar itself:

Right clicked sub-menu and select "Edit Template" & "Edit a Copy..." - Makes a copy of all the stuff used for the MenuItem

Below is both Menu & MenuItem styles:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="WtfApplication18.MainWindow"
        Title="MainWindow" Height="350" Width="525">
	<Window.Resources>
		<LinearGradientBrush x:Key="MenuBackground" EndPoint="0,1" StartPoint="0,0">
			<GradientStop Color="#F6F6F6" Offset="0.25"/>
			<GradientStop Color="#EAE8E8" Offset="0.25"/>
			<GradientStop Color="#DCD9D9" Offset="0.8"/>
			<GradientStop Color="White" Offset="1"/>
		</LinearGradientBrush>
		<Style x:Key="MenuStyle1" TargetType="{x:Type Menu}">
			<Setter Property="Background" Value="{StaticResource MenuBackground}"/>
			<Setter Property="FontFamily" Value="{DynamicResource {x:Static SystemFonts.MenuFontFamilyKey}}"/>
			<Setter Property="FontSize" Value="{DynamicResource {x:Static SystemFonts.MenuFontSizeKey}}"/>
			<Setter Property="FontStyle" Value="{DynamicResource {x:Static SystemFonts.MenuFontStyleKey}}"/>
			<Setter Property="FontWeight" Value="{DynamicResource {x:Static SystemFonts.MenuFontWeightKey}}"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Menu}">
						<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
							<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<LinearGradientBrush x:Key="MenuItemSelectionFill" EndPoint="0,1" StartPoint="0,0">
			<GradientStop Color="#34C5EBFF" Offset="0"/>
			<GradientStop Color="#3481D8FF" Offset="1"/>
		</LinearGradientBrush>
		<Geometry x:Key="Checkmark">M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z</Geometry>
		<ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
			<Grid SnapsToDevicePixels="true">
				<Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
				<Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2"/>
				<Grid>
					<Grid.ColumnDefinitions>
						<ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
						<ColumnDefinition Width="4"/>
						<ColumnDefinition Width="*"/>
						<ColumnDefinition Width="37"/>
						<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
						<ColumnDefinition Width="17"/>
					</Grid.ColumnDefinitions>
					<ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
					<Border x:Name="GlyphPanel" BorderBrush="#CDD3E6" BorderThickness="1" Background="#E6EFF4" CornerRadius="3" Height="22" Margin="1" Visibility="Hidden" Width="22">
						<Path x:Name="Glyph" Data="{StaticResource Checkmark}" Fill="#0C12A1" FlowDirection="LeftToRight" Height="11" Width="9"/>
					</Border>
					<ContentPresenter Grid.Column="2" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
					<TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Text="{TemplateBinding InputGestureText}"/>
				</Grid>
			</Grid>
			<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="Fill" TargetName="Bg" Value="{StaticResource MenuItemSelectionFill}"/>
					<Setter Property="Stroke" TargetName="Bg" Value="#8071CBF1"/>
					<Setter Property="Stroke" TargetName="InnerBorder" Value="#40FFFFFF"/>
				</Trigger>
				<Trigger Property="IsEnabled" Value="false">
					<Setter Property="Foreground" Value="#FF9A9A9A"/>
					<Setter Property="Background" TargetName="GlyphPanel" Value="#EEE9E9"/>
					<Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#DBD6D6"/>
					<Setter Property="Fill" TargetName="Glyph" Value="#848589"/>
				</Trigger>
			</ControlTemplate.Triggers>
		</ControlTemplate>
		<LinearGradientBrush x:Key="MenuItemPressedFill" EndPoint="0,1" StartPoint="0,0">
			<GradientStop Color="#28717070" Offset="0"/>
			<GradientStop Color="#50717070" Offset="0.75"/>
			<GradientStop Color="#90717070" Offset="1"/>
		</LinearGradientBrush>
		<SolidColorBrush x:Key="SubMenuBackgroundBrush" Color="#FFF5F5F5"/>
		<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="MinWidth" Value="0"/>
			<Setter Property="MinHeight" Value="0"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type RepeatButton}">
						<DockPanel Background="Transparent" SnapsToDevicePixels="true">
							<Rectangle x:Name="R1" DockPanel.Dock="Right" Fill="Transparent" Width="1"/>
							<Rectangle x:Name="B1" DockPanel.Dock="Bottom" Fill="Transparent" Height="1"/>
							<Rectangle x:Name="L1" DockPanel.Dock="Left" Fill="Transparent" Width="1"/>
							<Rectangle x:Name="T1" DockPanel.Dock="Top" Fill="Transparent" Height="1"/>
							<ContentPresenter x:Name="ContentContainer" HorizontalAlignment="Center" Margin="2,2,2,2" VerticalAlignment="Center"/>
						</DockPanel>
						<ControlTemplate.Triggers>
							<Trigger Property="IsPressed" Value="true">
								<Setter Property="Fill" TargetName="R1" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
								<Setter Property="Fill" TargetName="B1" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
								<Setter Property="Fill" TargetName="L1" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"/>
								<Setter Property="Fill" TargetName="T1" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"/>
								<Setter Property="Margin" TargetName="ContentContainer" Value="3,3,1,1"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</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 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="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
							</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="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
							</RepeatButton>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuContent, TypeInTargetAssembly={x:Type FrameworkElement}}" TargetType="{x:Type ContentControl}">
			<Border BorderBrush="#FF959595" BorderThickness="1" Background="{StaticResource SubMenuBackgroundBrush}">
				<Grid>
					<Rectangle Fill="#F1F1F1" HorizontalAlignment="Left" Margin="2" RadiusY="2" RadiusX="2" Width="28"/>
					<Rectangle Fill="#E2E3E3" HorizontalAlignment="Left" Margin="30,2,0,2" Width="1"/>
					<Rectangle Fill="White" HorizontalAlignment="Left" Margin="31,2,0,2" Width="1"/>
					<ContentPresenter Grid.ColumnSpan="2" Margin="1,0"/>
				</Grid>
			</Border>
		</ControlTemplate>
		<ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
			<Grid SnapsToDevicePixels="true">
				<Rectangle x:Name="OuterBorder" RadiusY="2" RadiusX="2"/>
				<Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" Margin="1" RadiusY="1" RadiusX="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
				<Rectangle x:Name="InnerBorder" Margin="2"/>
				<DockPanel>
					<ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
					<Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center"/>
					<ContentPresenter ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
				</DockPanel>
				<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="1" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1">
					<Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
						<ContentControl x:Name="SubMenuBorder" IsTabStop="false" Template="{DynamicResource {ComponentResourceKey ResourceId=SubmenuContent, TypeInTargetAssembly={x:Type FrameworkElement}}}">
							<ScrollViewer x:Name="SubMenuScrollViewer" CanContentScroll="true" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
								<Grid RenderOptions.ClearTypeHint="Enabled">
									<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
										<Rectangle Fill="{StaticResource SubMenuBackgroundBrush}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
									</Canvas>
									<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
								</Grid>
							</ScrollViewer>
						</ContentControl>
					</Microsoft_Windows_Themes:SystemDropShadowChrome>
				</Popup>
			</Grid>
			<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="HasDropShadow" SourceName="PART_Popup" Value="true">
					<Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
					<Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
				</Trigger>
				<Trigger Property="IsHighlighted" Value="true">
					<Setter Property="Stroke" TargetName="Bg" Value="#90717070"/>
					<Setter Property="Stroke" TargetName="OuterBorder" Value="#50FFFFFF"/>
					<Setter Property="Stroke" TargetName="InnerBorder" Value="#50FFFFFF"/>
				</Trigger>
				<Trigger Property="IsKeyboardFocused" Value="true">
					<Setter Property="Stroke" TargetName="Bg" Value="#E0717070"/>
					<Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuItemPressedFill}"/>
					<Setter Property="Stroke" TargetName="InnerBorder" Value="#50747272"/>
				</Trigger>
				<Trigger Property="IsSubmenuOpen" Value="true">
					<Setter Property="Stroke" TargetName="Bg" Value="#E0717070"/>
					<Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuItemPressedFill}"/>
					<Setter Property="Stroke" TargetName="InnerBorder" Value="#50747272"/>
				</Trigger>
				<Trigger Property="IsEnabled" Value="false">
					<Setter Property="Foreground" Value="#FF9A9A9A"/>
					<Setter Property="Fill" TargetName="GlyphPanel" Value="#848589"/>
				</Trigger>
			</ControlTemplate.Triggers>
		</ControlTemplate>
		<ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
			<Grid SnapsToDevicePixels="true">
				<Rectangle x:Name="OuterBorder" RadiusY="2" RadiusX="2"/>
				<Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" Margin="1" RadiusY="1" RadiusX="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
				<Rectangle x:Name="InnerBorder" Margin="2"/>
				<DockPanel>
					<ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
					<Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center"/>
					<ContentPresenter ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
				</DockPanel>
			</Grid>
			<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="Stroke" TargetName="Bg" Value="#90717070"/>
					<Setter Property="Stroke" TargetName="OuterBorder" Value="#50FFFFFF"/>
					<Setter Property="Stroke" TargetName="InnerBorder" Value="#50FFFFFF"/>
				</Trigger>
				<Trigger Property="IsKeyboardFocused" Value="true">
					<Setter Property="Stroke" TargetName="Bg" Value="#E0717070"/>
					<Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuItemPressedFill}"/>
					<Setter Property="Stroke" TargetName="InnerBorder" Value="#50747272"/>
				</Trigger>
				<Trigger Property="IsEnabled" Value="false">
					<Setter Property="Foreground" Value="#FF9A9A9A"/>
					<Setter Property="Fill" TargetName="GlyphPanel" Value="#848589"/>
				</Trigger>
			</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}">
			<Grid SnapsToDevicePixels="true">
				<Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
				<Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2" Stroke="Transparent" StrokeThickness="1"/>
				<Grid>
					<Grid.ColumnDefinitions>
						<ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
						<ColumnDefinition Width="4"/>
						<ColumnDefinition Width="*"/>
						<ColumnDefinition Width="37"/>
						<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
						<ColumnDefinition Width="17"/>
					</Grid.ColumnDefinitions>
					<ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
					<Border x:Name="GlyphPanel" BorderBrush="#CDD3E6" BorderThickness="1" Background="#E6EFF4" CornerRadius="3" Height="22" Margin="1" Visibility="Hidden" Width="22">
						<Path x:Name="Glyph" Data="{StaticResource Checkmark}" Fill="#0C12A1" FlowDirection="LeftToRight" Height="11" Width="9"/>
					</Border>
					<ContentPresenter Grid.Column="2" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
					<TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Text="{TemplateBinding InputGestureText}" Visibility="Collapsed"/>
					<Path Grid.Column="5" Data="{StaticResource RightArrow}" Fill="{TemplateBinding Foreground}" Margin="4,0,0,0" VerticalAlignment="Center"/>
				</Grid>
				<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">
					<Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
						<ContentControl x:Name="SubMenuBorder" IsTabStop="false" Template="{DynamicResource {ComponentResourceKey ResourceId=SubmenuContent, TypeInTargetAssembly={x:Type FrameworkElement}}}">
							<ScrollViewer x:Name="SubMenuScrollViewer" CanContentScroll="true" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
								<Grid RenderOptions.ClearTypeHint="Enabled">
									<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
										<Rectangle Fill="{StaticResource SubMenuBackgroundBrush}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
									</Canvas>
									<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
								</Grid>
							</ScrollViewer>
						</ContentControl>
					</Microsoft_Windows_Themes:SystemDropShadowChrome>
				</Popup>
			</Grid>
			<ControlTemplate.Triggers>
				<Trigger Property="IsSuspendingPopupAnimation" Value="true">
					<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
				</Trigger>
				<Trigger Property="IsHighlighted" Value="true">
					<Setter Property="Stroke" TargetName="InnerBorder" Value="#D1DBF4FF"/>
				</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="HasDropShadow" SourceName="PART_Popup" Value="true">
					<Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
					<Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
				</Trigger>
				<Trigger Property="IsHighlighted" Value="true">
					<Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuItemSelectionFill}"/>
					<Setter Property="Stroke" TargetName="Bg" Value="#8571CBF1"/>
				</Trigger>
				<Trigger Property="IsEnabled" Value="false">
					<Setter Property="Foreground" Value="#FF9A9A9A"/>
					<Setter Property="Background" TargetName="GlyphPanel" Value="#EEE9E9"/>
					<Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#DBD6D6"/>
					<Setter Property="Fill" TargetName="Glyph" Value="#848589"/>
				</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="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="Padding" Value="7,2,8,3"/>
					<Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>
				</Trigger>
				<Trigger Property="Role" Value="TopLevelItem">
					<Setter Property="Padding" Value="7,2,8,3"/>
					<Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>
				</Trigger>
				<Trigger Property="Role" Value="SubmenuHeader">
					<Setter Property="Padding" Value="2,3,2,3"/>
					<Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>
				</Trigger>
				<Trigger Property="Role" Value="SubmenuItem">
					<Setter Property="Padding" Value="2,3,2,3"/>
				</Trigger>
			</Style.Triggers>
		</Style>
	</Window.Resources>
    <StackPanel>
        <Menu Style="{DynamicResource MenuStyle1}" >
            <MenuItem Header="Test 1" Style="{DynamicResource MenuItemStyle1}">
                <MenuItem Header="Test 1a"/>
            </MenuItem>
        </Menu>
    </StackPanel>
</Window>

Quite a lot, I know, but that's the default xaml that makes the Menu/menuItem.
From this you will be able to restyle your menu completely, that's what it's made of.
Or you can just take a part and override one or two styles/brushes.

For more info, read about styling & templating : http://msdn.microsoft.com/en-us/library/ms745683.aspx

Regards,
Pete

#PEJL

Marked As Answer by Kee PoppyModerator Wednesday, August 15, 2012 11:21 AM

Thursday, August 02, 2012 6:50 PM

0

Thank you very much.

I found

        <Style TargetType="Menu">
            <Setter Property="Background" Value="#FFF0F0F0" />
        </Style>

        <Style TargetType="MenuItem">
            <Style.Triggers>
                <Trigger Property="IsHighlighted" Value="True">
                    <Setter Property="Background" Value="#FFC4E1FF" />
                </Trigger>
            </Style.Triggers>
        </Style>

but I can't seem find the

Thursday, August 02, 2012 9:22 PM

Moderator

0

Header :)

Here is a Menu

<Menu>
    <MenuItem Header="File">
        <MenuItem Header="Open..." Click="MenuItem_Click"/>
    </MenuItem>
    <MenuItem Header="Navigate">
        <MenuItem Header="Find Usages Advanced..." Command="{Binding MyCommand}"/>
    </MenuItem>
</Menu>

One Menu Item has an event, the other uses a command.

Regards,
Pete

#PEJL

Edited by XAML guyMicrosoft Community Contributor, Moderator Thursday, August 02, 2012 9:25 PM

Friday, August 03, 2012 5:59 AM

0

I had in mind. Which properties of style are responsible for it?

Friday, August 03, 2012 9:57 AM

Moderator

1

I am not clear what you are asking.

If you mean what properties are responsible for the font...

<Style x:Key="MenuStyle1" TargetType="{x:Type Menu}">
	<Setter Property="Background" Value="{StaticResource MenuBackground}"/>
	<Setter Property="FontFamily" Value="{DynamicResource {x:Static SystemFonts.MenuFontFamilyKey}}"/>
	<Setter Property="FontSize" Value="{DynamicResource {x:Static SystemFonts.MenuFontSizeKey}}"/>
	<Setter Property="FontStyle" Value="{DynamicResource {x:Static SystemFonts.MenuFontStyleKey}}"/>
	<Setter Property="FontWeight" Value="{DynamicResource {x:Static SystemFonts.MenuFontWeightKey}}"/>
	<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>

If you mean what properties are responsible for the disabled grey state, that is a trigger within the style:

<Trigger Property="IsEnabled" Value="false">
	<Setter Property="Foreground" Value="#FF9A9A9A"/>
	<Setter Property="Background" TargetName="GlyphPanel" Value="#EEE9E9"/>
	<Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#DBD6D6"/>
	<Setter Property="Fill" TargetName="Glyph" Value="#848589"/>
</Trigger>

If you mean what MAKES it disabled, that is usually based on the CanExecute for the Command on that MenuItem.

There have been several issues here, and if you appreciate peoples help, and want to say thanks, or encourage further help, please mark our replies as answers, or at least helpful. You can mark multiple replies as answer/helpful.

Regards,
Pete

#PEJL

Monday, August 06, 2012 9:32 AM

Moderator

0

Hi compaqster,

Do you want to change the MenuItem highlighted color?

Check from its default controltemplate,

  <Trigger Property="IsHighlighted" Value="true">
     <Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuItemSelectionFill}"/>
     <Setter Property="Stroke" TargetName="Bg" Value="#8071CBF1"/>
     <Setter Property="Stroke" TargetName="InnerBorder" Value="#40FFFFFF"/>
   </Trigger>

This color is decided by a StaticResource with key name MenuItemSelectionFill. Go further into this, you will find this is how it get defined.

 <LinearGradientBrush x:Key="MenuItemSelectionFill" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#34C5EBFF" Offset="0"/>
            <GradientStop Color="#3481D8FF" Offset="1"/>
        </LinearGradientBrush>

So, to have a different color, you need to use one new brush with the same key name "MenuItemSelectionFill". Just replace above code with:

I am not sure if the other requirement is to give a border to a disabled MenuItem, if yes, please check below code which is in the ControlTemplate of SubmenuItemTemplateKey.

   <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground" Value="#FF9A9A9A"/>
                    <Setter Property="Background" TargetName="GlyphPanel" Value="#EEE9E9"/>
                    <Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#DBD6D6"/>
                    <Setter Property="Fill" TargetName="Glyph" Value="#848589"/>
                    <Setter Property="Stroke" TargetName="InnerBorder" Value="Blue"/>
                    <Setter Property="StrokeThickness" TargetName="InnerBorder" Value="1"/>
                </Trigger>

And thanks XAML guy for sharing the Menu/MenuItem ControlTemplate.

Have a nice day,

Kee Poppy [MSFT]
MSDN Community Support | Feedback to us

Marked As Answer by Kee PoppyModerator Wednesday, August 15, 2012 11:21 AM

WPF Menu Customization

All Replies