Types of Triggers in Windows Presentation Foundation (WPF)

Introduction

Triggers are used to perform certain actions when a specified condition is fulfilled. Triggers are used to create visual effects on controls and framework elements. Triggers are parts of styles and are always defined inside a style.

Types of Triggers

Basically, there are 3 types of triggers, they are:

• Property Trigger
• Data Trigger
• Event Trigger

But a Property Trigger and a Data Trigger have the following two subcategories:

• Multiple Property Trigger (Multi Trigger)
• MultiData Trigger

Now we learn about each trigger one by one.

Property Trigger

This Trigger is activated when the UIElements property matches a specified value. A Property Trigger is the most commonly used trigger among all triggers. It is defined within a <Trigger> element.

XAML Code

<Window x:Class="WpfApplication26.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="PropertyTriggersSample" Height="288" Width="450" >
    <Grid Margin="0,0,-8,-11">
        <TextBlock Text="I Like C# Corner" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Green"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Blue" />
                            <Setter Property="TextDecorations" Value="Underline" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

In the preceding code, when the IsMouseOver property value is true, the defined setter action inside the trigger will be executed and the Foreground property of the textblock will turn Blue with an underline.

Multiple Property Trigger (Multi Trigger)

This is similar to a Trigger but it combines multiple conditions to be met simultaneously. It will execute when all the conditions are satisfied within <MultiTrigger.Conditions>.

XAML Code

<Window x:Class="WpfApplication27.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MultiTriggerSample" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True" />
                        <Condition Property="IsPressed" Value="True" />
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Foreground" Value="Blue" />
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Click Me!" IsDefault="True"

FontSize="20" Height="64" Margin="186,5,145,5" />
    </StackPanel>
</Window>

In the preceding code, when the IsMouseOver property and the IsPressed both value are both true, the defined setter action inside the MultiTrigger will be executed and the Foreground property of the Button will turn Blue.

Data Trigger

A Data Trigger is activated when the binding data matches the specified conditions. In the Data trigger we need to specify the binding instead of property name.

XAML Code

<Window x:Class="WpfApplication27.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="DataTriggerSample" Height="350" Width="525">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="39,47,22,57" Width="456" Height="216">
        <TextBlock FontSize="25" Foreground="Blue" Margin="25,0,0,0">Do you Like C# Corner ?</TextBlock>
        <CheckBox Name="cbSample" Content="Yes" FontSize="20" Margin="38,0,0,0"/>
        <TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="No" />
                    <Setter Property="Foreground" Value="Red" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">
                            <Setter Property="Text" Value="Yes!" />
                            <Setter Property="Foreground" Value="Green" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>
</Window>

In the preceding code when the IsChecked property of CheckBox is true, the text will become Green, saying "Yes!".

MultiData Trigger

This is similar to a Trigger but it combines multiple conditions to be met simultaneously. It will execute when all the conditions are satisfied within the <MultiDataTrigger.Conditions>.

XAML Code

<Window x:Class="WpfApplication27.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MultiDataTriggerSample" Height="350" Width="525">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock FontSize="25" Foreground="Blue">Do You Want to Register on C# Corner ?</TextBlock>
        <CheckBox Name="cbSampleYes" Content="I Love Coding" FontSize="20" />
        <CheckBox Name="cbSampleSure" Content="I Want to Register" FontSize="20" />
        <TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="28">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="You are not Registered" />
                    <Setter Property="Foreground" Value="Red" />
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding ElementName=cbSampleYes, Path=IsChecked}" Value="True" />
                                <Condition Binding="{Binding ElementName=cbSampleSure, Path=IsChecked}" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Text" Value="You are Registered" />
                            <Setter Property="Foreground" Value="Green" />
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>
</Window>

In the preceding code, once both checkboxes are checked, the text will change from “You are not Registered ” to “You are Registered ”. If you remove a check from any one of them, the text will again change to “You are not Registered”.

Event Trigger

An Event Trigger is activated when a RouteEvent of a Framework Element is raised. It is usually used when the animation is to be called in response to an event like colorAnimation, doubleAnimation and many other animations as needed. Inside the action a Storyboard is required. I will explain about Animation and Storyboard in detail in my next article.

Code Behind

 

<Window x:Class="WpfApplication26.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="EventTriggerSample" Height="288" Width="450" >
    <Grid>
        <TextBlock Name="lblStyled" Text="I Like C# Corner" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.200" Storyboard.TargetProperty="FontSize" To="30" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.500" Storyboard.TargetProperty="FontSize" To="18" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

In the preceding code when the mouse enters, the text block changes to a Font Size of 30 pixels. When the mouse leaves, the textblock changes to the Font Size back to 18 pixels, but a bit slower.

I hope this article will able to help beginners in understanding how Triggers work in Windows Presentation Foundation (WPF).