如何在WPF中更改Button MouseOver的背景？

93

我的页面上带有此XAML的按钮：

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" 
    Width="50" Height="50" HorizontalContentAlignment="Left" 
    BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

但是，当我将鼠标放在按钮上时，按钮的背景会更改为默认窗口的灰色背景。
有什么问题？

这是鼠标悬停之前和之后的按钮图片：
之前：
之前
之后：
后

wpf  button  background  triggers  mouseover 
— 塞佩尔·穆罕默迪（Sepehr Mohammadi）
source
但是您必须启动图像Forward-48.png并触发IsMouseOver才能将其更改为相同的图像Forward-48.png。我正在尝试将您的代码与不同的图像配合使用，并且一切工作正常。
— Anatoliy Nikolaev 2013年
1
@anatoliy：它不起作用。
— Sepehr Mohammadi 2013年
之后是您的默认颜色？您在其他任何地方都不会更改/未设置按钮背景？我有你的代码工作正常。
— Anatoliy Nikolaev 2013年

Answers:

173

要删除上的默认MouseOver行为，Button您需要修改ControlTemplate。将Style定义更改为以下应该可以解决问题：

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Green"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

编辑：已经晚了几年，但是您实际上可以将边框画笔设置在其中的边框内。Idk是否已指出，但似乎并非如此...

— 理查德·E
source
1
这有效，但是按钮边框将消失！必须在按钮周围放置<Border BorderBrush =“ DarkGray” BorderThickness =“ 1”>元素。
— Venugopal M
4
@CF的原因是标准Button样式内部具有触发器ControlTemplate，因此它们会覆盖OP的Style触发器。
— torvin
1
@torvin似乎倒退了！为什么默认情况下应覆盖用户定义的触发器？我了解层次结构，ControlTemplate高于Style，但我不明白为什么必须如此难以覆盖此类基本设置。
— Fuselight
@Fuselight，内部的触发器ControlTemplate基本上会说“根据Background颜色绘制边框。如果鼠标悬停在按钮上-则用该颜色绘制边框”，而在样式中，您只能访问该Background颜色，而不能访问底层边框颜色。我明白了，但是，WPF样式还有很多不足之处……
— torvin 2015年
使用具有透明背景的图像时，这样做还有一个好处，就是删除了在翻转时显示的蓝色框。在我来说，我不希望边框，所以设置了borderThickness 0
— 查野人
20

到目前为止，所有答案都包括用其他方式完全替换默认按钮行为。但是，恕我直言，了解通过编辑XAML元素的现有默认模板可以仅更改您关心的部分是有用且重要的。

如果要处理WPF按钮上的悬停效果，则WPF Button元素中外观的更改是由引起的Trigger，该默认样式为Button，它基于IsMouseOver属性并设置顶级元素的Background和BorderBrush属性。Border在控制模板中。该Button元素的背景是下面Border元素的背景，因此更改Button.Background属性不会阻止看到悬停效果。

尽力而为，您可以使用自己的设置器来覆盖此行为，但是由于您需要影响的元素位于模板中，并且无法在自己的XAML中直接访问，因此该方法将很困难并且IMHO过于复杂。

另一种选择是利用图形作为Content为Button，而不是Background。如果您需要图形上的其他内容，可以将它们与Grid作为内容中的顶级对象组合。

但是，如果您只是想完全禁用悬停效果（而不仅仅是隐藏它），则可以使用Visual Studio XAML设计器：

  1. 编辑XAML时，选择“设计”选项卡。
  2. 在“设计”选项卡中，找到要禁用效果的按钮。
  3. 右键单击该按钮，然后选择“编辑模板/编辑副本...”。在提示中选择要在其中放置新模板资源的位置。这似乎无济于事，但实际上，Designer会在您指定的位置添加新资源，并更改了按钮元素，以引用将这些资源用作按钮模板的样式。
  4. 现在，您可以编辑该样式。最简单的方法是删除或注释掉元素（例如Ctrl+ E，C）<Trigger Property="IsMouseOver" Value="true">...</Trigger>。当然，此时您可以对所需的模板进行任何更改。

完成后，按钮样式将如下所示：

<p:Style x:Key="FocusVisual">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</p:Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<p:Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
  <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
  <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
  <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="HorizontalContentAlignment" Value="Center"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Padding" Value="1"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
          <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
          </Trigger>
          <!--<Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
          </Trigger>-->
          <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</p:Style>

（注意：您可以p:在实际代码中省略XML名称空间的限定条件……我在这里提供它们仅是因为Stack Overflow XML代码格式化程序被<Style/>那些没有使用XML名称空间完整名称的元素所混淆。）

如果要对其他按钮应用相同的样式，只需右键单击它们，然后选择“编辑模板/应用资源”，然后选择刚为第一个按钮添加的样式。您甚至可以使用将默认样式应用于XAML中的元素的常规技术，将该样式设置为所有按钮的默认样式。

— 彼得·杜尼奥
source
5
非常感谢。这是这里唯一可以忍受的答案
— Jared Beach
13

这对我来说很好。

按钮样式

<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border>
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="DarkGoldenrod"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Grid Background="Transparent">
                        <ContentPresenter></ContentPresenter>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

