更改菜單項目外觀

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.I編輯樣式模板，這將根據您的需要指向正確的direction.change這個模板。

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>