如何在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&nbsp;TargetType="{x:Type&nbsp;Button}"> &nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="Background"&nbsp;Value="Green"/> &nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="Template"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter.Value> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ControlTemplate&nbsp;TargetType="{x:Type&nbsp;Button}"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Border&nbsp;Background="{TemplateBinding&nbsp;Background}"&nbsp;BorderBrush="Black"&nbsp;BorderThickness="1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ContentPresenter&nbsp;HorizontalAlignment="Center"&nbsp;VerticalAlignment="Center"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Border> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ControlTemplate> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Setter.Value> &nbsp;&nbsp;&nbsp;&nbsp;</Setter> &nbsp;&nbsp;&nbsp;&nbsp;<Style.Triggers> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Trigger&nbsp;Property="IsMouseOver"&nbsp;Value="True"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="Background"&nbsp;Value="Red"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Trigger> &nbsp;&nbsp;&nbsp;&nbsp;</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设计器：编辑XAML时，选择“设计”选项卡。在“设计”选项卡中，找到要禁用其效果的按钮。右键单击该按钮，然后选择“编辑模板/编辑副本...”。在提示中选择您希望放置新模板资源的位置。这似乎什么都不做，但实际上Designer会在你告诉它的地方添加新资源，并改变你的button元素以引用使用这些资源作为按钮模板的样式。现在，您可以编辑该样式。最简单的方法是删除或注释掉（例如Ctrl+&nbsp;E，C）<Trigger Property="IsMouseOver" Value="true">...</Trigger>元素。当然，您可以在此时对所需的模板进行任何更改。完成后，按钮样式将如下所示：<p:Style&nbsp;x:Key="FocusVisual"> &nbsp;&nbsp;<Setter&nbsp;Property="Control.Template"> &nbsp;&nbsp;&nbsp;&nbsp;<Setter.Value> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ControlTemplate> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Rectangle&nbsp;Margin="2"&nbsp;SnapsToDevicePixels="true"&nbsp;Stroke="{DynamicResource&nbsp;{x:Static&nbsp;SystemColors.ControlTextBrushKey}}"&nbsp;StrokeThickness="1"&nbsp;StrokeDashArray="1&nbsp;2"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ControlTemplate> &nbsp;&nbsp;&nbsp;&nbsp;</Setter.Value> &nbsp;&nbsp;</Setter></p:Style><SolidColorBrush&nbsp;x:Key="Button.Static.Background"&nbsp;Color="#FFDDDDDD"/><SolidColorBrush&nbsp;x:Key="Button.Static.Border"&nbsp;Color="#FF707070"/><SolidColorBrush&nbsp;x:Key="Button.MouseOver.Background"&nbsp;Color="#FFBEE6FD"/><SolidColorBrush&nbsp;x:Key="Button.MouseOver.Border"&nbsp;Color="#FF3C7FB1"/><SolidColorBrush&nbsp;x:Key="Button.Pressed.Background"&nbsp;Color="#FFC4E5F6"/><SolidColorBrush&nbsp;x:Key="Button.Pressed.Border"&nbsp;Color="#FF2C628B"/><SolidColorBrush&nbsp;x:Key="Button.Disabled.Background"&nbsp;Color="#FFF4F4F4"/><SolidColorBrush&nbsp;x:Key="Button.Disabled.Border"&nbsp;Color="#FFADB2B5"/><SolidColorBrush&nbsp;x:Key="Button.Disabled.Foreground"&nbsp;Color="#FF838383"/><p:Style&nbsp;x:Key="ButtonStyle1"&nbsp;TargetType="{x:Type&nbsp;Button}"> &nbsp;&nbsp;<Setter&nbsp;Property="FocusVisualStyle"&nbsp;Value="{StaticResource&nbsp;FocusVisual}"/> &nbsp;&nbsp;<Setter&nbsp;Property="Background"&nbsp;Value="{StaticResource&nbsp;Button.Static.Background}"/> &nbsp;&nbsp;<Setter&nbsp;Property="BorderBrush"&nbsp;Value="{StaticResource&nbsp;Button.Static.Border}"/> &nbsp;&nbsp;<Setter&nbsp;Property="Foreground"&nbsp;Value="{DynamicResource&nbsp;{x:Static&nbsp;SystemColors.ControlTextBrushKey}}"/> &nbsp;&nbsp;<Setter&nbsp;Property="BorderThickness"&nbsp;Value="1"/> &nbsp;&nbsp;<Setter&nbsp;Property="HorizontalContentAlignment"&nbsp;Value="Center"/> &nbsp;&nbsp;<Setter&nbsp;Property="VerticalContentAlignment"&nbsp;Value="Center"/> &nbsp;&nbsp;<Setter&nbsp;Property="Padding"&nbsp;Value="1"/> &nbsp;&nbsp;<Setter&nbsp;Property="Template"> &nbsp;&nbsp;&nbsp;&nbsp;<Setter.Value> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ControlTemplate&nbsp;TargetType="{x:Type&nbsp;Button}"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Border&nbsp;x:Name="border"&nbsp;BorderBrush="{TemplateBinding&nbsp;BorderBrush}"&nbsp;BorderThickness="{TemplateBinding&nbsp;BorderThickness}"&nbsp;Background="{TemplateBinding&nbsp;Background}"&nbsp;SnapsToDevicePixels="true"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ContentPresenter&nbsp;x:Name="contentPresenter"&nbsp;Focusable="False"&nbsp;HorizontalAlignment="{TemplateBinding&nbsp;HorizontalContentAlignment}"&nbsp;Margin="{TemplateBinding&nbsp;Padding}"&nbsp;RecognizesAccessKey="True"&nbsp;SnapsToDevicePixels="{TemplateBinding&nbsp;SnapsToDevicePixels}"&nbsp;VerticalAlignment="{TemplateBinding&nbsp;VerticalContentAlignment}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Border> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ControlTemplate.Triggers> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Trigger&nbsp;Property="IsDefaulted"&nbsp;Value="true"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="BorderBrush"&nbsp;TargetName="border"&nbsp;Value="{DynamicResource&nbsp;{x:Static&nbsp;SystemColors.HighlightBrushKey}}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Trigger> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--<Trigger&nbsp;Property="IsMouseOver"&nbsp;Value="true"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="Background"&nbsp;TargetName="border"&nbsp;Value="{StaticResource&nbsp;Button.MouseOver.Background}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="BorderBrush"&nbsp;TargetName="border"&nbsp;Value="{StaticResource&nbsp;Button.MouseOver.Border}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Trigger>--> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Trigger&nbsp;Property="IsPressed"&nbsp;Value="true"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="Background"&nbsp;TargetName="border"&nbsp;Value="{StaticResource&nbsp;Button.Pressed.Background}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="BorderBrush"&nbsp;TargetName="border"&nbsp;Value="{StaticResource&nbsp;Button.Pressed.Border}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Trigger> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Trigger&nbsp;Property="IsEnabled"&nbsp;Value="false"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="Background"&nbsp;TargetName="border"&nbsp;Value="{StaticResource&nbsp;Button.Disabled.Background}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="BorderBrush"&nbsp;TargetName="border"&nbsp;Value="{StaticResource&nbsp;Button.Disabled.Border}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Setter&nbsp;Property="TextElement.Foreground"&nbsp;TargetName="contentPresenter"&nbsp;Value="{StaticResource&nbsp;Button.Disabled.Foreground}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Trigger> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ControlTemplate.Triggers> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ControlTemplate> &nbsp;&nbsp;&nbsp;&nbsp;</Setter.Value> &nbsp;&nbsp;</Setter></p:Style>（注意：您可以省略p:实际代码中的XML命名空间限定...我在此提供它们只是因为Stack Overflow XML代码格式化程序被<Style/>没有XML命名空间的完全限定名称的元素所混淆。）如果要将相同的样式应用于其他按钮，只需右键单击它们并选择“编辑模板/应用资源”，然后选择刚为第一个按钮添加的样式。您甚至可以使用常规技术将默认样式应用于XAML中的元素，从而使该样式成为所有按钮的默认样式。