logo标签列表

在WPF中，如何更改鼠标悬停时按钮的背景？

wpfbuttonbackgroundtriggersmouseover
111

我的页面上有一个带有以下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>

但当我将鼠标悬停在按钮上时，按钮的背景会变成默认的Windows灰色背景。
问题在哪里？

这是鼠标移入和移出前后的按钮图片：
移入前：
Before
移入后：
After

但是你必须启动图像“Forward-48.png”，并触发IsMouseOver以将其更改为相同的“Forward-48.png”。我正在尝试使用您的代码与不同的图像，并且一切都正常。 - Anatoliy Nikolaev
1
@anatoliy: 它不起作用。 - Sepehr Mohammadi
你的默认颜色是什么？在其他任何地方，你没有更改/设置按钮背景吗？我已经测试了你的代码，运行良好。 - Anatoliy Nikolaev
6个回答
207

要移除Button默认的MouseOver行为，您需要修改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>

编辑：虽然有点晚了几年，但您实际上可以在边框内设置边框刷。不知道是否指出过，但似乎没有...

1
这个可以工作，但是按钮的边框会消失！必须在按钮周围放置一个<Border BorderBrush="DarkGray" BorderThickness="1">元素。 - Venugopal M
5
原因是因为标准按钮样式中的ControlTemplate里有触发器，会覆盖 OP 的 Style 触发器。 - torvin
1
@torvin 这似乎很反常！为什么用户定义的触发器应该被默认的覆盖呢？我理解层次结构，ControlTemplate在Style之上，但我不明白为什么要这样难以覆盖基本设置。 - Fuselight
@Fuselight，ControlTemplate 内部的触发器基本上是说 “根据 Background 颜色来绘制边框。如果鼠标悬停在按钮上，则使用这种颜色来绘制边框”，而在样式中，您只能访问 Background 颜色，而无法访问底层的边框颜色。不过我理解您的观点，WPF 样式还有很大的提升空间... - torvin
这样做的额外好处是，在使用带有透明背景的图像时，可以消除鼠标悬停时出现的蓝色框。在我的情况下，我不想要边框，因此将BorderThickness设置为0。 - Chuck Savage
我把那段代码粘贴到了App.xaml里面，但它没有起作用。我猜想还有其他事情需要做吗？有人能解释一下是什么吗？ - Ricardo Araújo
35

到目前为止，所有答案都涉及完全替换默认的按钮行为。然而，在我的观点中，理解仅编辑现有XAML元素的默认模板将只更改您关心的部分是有用且重要的。

在处理WPF按钮上的悬停效果的情况下，WPF Button元素中的外观变化是由于默认样式中的Trigger引起的，该样式基于IsMouseOver属性并设置顶层Border元素的Background和BorderBrush属性。 Button元素的背景位于Border元素的背景之下，因此更改Button.Background属性不会防止悬停效果的显示。

要覆盖此行为，您可以尝试一些努力来自己完成，但由于您需要影响的元素在模板中而不是直接访问您自己的XAML中，所以这种方法会非常复杂。

另一个选项是将图形作为Button的Content而不是Background使用。如果您需要添加其他内容，则可以使用包含在内容中的Grid结合它们。

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

  1. 在编辑XAML时，选择"设计"选项卡。
  2. 在"设计"选项卡中，找到要禁用效果的按钮。
  3. 右键单击该按钮，然后选择"编辑模板/编辑副本..."。选择提示中告诉你新模板资源应放置的位置。这似乎什么都没有做，但实际上，设计器将根据您告诉它的内容添加新的资源，并更改您的按钮元素以引用使用这些资源作为按钮模板的样式。
  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代码格式化器会对没有完全限定名称与XML命名空间的<Style/>元素感到困惑。)

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

8
非常感谢。这是这里唯一可以容忍的答案。 - Jared Beach
16

这对我很有效。

按钮样式

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

注意事项

  • 该按钮显示一个蓝色小叉，类似于用于关闭窗口的那个。
  • 通过将网格的背景设置为“透明”，可以添加一个命中测试(hittest)，这意味着如果鼠标在按钮上的任何位置，则它将起作用。省略此标记，如果鼠标位于图标中的矢量线之一上方，按钮仅会亮起（这不是很可用）。
1
这是一个很好的答案，但是如何在悬停Border时也更改Stroke颜色，而不仅仅是悬停在Path上？ - Nateous
1
这个 x:Key="TransparentStyle" 部分和它的使用对我来说非常重要...谢谢！ - nrod
7

我想分享一下我一直在使用的ResourceDictionary中的按钮样式。 您可以自由地在样式触发器中更改onHover背景。ColorAnimation To= *您所需的BG（例如#FFCEF7A0）

鼠标悬停状态后，按钮背景也会自动恢复到其原始背景。您甚至可以设置过渡速度。

资源字典

<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>
3
一个稍微复杂一些的答案，使用ControlTemplate并具有动画效果 （改编自https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing-control）
在你的资源字典中定义一个控件模板，像这样： 

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

希望能对您有所帮助。
3

更改按钮样式

第一步：定义资源样式

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

3th代码后台

    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;

        }
    }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接