We Keep Coding

Setting the spacing between ToolBars within a ToolBarTray

I have a ToolBarTray with multiple ToolBar inside. My objective is to have all these toolbars separated with a vertical line.
Currently, I have sub-classed ToolBar class and programmatically made the toolbar's border non-rounded (default borders have rounded corners). However, there is this spacing between the toolbars that I am unable to get rid of.
I can probably remove ToolBarTray totally, and instead use Grid or StackPanel to achieve this. However, I need to retain the ability for the toolbars to be draggable/re-arrangeable.
Is there any simple solution for this?

Use this toolbar style
<Window.Resources>
<SolidColorBrush x:Key="ToolBarHorizontalBackground" Color="#FFEEF5FD"/>
<SolidColorBrush x:Key="ToolBarToggleButtonVerticalBackground" Color="#FFEEF5FD"/>
<SolidColorBrush x:Key="ToolBarButtonHover" Color="#210080FF"/>
<SolidColorBrush x:Key="ToolBarGripper" Color="#FF6D6D6D"/>
<Style x:Key="ToolBarVerticalOverflowButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="{StaticResource ToolBarToggleButtonVerticalBackground}"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" CornerRadius="0,0,3,3" SnapsToDevicePixels="true">
<Canvas HorizontalAlignment="Right" Height="6" Margin="2,7,2,2" SnapsToDevicePixels="true" VerticalAlignment="Bottom" Width="7">
<Path Data="M 1.5 1 L 1.5 6" Stroke="White"/>
<Path Data="M 0.5 0 L 0.5 5" Stroke="{TemplateBinding Foreground}"/>
<Path Data="M 3.5 0.5 L 7 3.5 L 4 6.5 Z" Fill="White"/>
<Path Data="M 3 -0.5 L 6 2.5 L 3 5.5 Z" Fill="{TemplateBinding Foreground}"/>
</Canvas>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource ToolBarGripper}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<SolidColorBrush x:Key="ToolBarVerticalBackground" Color="#FFEEF5FD"/>
<SolidColorBrush x:Key="ToolBarToggleButtonHorizontalBackground" Color="#FFEEF5FD"/>
<Style x:Key="ToolBarHorizontalOverflowButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="{StaticResource ToolBarToggleButtonHorizontalBackground}"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" CornerRadius="0,3,3,0" SnapsToDevicePixels="true">
<Canvas HorizontalAlignment="Right" Height="7" Margin="7,2,2,2" SnapsToDevicePixels="true" VerticalAlignment="Bottom" Width="6">
<Path Data="M 1 1.5 L 6 1.5" Stroke="White"/>
<Path Data="M 0 0.5 L 5 0.5" Stroke="{TemplateBinding Foreground}"/>
<Path Data="M 0.5 4 L 6.5 4 L 3.5 7 Z" Fill="White"/>
<Path Data="M -0.5 3 L 5.5 3 L 2.5 6 Z" Fill="{TemplateBinding Foreground}"/>
</Canvas>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource ToolBarGripper}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<SolidColorBrush x:Key="ToolBarMenuBorder" Color="#FFB6BDC5"/>
<SolidColorBrush x:Key="ToolBarSubMenuBackground" Color="#FFEEF5FD"/>
<Style x:Key="ToolBarThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<Rectangle>
<Rectangle.Fill>
<DrawingBrush TileMode="Tile" Viewbox="0,0,4,4" Viewport="0,0,4,4" ViewportUnits="Absolute" ViewboxUnits="Absolute">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="White" Geometry="M 1 1 L 1 3 L 3 3 L 3 1 z"/>
<GeometryDrawing Brush="{StaticResource ToolBarGripper}" Geometry="M 0 0 L 0 2 L 2 2 L 2 0 z"/>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Cursor" Value="SizeAll"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToolBarMainPanelBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Margin" Value="0,0,11,0"/>
<Setter Property="CornerRadius" Value="3,3,3,3"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
<Setter Property="CornerRadius" Value="0,0,0,0"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="ToolBarStyle1" TargetType="{x:Type ToolBar}">
<Setter Property="Background" Value="{StaticResource ToolBarHorizontalBackground}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolBar}">
<Grid x:Name="Grid" Margin="3,1,-3,1" SnapsToDevicePixels="true">
<!--<Grid x:Name="OverflowGrid" HorizontalAlignment="Right">
<ToggleButton x:Name="OverflowButton" ClickMode="Press" FocusVisualStyle="{x:Null}" IsChecked="{Binding IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" IsEnabled="{TemplateBinding HasOverflowItems}" Style="{StaticResource ToolBarHorizontalOverflowButtonStyle}"/>
<Popup x:Name="OverflowPopup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsOverflowOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom" StaysOpen="false">
<Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
<Border x:Name="ToolBarSubMenuBorder" BorderBrush="{StaticResource ToolBarMenuBorder}" BorderThickness="1" Background="{StaticResource ToolBarSubMenuBackground}" RenderOptions.ClearTypeHint="Enabled">
<ToolBarOverflowPanel x:Name="PART_ToolBarOverflowPanel" KeyboardNavigation.DirectionalNavigation="Cycle" FocusVisualStyle="{x:Null}" Focusable="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle" WrapWidth="200"/>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
</Grid>-->
<Border x:Name="MainPanelBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" >
<DockPanel KeyboardNavigation.TabIndex="1" KeyboardNavigation.TabNavigation="Local">
<Thumb x:Name="ToolBarThumb" Margin="-3,-1,0,0" Padding="6,5,1,6" Style="{StaticResource ToolBarThumbStyle}" Width="10"/>
<ContentPresenter x:Name="ToolBarHeader" ContentSource="Header" HorizontalAlignment="Center" Margin="4,0,4,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<ToolBarPanel x:Name="PART_ToolBarPanel" IsItemsHost="true" Margin="0,1,2,2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</DockPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsOverflowOpen" Value="true">
<Setter Property="IsEnabled" TargetName="ToolBarThumb" Value="false"/>
</Trigger>
<Trigger Property="Header" Value="{x:Null}">
<Setter Property="Visibility" TargetName="ToolBarHeader" Value="Collapsed"/>
</Trigger>
<Trigger Property="ToolBarTray.IsLocked" Value="true">
<Setter Property="Visibility" TargetName="ToolBarThumb" Value="Collapsed"/>
</Trigger>
<!--<Trigger Property="HasDropShadow" SourceName="OverflowPopup" Value="true">
<Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
<Setter Property="SnapsToDevicePixels" TargetName="Shdw" Value="true"/>
<Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
</Trigger>-->
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Margin" TargetName="Grid" Value="1,3,1,1"/>
<!--<Setter Property="Style" TargetName="OverflowButton" Value="{StaticResource ToolBarVerticalOverflowButtonStyle}"/>-->
<Setter Property="Height" TargetName="ToolBarThumb" Value="10"/>
<Setter Property="Width" TargetName="ToolBarThumb" Value="Auto"/>
<Setter Property="Margin" TargetName="ToolBarThumb" Value="-1,-3,0,0"/>
<Setter Property="Padding" TargetName="ToolBarThumb" Value="5,6,6,1"/>
<Setter Property="Margin" TargetName="ToolBarHeader" Value="0,0,0,4"/>
<Setter Property="Margin" TargetName="PART_ToolBarPanel" Value="1,0,2,2"/>
<Setter Property="DockPanel.Dock" TargetName="ToolBarThumb" Value="Top"/>
<Setter Property="DockPanel.Dock" TargetName="ToolBarHeader" Value="Top"/>
<Setter Property="Margin" TargetName="MainPanelBorder" Value="0,0,0,11"/>
<Setter Property="Background" Value="{StaticResource ToolBarVerticalBackground}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
then try toolbar style
<Grid>
<ToolBarTray x:Name="ToolTray" Grid.Row="0" Grid.RowSpan="2" Background="SkyBlue">
<ToolBar Band="0" BandIndex="0" Style="{DynamicResource ToolBarStyle1}">
<Button Background="Aqua" Height="25" Width="25" Content="0" />
<Button Background="BlueViolet" Height="25" Width="25" Content="0" />
<Button Background="CornflowerBlue" Height="25" Width="25" Content="0"/>
</ToolBar>
<ToolBar Band="0" BandIndex="1" Style="{DynamicResource ToolBarStyle1}">
<Button Background="Aqua" Height="25" Width="25" Content="1"/>
<Button Background="BlueViolet" Height="25" Width="25" Content="1"/>
<Button Background="CornflowerBlue" Height="25" Width="25" Content="1"/>
</ToolBar>
</ToolBarTray>
</Grid>

