MouseOverでMenuItemのデフォルトの背景色を変更したい。これが私のxamlコードです:
スタイル :
<Style TargetType="{x:Type MenuItem}" x:Key="MenuItemStyle" >
<Setter Property="BorderBrush" Value="White"></Setter>
<Setter Property="BorderThickness" Value="0,0,0,5"></Setter>
<Setter Property="Background" Value="#0264AD"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="FontFamily" Value="Arial"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Margin" Value="-5,0,0,0"></Setter>
<Setter Property="Padding" Value="0,12,0,12"></Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="LightGray"></Setter>
<Setter Property="Background" Value="#0264AD"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#0264AD"></Setter>
<Setter Property="Background" Value="Yellow"></Setter>
</Trigger>
</Style.Triggers>
</Style>
コントロール :
<ContextMenu x:Name="settingContextMenu" Width="220" >
<MenuItem Style="{StaticResource MenuItemStyle}" Name="CustomizeLocationNames" Click="CustomizeLocationNames_Click" >
<MenuItem.Header>
<TextBlock Text="Customize Location Names" VerticalAlignment="Center"></TextBlock>
</MenuItem.Header>
</MenuItem>
<MenuItem Style="{StaticResource MenuItemStyle}" Name="ZoomRoute" Click="ZoomRoute_Click">
<MenuItem.Header>
<TextBlock Text="Zoom Route" VerticalAlignment="Center"></TextBlock>
</MenuItem.Header>
</MenuItem>
<MenuItem Style="{StaticResource MenuItemStyle}" Name="PrintRoute" Click="PrintRoute_Click">
<MenuItem.Header>
<TextBlock Text="Print Route" VerticalAlignment="Center" >/TextBlock>
</MenuItem.Header>
</MenuItem>
</ContextMenu>
そのため、マウスオーバートリガーがあり、マウスオーバーすると背景色が黄色に変わりますが、スナップで示すようにデフォルトのライトグレー色が表示されています。
マウスオーバーで背景色を黄色にする方法を教えてもらえますか?
MenuItemのデフォルトのコントロールテンプレートには、「IsHighlighted」がtrueの場合に色を適用するトリガーがあるため、スタイルは適用されません。 ControlTemplateのトリガーは、常にスタイルのトリガーよりも優先されます。
これをスタイルセッターに追加します。
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Bd" Padding="17,0,17,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Uid="Border_38">
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Header}" Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Uid="ContentPresenter_33"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="Bd" Value="Yellow"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
例を簡略化しました。
リソースでこれを定義します。
<Style
x:Key="MenuItemStyle"
TargetType="{x:Type MenuItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="WhiteSmoke" />
<Style.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="WhiteSmoke" />
</Trigger>
</Style.Triggers>
</Style>
次に、これをMenuItemで使用します。
<MenuItem
Header="_File"
Style="{StaticResource MenuItemStyle}">