Say we're using "Ctrl+S" input gesture for saving the project.
In File menu - "Save Ctrl+S" such text is displayed.
Now on canexecute of SaveCommand I check whether project required save or not. If it doesnt require then Save is disabled.
In that case I see menu item like " Ctrl+S" . I've to hide this input gesture text also.
Ideas?
Any new feed ??
This question got no love :( ...
Finally i found a fix. Overrided the default template of Menu Item and added a trigger that whenever Menu Item is disabled, change the color of Input Gesture Text to look like disabled.
Here is the overriden template and the last trigger does the above mentioned issue i mean color change..
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}"
TargetType="{x:Type MenuItem}">
<Border x:Name="Border"
TextElement.Foreground="{DynamicResource SubMenuItemTextForegroundColor}"
Background="{DynamicResource FileMenuBackgroundBrush}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Icon" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"
SharedSizeGroup="Shortcut" />
<ColumnDefinition Width="13" />
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon" />
<Border x:Name="Check"
Width="13"
Height="13"
Visibility="Collapsed"
Margin="6,0,6,0"
Background="#C0C0C0"
BorderThickness="1"
BorderBrush="#404040">
<Path x:Name="CheckMark"
Width="7"
Height="7"
Visibility="Hidden"
SnapsToDevicePixels="False"
Stroke="#404040"
StrokeThickness="2"
Data="M 0 0 L 7 7 M 0 7 L 7 0" />
</Border>
<ContentPresenter x:Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="{TemplateBinding Tag,
Converter={StaticResource TagToRecognizesAccessKeyConverter}
}"
VerticalAlignment="Center" />
<TextBlock x:Name="InputGestureText"
Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="5,2,0,2"
DockPanel.Dock="Right" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon"
Value="{x:Null}">
<Setter TargetName="Icon"
Property="Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="IsChecked"
Value="true">
<Setter TargetName="CheckMark"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="IsCheckable"
Value="true">
<Setter TargetName="Check"
Property="Visibility"
Value="Visible" />
<Setter TargetName="Icon"
Property="Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="IsHighlighted"
Value="true">
<Setter Property="Background"
TargetName="Border"
Value="{DynamicResource SubMenuItemMouseOverBackgroundBrush}" />
<Setter Property="TextElement.Foreground"
TargetName="Border"
Value="{DynamicResource FileMenuBackgroundBrush}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="HeaderHost"
Property="TextElement.Foreground"
Value="#DDDDDD" />
<Setter TargetName="InputGestureText"
Property="TextElement.Foreground"
Value="#DDDDDD" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Related
I want to implement a grid layout for a treeview, where the most right column has a *-size and the most left column has always the size.
Xaml
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type model:BaustelleModel}" ItemsSource="{Binding Abschnitte}">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="0 0 1 0" BorderBrush="Black">
<Label Content="{Binding Bezeichnung}"/>
</Border>
<Label Grid.Column="1" Background="Red"/>
<Label Grid.Column="2" Background="Green"/>
<Label Grid.Column="3" Background="AliceBlue"/>
</Grid>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
The result is shown in the picture. However, I want to draw a border for evey node like the blue lines. If a new node is added, or a text changed, the border should align for all nodes with the border of the node, where the text end on the most far right.
Update 1
So, I fiddled around a bit with the ControlTemplate. And the problem is, that the ContentPresenter starts with an indention based on its level. In the picture below, the background of the ContentPresenter is set to red. So I need a way, to substract "level * space for indention" from the columnwidth.
I hope there is no direct way other than overriding the default TreeviewItem.
TreeViewItem Style:
<Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Name="Expander">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="UIElement.Focusable" Value="false" />
<Setter Property="FrameworkElement.Width" Value="16" />
<Setter Property="FrameworkElement.Height" Value="16" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Padding="5,5,5,5" Background="#00FFFFFF" Width="16" Height="16">
<Path Fill="#00FFFFFF" Stroke="#FF989898" Name="ExpandPath">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,0z" />
</Path.Data>
<Path.RenderTransform>
<RotateTransform Angle="135" CenterX="3" CenterY="3" />
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF1BBBFA" />
<Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#00FFFFFF" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="ExpandPath" Property="UIElement.RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" CenterX="3" CenterY="3" />
</Setter.Value>
</Setter>
<Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#FF595959" />
<Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF262626" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Bd"
HorizontalAlignment="Stretch"
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Padding="{TemplateBinding Control.Padding}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True"
Grid.Column="1">
<ContentPresenter x:Name="PART_Header"
Content="{TemplateBinding HeaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentTemplateSelector="{TemplateBinding HeaderedItemsControl.HeaderTemplateSelector}"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Column="1"
Grid.Row="1" />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded" Value="False">
<Setter TargetName="ItemsHost" Property="UIElement.Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter TargetName="Expander" Property="UIElement.Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="TreeViewItem.IsSelected" Value="True">
<Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now you can have your code:
<TreeView x:Name="treeView">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:BaustelleModel}" ItemsSource="{Binding Abschnitte}">
<DockPanel LastChildFill="False">
<Border BorderThickness="0 0 1 0" BorderBrush="Black" DockPanel.Dock="Left">
<Label Content="{Binding Bezeichnung}"/>
</Border>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
<Label Background="Red" Width="50"/>
<Label Background="Green" Width="50"/>
<Label Background="AliceBlue" Width="50"/>
</StackPanel>
</DockPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
Output:
Reference: https://leecampbell.com/2009/01/14/horizontal-stretch-on-treeviewitems/
Hope that helps.
I am currently using the MahApps.Metro NumericUpDown control to change frames in an image stack. The user feedback I have got from this is that the buttons feel the wrong way round, intuitively the button on the left would move back a frame and the button on the right would move forward. As such I would like to swap the order of the buttons
I have looked through the properties that the control has but I have been unable to find any that would allow me to change the order of the buttons.
Is there a way to do this without having to roll my own control?
Basically I would like to change from this:
To this:
Update
With latest MahApps version (v2.x) there is the new SwitchUpDownButtons property available to swap / switch the buttons.
Older MahApps Versions
There is no property where you can change the sequence of the up and down buttons. But you can take the original style which is available at the GitHub repository of MahApps.Metro and change the Template.
<Style x:Key="CustomNumericUpDownStyle" TargetType="{x:Type Controls:NumericUpDown}" BasedOn="{StaticResource {x:Type Controls:NumericUpDown}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:NumericUpDown}">
<Grid SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Border x:Name="Base"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding Controls:ControlsHelper.CornerRadius}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Grid Margin="{TemplateBinding BorderThickness}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="PART_TextBoxColumn" Width="*" />
<ColumnDefinition x:Name="PART_ButtonsColumn" Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox x:Name="PART_TextBox"
Grid.Column="0"
MinWidth="20"
MinHeight="0"
Margin="0 0 -2 0"
Padding="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Controls:ControlsHelper.DisabledVisualElementVisibility="Collapsed"
Controls:TextBoxHelper.ButtonContent="{TemplateBinding Controls:TextBoxHelper.ButtonContent}"
Controls:TextBoxHelper.ButtonContentTemplate="{TemplateBinding Controls:TextBoxHelper.ButtonContentTemplate}"
Controls:TextBoxHelper.ButtonFontFamily="{TemplateBinding Controls:TextBoxHelper.ButtonFontFamily}"
Controls:TextBoxHelper.ButtonFontSize="{TemplateBinding Controls:TextBoxHelper.ButtonFontSize}"
Controls:TextBoxHelper.ButtonWidth="{TemplateBinding Controls:TextBoxHelper.ButtonWidth}"
Controls:TextBoxHelper.ButtonsAlignment="{TemplateBinding ButtonsAlignment}"
Controls:TextBoxHelper.ClearTextButton="{TemplateBinding Controls:TextBoxHelper.ClearTextButton}"
Controls:TextBoxHelper.HasText="{TemplateBinding Controls:TextBoxHelper.HasText}"
Controls:TextBoxHelper.SelectAllOnFocus="{TemplateBinding Controls:TextBoxHelper.SelectAllOnFocus}"
Controls:TextBoxHelper.UseFloatingWatermark="{TemplateBinding Controls:TextBoxHelper.UseFloatingWatermark}"
Controls:TextBoxHelper.Watermark="{TemplateBinding Controls:TextBoxHelper.Watermark}"
Controls:TextBoxHelper.WatermarkAlignment="{TemplateBinding Controls:TextBoxHelper.WatermarkAlignment}"
Controls:TextBoxHelper.WatermarkTrimming="{TemplateBinding Controls:TextBoxHelper.WatermarkTrimming}"
Background="{x:Null}"
BorderThickness="0"
FocusVisualStyle="{x:Null}"
Focusable="{TemplateBinding Focusable}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsReadOnly="{TemplateBinding IsReadOnly}"
IsTabStop="{TemplateBinding IsTabStop}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
TabIndex="{TemplateBinding TabIndex}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" />
<StackPanel x:Name="PART_Buttons"
Grid.Column="1"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Padding, Converter={StaticResource ThicknessBindingConverter}, ConverterParameter={x:Static Converters:ThicknessSideType.Left}}"
Orientation="Horizontal">
<!-- down is now the first button -->
<RepeatButton x:Name="PART_NumericDown"
Width="{TemplateBinding UpDownButtonsWidth}"
VerticalContentAlignment="Center"
Delay="{TemplateBinding Delay}"
Foreground="{TemplateBinding Foreground}"
IsTabStop="False"
Style="{DynamicResource ChromelessButtonStyle}">
<Path x:Name="PolygonDown"
Width="14"
Height="3"
Data="F1 M 19,38L 57,38L 57,44L 19,44L 19,38 Z "
Fill="{DynamicResource GrayBrush1}"
Stretch="Fill" />
</RepeatButton>
<RepeatButton x:Name="PART_NumericUp"
Width="{TemplateBinding UpDownButtonsWidth}"
Delay="{TemplateBinding Delay}"
Foreground="{TemplateBinding Foreground}"
IsTabStop="False"
Style="{DynamicResource ChromelessButtonStyle}">
<Path x:Name="PolygonUp"
Width="14"
Height="14"
Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "
Fill="{DynamicResource GrayBrush1}"
Stretch="Fill" />
</RepeatButton>
</StackPanel>
</Grid>
<Border x:Name="DisabledVisualElement"
Background="{DynamicResource ControlsDisabledBrush}"
BorderBrush="{DynamicResource ControlsDisabledBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding Controls:ControlsHelper.CornerRadius}"
IsHitTestVisible="False"
Opacity="0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.DisabledVisualElementVisibility), Mode=OneWay}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ButtonsAlignment" Value="Left">
<Setter TargetName="PART_Buttons" Property="Grid.Column" Value="0" />
<Setter TargetName="PART_Buttons" Property="Margin" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Padding, Converter={StaticResource ThicknessBindingConverter}, ConverterParameter={x:Static Converters:ThicknessSideType.Right}}" />
<Setter TargetName="PART_ButtonsColumn" Property="Width" Value="*" />
<Setter TargetName="PART_TextBox" Property="Grid.Column" Value="1" />
<Setter TargetName="PART_TextBox" Property="Margin" Value="-2 0 0 0" />
<Setter TargetName="PART_TextBox" Property="Margin" Value="-2 0 0 0" />
<Setter TargetName="PART_TextBoxColumn" Property="Width" Value="Auto" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="DisabledVisualElement" Property="Opacity" Value="0.6" />
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="InterceptArrowKeys" Value="False" />
<Setter Property="InterceptManualEnter" Value="False" />
<Setter Property="InterceptMouseWheel" Value="False" />
<Setter TargetName="PART_NumericDown" Property="IsEnabled" Value="False" />
<Setter TargetName="PART_NumericUp" Property="IsEnabled" Value="False" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsReadOnly" Value="False" />
<Condition Property="InterceptManualEnter" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_TextBox" Property="IsReadOnly" Value="True" />
</MultiTrigger>
<Trigger SourceName="PART_NumericUp" Property="IsMouseOver" Value="True">
<Setter TargetName="PART_NumericUp" Property="Background" Value="{DynamicResource GrayBrush8}" />
<Setter TargetName="PolygonUp" Property="Fill" Value="{DynamicResource AccentColorBrush}" />
</Trigger>
<Trigger SourceName="PART_NumericUp" Property="IsPressed" Value="True">
<Setter TargetName="PART_NumericUp" Property="Background" Value="{DynamicResource BlackBrush}" />
<Setter TargetName="PolygonUp" Property="Fill" Value="{DynamicResource WhiteBrush}" />
</Trigger>
<Trigger SourceName="PART_NumericDown" Property="IsMouseOver" Value="True">
<Setter TargetName="PART_NumericDown" Property="Background" Value="{DynamicResource GrayBrush8}" />
<Setter TargetName="PolygonDown" Property="Fill" Value="{DynamicResource AccentColorBrush}" />
</Trigger>
<Trigger SourceName="PART_NumericDown" Property="IsPressed" Value="True">
<Setter TargetName="PART_NumericDown" Property="Background" Value="{DynamicResource BlackBrush}" />
<Setter TargetName="PolygonDown" Property="Fill" Value="{DynamicResource WhiteBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Base" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.MouseOverBorderBrush)}" />
</Trigger>
<Trigger SourceName="PART_TextBox" Property="IsFocused" Value="true">
<Setter TargetName="Base" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.FocusBorderBrush)}" />
</Trigger>
<Trigger Property="HideUpDownButtons" Value="True">
<Setter TargetName="PART_Buttons" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a ContextMenu on a Button and when shown it display a list of menu items, which is fine. If I move the mouse over an item in the menu, it highlights, but I also get a secondary highlight when I hover over and around the text, see the pictures below.
How do I remove this? I've tried all types of styles, triggers and various other templates to remove the highlighting, but can't seem to make any of the work or display correctly.
There is nothing special about my context menu button either, see wpf below.
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding SelectedTreeItem.MetaTargets}">
<ContextMenu.ItemTemplate>
<DataTemplate >
<MenuItem Header="{Binding Name}"
Command="{Binding Path=SelectedTreeItem.AddTargetCommandRelay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"
CommandParameter="{Binding}"
/>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</Button.ContextMenu>
Ideally I want it to look like this when highlighted, regardless of where the mouse is within the confines of the highlighted item, see pic below.
Just remove Property="IsHighlighted" trigger from default MenuItem template:
<ControlTemplate TargetType="{x:Type MenuItem}">
<Grid SnapsToDevicePixels="True">
<Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
<Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="37"/>
<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
<ColumnDefinition Width="17"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" Margin="1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<Border x:Name="GlyphPanel" BorderBrush="#FFCDD3E6" BorderThickness="1" Background="#FFE6EFF4" CornerRadius="3" Height="22" Margin="1" Visibility="Hidden" Width="22">
<Path x:Name="Glyph" Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z" Fill="#FF0C12A1" FlowDirection="LeftToRight" Height="11" Width="9"/>
</Border>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Text="{TemplateBinding InputGestureText}"/>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Fill" TargetName="Bg">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#34C5EBFF" Offset="0"/>
<GradientStop Color="#3481D8FF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Stroke" TargetName="Bg" Value="#8071CBF1"/>
<Setter Property="Stroke" TargetName="InnerBorder" Value="#40FFFFFF"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#FF9A9A9A"/>
<Setter Property="Background" TargetName="GlyphPanel" Value="#FFEEE9E9"/>
<Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#FFDBD6D6"/>
<Setter Property="Fill" TargetName="Glyph" Value="#FF848589"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
This is a very late answer but maybe it could help someone.
The secondary highlight is there because you actually have an extra MenuItem inside the original one.
It is a bit counter-intuitive but when you bind ItemsSource of a menu in WPF, it automatically creates MenuItems without giving it a DataTemplate. The DataTemplate you're providing is actually going inside a ContentPresenter in the originally created MenuItem.
So you should be using ItemContainerStyle to style the MenuItem, rather than giving it a DataTemplate.
I don't have the opportunity to try the following code now, but it should fix the issue:
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding SelectedTreeItem.MetaTargets}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="MenuItem">
<Style.Setters>
<Setter Property="Header" Value="{Binding Name}"/>
<Setter Property="Command" Value="{Binding Path=SelectedTreeItem.AddTargetCommandRelay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
<Setter Property="CommandParameter" Value="{Binding}"/>
</Style.Setters>
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
</Button.ContextMenu>
I use the following style for my ContextMenu instances. Obviously you can change the colors to suit.
<Style x:Key="ContextMenuStyle" TargetType="{x:Type ContextMenu}">
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<Border BorderThickness="1"
BorderBrush="LightBlue">
<StackPanel IsItemsHost="True"
Background="{TemplateBinding Background}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT:
If that doesn't work you could go down the route of restyling your MenuItem too. Here is an example:
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}"
TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<ContentPresenter Margin="6,3,6,3"
ContentSource="Header"
RecognizesAccessKey="True" />
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="#FF2D2D30"
BorderBrush="#FF2D2D30"
BorderThickness="1" >
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="DimGray"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="LightSlateGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<ContentPresenter Margin="6,3,6,3"
ContentSource="Header"
RecognizesAccessKey="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="DimGray"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="LightSlateGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}" TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
<ColumnDefinition Width="13"/>
</Grid.ColumnDefinitions>
<ContentPresenter Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon"/>
<Border Name="Check"
Width="13" Height="13"
Visibility="Collapsed"
Margin="6,0,6,0"
Background="#FF2D2D30"
BorderThickness="1"
BorderBrush="#FF2D2D30">
<Path Name="CheckMark"
Width="7" Height="7"
Visibility="Hidden"
SnapsToDevicePixels="False"
Stroke="DodgerBlue"
StrokeThickness="2"
Data="M 0 0 L 7 7 M 0 7 L 7 0" />
</Border>
<ContentPresenter Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True"/>
<TextBlock x:Name="InputGestureText"
Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="5,2,0,2"
DockPanel.Dock="Right" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Hidden"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="CheckMark" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsCheckable" Value="true">
<Setter TargetName="Check" Property="Visibility" Value="Visible"/>
<Setter TargetName="Icon" Property="Visibility" Value="Hidden"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="DimGray"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightSlateGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
<ColumnDefinition Width="13"/>
</Grid.ColumnDefinitions>
<ContentPresenter Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon"/>
<ContentPresenter Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True"/>
<TextBlock x:Name="InputGestureText"
Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="5,2,2,2"
DockPanel.Dock="Right"/>
<Path Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 0 7 L 4 3.5 Z"
Fill="DodgerBlue" />
<Popup Name="Popup"
Placement="Right"
HorizontalOffset="-4"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="#FF2D2D30"
BorderBrush="#FF2D2D30"
BorderThickness="1" >
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="DimGray"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightSlateGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="MenuItemStyle" TargetType="MenuItem">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Style.Triggers>
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}"/>
<Setter Property="Grid.IsSharedSizeScope" Value="true"/>
</Trigger>
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}"/>
</Trigger>
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}"/>
</Trigger>
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}"/>
</Trigger>
</Style.Triggers>
</Style>
I had the same problem and solved it with a custom MenuItem template containing just a Label:
<ContextMenu ItemsSource="{Binding ReportLayouts}" x:Name="CtxReportsMenu">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}, Path=DataContext.ReportCmd}"
CommandParameter="{Binding }">
<MenuItem.Template>
<ControlTemplate>
<Label Content="{Binding Report_Description}"/>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
</DataTemplate>
</ContextMenu.ItemTemplate>
I had a WPF menu which I'd styled using control templates. Then the client wanted to use images instead of text for the Top Level navigation items.
No problem, I created a control template for each top-level item and set my Template attribute on each MenuItem to match the custom template like the one below. I've a Trigger that changes the image on rollover.
My problem is that when you click on the Menu Item that should have a sub-menu items that they no longer drop-down.
The commands fire for the Top-level items that don't have children. And as soon as I remove my code specifying the template from my Menu Item with children I see the text version with the drop-down.
What do I need to do to keep my image-based top-level menu item and keep my drop-downs?
Thanks in advance.
<Menu Grid.Row="0" Grid.Column="0" Name="uxMenu" Margin="0 2 0 0">
<MenuItem Header="Home" Name="uxHome" Command="cmds:NavigationCommands.HomeViewNavigationCommand" Template="{DynamicResource HomeButtonTemplate}"/>
<MenuItem Header="Admin" Name="uxAdmin" Template="{DynamicResource MenuExitButtonTemplate}">
<MenuItem Header="_Setup">
<MenuItem Header="_Overview" Command="cmds:NavigationCommands.MenuAdminSetupOverviewNavigationCommand"/>
<MenuItem Header="_Cameras" Command="cmds:NavigationCommands.MenuAdminSetupCameraNavigationCommand" />
</MenuItem>
</MenuItem>
</Menu>
<ControlTemplate x:Key="HomeButtonTemplate" TargetType="{x:Type MenuItem}">
<Grid >
<Image x:Name="myimage" Source="/Images/Navigation/home_off.png" Width="100" Height="52" />
</Grid>
<ControlTemplate.Triggers >
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="myimage" Property="Source" Value="/Images/Navigation/home_on.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
In response to H.B's post...
I do have a big ol' set of control templates that I'm currently using to style my menu. So if I want to specify a different control template for each of my top level headers I'm going to have to have an entirely new set of control templates for each one?
I'm unsure of the exact syntax to use, especially for the x:Key and TargetType attributes.
For example. My current code looks like this for my TopLevelHeader and SubmenuHeader control templates. (Copied from the 'menutemplatingpage' you reference')
<!-- TopLevelHeader (children)-->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="MenuItem">
<Border Name="Border">
<Grid>
<ContentPresenter Margin="0 24 0 14" ContentSource="Header" RecognizesAccessKey="True" />
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border
Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1" >
<StackPanel
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="false">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter TargetName="Border" Property="Background" Value="Transparent"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="Border" Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="#fff"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter TargetName="Border" Property="Background" Value="Transparent"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="Border" Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
<Setter TargetName="SubmenuBorder" Property="Padding" Value="10"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- SubmenuHeader -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
<ColumnDefinition Width="13"/>
</Grid.ColumnDefinitions>
<ContentPresenter
Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon"/>
<ContentPresenter
Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True"/>
<TextBlock x:Name="InputGestureText"
Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="5,2,2,2"
DockPanel.Dock="Right"/>
<Path
Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 0 7 L 4 3.5 Z"
Fill="{StaticResource GlyphBrush}" />
<Popup
Name="Popup"
Placement="Right"
HorizontalOffset="-4"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border
Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1" >
<StackPanel
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
So if I add my new Control template with the key of "HomeButtonTemplate" as shown near the top of my post I'm going to have to add a new section (as well as all the other ControlTemplates for things like SubmenuItem etc.
How do these new ControlTemplates know that they belong to the same group of control templates? I feel I'm not asking this correctly.
Thanks for any advice you can give.
You completely remove the existing template (which is fairly complex) by specifying your own, your template no longer provides the necessary functionality. There is a part in the control template indentified with the name PART_Popup, which is used to display sub-items.
Check this page for a link (Default WPF themes) where you can download the default styles which include the templates to see what your template should look like.
Also have a look at the menu templating page which should give you an idea just how complex templating the menu is.
This might be a bit late but I recently had the same issue.
What worked for me was to create a StackPanel like so
<StackPanel ClipToBounds="True"
Orientation="Horizontal"
IsItemsHost="True" />
inside the Border which is inside the ControlTemplate.
Leaving you with something along the lines of this.
<ControlTemplate TargetType="Menu">
<Border Background="{TemplateBinding Background}"
BorderBrush="#252525"
BorderThickness="1"
CornerRadius="5">
<StackPanel ClipToBounds="True"
Orientation="Horizontal"
IsItemsHost="True" />
</Border>
</ControlTemplate>
If I add a submenu to a menu item, then the submenu is not being styled properly. One can only style the menuitem at this point, and not the actual sub menu. Hence one can't replace the IsMouseOver styling which then just defaults to whatever theme is enabled on windows.
How can one style the submenu?
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Background" Value="#0f3c5a"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
<Style.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" Value="Black"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="LightGray"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type ContextMenu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<!--Here is where you change the border thickness to zero on the menu-->
<Border BorderThickness="0" x:Name="Border" >
<StackPanel ClipToBounds="True" Orientation="Vertical"
IsItemsHost="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="#5082a4" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and then something like this for the menu
<ContextMenu Closed="ContextMenu_Closed" >
<MenuItem Command="k:Window1.NewCommand" >
<MenuItem Command="k:Window1.DeleteCommand"/>
</MenuItem>
...
Everything on the NewCommand layer is styled properly, going inside NewCommand to view DeleteCommand the MenuItem itself is styled properly, but the actual menu is defaulting to the Windows theme styling and I see no way over overwriting that so far. The most important part is to get the IsMouseOver of submenu's to maintain the same look and feel as the main menu structure.
As promised, here's the code. Thanks for your help Jay, lead me in the right direction to finally find an answer on MSDN http://msdn.microsoft.com/en-us/library/ms752296.aspx MenuItem and ContextMenu control the styling for the base menu, and the other two are for the submenu items. Jay's way may have worked, but I couldn't get it to unfortunately. This works perfectly though, and probably allows for much more control over the submenus styling.
<UserControl.Resources>
<!-- Separator -->
<Style TargetType="{x:Type Separator}"
x:Key="SeparatorStyle">
<Setter Property="Height"
Value="1" />
<Setter Property="Background"
Value="#0f3c5a" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Separator}">
<Rectangle Height="{TemplateBinding Height}"
Fill="White" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Outer menu items-->
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Background"
Value="#0f3c5a"></Setter>
<Setter Property="Foreground"
Value="White"></Setter>
<Style.Triggers>
<Trigger Property="IsHighlighted"
Value="True">
<Setter Property="Background"
Value="Black"></Setter>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Foreground"
Value="LightGray"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- Outer menu -->
<Style TargetType="{x:Type ContextMenu}">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<!--Here is where you change the border thickness to zero on the menu-->
<Border BorderThickness="0"
x:Name="Border"
Background="Transparent">
<StackPanel ClipToBounds="True"
Orientation="Vertical"
IsItemsHost="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="#0f3c5a" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- SubmenuItem -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}"
TargetType="{x:Type MenuItem}">
<Border Name="Border">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Icon" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"
SharedSizeGroup="Shortcut" />
<ColumnDefinition Width="13" />
</Grid.ColumnDefinitions>
<ContentPresenter Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon" />
<Border Name="Check"
Width="13"
Height="13"
Visibility="Collapsed"
Margin="6,0,6,0"
Background="#0f3c5a"
BorderThickness="1"
BorderBrush="#5082a4">
<Path Name="CheckMark"
Width="7"
Height="7"
Visibility="Hidden"
SnapsToDevicePixels="False"
Stroke="#5082a4"
StrokeThickness="2"
Data="M 0 0 L 7 7 M 0 7 L 7 0" />
</Border>
<ContentPresenter Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True" />
<TextBlock x:Name="InputGestureText"
Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="5,2,0,2"
DockPanel.Dock="Right" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon"
Value="{x:Null}">
<Setter TargetName="Icon"
Property="Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="IsChecked"
Value="true">
<Setter TargetName="CheckMark"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="IsCheckable"
Value="true">
<Setter TargetName="Check"
Property="Visibility"
Value="Visible" />
<Setter TargetName="Icon"
Property="Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="IsHighlighted"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="#5082a4" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="#0f3c5a" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- SubmenuHeader -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}"
TargetType="{x:Type MenuItem}">
<Border Name="Border">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Icon" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"
SharedSizeGroup="Shortcut" />
<ColumnDefinition Width="13" />
</Grid.ColumnDefinitions>
<ContentPresenter Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon" />
<ContentPresenter Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True" />
<TextBlock x:Name="InputGestureText"
Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="5,2,2,2"
DockPanel.Dock="Right" />
<Path Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 0 7 L 4 3.5 Z"
Fill="#0f3c5a" />
<Popup Name="Popup"
Placement="Right"
HorizontalOffset="-4"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="#0f3c5a"
BorderBrush="#0f3c5a"
BorderThickness="1">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon"
Value="{x:Null}">
<Setter TargetName="Icon"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="IsHighlighted"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="#5082a4" />
</Trigger>
<Trigger SourceName="Popup"
Property="Popup.AllowsTransparency"
Value="True">
<Setter TargetName="SubmenuBorder"
Property="CornerRadius"
Value="4" />
<Setter TargetName="SubmenuBorder"
Property="Padding"
Value="0,3,0,3" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="#0f3c5a" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
How are you applying your styles?
Typically, if you define as style in a "high" or "outer" element's Resources, and give it no key, it will apply to all items of the target type below.
Are you doing this and seeing unexpected behaviour, or are you attempting to define/apply styles in-line at each level?
edit 1
Looking at your XAML, I think the issue is that you are styling ContextMenu, but menus below that are of type Menu. The first thing I'd try is to just change the TargetType attribute for the Style to Menu. See if that gets applied at all levels. If not, I'd change it back and add another Style targeting Menu and see if that one gets applied to the submenu.
edit 2
Okay, I think I've got your answer. The submenu is actually a MenuItem, which is obvious when looking at the XAML instead of the result. The template and styling that you're setting on the ContextMenu must also be set on any MenuItem that is a submenu. I tried it out and created a style that targets MenuItem with a control template and trigger for IsMouseOver and it appeared to do what you're trying.
To not duplicate the templates, you're better off creating one with both PART_Popup and arrow for the submenu, but hide the error until you're triggered with Role being SubmenuHeader.