web-dev-qa-db-ja.com

MouseOverでMenuItemの背景色を変更する

MouseOverでMenuItemのデフォルトの背景色を変更したい。これが私のxamlコードです：

enter image description here

スタイル ：

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

そのため、マウスオーバートリガーがあり、マウスオーバーすると背景色が黄色に変わりますが、スナップで示すようにデフォルトのライトグレー色が表示されています。

マウスオーバーで背景色を黄色にする方法を教えてもらえますか？

wpfxamlwpf-controls
12
pk_code

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

例を簡略化しました。

リソースでこれを定義します。

<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}">
0
Suplanus