WPF Triggers

Triggers are a very important feature of WPF that helps to change the visual effect of a framework element or control. Triggers are used in styles to change the visual effect of a WPF element when a property or data is changed or an event is fired. For changing the visual effect of a WPF element, triggers reduce the code in code behind.

For example, let's say you have a rectangle control. You want to change the background color of that control when the mouse hovers over the rectangle control and revert back when mouse leaves. For this you need to code in the mouse hover event and mouse leave event of the rectangle control in the backend class for changing the color of rectangle as in the following code.

Example 1

private void Rectangle_MouseMove_1(object sender, MouseEventArgs e)
{
    this.rctback.Fill = Brushes.Red;
}

private void Rectangle_MouseLeave(object sender, MouseEventArgs e)
{
    this.rctback.Fill = Brushes.Green;
}

In the preceding code you have filled the background color of the Rectangle control by writing code in two different events, but a trigger helps to overcome this problem by reducing the code. See the following example.

Example 2 

<Rectangle Name="rctback" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100" Margin="178,92,0,0" >
            <Rectangle.Style>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="Green"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Rectangle.Style>
</Rectangle>

 There are three types of triggers available in WPF.

1. Trigger or Property trigger
2. Data Trigger
3. Event Trigger 

Trigger or Property Trigger

It's a default trigger of WPF and tagged as <Trigger>. This trigger is fired when the property of an owned control is changed.

Example

<Rectangle Name="rctback" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100" Margin="178,92,0,0" >
            <Rectangle.Style>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="Green"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Rectangle.Style>
</Rectangle>

Data Trigger

This trigger is tagged as <DataTrigger> and fires when the data bound with the control is changed.

<Rectangle Name="rctback" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100" Margin="178,92,0,0" >
            <Rectangle.Style>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="Green"></Setter>
                    <DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">
                        <Setter Property="Fill" Value="Red" />
                    </DataTrigger>
                </Style>
            </Rectangle.Style>
        </Rectangle>

Event Trigger

An Event trigger is fired when an action is done with the control and tagged as <EventTrigger>.

<Rectangle Name="rctback" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100" Margin="178,92,0,0" >
    <Rectangle.Style>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="Green"></Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="Height" To="300" />
                                <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="Width" To="300" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>

                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="Height" To="100" />
                                <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="Width" To="100" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

Summary

I hope you now understand WPF triggers and types of triggers.