悬停menuitem时更改背景颜但无法在wpf中显示子菜单(Change background color when hover menuitem but can't show submenu in wpf)

悬停menuitem时更改背景颜但无法在wpf中显示子菜单(Change background color when hover menuitem but can't show submenu in wpf)

我在wpf中的menuitem遇到了一些麻烦。 当我悬停它时，我想要更改背景颜菜单项。 我做到了。 但问题是我在menuitem中的子菜单无法显示。 如果可以请，请告诉我原因并解决。 谢谢，我的代码

我的样式代码：

<Style x:Key="BaseStyle" TargetType="MenuItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type MenuItem}"> <Border x:ame="Bd" Padding="17,0,17,0" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True"> <ContentPresenter x:ame="ContentPresenter" Content="{TemplateBinding Header}" Grid.Column="1" ContentSource="Header" RecognizesAccessKey="True" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsHighlighted" Value="True"> <Setter Property="Background" Targetame="Bd" Value="Yellow" /> <Setter Property="BorderBrush" Targetame="Bd" Value="#FF26A0DA" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

这是Menuitem：

<MenuItem ame="menu_file" Header="File" Height="0" Style="{StaticResource BaseStyle}"> <MenuItem Foreground="Black" Header="ew Connection" HorizontalAlignment="Left" Width="178" Click="Connection_Click" Margin="0,0,-8,0" /> <MenuItem Foreground="Black" Header="Save" HorizontalAlignment="Left" Width="140" /> <MenuItem Foreground="Black" Header="Print" HorizontalAlignment="Left" Width="140" /> <MenuItem Foreground="Black" Header="Export" HorizontalAlignment="Left" Width="140" /> <Separator Foreground="Black" HorizontalAlignment="Left" Height="1" Width="140" /> <MenuItem Foreground="Black" Header="Assesment" HorizontalAlignment="Left" Width="140" Height="25" Click="Assesment_Click" /> </MenuItem>

I'm have some trouble with menuitem in wpf . I want background color menu item change when i hover it . I was did it . But problem is my submenu in menuitem can't show . Please tell me why and fix it if you can please . Thanks Here my code

My style code :

<Style x:Key="BaseStyle" TargetType="MenuItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type MenuItem}"> <Border x:ame="Bd" Padding="17,0,17,0" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True"> <ContentPresenter x:ame="ContentPresenter" Content="{TemplateBinding Header}" Grid.Column="1" ContentSource="Header" RecognizesAccessKey="True" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsHighlighted" Value="True"> <Setter Property="Background" Targetame="Bd" Value="Yellow" /> <Setter Property="BorderBrush" Targetame="Bd" Value="#FF26A0DA" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

And here is Menuitem :

<MenuItem ame="menu_file" Header="File" Height="0" Style="{StaticResource BaseStyle}"> <MenuItem Foreground="Black" Header="ew Connection" HorizontalAlignment="Left" Width="178" Click="Connection_Click" Margin="0,0,-8,0" /> <MenuItem Foreground="Black" Header="Save" HorizontalAlignment="Left" Width="140" /> <MenuItem Foreground="Black" Header="Print" HorizontalAlignment="Left" Width="140" /> <MenuItem Foreground="Black" Header="Export" HorizontalAlignment="Left" Width="140" /> <Separator Foreground="Black" HorizontalAlignment="Left" Height="1" Width="140" /> <MenuItem Foreground="Black" Header="Assesment" HorizontalAlignment="Left" Width="140" Height="25" Click="Assesment_Click" /> </MenuItem>

最满意答案

MenuItem有个单独的Template ，每个Role一个： TopLevelHeader ， TopLevelItem ， SubmenuHeader 。 所以你需要自定义你想要的特定的。 在你的情况下，这将是TopLevelHeader 。

模板：

<ControlTemplate x:Key="MenuItemControlTemplate2" TargetType="{x:Type MenuItem}"> <Border x:ame="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <Grid VerticalAlignment="Center"> <Grid.ColumnDefiniti> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefiniti> <ContentPresenter x:ame="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/> <Path x:ame="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.,.5 4.,6.1 8.,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="" Visibility="Collapsed" VerticalAlignment="Center"/> <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> <Popup x:ame="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom"> <Border x:ame="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2"> <ScrollViewer x:ame="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> <Grid RenderOpti.ClearTypeHint="Enabled"> <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> <Rectangle x:ame="OpaqueRect" Fill="{Binding Background, Elementame=SubMenuBorder}" Height="{Binding ActualHeight, Elementame=SubMenuBorder}" Width="{Binding ActualWidth, Elementame=SubMenuBorder}"/> </Canvas> <Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/> <ItemsPresenter x:ame="ItemsPresenter" Keyboardavigation.Directionalavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Keyboardavigation.Tabavigation="Cycle"/> </Grid> </ScrollViewer> </Border> </Popup> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSuspendingPopupAnimation" Value="True"> <Setter Property="PopupAnimation" Targetame="PART_Popup" Value="one"/> </Trigger> <Trigger Property="Icon" Value="{x:ull}"> <Setter Property="Visibility" Targetame="Icon" Value="Collapsed"/> </Trigger> <Trigger Property="IsChecked" Value="True"> <Setter Property="Visibility" Targetame="GlyphPanel" Value="Visible"/> <Setter Property="Visibility" Targetame="Icon" Value="Collapsed"/> </Trigger> <Trigger Property="IsHighlighted" Value="True"> <Setter Property="Background" Targetame="templateRoot" Value="Yellow"/> <Setter Property="BorderBrush" Targetame="templateRoot" Value="Red"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="TextElement.Foreground" Targetame="templateRoot" Value="#FF707070"/> <Setter Property="Fill" Targetame="GlyphPanel" Value="#FF707070"/> </Trigger> <Trigger Property="CanContentScroll" Sourceame="SubMenuScrollViewer" Value="False"> <Setter Property="Canvas.Top" Targetame="OpaqueRect" Value="{Binding VerticalOffset, Elementame=SubMenuScrollViewer}"/> <Setter Property="Canvas.Left" Targetame="OpaqueRect" Value="{Binding HorizontalOffset, Elementame=SubMenuScrollViewer}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate>

然后应用您的自定义模板：

XAML：

<MenuItem ame="menu_file" Header="File" Width="150" Template="{DynamicResource MenuItemControlTemplate2}"> <MenuItem Foreground="Black" Header="ew Connection" HorizontalAlignment="Left" Width="178" Margin="0,0,-8,0" /> <MenuItem Foreground="Black" Header="Save" HorizontalAlignment="Left" Width="140" /> <MenuItem Foreground="Black" Header="Print" HorizontalAlignment="Left" Width="140" /> <MenuItem Foreground="Black" Header="Export" HorizontalAlignment="Left" Width="140" /> <Separator Foreground="Black" HorizontalAlignment="Left" Height="1" Width="140" /> <MenuItem Foreground="Black" Header="Assesment" HorizontalAlignment="Left" Width="140" Height="25"/> </MenuItem>

MenuItem has separate Template, one for each Role: TopLevelHeader, TopLevelItem, SubmenuHeader. So you need to customize the particular one you want. In your case that would be the TopLevelHeader.

Template:

<ControlTemplate x:Key="MenuItemControlTemplate2" TargetType="{x:Type MenuItem}"> <Border x:ame="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <Grid VerticalAlignment="Center"> <Grid.ColumnDefiniti> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefiniti> <ContentPresenter x:ame="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/> <Path x:ame="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.,.5 4.,6.1 8.,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="" Visibility="Collapsed" VerticalAlignment="Center"/> <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> <Popup x:ame="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom"> <Border x:ame="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2"> <ScrollViewer x:ame="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> <Grid RenderOpti.ClearTypeHint="Enabled"> <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> <Rectangle x:ame="OpaqueRect" Fill="{Binding Background, Elementame=SubMenuBorder}" Height="{Binding ActualHeight, Elementame=SubMenuBorder}" Width="{Binding ActualWidth, Elementame=SubMenuBorder}"/> </Canvas> <Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/> <ItemsPresenter x:ame="ItemsPresenter" Keyboardavigation.Directionalavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Keyboardavigation.Tabavigation="Cycle"/> </Grid> </ScrollViewer> </Border> </Popup> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSuspendingPopupAnimation" Value="True"> <Setter Property="PopupAnimation" Targetame="PART_Popup" Value="one"/> </Trigger> <Trigger Property="Icon" Value="{x:ull}"> <Setter Property="Visibility" Targetame="Icon" Value="Collapsed"/> </Trigger> <Trigger Property="IsChecked" Value="True"> <Setter Property="Visibility" Targetame="GlyphPanel" Value="Visible"/> <Setter Property="Visibility" Targetame="Icon" Value="Collapsed"/> </Trigger> <Trigger Property="IsHighlighted" Value="True"> <Setter Property="Background" Targetame="templateRoot" Value="Yellow"/> <Setter Property="BorderBrush" Targetame="templateRoot" Value="Red"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="TextElement.Foreground" Targetame="templateRoot" Value="#FF707070"/> <Setter Property="Fill" Targetame="GlyphPanel" Value="#FF707070"/> </Trigger> <Trigger Property="CanContentScroll" Sourceame="SubMenuScrollViewer" Value="False"> <Setter Property="Canvas.Top" Targetame="OpaqueRect" Value="{Binding VerticalOffset, Elementame=SubMenuScrollViewer}"/> <Setter Property="Canvas.Left" Targetame="OpaqueRect" Value="{Binding HorizontalOffset, Elementame=SubMenuScrollViewer}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate>

And then apply your custom template:

XAML:

<MenuItem ame="menu_file" Header="File" Width="150" Template="{DynamicResource MenuItemControlTemplate2}"> <MenuItem Foreground="Black" Header="ew Connection" HorizontalAlignment="Left" Width="178" Margin="0,0,-8,0" /> <MenuItem Foreground="Black" Header="Save" HorizontalAlignment="Left" Width="140" /> <MenuItem Foreground="Black" Header="Print" HorizontalAlignment="Left" Width="140" /> <MenuItem Foreground="Black" Header="Export" HorizontalAlignment="Left" Width="140" /> <Separator Foreground="Black" HorizontalAlignment="Left" Height="1" Width="140" /> <MenuItem Foreground="Black" Header="Assesment" HorizontalAlignment="Left" Width="140" Height="25"/> </MenuItem>