Based on Joby's answer, I have came up with an alternative. Hopefully, this can help someone else some time down the road later. Both methods basically do the same thing, but they are implemented differently. Depending on different situations, it may be more appropriate to use a specific one of the two.
The critical part of original answer is to change the Grid element in the Template, such that the right margin is -3 (to offset the left margin of 3).
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolBar}">
<Grid x:Name="Grid" Margin="3,1,-3,1" ...
...
The alternative way to do this thing without re-defining the whole template, is to subclass ToolBar class:
class MyToolBar : ToolBar
{
public NoOverflowToolBar()
: base()
{
this.Loaded += MyToolBar_Loaded;
}
void MyToolBar_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
ToolBar toolBar = sender as ToolBar;
var grid = toolBar.Template.FindName("Grid", toolBar) as FrameworkElement;
if (grid != null)
{
grid.Margin = new Thickness(3, 1, -3, 1);
}
}
}
Update
After having some experience in writing custom controls, I realized that there is no need to write this using Loaded event - just use OnApplyTemplate() override.
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var grid = this.Template.FindName("Grid", this) as FrameworkElement;
if (grid != null)
{
grid.Margin = new Thickness(3, 1, -3, 1);
}
}

How to access the custom control in window 'non-client' area in WPF?

I want to implement the custom window as follow:
When use this window style to custom the window,I don't know how to access the 'CheckBox'(the double arrows in circle) by its name in window's 'non-client' area.
Please give some advice?
WPF Window Overview.
<Style x:Key="MetroWindowStyle" TargetType="{x:Type Window}">
<!--<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>-->
<!--<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>-->
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Border x:Name="MainBorder" BorderThickness="0">
<Border.Background>
<ImageBrush ImageSource="Resources/default_background.jpg" Opacity="0.9"/>
</Border.Background>
<DockPanel LastChildFill="True">
<Border x:Name="PART_TITLEBAR"
Margin="0,0,0,0" Height="40" DockPanel.Dock="Top"
Background="Transparent" MouseLeftButtonDown="PART_TITLEBAR_MouseLeftButtonDown">
<DockPanel LastChildFill="False">
<TextBlock Margin="4,0,0,4" VerticalAlignment="Center"
Foreground="White" TextWrapping="NoWrap"
Text="{TemplateBinding Title}" FontSize="16" />
<Button x:Name="PART_CLOSE" DockPanel.Dock="Right"
VerticalAlignment="Center" Margin="5"
Height="20" Width="20"
Style="{DynamicResource MetroWindowButtonStyle}"
Click="PART_CLOSE_Click">
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z"
Stretch="Uniform" Fill="#FFAAAAAA" Width="10" Margin="0,0,0,0" ></Path>
</Button>
<Button x:Name="PART_MAXIMIZE_RESTORE"
DockPanel.Dock="Right" Margin="5"
HorizontalAlignment="Center" VerticalAlignment="Center"
Height="20" Width="20" Style="{DynamicResource MetroWindowButtonStyle}"
Click="PART_MAXIMIZE_RESTORE_Click">
<Path Data="M4.3685131,23.127279L4.3685131,47.283243 47.117023,47.283243 47.117023,23.127279z M0,10.684L53.755001,10.684 53.755001,51.668001 0,51.668001z M8.5679998,0L58.668022,0 64,0 64,5.6864691 64,45.317999 58.668022,45.317999 58.668022,5.6864691 8.5679998,5.6864691z"
Stretch="Uniform" Fill="#FFAAAAAA" Width="10" Margin="0,0,0,0" ></Path>
</Button>
<Button x:Name="PART_MINIMIZE"
HorizontalAlignment="Center"
VerticalAlignment="Center" Margin="5"
DockPanel.Dock="Right"
Height="20" Width="20" Style="{DynamicResource MetroWindowButtonStyle}"
Click="PART_MINIMIZE_Click" VerticalContentAlignment="Bottom">
<Button.Content>
<Path Data="M0,20L53.333,20 53.333,8.888 0,8.888z"
Stretch="Uniform" Fill="#FFAAAAAA" Width="10" Margin="0,0,0,5"></Path>
</Button.Content>
</Button>
<CheckBox Template="{StaticResource ResourceKey=collapsCheckBox}" x:Name="MyCheckBox"
Height="30" Width="30"
Foreground="White"
VerticalContentAlignment="Bottom"
DockPanel.Dock="Right" Margin="3 6 3 10"
Click="ButtonBase_OnClick"/>
</DockPanel>
</Border>
<AdornerDecorator DockPanel.Dock="Bottom">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</AdornerDecorator>
</DockPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="ResizeMode" Value="CanResizeWithGrip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<AdornerDecorator>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</AdornerDecorator>
<ResizeGrip x:Name="WindowResizeGrip" HorizontalAlignment="Right" IsTabStop="False" Visibility="Collapsed" VerticalAlignment="Bottom"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResizeWithGrip"/>
<Condition Property="WindowState" Value="Normal"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="WindowResizeGrip" Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="MetroWindowButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="#FF707070"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#FFBEE6FD"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Add command binding in checkbox in your template something like:
Template="{StaticResource ResourceKey=collapsCheckBox}" x:Name="MyCheckBox" Height="30" Width="30"
Foreground="White"
VerticalContentAlignment="Bottom"
DockPanel.Dock="Right" Margin="3 6 3 10"
Command="myapp:YourCommandClasd.GetCommandInstance" >
And declare in xaml:
<CommandBinding
Command="myapp:YourCommandClass.GetCommandInstance" Executed="To_Be_Executed" />
</Window.CommandBindings>
You can declare "To_Be_Executed" method in xaml.cs file which will be fired.
myapp should be declared as namespace in xaml code.
YourCommandClass.GetCommandInstance : can be a property which returns a RoutedUICommand object.
Sorry for the code ,I write it on phone.

