WPF ContextMenu Submenu Style

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>