如何更改WPF中的buttonMouseOver的背景？
我在这个XAML的页面上有一个button：
<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> 但是当我把鼠标放在我的button上时，button的背景变成了默认的Windows灰色背景。
有什么问题？
这是鼠标hover之前和之后的button图片：
之前： 
后： 
要删除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>
编辑：这是晚了几年，但你实际上可以设置边框内的边界刷在那里。 Idk如果这是指出，但它似乎并不像是…
这对我很好。
button样式
<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>
笔记
- button显示一个蓝色的小十字，就像用来closures一个窗口。
- 通过设置网格的背景为“透明”，它增加了一个hittest，这意味着如果鼠标在button的任何地方，那么它将工作。 省略此标记，并且只有在鼠标位于图标中的一个vector线上时，该button才会点亮（这不是非常有用）。
只是想从我一直在使用的ResourceDictionary中分享我的button样式。 您可以随意更改风格触发器的onHover背景。 “ ColorAnimation To = *所需的BG（即＃FFCEF7A0）”。 BGbutton也会在mouseOver状态后自动恢复到原来的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>
使用ControlTemplate的一个稍微困难的答案，并具有animation效果（从https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing-控制; ）
在你的资源字典中为你的button定义一个控制模板，就像这样：
<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，如下所示：
定义你的button
<Button Template="{StaticResource testButtonTemplate2}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">My button</Button>
希望能帮助到你
到目前为止所有的答案都涉及到完全replace默认的button行为。 但是，恕我直言，通过编辑XAML元素的现有默认模板，了解可以只更改您关心的部分是非常有用和重要的。
在处理WPFbutton上的hover效果的情况下，WPF Button元素的外观变化是由基于IsMouseOver属性的Button的默认样式中的Trigger引起的，并设置Background和BorderBrush属性控件模板中的顶级Border元素。 Button元素的背景位于Border元素的背景下方，因此更改Button.Background属性并不能防止看到hover效果。
通过一些努力，你可以用你自己的setter来覆盖这个行为，但是因为你需要影响的元素在模板中，而不是在你自己的XAML中直接访问，所以这种方法将是困难的，恕我直言过度复杂。
另一个select是使用graphics作为Button的Content而不是Background 。 如果在graphics上需要额外的内容，则可以将它们与Grid结合为内容中的顶级对象。
但是，如果您真的只想完全禁用hover效果（而不是隐藏它），则可以使用Visual Studio XAML Designer：
- 编辑XAML时，select“devise”选项卡。
- 在“devise”选项卡中，find要禁用效果的button。
- 右键单击该button，然后select“编辑模板/编辑副本…” 。 在提示符中select您想要放置新模板资源的位置。 这看起来什么都不做，但实际上Designer会在你告诉它的地方添加新的资源，并且改变你的button元素来引用使用这些资源作为button模板的样式。
- 现在，你可以去编辑这种风格。 最简单的方法是删除或注释（例如Ctrl + E ， C ）
<Trigger Property="IsMouseOver" Value="true">...</Trigger>元素。 当然，您可以对该模板进行任何更改。
完成后，button样式将如下所示：
<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名称空间限定……我在这里提供它们只是因为堆栈溢出XML代码格式化程序被没有XML名称空间的完全限定名称的<Style/>元素困惑。）
如果要将相同的样式应用于其他button，则可以右键单击它们并select“编辑模板/应用资源”，然后select刚刚为第一个button添加的样式。 您甚至可以将该样式设置为所有button的默认样式，使用常规技术将默认样式应用于XAML中的元素。
