Post
Ask Question

Triggers Property, Data And Event Triggers With Animation In WPF

What are the triggers?

 
You may be familiar with triggers in RDBMS. It performs some action whenever an event takes place, like Updating a table or something. It's the same concept in WPF: It is a response to an action.
 
Triggers are applied on styles or directly on controls, so you first need to learn what styles are. You can have a sneak peek at my article on Styles.
 
And trigger can only be applied at runtime.
 
Basically, there are 3 types of triggers.
  1. Property Trigger: Applied based on control's property, such as IsMouseOver: value sets true is a mouse is over the control.
  2. Data Trigger: Applied based on binded data.
  3. Event Trigger: Applied based on an event, such as ButtonClick.
Let's learn about each of them.
  1. Property Trigger: One needs to use a Trigger tag to set the if condition.
Have a look at the following image to understand 3 things.
  1. What is an if condition,
  2. What are the values that are going to change if, if condition satisfies,
  3. And what conditions are unaffected if conditions satisfy or not.
Triggers Property, Data And Event Triggers With Animation In WPF
 
MainWindow.xaml
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:A"    
  7.         mc:Ignorable="d"    
  8.         Title="MainWindow" Height="180" Width="300">    
  9.     <Window.Resources>    
  10.             
  11.         <Style x:Key="SubmitButtonStyle"    
  12.            BasedOn="{StaticResource {x:Type Button}}"    
  13.            TargetType="Button">    
  14.             <Setter Property="Height" Value="25"/>    
  15.             <Setter Property="Width" Value="150"/>    
  16.             <Setter Property="BorderThickness" Value="2"/>    
  17.             <Setter Property="BorderThickness" Value="2"/>    
  18.             <Setter Property="HorizontalAlignment" Value="Center"/>    
  19.             <Setter Property="VerticalAlignment" Value="Center"/>    
  20.                 
  21.             <Setter Property="Content" Value="Trigger Not Applied"/>    
  22.             <Setter Property="BorderBrush" Value="Black"/>    
  23.             <Setter Property="Background" Value="Gray"/>    
  24.             <Setter Property="Foreground" Value="Wheat"/>    
  25.             <Style.Triggers>    
  26.                 <Trigger Property="IsMouseOver" Value="True">    
  27.                         
  28.                     <Setter Property="Content" Value="Trigger Applied"/>    
  29.                     <Setter Property="BorderBrush" Value="White"/>    
  30.                     <Setter Property="Background" Value="Blue"/>    
  31.                     <Setter Property="Foreground" Value="Black"/>    
  32.                         
  33.                 </Trigger>    
  34.             </Style.Triggers>    
  35.         </Style>    
  36.             
  37.     </Window.Resources>    
  38.     <Grid x:Name="MainGrid">    
  39.          <Button x:Name="ButtonStyleMe"     
  40.                  Style="{StaticResource SubmitButtonStyle}"/>    
  41.      </Grid>    
  42. </Window>    
We are changing 4 properties: Content, BorderBrush, Background & Foreground of the Button. If IsMouseOver; i.e.. mouse is over the button, then properties defined inside a trigger will execute, else properties above the trigger will execute.
 
Note
The condition is only applied for these 4 properties; the  rest are unaffected. 
 
The following gif is the output of the above code. It will give you the idea of what is happening inside that xaml at runtime.
 
Triggers Property, Data And Event Triggers With Animation In WPF 
 

DataTrigger

 
One needs to use a DataTrigger tag to set an if condition.
 
Things we are updating in xaml,
  1. Add new checkbox: this will be bound with a property named as IsTriggerCheckBoxChecked & if checked it will set IsTriggerCheckBoxChecked's value to true.
  2. Let's change Button's behavior from PropertyTrigger to DataTrigger
  3. Add new string property named as TriggerChangeText, which will display the text after CheckBox is checked.
  4. Add a label to display if it is set by data trigger.
