I want the menu background to be Grayish on mouse hover and same for the sub menu items.
But on hover the colour doesnot change.
<Menu Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center" Width="62" Height="20" Background="#FFFFFF" Foreground="#005F87">
<MenuItem>
<MenuItem.Header>
<StackPanel Orientation="Horizontal" Width="Auto">
<Image Width="16" Height="16" Source="Images/image1.png"/>
<TextBlock Text=" Style" Height="16" Width="40" Foreground="#005F87" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="12" FontFamily="Segoe UI" FontWeight="DemiBold" />
</StackPanel>
</MenuItem.Header>
<MenuItem Header="Default" IsCheckable="True" Background="#FFFFFF" Foreground="#005F87" FontSize="12" FontFamily="Segoe UI" Click="MenuDefault_Click"/>
<MenuItem Header="Channel" IsCheckable="True" Background="#FFFFFF" Foreground="#005F87" FontSize="12" FontFamily="Segoe UI" Click="MenuChannel_Click"/>
<MenuItem.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="2"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray"/>
<Setter Property="BorderBrush" Value="DarkGray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Opacity" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
</MenuItem.Resources>
</MenuItem>
</Menu>
Can anybody please tell me what am I missing?
Thank you in advance!