在WPF中更改EventTrigger上的按钮背景颜色 [英] Change Button Background color on EventTrigger in WPF
问题描述
当用户单击按钮时，我试图更改按钮的Background颜色.我正在使用触发器来实现它.
I am trying to change the Background color of my Button when the user clicks it. I am using triggers to achieve it.
我的XAML是:
<UserControl.Resources>
<Style x:Key="myBtnStyle" TargetType="{x:Type Button}">
<!--VerticalAlignment="Top" VerticalContentAlignment="Top" Background="Blue" HorizontalAlignment="Right"
Height="24" Width="25" FontSize="16" FontWeight="Bold" -->
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="Blue" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Height" Value="24" />
<Setter Property="Width" Value="25" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold" />
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
<!--
<ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}">
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True" >
<Setter Property="Background" Value="Cyan" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate> -->
</UserControl.Resources>
<Button DockPanel.Dock="Right" Style="{StaticResource myBtnStyle}" Name="btnVert" Click="btnVert_Click"
Margin="10,10,10,0" ToolTip="Vertical" Content="V" />
我尝试了各种设置，但是当单击鼠标时无法在Button上更改Background颜色.还提到了各种站点- MSDN ， SharpCorner ，
I tried various settings, but couldn't get the Background color changed on the Button when mouse is clicked. Also referred various sites - MSDN, SharpCorner, CodeProject and many others too. Couldn't get where am I going wrong?
如何在单击事件时更改按钮的Background颜色?
How to get the Background color changed of Button on clicked event?
谢谢.
推荐答案
在这种情况下，您需要将EventTrigger与Storyboard一起使用，因为[
In this situation, you need to use EventTrigger with Storyboard, because [Source]:
EventTrigger-表示一个触发器，用于响应事件而应用一组动作(动画情节提要).
EventTrigger - represents a trigger that applies a set of actions (animation storyboards) in response to an event.
示例:
<Window.Resources>
<SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" />
<Storyboard x:Key="ChangeBackgroundStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChangeBackgroundButton"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource ButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Grid.Triggers>
<EventTrigger SourceName="ChangeBackgroundButton"
RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource ChangeBackgroundStoryboard}" />
</EventTrigger>
</Grid.Triggers>
<Button Name="ChangeBackgroundButton"
Content="TestButton"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Grid>
在资源中定义的Storyboard定义了颜色ButtonBrush，该颜色在 Click 事件中设置.有关更多信息，请参见:
Here Storyboard defined in resources, which defines the color ButtonBrush, which is set at the Click event. For more information, please see:
Edit
Edit
是的，EventTrigger可以在模板中使用，如下所示:
Yes, EventTrigger can be used in the template like this:
<Window.Resources>
<SolidColorBrush x:Key="IsMouseOverBackground" Color="AliceBlue" />
<SolidColorBrush x:Key="IsPressedBrush" Color="Gainsboro" />
<SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" />
<Storyboard x:Key="ChangeBackgroundStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Style x:Key="FlatButtonBaseStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="60" />
<Setter Property="Height" Value="20" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter Name="Content"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextBlock.FontFamily="{TemplateBinding FontFamily}"
TextBlock.FontSize="{TemplateBinding FontSize}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource IsMouseOverBackground}" />
<Setter Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource IsPressedBrush}" />
</Trigger>
<!-- Here -->
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource ChangeBackgroundStoryboard}" />
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<WrapPanel>
<Button Content="Fisrt"
Style="{StaticResource FlatButtonBaseStyle}"
Margin="10" />
<Button Content="Second"
Style="{StaticResource FlatButtonBaseStyle}"
Margin="10" />
<Button Content="Third"
Style="{StaticResource FlatButtonBaseStyle}"
Margin="10" />
</WrapPanel>
关于通过一个Storyboard与其他按钮接触的可能性，您可以这样做:
As for the possibility of contact to the other buttons through one Storyboard, you can do so:
<Window.Resources>
<SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" />
<SolidColorBrush x:Key="DefaultButtonBrush" Color="BlueViolet" />
</Window.Resources>
<WrapPanel>
<WrapPanel.Triggers>
<EventTrigger SourceName="FisrtButton"
RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FisrtButton"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource ButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondButton"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource DefaultButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThirdButton"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource DefaultButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</WrapPanel.Triggers>
<Button Name="FisrtButton"
Content="Fisrt"
Margin="10" />
<Button Name="SecondButton"
Content="Second"
Margin="10" />
<Button Name="ThirdButton"
Content="Third"
Margin="10" />
</WrapPanel>
在这种情况下，您只需要为每个按钮指定 TargetName ，当您单击第一个按钮时，其余的颜色将更改为默认的BlueViolet:
In this case, you just need to specify TargetName for every Button, when you click on the first Button, the color of the remaining changes to default BlueViolet:
这篇关于在WPF中更改EventTrigger上的按钮背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
