WPF OnMouseOver 样式菜单项

WPF OnMouseOver Style MenuItem

提问by A. Agius

I am relatively new to WPF I am trying to change the Hover effect of the menu item and set it similar to the one of my buttons in the Toolbar.

我对 WPF 比较陌生，我正在尝试更改菜单项的悬停效果并将其设置为类似于我在工具栏中的按钮之一。

I am left with a double border when I hover on the menu most probably from the MenuItem. How can I remove it?

当我最有可能从 MenuItem 悬停在菜单上时，我留下了双边框。我怎样才能删除它？

XAML File:

XAML 文件：

     <ToolBarTray Style="{StaticResource MainToolBar}">
            <ToolBar DockPanel.Dock="Top" ToolBarTray.IsLocked="True" Width="Auto" Padding="0" Background="Transparent" Name="Tool">
                <Button Content="Button 1"/>
                <Button Content="Button 2"/>
                <Separator/>
                <Menu Margin="0, -1, 0, 0" Style="{StaticResource Menu}">
                    <MenuItem Header="Menu">
                        <MenuItem Header="File">
                            <MenuItem Header="Copy"/>
                            <MenuItem Header="Paste"/>
                        </MenuItem>
                    </MenuItem>
                </Menu>
            </ToolBar>
           </ToolBarTray>

Resource File:

资源文件：

    <Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border
                SnapsToDevicePixels="true"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="{TemplateBinding Padding}">
                    <ContentPresenter
                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="BorderBrush" Value="Orange"/>
                        <Setter Property="Background" Value="{DynamicResource ToolBarBKHover}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="Menu" TargetType="{x:Type Menu}">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Menu}">
                <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
                </Border>

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="Orange"/>
                    <Setter Property="Background" Value="{DynamicResource ToolBarBKHover}"/>
                </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

        </Setter.Value>
    </Setter>
</Style>

回答by GameAlchemist

Your 'double border' issue cannot be solve at the Menu level : you have to dig further and redefine a template / Trigger for the MenuItem of your menu. MenuItem (not Menu) has default behaviour of turning its Border color to grey on MouseOver, and that is what you want to change.

您的“双边框”问题无法在菜单级别解决：您必须进一步挖掘并为菜单的 MenuItem 重新定义模板/触发器。MenuItem （不是Menu）具有在 MouseOver 上将其 Border 颜色变为灰色的默认行为，这就是您想要更改的内容。

Edit : so, for instance, you might define a default style for MenuItem with a setter on BorderWidth = 0.

编辑：因此，例如，您可以使用 BorderWidth = 0 的 setter 为 MenuItem 定义默认样式。

回答by user1528573

Lets say you have your menu items in a Listbox, and when you move over your mouse you want colors to change. Here is a simple way to do it, but I have copied the code from my existing project:

假设您将菜单项放在 a 中Listbox，当您将鼠标移到鼠标上时，您希望颜色发生变化。这是一个简单的方法，但我已经从现有项目中复制了代码：

<Window.Resources>
<Style TargetType="{x:Type ListBox}">
  <Setter Property="Foreground" Value="#58290a" />
  <Setter Property="FontFamily" Value="Lucida Console" />
  <Setter Property="Background">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
        <LinearGradientBrush.GradientStops>
          <GradientStop Color="#feca00" Offset="0.1"/>
          <GradientStop Color="#ffe100" Offset="0.4"/>
          <GradientStop Color="#feca00" Offset="0.6"/>
          <GradientStop Color="Orange" Offset="0.9"/>
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="BitmapEffect">
        <Setter.Value>
          <OuterGlowBitmapEffect GlowColor="Red" GlowSize="4"/>
        </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>
</Style>

hope this helps

希望这可以帮助