Updated MainWindow.xaml 
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:A"    
  7.         mc:Ignorable="d"    
  8.         Title="MainWindow" Height="180" Width="300">    
  9.     <Window.Resources>    
  10.         <Thickness x:Key="MarginTop">0 5 0 0 </Thickness>    
  11.         <Style x:Key="SubmitButtonStyle"    
  12.            BasedOn="{StaticResource {x:Type Button}}"    
  13.            TargetType="Button">    
  14.             <Setter Property="Height" Value="25"/>    
  15.             <Setter Property="Width" Value="150"/>    
  16.             <Setter Property="BorderThickness" Value="2"/>    
  17.             <Setter Property="BorderThickness" Value="2"/>    
  18.             <Setter Property="HorizontalAlignment" Value="Center"/>    
  19.             <Setter Property="VerticalAlignment" Value="Center"/>    
  20.                 
  21.             <Setter Property="Content" Value="Trigger Not Applied"/>    
  22.             <Setter Property="BorderBrush" Value="Black"/>    
  23.             <Setter Property="Background" Value="Gray"/>    
  24.             <Setter Property="Foreground" Value="Wheat"/>    
  25.             <Style.Triggers>    
  26.                      <DataTrigger Binding="{Binding IsTriggerCheckBoxChecked}" Value="True">   
  27.                         <Setter Property="Content" Value="Trigger Applied"/>    
  28.                         <Setter Property="BorderBrush" Value="Black"/>    
  29.                         <Setter Property="Background" Value="LightBlue"/>    
  30.                         <Setter Property="Foreground" Value="Black"/>    
  31.                     </DataTrigger>    
  32.             </Style.Triggers>    
  33.         </Style>    
  34.             
  35.     </Window.Resources>    
  36.     <Grid x:Name="MainGrid">    
  37.         <Grid.RowDefinitions>    
  38.             <RowDefinition Height="Auto"/>    
  39.             <RowDefinition Height="Auto"/>    
  40.             <RowDefinition Height="Auto"/>    
  41.         </Grid.RowDefinitions>    
  42.         <CheckBox x:Name="CheckBoxTrigger"    
  43.                   IsChecked="{Binding IsTriggerCheckBoxChecked}"    
  44.                   HorizontalAlignment="Center"    
  45.                   Content="Apply Data Trigger?"/>    
  46.         <Button x:Name="ButtonStyleMe"     
  47.                  Style="{StaticResource SubmitButtonStyle}"    
  48.                  Margin="{StaticResource MarginTop}"    
  49.                  Grid.Row="1"/>    
  50.         <Label x:Name="LabelTrigger"    
  51.                Content="{Binding TriggerChangeText}"    
  52.                Margin="{StaticResource MarginTop}"    
  53.                HorizontalAlignment="Center"    
  54.                Grid.Row="2">    
  55.             <Label.Style>    
  56.                 <Style BasedOn="{StaticResource {x:Type Label}}"    
  57.                        TargetType="Label">    
  58.                     <Setter Property="Content" Value="Default value from XAML."/>    
  59.                     <Style.Triggers>    
  60.                         <DataTrigger Binding="{Binding IsTriggerCheckBoxChecked}" Value="True">    
  61.                             <Setter Property="Content" Value="{Binding TriggerChangeText}"/>    
  62.                         </DataTrigger>    
  63.                     </Style.Triggers>    
  64.                 </Style>    
  65.             </Label.Style>    
  66.         </Label>    
  67.     </Grid>    
  68. </Window>    
MVVM: MainWindowViewModel.cs
  1. using A.Entities;  
  2. using Prism.Mvvm;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Text;  
  7. using System.Threading.Tasks;  
  8.   
  9. namespace A  
  10. {  
  11.     class MainWindowViewModel : BindableBase  
  12.     {  
  13.         #region Properties  
  14.         private bool _isTriggerCheckBoxChecked;  
  15.   
  16.         public bool IsTriggerCheckBoxChecked  
  17.         {  
  18.             get { return _isTriggerCheckBoxChecked; }  
  19.             set  
  20.             {  
  21.                 if (value)  
  22.                 {  
  23.                     TriggerChangeText = "Applied with data trigger!";  
  24.                 }  
  25.                 SetProperty(ref _isTriggerCheckBoxChecked, value);  
  26.             }  
  27.         }  
  28.   
  29.         private string _triggerChangeText;  
  30.   
  31.         public string TriggerChangeText  
  32.         {  
  33.             get { return _triggerChangeText; }  
  34.             set { SetProperty(ref _triggerChangeText, value); }  
  35.         }  
  36.  
  37.         #endregion  
  38.     }  
  39. } 
Run the project
 
The following gif will be the output.
 
Triggers Property, Data And Event Triggers With Animation In WPF
 

Event Trigger

 
One needs to use an EventTrigger tag to set an if condition.
 
Let's add some simple animation on ButtonClick event.
 
Animation 1: Change the Button's background colour,
 