Change the Menu background when clicked in WPF

I'm using the below code to style a Menu. I have been able to change the background when the Mouse is Over the menu. But I don't know how to change its Background when it is clicked.
<Window x:Class="WpfApplication11.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<SolidColorBrush x:Key="NormalColor">White</SolidColorBrush>
<SolidColorBrush x:Key="HoverColor">LightGray</SolidColorBrush>
<SolidColorBrush x:Key="ClickedColor">DarkGray</SolidColorBrush>
<Style x:Key="{x:Type Menu}" TargetType="Menu">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Menu">
<Border x:Name="MainMenu" Background="{StaticResource NormalColor}"
BorderBrush="Black"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainMenu" Property="Background" Value="{StaticResource HoverColor}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Menu Width="30" Height="20" Margin="10, 10, 5, 5" HorizontalAlignment="Left" Background="White">
<MenuItem Header="_File">
<MenuItem Header="_New"/>
<MenuItem Header="_Open"/>
<MenuItem Header="_Close"/>
</MenuItem>
</Menu>
</Grid>
</Window>
Update:
I have tried the following code but it didn't work either.
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="MainMenu" Property="Background" Value="{StaticResource ClickedColor}"/>
</Trigger

You could try using IsKeyboardFocusWithin.
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="MainMenu" Property="Background" Value="{StaticResource ClickedColor}"/>
</Trigger>
Here is your code with the IsKeyboardFocusWithin trigger added. I changed the ClickedColor to Purple so it is easier to see. I added Name="mm" to your menu. I added a stack panel with textblocks bound to mm.IsFocused and mm.IsKeyboardFocusWithin so you can visually see what they are set to and when it changes.
<Window x:Class="WpfApplication11.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<SolidColorBrush x:Key="NormalColor">White</SolidColorBrush>
<SolidColorBrush x:Key="HoverColor">LightGray</SolidColorBrush>
<SolidColorBrush x:Key="ClickedColor">Purple</SolidColorBrush>
<Style x:Key="{x:Type Menu}" TargetType="Menu">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Menu">
<Border x:Name="MainMenu" Background="{StaticResource NormalColor}"
BorderBrush="Black"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainMenu" Property="Background" Value="{StaticResource HoverColor}"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="MainMenu" Property="Background" Value="{StaticResource ClickedColor}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Menu Width="30" Height="20" Margin="10, 10, 5, 5" HorizontalAlignment="Left" Background="White" VerticalAlignment="Top" Name="mm">
<MenuItem Header="_File">
<MenuItem Header="_New"/>
<MenuItem Header="_Open"/>
<MenuItem Header="_Close"/>
</MenuItem>
</Menu>
<StackPanel VerticalAlignment="Center">
<TextBlock Text="menu.IsFocused:" />
<TextBlock Text="{Binding ElementName=mm, Path=IsFocused}" />
<TextBlock Text="menu.IsKeyboardFocusWithin:" />
<TextBlock Text="{Binding ElementName=mm, Path=IsKeyboardFocusWithin}" />
</StackPanel>
</Grid>
OK, for the menu item... try this:
<Window x:Class="WpfApplication11.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<SolidColorBrush x:Key="NormalColor">White</SolidColorBrush>
<SolidColorBrush x:Key="HoverColor">LightGray</SolidColorBrush>
<SolidColorBrush x:Key="ClickedColor">Purple</SolidColorBrush>
<Style x:Key="{x:Type Menu}" TargetType="Menu">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Menu">
<Border x:Name="MainMenu" Background="{StaticResource NormalColor}"
BorderBrush="Black"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainMenu" Property="Background" Value="{StaticResource HoverColor}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="MenuItemControlTemplate1" 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" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" 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">
<Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" 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 Fill="#FFD7D7D7" 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="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
</Trigger>
<Trigger Property="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>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="templateRoot" Property="Background" Value="{StaticResource ClickedColor}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<Menu Width="100" Height="20" Margin="10, 10, 5, 5" HorizontalAlignment="Left" Background="White" VerticalAlignment="Top">
<MenuItem Header="_File" Name="mm" Template="{DynamicResource MenuItemControlTemplate1}">
<MenuItem Header="_New"/>
<MenuItem Header="_Open"/>
<MenuItem Header="_Close"/>
</MenuItem>
<MenuItem Header="_Edit" Template="{DynamicResource MenuItemControlTemplate1}">
<MenuItem Header="_Copy"/>
<MenuItem Header="_Cut"/>
<MenuItem Header="_Paste"/>
</MenuItem>
</Menu>
<StackPanel VerticalAlignment="Center">
<TextBlock Text="menuitem.IsFocused:" />
<TextBlock Text="{Binding ElementName=mm, Path=IsFocused}" />
<TextBlock Text="menuitem.IsKeyboardFocusWithin:" />
<TextBlock Text="{Binding ElementName=mm, Path=IsKeyboardFocusWithin}" />
</StackPanel>
</Grid>

