Search code examples
c#wpfwpf-controlswpf-style

How to set the mouse over trigger in custom MenuItem Control of WPF?

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: the first level menuitem

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

Why my style can not work at first level MenuItem?

Solution

  • 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