wpf - 更改 menuItems 外观

Question

目前我有一个如下图所示的菜单。

我想摆脱白色边界框，使其看起来像下图。

当我将鼠标悬停在菜单中的任何项目上时，它看起来像：

但是当我将鼠标悬停在任何子项目上时，它看起来像第一个图像中的项目删除。我希望它看起来像第三张图片中的 menuItem Masters。

对于 menuItem 及其子项，我使用相同的样式。XAML 是：

<Window .....>
    <Window.Resources>
        <Storyboard x:Key="mnuItems_MouseEnter">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" >
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="DeepSkyBlue"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="mnuItems_MouseLeave">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" >
          <EasingColorKeyFrame KeyTime="0:0:0.2" Value="White"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Style x:Key="mnuItems_Style" TargetType="MenuItem">
            <Style.Triggers>
          <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard x:Name="mnuItems_MouseEnter_BeginStoryBoard" Storyboard="{StaticResource mnuItems_MouseEnter}" />
        </EventTrigger.Actions>
          </EventTrigger>
          <EventTrigger RoutedEvent="Mouse.MouseLeave">
        <EventTrigger.Actions>
                  <BeginStoryboard x:Name="mnuItems_MouseLeave_BeginStoryBoard" Storyboard="{StaticResource mnuItems_MouseLeave}" />
        </EventTrigger.Actions>
          </EventTrigger>
      </Style.Triggers>
        </Style>
    </Window.Resources>

    <Grid>
        <Menu x:Name="MainMenu" Height="37" Margin="127,28,188,0" VerticalAlignment="Top" Background="{x:Null}">
            <MenuItem x:Name="mnuCompany" Header="Company" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" />
          <MenuItem x:Name="mnuCreateCompany" Header="Create" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" Background="#FF333333">
          <MenuItem x:Name="mnuEditCompany" Header="Edit" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" Background="#FF333333"/>
          <MenuItem x:Name="mnuDeleteCompany" Header="Delete" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" Background="#FF333333"/>
          <MenuItem x:Name="mnuExit" Header="Exit" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" Background="#FF333333"/>
            </MenuItem>
            <MenuItem x:Name="mnuMasters" Header="Masters" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}"/>
      <MenuItem x:Name="mnuTransactions" Header="Transactions" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}"/>
      <MenuItem x:Name="mnuReports" Header="Reports" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}"/>
      <MenuItem x:Name="mnuSettings" Header="Settings" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}"/>
        </Menu>
    </Grid>
</Window>

编辑 ：

在设计时。

在运行时：

Answer 1

您好，您需要编辑 MenuItem 的模板。我编辑了 MenuItem 的样式，这将指向正确的方向。根据您的要求更改此模板。

XAMl

 <Grid.Resources>
        <Style TargetType="{x:Type MenuItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Grid SnapsToDevicePixels="true">
                            <DockPanel>
                                <ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                                <Path x:Name="GlyphPanel" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center"/>
                                <ContentPresenter x:Name="content" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </DockPanel>
                            <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="1" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1">

                                <Border BorderThickness="2" BorderBrush="White" Background="{TemplateBinding Background}">
                                    <ScrollViewer x:Name="SubMenuScrollViewer" CanContentScroll="true" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                        <Grid RenderOptions.ClearTypeHint="Enabled">                                               
                                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                                        </Grid>
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="TextBlock.Foreground" Value="Blue" TargetName="content"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

Answer 2

上面的模板在设置图像时对我来说很好（参见我的 xaml），你是如何设置菜单图标的？

XAML
 <MenuItem Header="Create">
                <MenuItem.Icon>
                    <Viewbox >
                        <Path Data="M19.833,0L32.5,0 32.5,19.833999 52.334,19.833999 52.334,32.500999 32.5,32.500999 32.5,52.333 19.833,52.333 19.833,32.500999 0,32.500999 0,19.833999 19.833,19.833999z" Stretch="Uniform" Fill="#FFFFFFFF" Width="12" Height="12" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <TransformGroup.Children>
                                        <RotateTransform Angle="180" />
                                        <ScaleTransform ScaleX="-1" ScaleY="-1" />
                                    </TransformGroup.Children>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Viewbox>
                </MenuItem.Icon>
            </MenuItem>