Wpf 更改菜单项的外观
目前我有一个菜单,看起来像下图 我想去掉白色边界框,使其看起来像下图 当我将鼠标移到菜单中的任何项目上时,它看起来像: 但当我将鼠标移到任何子项上时,它看起来就像第一张图片中的删除项。我希望它看起来像第三张图片中的menuItem Masters 对于menuItem及其子项,我使用相同的样式。XAML是:Wpf 更改菜单项的外观,wpf,xaml,menu,expression-blend,Wpf,Xaml,Menu,Expression Blend,目前我有一个菜单,看起来像下图 我想去掉白色边界框,使其看起来像下图 当我将鼠标移到菜单中的任何项目上时,它看起来像: 但当我将鼠标移到任何子项上时,它看起来就像第一张图片中的删除项。我希望它看起来像第三张图片中的menuItem Masters 对于menuItem及其子项,我使用相同的样式。XAML是: <Window .....> <Window.Resources> <Storyboard x:Key="mnuItems_Mou
<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>
编辑:
在设计时
在运行时:
您好,您需要编辑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>
XAMl
当设置图像时,上面的模板对我来说很好(请参见我的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>
XAML
谢谢。它工作得很好。但我有个小问题。我已使用menuItem.Icon属性将图像添加到menuItem。我可以在设计时看到图标。但在运行时不显示图标。此外,分隔符的背景色始终为白色。