如何在WPF的自定义MenuItem控件中将鼠标悬停在触发器上？

Question

I have a MenuItem style:

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

My Control is:

<Grid>
<Menu VerticalAlignment="Center" HorizontalAlignment="Center">
    <MenuItem Header="Header">
        <MenuItem Header="Second Level"/>
    </MenuItem>
</Menu>

I am willing to set a new style when mouse over the menuitem, the background will be black. My style works but only the second level menuitem.

When mouse over the first level menuitem, it still the default style:

When mouse over the second level menuitem, my style works(it will be black when mouse over it):

Why my style can not work at first level MenuItem?

Answer 1

Control Template for Top Level MenuItem and Sub-MenuItems are different. Top level MenuItem also needs to define how the SubMenu Items will Popup.

You can write multiple ControlTemplate for each type of Menu Item. And then use following Style to Set the MenuItem styles:

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

For more detail see this post