Animation 2: Increase & decrease the width of a Button.
  1. <Button x:Name="ButtonStyleMe"     
  2.                Margin="{StaticResource MarginTop}"    
  3.                Grid.Row="1">    
  4.           <Button.Style>    
  5.               <Style TargetType="Button"    
  6.                      BasedOn="{StaticResource SubmitButtonStyle}">    
  7.                   <Style.Triggers>    
  8.                       <EventTrigger RoutedEvent="Button.Click">    
  9.                           <EventTrigger.Actions>    
  10.                               <BeginStoryboard>    
  11.                                   <Storyboard Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="0:0:8">    
  12.                                       <ColorAnimation To="Gray" Duration="0:0:0"/>    
  13.                                       <ColorAnimation To="Coral" Duration="0:0:1"/>    
  14.                                       <ColorAnimation To="LightBlue" Duration="0:0:2"/>    
  15.                                       <ColorAnimation To="Salmon" Duration="0:0:3"/>    
  16.                                       <ColorAnimation To="White" Duration="0:0:4"/>    
  17.                                       <ColorAnimation To="Salmon" Duration="0:0:5"/>    
  18.                                       <ColorAnimation To="LightBlue" Duration="0:0:6"/>    
  19.                                       <ColorAnimation To="Coral" Duration="0:0:7"/>    
  20.                                       <ColorAnimation To="Gray" Duration="0:0:8"/>    
  21.                                   </Storyboard>    
  22.                               </BeginStoryboard>    
  23.                               <BeginStoryboard>    
  24.                                   <Storyboard Storyboard.TargetProperty="Width" Duration="0:0:8">    
  25.                                       <DoubleAnimationUsingKeyFrames>    
  26.                                           <LinearDoubleKeyFrame Value="150" KeyTime="0:0:0"/>    
  27.                                           <LinearDoubleKeyFrame Value="200" KeyTime="0:0:1"/>    
  28.                                           <LinearDoubleKeyFrame Value="250" KeyTime="0:0:2"/>    
  29.                                           <LinearDoubleKeyFrame Value="300" KeyTime="0:0:3"/>    
  30.                                           <LinearDoubleKeyFrame Value="350" KeyTime="0:0:4"/>    
  31.                                           <LinearDoubleKeyFrame Value="300" KeyTime="0:0:5"/>    
  32.                                           <LinearDoubleKeyFrame Value="250" KeyTime="0:0:6"/>    
  33.                                           <LinearDoubleKeyFrame Value="200" KeyTime="0:0:7"/>    
  34.                                           <LinearDoubleKeyFrame Value="150" KeyTime="0:0:8"/>    
  35.                                       </DoubleAnimationUsingKeyFrames>    
  36.                                       </Storyboard>    
  37.                               </BeginStoryboard>    
  38.                           </EventTrigger.Actions>    
  39.                       </EventTrigger>    
  40.                   </Style.Triggers>    
  41.               </Style>    
  42.           </Button.Style>    
  43. </Button>   
Code explanation
 
Inside an EventTrigger, you have to specify which routed event you want to have it triggered on.
 
Then specify your actions inside a EventTrigger.Actions tag.
 
I have added 2 StoryBoards each for every animation. The animation lasts for 8 seconds, then specify your actions on every second.
 