纽扣

<Button Style="{StaticResource TransparentStyle}" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Height="25"
        Command="{Binding CloseWindow}">
    <Button.Content >
        <Grid Margin="0 0 0 0">
            <Path Data="M0,7 L10,17 M0,17 L10,7" Stroke="Blue" StrokeThickness="2" HorizontalAlignment="Center" Stretch="None" />
        </Grid>
    </Button.Content>
</Button>

笔记

  • 该按钮显示一个小蓝十字，非常类似于用于关闭窗口的那个。
  • 通过将网格的背景设置为“透明”，它会添加一次命中测试，这意味着如果鼠标位于按钮上方的任何位置，则它将起作用。忽略此标签，仅当鼠标悬停在图标中的矢量线之一上时，按钮才会点亮（这不是很有用）。
— Contango
source
1
这是一个很好的答案，但是如果Stroke在鼠标悬停时更改颜色Border，而又不将鼠标悬停在该颜色上Path呢？
— 天生
1
这x:Key="TransparentStyle"部分和用法对我来说很重要...谢谢！
— nrod
6

只想从我一直在使用的ResourceDictionary中共享我的按钮样式。您可以在样式触发器处自由更改onHover背景。“ ColorAnimation To = *您想要的BG（即＃FFCEF7A0）”。在mouseOver状态之后，按钮BG也会自动恢复为其原始BG。您甚至可以设置转换的速度。

资源字典 

<Style x:Key="Flat_Button" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="100"/>
    <Setter Property="Height" Value="50"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="FontFamily" Value="Arial Narrow"/>
    <Setter Property="FontSize" Value="12px"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Foreground">
        <Setter.Value>
            <SolidColorBrush Opacity="1" Color="White"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" >
        <Setter.Value>
            <SolidColorBrush Opacity="1" Color="#28C2FF" />
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Border x:Name="border"
                         SnapsToDevicePixels="True"
                         BorderThickness="1"
                         Padding="4,2"
                         BorderBrush="Gray"
                         CornerRadius="3"
                         Background="{TemplateBinding Background}">
                    <Grid>
                        <ContentPresenter 
                        Margin="2"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        RecognizesAccessKey="True" />

                    </Grid>
                </Border>

            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="#D2F898"
                                        Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" 
                                        FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>

            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                                            Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" 
                                            FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>

        </Trigger>


    </Style.Triggers>
</Style>

您要做的就是调用样式。

示例实施

<Button Style="{StaticResource Flat_Button}" Height="Auto"Width="Auto">  
     <StackPanel>
     <TextBlock Text="SAVE" FontFamily="Arial" FontSize="10.667"/>
     </StackPanel>
</Button>
— 贾斯汀·阿德里亚斯（Justin Adrias）
source
2

使用ControlTemplate并具有动画效果的更困难的答案（改编自https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing-控制）

在资源字典中，为按钮定义一个控制模板，如下所示：

<ControlTemplate TargetType="Button" x:Key="testButtonTemplate2">
    <Border Name="RootElement">
        <Border.Background>
            <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
        </Border.Background>

        <Grid Margin="4" >
            <Grid.Background>
                <SolidColorBrush x:Name="ButtonBackground" Color="Aquamarine"/>
            </Grid.Background>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4"/>
        </Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
</ControlTemplate>

在XAML中，您可以将上面的模板用于按钮，如下所示：

定义你的按钮

<Button Template="{StaticResource testButtonTemplate2}" 
HorizontalAlignment="Center" VerticalAlignment="Center" 
Foreground="White">My button</Button>

希望能帮助到你

— 亚科博斯·卡拉基萨斯（Iakobos Karakizas）
source
0

对于更改按钮样式

第一：定义资源样式

<Window.Resources>

    <Style x:Key="OvergroundIn" TargetType="Button">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="#FF16832F">
                        <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="#FF06731F">
                                <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Trigger>
        </Style.Triggers>

    </Style>

    <Style x:Key="OvergroundOut" TargetType="Button">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="#FFF35E5E">
                        <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="#FFE34E4E">
                                <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Trigger>
        </Style.Triggers>

    </Style>


</Window.Resources>

第二个定义按钮代码

                           <Border Grid.Column="2" BorderBrush="LightGray" BorderThickness="2" CornerRadius="3" Margin="2,2,2,2"  >
                                <Button Name="btnFichar" BorderThickness="0" Click="BtnFichar_Click">
                                    <Button.Content>
                                        <Grid>
                                            <TextBlock Margin="0,7,0,7" TextAlignment="Center">Fichar</TextBlock> 
                                        </Grid>
                                    </Button.Content>
                                </Button>
                            </Border>

后面的第三个代码

    public void ShowStatus()
    {
        switch (((MainDto)this.DataContext).State)
        {
            case State.IN:
                this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(243, 94, 94));
                this.btnFichar.Style = Resources["OvergroundIn"] as Style;
                this.btnFichar.Content = "Fichar Salida";
                break;

            case State.OUT:
                this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(76, 106, 83));
                this.btnFichar.Style = Resources["OvergroundOut"] as Style;
                this.btnFichar.Content = "Fichar Entrada";
                break;

        }
    }
— ÁngelIbáñez
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.