title: How to change style of MenuItem in WPF
body: <p>I have a style of <code>MenuItem</code> for its TopLevelHeader. It's a default style except for changing background when <code>IsHightLight</code> is <code>True</code>. And the background for top level <code>MenuItem</code> will be Red when I mouse over it and Click it. </p>
  
  <p>How can I change the style so that the background will be Red when mouse over the <code>MenuItem</code> and the background will be Blue when I Click the <code>MenuItem</code>?</p>
  
  <pre><code>        &lt;ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}"&gt;
          &lt;Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"&gt;
              &lt;Grid VerticalAlignment="Center"&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="Auto"/&gt;
                      &lt;ColumnDefinition Width="Auto"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/&gt;
                  &lt;Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/&gt;
                  &lt;ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                  &lt;Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" PlacementTarget="{Binding ElementName=templateRoot}"&gt;
                      &lt;Border x:Name="SubMenuBorder" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" Background="{StaticResource Menu.Static.Background}" Padding="2"&gt;
                          &lt;ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"&gt;
                              &lt;Grid RenderOptions.ClearTypeHint="Enabled"&gt;
                                  &lt;Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"&gt;
                                      &lt;Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/&gt;
                                  &lt;/Canvas&gt;
                                  &lt;Rectangle Fill="{StaticResource Menu.Static.Separator}" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/&gt;
                                  &lt;ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/&gt;
                              &lt;/Grid&gt;
                          &lt;/ScrollViewer&gt;
                      &lt;/Border&gt;
                  &lt;/Popup&gt;
              &lt;/Grid&gt;
          &lt;/Border&gt;
          &lt;ControlTemplate.Triggers&gt;
              &lt;Trigger Property="IsSuspendingPopupAnimation" Value="true"&gt;
                  &lt;Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="Icon" Value="{x:Null}"&gt;
                  &lt;Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsChecked" Value="true"&gt;
                  &lt;Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/&gt;
                  &lt;Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsHighlighted" Value="True"&gt;
                  &lt;Setter Property="Background" TargetName="templateRoot" Value="Red"/&gt;
                  &lt;Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsEnabled" Value="False"&gt;
                  &lt;Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/&gt;
                  &lt;Setter Property="Fill" TargetName="GlyphPanel" Value="{StaticResource Menu.Disabled.Foreground}"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false"&gt;
                  &lt;Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/&gt;
                  &lt;Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/&gt;
              &lt;/Trigger&gt;
          &lt;/ControlTemplate.Triggers&gt;
      &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>I change the Trigger like this. But the background always be red weather I mouse over it or click it. Why it didn't work?</p>
  
  <p><code>&lt;Trigger Property="IsChecked" Value="true"&gt;
      &lt;Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/&gt;
      &lt;Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/&gt;
      &lt;Setter Property="Background" TargetName="templateRoot" Value="Blue"/&gt;
  &lt;/Trigger&gt;</code></p>