WPF OnMouseOver样式MenuItem

时间:2012-07-23 09:49:43

标签: wpf xaml styles mouseover menuitem

我对WPF相对较新我试图更改菜单项的悬停效果,并将其设置为类似于工具栏中的某个按钮。

当我将菜单悬停在MenuItem上时,我留下了双边框。我该如何删除它?

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>

资源文件:

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

2 个答案:

答案 0 :(得分:1)

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

编辑:例如,您可以为BorderIidth = 0上的setter定义MenuItem的默认样式。

答案 1 :(得分:0)

假设您有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>

希望这会有所帮助