Triggers Property, Data And Event Triggers With Animation In WPF

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.

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.

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.

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.

Run the project