I'm trying to create a control panel for a video camera, the panel has buttons for up, down, left and right etc. Each camera function up, down, left and right is represented by three images (see code below) for the left side, middle and right side. The control panel is circular so the corner images kind of overlap (its complicated to explain this without a visual). When I click on up for example I have to hide the initial three images (leftside, middle and right side) and display another three images for left , middle and right that indicate that the button is pressed. I am achieving this by having a grid inside a button template. The problem I have is that for the corner images for the control there are really four images that represent this. For example for the top left corner the four images would be represent 1. Top not clicked. 2. Top Clicked and 3. Left Not clicked and 4. Left Clicked. My problem is if I need to make the images contained within the Top button have precedence when the top control is clicked or the images in the left button have precedence when the left button is clicked. So it's like I want to modify the left button's image visible property when the top button is clicked and vise versa. This is really difficult to explain so I apologize if it makes little sense but I can email the source code on request if anyone is interested in my predicament.
<Grid>
<Canvas>
<!--<StackPanel>-->
<Button Name="TopSide" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="34" Width="102"
Canvas.Left="97" Canvas.Top="60" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="100">
<Canvas>
<Image Name="TopRightNormal" Source="Resources/topright_off.jpg" Height="34" Width="34" Canvas.Left="66"></Image>
<Image Name="TopRightDown" Source="Resources/topright_down.jpg" Height="34" Width="34" Canvas.Left="66" Visibility="Hidden" ></Image>
<Image Name="TopNormal" Source="Resources/topcenter_off.jpg" Height="34" Width="34" Canvas.Left="34" />
<Image Name="TopPressed" Source="Resources/topcenter_down.jpg" Height="34" Width="34" Canvas.Left="34" Visibility="Hidden" />
<Image Name="TopDisabled" Source="Resources/topcenter_off.jpg" Height="34" Width="34" Canvas.Left="34" Visibility="Hidden" />
<Image Name="TopLeftNormal" Source="Resources/topleft_off.jpg" Height="34" Width="34" Canvas.Left="2" ></Image>
<Image Name="TopLeftDown" Opacity="0" Source="Resources/topleft_down.jpg" Height="34" Width="34" Canvas.Left="2" Visibility="Hidden" ></Image>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="TopNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopPressed" Property="Visibility" Value="Visible" />
<Setter TargetName="TopRightNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopRightDown" Property="Visibility" Value="Visible" />
<Setter TargetName="TopLeftNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopLeftDown" Property="Visibility" Value="Visible" />
<Setter TargetName="TopLeftDown" Property="Opacity" Value="100" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="TopNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopDisabled" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<!--</StackPanel>-->
<!--<StackPanel>-->
<Button Name="LeftSide" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Canvas.Left="100" Canvas.Top="60" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseDown="Button_MouseDown_1">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="34" Height="100">
<Canvas>
<Image Name="TopLeftNormal" Source="Resources/topleft_off.jpg" Height="34" Width="34" Canvas.Left="0"></Image>
<Image Name="TopLeftDown" Opacity="0" Source="Resources/topleft_leftdown.jpg" Height="34" Width="34" Canvas.Left="0" Visibility="Hidden" ></Image>
<Image Name="Normal" Source="Resources/leftcenter_off.jpg" Height="34" Width="34" Canvas.Top="32" Canvas.Left="0"/>
<Image Name="Pressed" Source="Resources/leftcenter_down.jpg" Visibility="Hidden" Canvas.Top="32" Height="34" Width="34" />
<Image Name="Disabled" Source="Resources/leftcenter_off.jpg" Visibility="Hidden" Height="34" Width="34" Canvas.Top="32" />
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Pressed" Property="Visibility" Value="Visible" />
<Setter TargetName="TopLeftNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopLeftNormal" Property="Opacity" Value="0" />
<Setter TargetName="TopLeftDown" Property="Visibility" Value="Visible" />
<Setter TargetName="TopLeftDown" Property="Opacity" Value="100" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Disabled" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<!--</StackPanel>-->
<!--<StackPanel>-->
<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="34" Width="34"
Canvas.Left="165" Canvas.Top="92" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseDown="Button_MouseDown_2" >
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="Normal" Source="Resources/rightcenter_off.jpg" />
<Image Name="Pressed" Source="Resources/rightcenter_down.jpg" Visibility="Hidden" />
<Image Name="Disabled" Source="Resources/rightcenter_off.jpg" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Pressed" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Disabled" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<!--</StackPanel>-->
<!--<StackPanel>-->
<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="34" Width="34"
Canvas.Left="133" Canvas.Top="124" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="BottomNormal" Source="Resources/bottomcenter_off.jpg" />
<Image Name="BottomPressed" Source="Resources/bottomcenter_down.jpg" Visibility="Hidden" />
<Image Name="BottomDisabled" Source="Resources/bottomcenter_off.jpg" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BottomNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="BottomPressed" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="BottomNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="BottomDisabled" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<!--</StackPanel>-->
<Image Source="Resources/bottomright_off.jpg" Height="34" Width="34" Canvas.Left="165" Canvas.Top="124"></Image>
<Image Source="Resources/bottomleft_off.jpg" Height="34" Width="34" Canvas.Left="100" Canvas.Top="124"></Image>
<!--<ToggleButton Style="{StaticResource MyToggleButtonStyle}" Height="34" Width="34" Margin="150,100"/>-->
</Canvas>
</Grid>
Ok I found a way to access the images inside the Button.Template of the button whose child controls I wanted to hide. I used
Image imgTopLeftNormal = LeftSide.Template.FindName("TopLeftNormal", LeftSide) as Image;
in the code behind.
Related
I am using Button's content(not background) as image and want to set another image on mouse over. I am trying to set the content as below but fails.
<Button x:Name="Test" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="40,40,0,0" Height="120" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0" Click="Test_Click">
<Button.Content>
<Image Source="Images/Test.png"></Image>
</Button.Content>
<Button.Style>
<Style>
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Button.Content" Value=" <Image Source='Images/TestHover.png'></Image> " />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
It"s easy ! check IsMouseover event for Image not for button. Plus check this for different ways to change Image on MouseOver event.
<Button Name="testBtn" Margin="10 0 0 0" Click="TestBtn_OnClick">
<Button.Content>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="Resources/Apps-Dialog-Close-icon.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="Resources/basic-grid-with-center-lines-png-14.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button.Content>
</Button>
Can you try control template
<Button Width="100" Height="100">
<Button.Template>
<ControlTemplate>
<Image Name="image" Source="pack://application:,,,/images/1.png"/>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Setter Property="Source" TargetName="image" Value="pack://application:,,,/images/2.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
I have a Menu Item that won't change its background when I put my mouse over it.
<ControlTemplate x:Key="DropItemStyle" TargetType="MenuItem">
<DockPanel HorizontalAlignment="Left" Background="#FF101315" Height="40" Width="250" Margin="-1,-1,0,0">
<Image Source="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}" Height="15" Width="15" Margin="12,0" VerticalAlignment="Center" />
<Label Content="{TemplateBinding Header}" FontFamily="Segoe UI Semibold" FontSize="14" Foreground="White" VerticalAlignment="Center" Margin="-12,-1,0,0" />
<Image Source="Images/icon_right.png" Visibility="{Binding HasItems, Converter={StaticResource btv}, RelativeSource={RelativeSource TemplatedParent}}" />
<DockPanel.Style>
<Style TargetType="DockPanel">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF1A1D1F" />
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
</DockPanel>
</ControlTemplate>
<MenuItem Header="Logout" Template="{StaticResource DropItemStyle}" Icon="Images/logoutIcon.png" Click="logoutButtonClick" />
Please edit this if there is any mistakes
Setting Background="#FF101315" on the DockPanel has a greater priority than the trigger's setter. Move it to the Style instead:
<DockPanel HorizontalAlignment="Left" Height="40" Width="250" Margin="-1,-1,0,0">
<!-- Skipped for readability -->
<Style TargetType="DockPanel">
<Setter Property="Background" Value="#FF101315"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF1A1D1F" />
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
I have WPF application with simple Menu:
<Menu Name="menuColor" Margin="0,5,0,0">
<MenuItem Name="menuItemHeader" Header="Color" Style="{StaticResource MenuItemHeaderDefaultStyle}">
<MenuItem.Icon>
<Image Name="ButtonImageColor" Source="pack://application:,,,/Resources/update_black.ico" Height="12" Width="12"/>
</MenuItem.Icon>
<MenuItem Name="miBlue" Header="Blue" Click="miBlue_Click" Background="Transparent" Style="{StaticResource MenuItemDefaultStyle}">
<MenuItem.Icon>
<Image Name="miBlueImage" Source="pack://application:,,,/Resources/ok_mark2.png" Height="12" Width="12"/>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
So in my title bar i have this Color text and after its clicked i have the option Blue.
So instead of this Color text i want to add icon and currently i cannot see my icon.
I also try to remove the Header="Color" but still i cannot see my icon.
Update:
This is the Style i am using in my MenuItem:
<Style x:Key="MenuItemHeaderDefaultStyle" TargetType="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border" BorderThickness="1">
<Grid Background="{DynamicResource AppBackground}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition x:Name="Col3" />
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost"
RecognizesAccessKey="True"
ContentSource="Header"/>
<!-- Content for the menu IGT -->
<ContentPresenter Grid.Column="2"
Margin="8,1,8,1"
x:Name="IGTHost"
ContentSource="InputGestureText"
VerticalAlignment="Center"/>
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3"
Margin="4,0,6,0"
x:Name="ArrowPanel"
VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Fill="{TemplateBinding Foreground}"
Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
<Border x:Name="SubMenuBorder"
Background="White"
BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"
BorderThickness="0"
Padding="0"
Width="80">
<Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
<!-- StackPanel holds children of the menu. This is set by IsItemsHost=True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Grid>
</Border>
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
<Setter Property="MinWidth" Value="2" TargetName="Col0"/>
<Setter Property="Width" Value="Auto" TargetName="Col3"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="Transparent" TargetName="Border"/>
<Setter Property="Foreground" Value="{DynamicResource HighlightedText}"/>
<Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="false">
<Setter Property="Background" Value="{DynamicResource AppBackground}" TargetName="Border"/>
<Setter Property="Foreground" Value="{DynamicResource SolidMenuFontBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AppBackground}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="Gainsboro"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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>
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.