wpf 更改菜单项外观

Change the menuItems look

提问by Khushi

Currently I have a menu which looks like the image below.

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

I want to get rid of the white bounding box so that it looks like the image below.

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

When I mouseOver any Item in the menu it looks like :

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

But when I mouseOver the any sub-Item it looks like Item Delete in first image. I want it look like menuItem Masters in the third image.

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

For menuItem and its subItems I am using same style. The XAML is :

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

Edit :

编辑 ：

At Design Time.

在设计时。

At Runtime :

在运行时：

回答by Ravuthasamy

Hi you need to edit template of MenuItem.I edited style of MenuItem and this will point to right direction.change this Template based on your requirement.

嗨，您需要编辑 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>

回答by Ravuthasamy

The above Template working fine for me when setting Image like(see my xaml),How you are setting Menu Icon ?

上面的模板在设置图像时对我来说很好用（见我的 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>