How to set the mouse over trigger in custom MenuItem Control of WPF?
我有一个MenuItem样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource {x:Type MenuItem}}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type MenuItem}"> <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Height="22" SnapsToDevicePixels="true"> <Grid Margin="-1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="4"/> <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/> </Grid.ColumnDefinitions> <ContentPresenter x:Name="menuHeaderContainer" Grid.Column="0" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/> <TextBlock x:Name="menuGestureText" Grid.Column="2" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsHighlighted" Value="True"> <Setter Property="Background" TargetName="templateRoot" Value="Black"/> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsHighlighted" Value="True"/> <Condition Property="IsEnabled" Value="False"/> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="templateRoot" Value="Red"/> <Setter Property="BorderBrush" TargetName="templateRoot" Value="Black"/> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> |
我的控制权是:
1 2 3 4 5 6 | <Grid> <Menu VerticalAlignment="Center" HorizontalAlignment="Center"> <MenuItem Header="Header"> <MenuItem Header="Second Level"/> </MenuItem> </Menu> |
当菜单项上的鼠标悬停时,我愿意设置新的样式,背景将变为黑色。我的样式有效,但仅适用于第二级菜单项。
将鼠标悬停在第一级菜单项上时,它仍是默认样式:
将鼠标悬停在第二级菜单项上时,我的样式有效(将鼠标悬停在其上时,它将变为黑色):
为什么我的样式不能在一级菜单项上使用?
顶级菜单项和子菜单项的控制模板是不同的。顶层MenuItem还需要定义子菜单项将如何弹出。
您可以为每种菜单项类型编写多个ControlTemplate。然后使用以下样式设置MenuItem样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <Style x:Key="{x:Type MenuItem}" TargetType="MenuItem"> <Setter Property="OverridesDefaultStyle" Value="True"/> <Style.Triggers> <Trigger Property="Role" Value="TopLevelHeader"> <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}"/> <Setter Property="Grid.IsSharedSizeScope" Value="true"/> </Trigger> <Trigger Property="Role" Value="TopLevelItem"> <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}"/> </Trigger> <Trigger Property="Role" Value="SubmenuHeader"> <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}"/> </Trigger> <Trigger Property="Role" Value="SubmenuItem"> <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}"/> </Trigger> </Style.Triggers> </Style> |
有关更多详细信息,请参见此帖子