MainWindow.xaml 
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:A"    
  7.         mc:Ignorable="d"    
  8.         Title="MainWindow" Height="180" Width="400">    
  9.     <Window.Resources>    
  10.         <Thickness x:Key="MarginTop">0 5 0 0 </Thickness>    
  11.         <Style x:Key="SubmitButtonStyle"    
  12.            BasedOn="{StaticResource {x:Type Button}}"    
  13.            TargetType="Button">    
  14.             <Setter Property="Height" Value="25"/>    
  15.             <Setter Property="Width" Value="150"/>    
  16.             <Setter Property="BorderThickness" Value="2"/>    
  17.             <Setter Property="BorderThickness" Value="2"/>    
  18.             <Setter Property="HorizontalAlignment" Value="Center"/>    
  19.             <Setter Property="VerticalAlignment" Value="Center"/>    
  20.                 
  21.             <Setter Property="Content" Value="Trigger Not Applied"/>    
  22.             <Setter Property="BorderBrush" Value="Black"/>    
  23.             <Setter Property="Background" Value="Gray"/>    
  24.             <Setter Property="Foreground" Value="Black"/>    
  25.             <Style.Triggers>    
  26.                 <DataTrigger Binding="{Binding IsTriggerCheckBoxChecked}" Value="True">    
  27.                         <Setter Property="Content" Value="Event Trigger Applied"/>    
  28.                     </DataTrigger>    
  29.             </Style.Triggers>    
  30.         </Style>    
  31.     </Window.Resources>    
  32.     <Grid x:Name="MainGrid">    
  33.         <Grid.RowDefinitions>    
  34.             <RowDefinition Height="Auto"/>    
  35.             <RowDefinition Height="Auto"/>    
  36.             <RowDefinition Height="Auto"/>    
  37.         </Grid.RowDefinitions>    
  38.         <CheckBox x:Name="CheckBoxTrigger"    
  39.                   IsChecked="{Binding IsTriggerCheckBoxChecked}"    
  40.                   HorizontalAlignment="Center"    
  41.                   Content="Apply Data Trigger?"/>    
  42.         <Button x:Name="ButtonStyleMe"     
  43.                  Margin="{StaticResource MarginTop}"    
  44.                  Grid.Row="1">    
  45.             <Button.Style>    
  46.                 <Style TargetType="Button"    
  47.                        BasedOn="{StaticResource SubmitButtonStyle}">    
  48.                     <Style.Triggers>    
  49.                         <EventTrigger RoutedEvent="Button.Click">    
  50.                             <EventTrigger.Actions>    
  51.                                 <BeginStoryboard>    
  52.                                     <Storyboard Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="0:0:8">    
  53.                                         <ColorAnimation To="Gray" Duration="0:0:0"/>    
  54.                                         <ColorAnimation To="Coral" Duration="0:0:1"/>    
  55.                                         <ColorAnimation To="LightBlue" Duration="0:0:2"/>    
  56.                                         <ColorAnimation To="Salmon" Duration="0:0:3"/>    
  57.                                         <ColorAnimation To="White" Duration="0:0:4"/>    
  58.                                         <ColorAnimation To="Salmon" Duration="0:0:5"/>    
  59.                                         <ColorAnimation To="LightBlue" Duration="0:0:6"/>    
  60.                                         <ColorAnimation To="Coral" Duration="0:0:7"/>    
  61.                                         <ColorAnimation To="Gray" Duration="0:0:8"/>    
  62.                                     </Storyboard>    
  63.                                 </BeginStoryboard>    
  64.                                 <BeginStoryboard>    
  65.                                     <Storyboard Storyboard.TargetProperty="Width" Duration="0:0:8">    
  66.                                         <DoubleAnimationUsingKeyFrames>    
  67.                                             <LinearDoubleKeyFrame Value="150" KeyTime="0:0:0"/>    
  68.                                             <LinearDoubleKeyFrame Value="200" KeyTime="0:0:1"/>    
  69.                                             <LinearDoubleKeyFrame Value="250" KeyTime="0:0:2"/>    
  70.                                             <LinearDoubleKeyFrame Value="300" KeyTime="0:0:3"/>    
  71.                                             <LinearDoubleKeyFrame Value="350" KeyTime="0:0:4"/>    
  72.                                             <LinearDoubleKeyFrame Value="300" KeyTime="0:0:5"/>    
  73.                                             <LinearDoubleKeyFrame Value="250" KeyTime="0:0:6"/>    
  74.                                             <LinearDoubleKeyFrame Value="200" KeyTime="0:0:7"/>    
  75.                                             <LinearDoubleKeyFrame Value="150" KeyTime="0:0:8"/>    
  76.                                         </DoubleAnimationUsingKeyFrames>    
  77.                                         </Storyboard>    
  78.                                 </BeginStoryboard>    
  79.                             </EventTrigger.Actions>    
  80.                         </EventTrigger>    
  81.                     </Style.Triggers>    
  82.                 </Style>    
  83.             </Button.Style>              
  84.         </Button>    
  85.         <Label x:Name="LabelTrigger"    
  86.                Content="{Binding TriggerChangeText}"    
  87.                Margin="{StaticResource MarginTop}"    
  88.                HorizontalAlignment="Center"    
  89.                Grid.Row="2">    
  90.             <Label.Style>    
  91.                 <Style BasedOn="{StaticResource {x:Type Label}}"    
  92.                        TargetType="Label">    
  93.                     <Setter Property="Content" Value="Default value from XAML."/>    
  94.                     <Style.Triggers>    
  95.                         <DataTrigger Binding="{Binding IsTriggerCheckBoxChecked}" Value="True">    
  96.                             <Setter Property="Content" Value="{Binding TriggerChangeText}"/>    
  97.                         </DataTrigger>    
  98.                     </Style.Triggers>    
  99.                 </Style>    
  100.             </Label.Style>    
  101.         </Label>    
  102.     </Grid>    
  103. </Window>    
Now run your application. Output gif:
 
Triggers Property, Data And Event Triggers With Animation In WPF
 
Looks amazing, we will learn more about animation & graphics in upcoming articles.
 
I sincerely hope you enjoyed this article and that you're inspired to apply what you've learned to your own applications.
 
Thank you for reading this article! I hope you understood the concept of Triggers in WPF.

Happy Coding!
 
Feel free to connect @


Similar Articles