Button Change Background Color in EventTrigger in WPF

Question

I try to change the Background color of my button when the user clicks on it. I use triggers to achieve it.

My 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" /> 

I tried various settings, but could not get the background color on the button with a mouse click. Various sites are also mentioned - MSDN , SharpCorner , CodeProject, and many others. Failed to get where I'm wrong?

How to change the color of the Background button on the pressed event?

Thanks.

Answer 1

In this situation, you need to use EventTrigger with the Storyboard because [ Source ]:

EventTrigger - is a trigger that applies a set of actions (animated storyboards) in response to an event.

Example:

 <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> 

Here, the Storyboard defined in resources that defines the color of the ButtonBrush that is set in the Click event. For more information see:

MSDN: EventTrigger

Edit

Yes, EventTrigger can be used in the template as follows:

 <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> 

Regarding the ability to contact other buttons through one Storyboard , you can do this:

 <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> 

In this case, you just need to specify the TargetName for each button, when you click on the first button, the color of the rest of the default changes to BlueViolet :

Answer 2

In WPF, you can animate objects using a storyboard .