You just need to add an event handler to the Menu.PreviewMouseDown event and change the Background there. Try this:
<Menu Width="30" Height="20" Margin="10, 10, 5, 5" HorizontalAlignment="Left"
Background="White" PreviewMouseDown="Menu_PreviewMouseDown">
<MenuItem Header="_File">
<MenuItem Header="_New"/>
<MenuItem Header="_Open"/>
<MenuItem Header="_Close"/>
</MenuItem>
</Menu>
...
private void Menu_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
Menu menu = (Menu)sender;
menu.Background = Brushes.DarkGray;
}
If you just want it to change colour while the mouse button is held down, then you could attach a handler to the MenuItem.PreviewMouseUp event to change it back to White.
UPDATE >>>
You can add a handler to the MouseLeave event to change the Backgroundback when the mouse cursor leaves the bounds of theMenu`. Try this:
<Menu Width="30" Height="20" Margin="10, 10, 5, 5" HorizontalAlignment="Left"
Background="White" PreviewMouseDown="Menu_PreviewMouseDown"
MouseLeave="Menu_MouseLeave">
<MenuItem Header="_File">
<MenuItem Header="_New"/>
<MenuItem Header="_Open"/>
<MenuItem Header="_Close"/>
</MenuItem>
</Menu>
...
private void Menu_MouseLeave(object sender, MouseEventArgs e)
{
Menu menu = (Menu)sender;
menu.Background = Brushes.White;
}

You can rework the Template for the MenuItem (not the Menu). To reproduce what I did:
Select a MenuItem in XAML
Right click it in the designer.
Select 'Edit Template'
Select 'Edit a Copy'
Edit the 'MenuItem.Highlight.Background' SolidColorBrush to a new color of your choosing. (I chose 'Red')
Remove the Key from the style for the MenuItem.
You will end up with the following resources if you start from scratch:
<Window.Resources>
<SolidColorBrush x:Key="MenuItem.Highlight.Background" Color="Red"/>
<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 MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<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 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 MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<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 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 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>
</Window.Resources>
This looks daunting, but you are basically telling the MenuItem to use another Template other than the one defined in the theme. Personally, I avoid doing such things, as it breaks the themes across the various Windows versions. By doing this, the Menu will look the same on XP, Vista & 8.
You will likely be able to optimize this quite a bit. But I at least recommend you put it in a separate ResourceDictionary.

How to change width for a scroll bar in WPF?

In my WPF application I need to change the width size for a SurfaceScrollViewer. At the moment I am using this code with no success.
Any idea how to sole this?
<Window.Resources>
<Style TargetType="ScrollBar">
<Setter Property="Width" Value="25"/>
</Style>
</Window.Resources>

What you need to do is create a style based on the SurfaceListBox (or whatever element you are using to hold your scrollable items).
This will generate a (very verbose unfortunately) complete listing of elements, including the SurfaceScrollViewer and its associated properties. In here you can find the scrollbar element and change it.
If you're not sure what I mean, have a look into a tutorial on restyling WPF checkboxes as it should give you some context.
I've attached a sample layout below:
<UserControl.Resources>
<!-- Base Grid style for 55 dpi -->
<Style TargetType="{x:Type Control}" x:Key="ControlBaseStyle">
<Setter Property="FocusVisualStyle"
Value="{x:Null}"/>
<Setter Property="SnapsToDevicePixels"
Value="False"/>
<Setter Property="FontFamily"
Value="Segoe360"/>
<Setter Property="FontWeight"
Value="Normal"/>
<Setter Property="FontSize"
Value="17"/>
<Setter Property="Padding"
Value="6,2,10,10"/>
<Setter Property="MinHeight"
Value="38"/>
<Setter Property="MinWidth"
Value="38"/>
<Setter Property="Margin"
Value="1"/>
<Setter Property="HorizontalContentAlignment"
Value="Left"/>
<Setter Property="VerticalContentAlignment"
Value="Top"/>
<Setter Property="BorderThickness"
Value="2"/>
</Style>
<!-- public section -->
<SolidColorBrush x:Key="ControlHitAreaBrush"
Color="#00FFFFFF"/>
<Style x:Key="UnstyledContainer" TargetType="{x:Type controls:SurfaceListBoxItem}" BasedOn="{StaticResource ControlBaseStyle}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static controls:SurfaceColors.ListBoxItemForegroundBrushKey}}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceListBoxItem}">
<Grid x:Name="Grid" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="10,0">
<Border x:Name="ButtonBody"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Border x:Name="PressOverlay"
Opacity="0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<ContentPresenter x:Name="Content"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Minimum HitArea Base Style for 55 dpi-->
<Style x:Key="SurfaceHitAreaBaseStyle"
TargetType="{x:Type Control}">
<Setter Property="SnapsToDevicePixels"
Value="False"/>
<Setter Property="Background"
Value="{StaticResource ControlHitAreaBrush}"/>
<Setter Property="IsTabStop"
Value="False"/>
<Setter Property="Focusable"
Value="False"/>
<Setter Property="FocusVisualStyle"
Value="{x:Null}"/>
<Setter Property="MinWidth"
Value="40" />
<Setter Property="MinHeight"
Value="40" />
</Style>
<Style x:Key="SurfaceVertScrollBarRepeatButton"
TargetType="{x:Type controls:SurfaceRepeatButton}" >
<Setter Property="Interval"
Value="150" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
<Setter Property="Background"
Value="{StaticResource ControlHitAreaBrush}" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceRepeatButton}">
<Grid Width="40" Background="{TemplateBinding Background}">
<Rectangle HorizontalAlignment="Center"
x:Name="Line"
MinWidth="2"
Fill="{DynamicResource {x:Static controls:SurfaceColors.TrackBackgroundBrushKey}}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Line"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar Vert Thumb -->
<Style x:Key="SurfaceScrollBarThumbStyle"
TargetType="{x:Type controls:SurfaceThumb}"
BasedOn="{StaticResource SurfaceHitAreaBaseStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceThumb}">
<ControlTemplate.Resources>
<Storyboard x:Key="Touch">
<DoubleAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Width"
To="16"/>
<ThicknessAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="-1,0,-1,0" />
</Storyboard>
<Storyboard x:Key="Release">
<DoubleAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Width"
To="14"/>
<ThicknessAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="0,0,0,0" />
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="Grid"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Rectangle x:Name="Thumb"
Height="Auto"
Width="14"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{DynamicResource {x:Static controls:SurfaceColors.ThumbEnabledBrushKey}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="controls:TouchExtensions.AreAnyInputDevicesCapturedWithin"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Touch}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Release}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Thumb"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar RepeatButton -->
<Style x:Key="SurfaceHorzScrollBarRepeatButton"
TargetType="{x:Type controls:SurfaceRepeatButton}" >
<Setter Property="Interval"
Value="150" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
<Setter Property="Background"
Value="{StaticResource ControlHitAreaBrush}" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceRepeatButton}">
<Grid Height="40" Background="{TemplateBinding Background}">
<Rectangle VerticalAlignment="Center"
x:Name="Line"
MinHeight="2"
Fill="{DynamicResource {x:Static controls:SurfaceColors.TrackBackgroundBrushKey}}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Line"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SurfaceScrollBarHorizThumbStyle"
TargetType="{x:Type controls:SurfaceThumb}"
BasedOn="{StaticResource SurfaceHitAreaBaseStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceThumb}">
<ControlTemplate.Resources>
<!-- Vertical orientation -->
<Storyboard x:Key="Touch">
<DoubleAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Height"
To="16"/>
<ThicknessAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="0,-1,0,-1" />
</Storyboard>
<Storyboard x:Key="Release">
<DoubleAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Height"
To="14"/>
<ThicknessAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="0,0,0,0" />
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="Grid"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" >
<Rectangle x:Name="Thumb"
Width="Auto"
Height="14"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{DynamicResource {x:Static controls:SurfaceColors.ThumbEnabledBrushKey}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="controls:TouchExtensions.AreAnyInputDevicesCapturedWithin"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Touch}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Release}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Thumb"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar -->
<Style x:Key="SurfaceScrollBarStyle"
TargetType="{x:Type controls:SurfaceScrollBar}"
>
<Style.Resources>
<System:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">38</System:Double>
<System:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">38</System:Double>
</Style.Resources>
<Setter Property="Stylus.IsPressAndHoldEnabled"
Value="False"/>
<Setter Property="Stylus.IsFlicksEnabled"
Value="False"/>
<Setter Property="Width"
Value="38"/>
<Setter Property="Height"
Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<!-- vertical scroll bar -->
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollBar}">
<Grid x:Name="GridRoot" Background="{TemplateBinding Background}">
<Border x:Name="Track"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Track x:Name="PART_Track"
IsDirectionReversed="True">
<Track.IncreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="IncreaseRepeat"
Background="{TemplateBinding Background}"
HorizontalAlignment="Center"
Style="{StaticResource SurfaceVertScrollBarRepeatButton}"
Command="ScrollBar.PageDownCommand"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="DecreaseRepeat"
Background="{TemplateBinding Background}"
HorizontalAlignment="Center"
Style="{StaticResource SurfaceVertScrollBarRepeatButton}"
Command="ScrollBar.PageUpCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<controls:SurfaceThumb Style="{StaticResource SurfaceScrollBarThumbStyle}"
Background="{TemplateBinding Background}"
HorizontalAlignment="Center"
x:Name="Thumb"/>
</Track.Thumb>
</Track>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!-- Animates Scrollbar from small to large state -->
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="IsEnabled"
TargetName="PART_Track"
Value="False"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.BasedOn>
<StaticResource ResourceKey="SurfaceHitAreaBaseStyle"/>
</Style.BasedOn>
<Style.Triggers>
<!-- Horizontal orientation -->
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width"
Value="Auto"/>
<Setter Property="Height"
Value="38"/>
<!-- change the whole template -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollBar}">
<Grid x:Name="GridRoot" Background="{TemplateBinding Background}">
<Border x:Name="Track"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Track x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="DecreaseRepeat"
Background="{TemplateBinding Background}"
VerticalAlignment="Center"
Style="{StaticResource SurfaceHorzScrollBarRepeatButton}"
Command="ScrollBar.PageLeftCommand" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="IncreaseRepeat"
Background="{TemplateBinding Background}"
VerticalAlignment="Center"
Style="{StaticResource SurfaceHorzScrollBarRepeatButton}"
Command="ScrollBar.PageRightCommand"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<controls:SurfaceThumb Style="{StaticResource SurfaceScrollBarHorizThumbStyle}"
Background="{TemplateBinding Background}"
VerticalAlignment="Center"
x:Name="Thumb"/>
</Track.Thumb>
</Track>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!-- Animates Scrollbar from small to large state -->
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Opacity"
TargetName="IncreaseRepeat"
Value="0.33"/>
<Setter Property="Opacity"
TargetName="DecreaseRepeat"
Value="0.33"/>
<Setter Property="IsEnabled"
TargetName="PART_Track"
Value="False"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- ScrollViewerBase -->
<Style x:Key="SurfaceScrollViewerStyle"
TargetType="{x:Type controls:SurfaceScrollViewer}">
<Setter Property="Elasticity"
Value="0.4,0.4" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollViewer}">
<Grid Background="{TemplateBinding Background}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="PART_ElasticBorder"
Background="{TemplateBinding Background}">
<ScrollContentPresenter
Margin="-1,-1,-1,-1"
Grid.Column="0"
Grid.ColumnSpan="1"
Grid.Row="0"
Grid.RowSpan="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</Border>
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
x:Name="PART_HorizontalScrollBar"
Grid.Column="0"
Grid.Row="1"
Orientation="Horizontal"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="HorizontalScrollBar"
Height="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ViewportSize="{TemplateBinding ViewportWidth}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Foreground="{x:Null}"/>
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Grid.Row="0"
Orientation="Vertical"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="VerticalScrollBar"
Width="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ViewportSize="{TemplateBinding ViewportHeight}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Foreground="{x:Null}"
IsEnabled="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="IsEnabled"
TargetName="PART_HorizontalScrollBar"
Value="False" />
<Setter Property="IsEnabled"
TargetName="PART_VerticalScrollBar"
Value="False" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Listbox ScrollView -->
<Style x:Key="SurfaceListBoxScrollViewerStyle"
TargetType="{x:Type controls:SurfaceScrollViewer}"
BasedOn="{StaticResource SurfaceScrollViewerStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollViewer}">
<Grid
HorizontalAlignment="Stretch"
Margin="{TemplateBinding BorderThickness}"
VerticalAlignment="Stretch"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border x:Name="PART_ElasticBorder"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
BorderBrush="Transparent"
>
<ScrollContentPresenter Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
Grid.ColumnSpan="1"
Grid.RowSpan="1"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
x:Name="PART_HorizontalScrollBar"
Grid.Row="1"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ViewportWidth}"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Background="{TemplateBinding Background}"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="HorizontalScrollBar"
Height="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ClipToBounds="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Grid.Row="0"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="VerticalScrollBar"
Width="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ClipToBounds="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Border x:Name="Container"
Grid.Column="1"
Grid.Row="1"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
BorderBrush="Transparent"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="IsEnabled"
TargetName="PART_HorizontalScrollBar"
Value="False"/>
<Setter Property="IsEnabled"
TargetName="PART_VerticalScrollBar"
Value="False"/>
<Setter Property="BorderBrush"
TargetName="PART_ElasticBorder"
Value="{DynamicResource {x:Static controls:SurfaceColors.ControlBorderDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ListBox -->
<Style x:Key="UnstyledList" TargetType="{x:Type controls:SurfaceListBox}"
BasedOn="{StaticResource ControlBaseStyle}">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="False" />
<Setter Property="controls:SurfaceScrollViewer.Elasticity"
Value="0,0.4" />
<Setter Property="MinHeight"
Value="80" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static controls:SurfaceColors.ButtonForegroundBrushKey}}"/>
<Setter Property="BorderBrush"
Value="{DynamicResource {x:Static controls:SurfaceColors.ListBoxBorderBrushKey}}"/>
<Setter Property="Padding"
Value="0" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="Margin"
Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceListBox}">
<Grid SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" >
<controls:SurfaceScrollViewer
Style="{StaticResource SurfaceListBoxScrollViewerStyle}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
Focusable="False"
Foreground="{TemplateBinding Foreground}"
Width="Auto"
Height="Auto"
MinHeight="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"
x:Name="scrollViewer"
Elasticity="{TemplateBinding controls:SurfaceScrollViewer.Elasticity}">
<ItemsPresenter ClipToBounds="False"
MinHeight="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"/>
</controls:SurfaceScrollViewer>
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping"
Value="True">
<Setter Property="ScrollViewer.CanContentScroll"
Value="False" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<s:SurfaceListBox x:Name="someList" Background="{x:Null}" Foreground="{x:Null}" BorderBrush="{x:Null}" ItemContainerStyle="{DynamicResource UnstyledContainer}" Style="{DynamicResource UnstyledList}" />

Enable highlighting of MenuItem outside of ContentPresenter

I've been at it for a while and it's driving me crazy. Here's my problem... I have a Menu and it uses the default template in which I've altered colors upon highlighting, default state, etc. So, there's no point posting it here -- it's virtually exact same thing (and it's a lot of template code).
What my problem is the spacing between the MenuItems created by the template's Marginproperty. It is template-binded with the padding property and produces a (2, 3, 2, 3) margin all around the ContentPresenter of the template.
I want to keep that property and need it to separate the items; however, mousing over only activates highlighted state when the mouse is over the ContentPresenter and nothing else. So, the "button" feel won't actuate until I mouse over the words themselves. ContentPresenter does not have padding, so I'm not sure how to deal with it. I tried editing the triggers that came with the template to work on other parts, but it doesn't work (they don't fire off).
The triggers that come with the template only work with the ContentPresenter. I tried wrapping it in ContentControl to see if I can gain Padding, but the binding for Padding doesn't work, only for margin... not sure why (it shows up in the Properties, but the addition of padding is not visible):
<ContentControl SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Padding="{TemplateBinding Padding}">
<ContentPresenter ContentSource="Header" RecognizesAccessKey="True"/>
</ContentControl>
I also tried replacing ContentPresenter with ContentControl altogether, but once again suffered from Padding not binding properly and manual Padding didn't do anything either. Something is overwriting it, perhaps.
Any idea how I can actuate triggers in the empty space between those MenuItems? The way I've been dealing with it is by adding whitespace into my MenuItem headers... and that's just absurd.
Here's my template:
<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" Background="#FFEFF6FB" HorizontalAlignment="Stretch">
<Rectangle x:Name="Bg"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition/>
<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
<ColumnDefinition Width="17"/>
</Grid.ColumnDefinitions>
<!--<ContentPresenter x:Name="Icon" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="1,12" ContentSource="Icon" Height="0"/>
<Border x:Name="GlyphPanel" Width="Auto" Visibility="Hidden" Margin="1" Height="Auto" CornerRadius="3" Background="#FFEFF6FB" BorderThickness="1" BorderBrush="#FFEFF6FB">
<Path x:Name="Glyph" Width="9" Height="11" FlowDirection="LeftToRight" Fill="#0C12A1" Data="{StaticResource Checkmark}"/>
</Border>-->
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" Margin="{TemplateBinding Padding}" ContentSource="Header" Grid.Column="2"/>
<TextBlock Grid.Column="3" 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="#FFC0E5FF"/>
<Setter Property="Foreground" Value="Black"/>
</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="#FFEFF6FB"/>
<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" Width="1" Fill="Transparent" DockPanel.Dock="Right"/>
<Rectangle x:Name="B1" Height="1" Fill="Transparent" DockPanel.Dock="Bottom"/>
<Rectangle x:Name="L1" Width="1" Fill="Transparent" DockPanel.Dock="Left"/>
<Rectangle x:Name="T1" Height="1" Fill="Transparent" DockPanel.Dock="Top"/>
<ContentPresenter x:Name="ContentContainer" VerticalAlignment="Center" Margin="2,2,2,2" HorizontalAlignment="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.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="1">
<ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" Margin="{TemplateBinding Padding}"/>
</Border>
<RepeatButton Style="{StaticResource MenuScrollButton}" Grid.Row="0" Focusable="false" Command="{x:Static ScrollBar.LineUpCommand}" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="0">
<RepeatButton.Visibility>
<MultiBinding FallbackValue="Visibility.Collapsed" Converter="{StaticResource MenuScrollingVisibilityConverter}" ConverterParameter="0">
<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 Style="{StaticResource MenuScrollButton}" Grid.Row="2" Focusable="false" Command="{x:Static ScrollBar.LineDownCommand}" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="0">
<RepeatButton.Visibility>
<MultiBinding FallbackValue="Visibility.Collapsed" Converter="{StaticResource MenuScrollingVisibilityConverter}" ConverterParameter="100">
<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=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
<Grid SnapsToDevicePixels="true">
<Rectangle x:Name="OuterBorder"/>
<Rectangle x:Name="Bg"/>
<DockPanel>
<!--<ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="0" Visibility="Collapsed" VerticalAlignment="Center"/>-->
<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="0,1"/>
</DockPanel>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="0" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="0">
<Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
<Border x:Name="SubMenuBorder" Background="{StaticResource SubMenuBackgroundBrush}">
<ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" 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="{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>
</Border>
</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="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
<Setter Property="Foreground" Value="Black"/>
<!--<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="#FFEFF6FB"/>
<Setter Property="Foreground" Value="Black"/>
<!--<Setter Property="Stroke" TargetName="InnerBorder" Value="#50747272"/>-->
</Trigger>
<Trigger Property="IsSubmenuOpen" Value="true">
<Setter Property="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Fill" TargetName="OuterBorder" Value="{x:Null}"/>
<Setter Property="Stroke" TargetName="OuterBorder" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#FF9A9A9A"/>
<!--<Setter Property="Fill" TargetName="GlyphPanel" Value="#848589"/>-->
</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}">
<Grid SnapsToDevicePixels="true">
<Rectangle x:Name="Bg"/>
<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="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
<Setter Property="Foreground" Value="Black"/>
<!--<Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuItemPressedFill}"/>-->
</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"/>
<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">
<Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
<Border x:Name="SubMenuBorder">
<ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" 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="{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>
</Border>
</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="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
<Setter Property="Foreground" Value="Black"/>
</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="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>
<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>

The problem is in the MenuItem template with the ResourceID "TopLevelItemTemplateKey".
Note that in this template no background is set for the transparent areas of the menu item. Technically speaking, the background in these areas is not transparent, it is null - not setting a background will for many UI elements let the mouse hit test fail in regions without content (hit-testing is not done pixel-by-pixel but rather by specific UIElement.InputHitTest method implementations).
Setting the background explicitly to "Transparent" on the outermost UI element in your template will fix this issue:
<ControlTemplate
x:Key="{ComponentResourceKey ResourceId=TopLevelItemTemplateKey,
TypeInTargetAssembly={x:Type MenuItem}}"
TargetType="{x:Type MenuItem}"
>
<!-- ### FIX: SETTING THE GRID BACKGROUND TO "TRANSPARENT" ### -->
<Grid Background="Transparent" SnapsToDevicePixels="true">
<Rectangle x:Name="Bg"/>
...
</Grid>
</ControlTemplate>
(If you want to know more about hit testing in WPF, read here in the MSDN documentation.)