Как установить курсор мыши в пользовательском элементе управления MenuItem WPF?

Question

У меня есть стиль MenuItem:

<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 является:

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

я готов установить новый стиль при наведении курсора мыши над пунктом меню, фон будет черным. Мой стиль работает, но только второй уровень меню.

Когда мышь над первой MenuItem уровня, она по-прежнему стиль по умолчанию:

Когда мыши на втором уровне пункта меню, мои работы в стиле (он будет черным, когда мышь над ним):

Почему мой стиль не может работать на первом уровне MenuItem?

Answer 1

Шаблон управления для верхнего уровня MenuItem и Sub-MenuItems отличаются. Верхний уровень MenuItem также должен определить, как элементы SubMenu будут всплывать.

Вы можете написать несколько элементов ControlTemplate для каждого типа элемента меню. А затем использовать следующий стиль Настройка стилей MENUITEM:

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

Более подробно см этот post