WPF 上下文菜单子菜单样式

Question

如何设置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>

样式是这样定义的：

<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>

而且结果不太正确...当然是对于子菜单。

菜单背景是亚克力透明，子菜单没有，是灰色的，有material设计风格。

我该怎么做才能修复它？

Answer 1

这种风格适合我：

    <!--  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>

WPF 上下文菜单子菜单样式

WPF ContextMenu Submenu Style

wpf

xaml

contextmenu

material-design

acrylic-material