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

Question

如何在WPF中更改Button MouseOver的背景？我在这个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>但是当我将鼠标放在我的按钮上时，按钮的背景会变为默认的窗口灰色背景。有什么问题？

Answer 1

要删除默认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如果有人指出但它似乎不是......

Answer 2

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

在处理上的WPF按钮悬停效果的情况下，在一个WPF在外观上的变化Button元件通过引起Trigger在用于默认的样式Button，这是基于所述IsMouseOver属性，并设置Background和BorderBrush顶层的性质Border元件在控件模板中。该Button元素的背景是下面Border元素的背景，因此更改Button.Background属性不会阻止看到悬停效果。

通过一些努力，您可以使用自己的setter覆盖此行为，但是因为您需要影响的元素在模板中而不能在您自己的XAML中直接访问，所以这种方法很难并且IMHO过于复杂。

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

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

1. 编辑XAML时，选择“设计”选项卡。

2. 在“设计”选项卡中，找到要禁用其效果的按钮。

3. 右键单击该按钮，然后选择“编辑模板/编辑副本...”。在提示中选择您希望放置新模板资源的位置。这似乎什么都不做，但实际上Designer会在你告诉它的地方添加新资源，并改变你的button元素以引用使用这些资源作为按钮模板的样式。

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中的元素，从而使该样式成为所有按钮的默认样式。