如何更改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图片:
之前:
之前
后:
后

5 Solutions collect form web for “如何更改WPF中的buttonMouseOver的背景?”

要删除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-控&#x5236; )

在你的资源字典中为你的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引起的,并设置BackgroundBorderBrush属性控件模板中的顶级Border元素。 Button元素的背景位于Border元素的背景下方,因此更改Button.Background属性并不能防止看到hover效果。

通过一些努力,你可以用你自己的setter来覆盖这个行为,但是因为你需要影响的元素在模板中,而不是在你自己的XAML中直接访问,所以这种方法将是困难的,恕我直言过度复杂。

另一个select是使用graphics作为ButtonContent而不是Background 。 如果在graphics上需要额外的内容,则可以将它们与Grid结合为内容中的顶级对象。

但是,如果您真的只想完全禁用hover效果(而不是隐藏它),则可以使用Visual Studio XAML Designer:

  1. 编辑XAML时,select“devise”选项卡。
  2. “devise”选项卡中,find要禁用效果的button。
  3. 右键单击该button,然后select“编辑模板/编辑副本…” 。 在提示符中select您想要放置新模板资源的位置。 这看起来什么都不做,但实际上Designer会在你告诉它的地方添加新的资源,并且改变你的button元素来引用使用这些资源作为button模板的样式。
  4. 现在,你可以去编辑这种风格。 最简单的方法是删除或注释(例如Ctrl + EC<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中的元素。

  • 用于编程式WPF GUI的C#和F#
  • WPF:自动完成文本框,...再次
  • MVVM ViewModel应该执行types转换/validation吗?
  • 绑定一个元素到两个来源
  • WPF中的mc:Ignorable =“d”是什么意思?
  • 如何更改RichTextBox段落间距?
  • 什么是正确的方式来处理WPF窗口?
  • 在C#代码中设置WPF文本框的背景颜色
  • WPF数字UpDown控件在哪里?
  • 什么时候应该通过普通的PropertyMetadata使用FrameworkPropertyMetadata或UIPropertyMetadata?
  • 为什么依赖属性?