WPF ContextMenu Submenu Style - wpf

Question

How does one set the style of a sub-menu under a ContextMenu?
Here is the code for ContextMenu:
<ListView.ContextMenu>
<fw:AcrylicContextMenu Style="{StaticResource NowPlayingContextMenuStyle}" ItemContainerStyle="{StaticResource NowPlayingContextMenuItemStyle}">
<MenuItem>
<MenuItem.Header>
<TextBlock Text="Play" Style="{StaticResource NowPlayingContextMenuItemHeader}" />
</MenuItem.Header>
<MenuItem.Icon>
<materialDesign:PackIcon Kind="Play" />
</MenuItem.Icon>
</MenuItem>
<!-- ... -->
<MenuItem>
<MenuItem.Header>
<TextBlock Text="Sort" Style="{StaticResource NowPlayingContextMenuItemHeader}" />
</MenuItem.Header>
<MenuItem.Icon>
<materialDesign:PackIcon Kind="Sort" />
</MenuItem.Icon>
<!--#region SubMenu Sort-->
<MenuItem>
<MenuItem.Header>
<TextBlock Text="Ascending" Style="{StaticResource NowPlayingContextMenuItemHeader}" />
</MenuItem.Header>
<MenuItem.Icon>
<materialDesign:PackIcon Kind="SortAscending" />
</MenuItem.Icon>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<TextBlock Text="Descending" Style="{StaticResource NowPlayingContextMenuItemHeader}" />
</MenuItem.Header>
<MenuItem.Icon>
<materialDesign:PackIcon Kind="SortDescending" />
</MenuItem.Icon>
</MenuItem>
<!--#endregion SubMenu Sort-->
</MenuItem>
</fw:AcrylicContextMenu>
</ListView.ContextMenu>
The styles have been defined in this way:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:V_Player.Resources.Styles"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">
<Style x:Key="NowPlayingListViewItemStyle" BasedOn="{StaticResource MaterialDesignListBoxItem}" TargetType="ListViewItem">
<Setter Property="Height" Value="32" />
<Setter Property="Padding" Value="8,8,8,8" />
</Style>
<Style x:Key="NowPlayingContextMenuStyle" BasedOn="{StaticResource MaterialDesignMenu}" TargetType="ContextMenu">
<Setter Property="Foreground" Value="White" />
<Setter Property="Opacity" Value="0.7" />
<Setter Property="FontSize" Value="14" />
<Setter Property="MinWidth" Value="128" />
</Style>
<Style x:Key="NowPlayingContextMenuItemStyle" BasedOn="{StaticResource MaterialDesignMenuItem}" TargetType="MenuItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="8, 0, 8, 0" />
</Style>
<Style x:Key="NowPlayingContextMenuSeparatorStyle" BasedOn="{StaticResource MaterialDesignSeparator}" TargetType="Separator">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Height" Value="1" />
</Style>
<Style x:Key="NowPlayingContextMenuItemHeader" BasedOn="{StaticResource MaterialDesignTextBlock}" TargetType="TextBlock">
<Setter Property="Margin" Value="-12, 0, 0, 0" />
</Style>
</ResourceDictionary>
And results are not quite right... For sub menus of course.
Menu background is Acrylic and transparent, but sub menu no, it is gray and has material design style.
What can i do for fix it?

Answer 1

This style work for me:
<!-- Separator -->
<Style x:Key="SeparatorStyle" TargetType="{x:Type Separator}">
<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="{StaticResource ToolBarBackground}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5"/>
<Style.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" Value="Black" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<!-- Outer menu -->
<Style TargetType="{x:Type ContextMenu}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Grid.IsSharedSizeScope" Value="true" />
<Setter Property="HasDropShadow" 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
x:Name="Border"
BorderThickness="0">
<StackPanel
ClipToBounds="True"
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle"
Orientation="Vertical" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="true">
<Setter TargetName="Border" Property="Padding" Value="0,3,0,3" />
<Setter TargetName="Border" Property="CornerRadius" Value="4" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource ToolBarBackground}" />
</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"
Margin="6,0,6,0"
Background="{StaticResource ToolBarBackground}"
BorderBrush="#5082a4"
BorderThickness="1"
Visibility="Collapsed">
<Path
Name="CheckMark"
Width="7"
Height="7"
Data="M 0 0 L 7 7 M 0 7 L 7 0"
SnapsToDevicePixels="False"
Stroke="#5082a4"
StrokeThickness="2"
Visibility="Hidden" />
</Border>
<ContentPresenter
Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True" />
<TextBlock
x:Name="InputGestureText"
Grid.Column="2"
Margin="5,2,0,2"
DockPanel.Dock="Right"
Text="{TemplateBinding InputGestureText}" />
</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"
Margin="5,2,2,2"
DockPanel.Dock="Right"
Text="{TemplateBinding InputGestureText}" />
<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"
AllowsTransparency="True"
Focusable="False"
HorizontalOffset="-4"
IsOpen="{TemplateBinding IsSubmenuOpen}"
Placement="Right"
PopupAnimation="Fade">
<Border
Name="SubmenuBorder"
Background="{StaticResource ToolBarBackground}"
BorderBrush="{StaticResource ToolBarBackground}"
BorderThickness="1"
SnapsToDevicePixels="True">
<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>