.NET 4.0+

WPF Triggers - Event Triggers

by Richard Carr, published at http://www.blackwasp.co.uk/WPFEventTriggers.aspx

The one hundred and fifty-second part of the Windows Presentation Foundation Fundamentals tutorial continues to look at triggers. This article moves on to event triggers, which cause actions, such as animation, when routed events are raised.

Event Triggers

The triggers that we've seen so far in the WPF tutorial fire when one or more of the properties of a control are set to specific target values. These property triggers are used to update the user interface, changing the control properties instantaneously or using animation.

Another type of trigger that is available to WPF developers is the event trigger. As the name suggests, this trigger causes actions in response to events being raised. You can detect any routed event and respond with an action or group of actions.

In this article we'll demonstrate event triggers with the simple window design that we've used in several previous instalments. To begin, create a new WPF application in Visual Studio. Name the project, "EventTriggerDemo". Once prepared, replace the XAML of the main window with the code below:

<Window x:Class="EventTriggerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Event Trigger Demo"
        Height="200"
        Width="250">
    <Window.Resources>
        <Style x:Key="NameBox" TargetType="TextBox">
            <Setter Property="Background" Value="AntiqueWhite"/>
            <Setter Property="Margin" Value="5 0 5 5"/>
        </Style>
	
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="Margin" Value="0 10 5 0"/>
            <Setter Property="Width" Value="100"/>
        </Style>
    </Window.Resources>
	
    <StackPanel>
        <Label Content="First Name" />
        <TextBox Style="{StaticResource NameBox}"/>
        <Label Content="Last Name" />
        <TextBox Style="{StaticResource NameBox}"/>
	
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Style="{StaticResource ButtonStyle}">OK</Button>
            <Button Style="{StaticResource ButtonStyle}">Cancel</Button>
        </StackPanel>
    </StackPanel>
</Window>

This XAML creates a window with two labels, two text boxes and two buttons. The text boxes and buttons are linked to styles for consistency.

Adding Event Triggers

Event triggers are added in a similar manner to the previous trigger types that we've considered. Within the style's Triggers property, you add one or more EventTrigger elements. You must set a value for the RoutedEvent property, which names the routed event that will cause the trigger to fire.

Let's add two event triggers to the style for the text boxes. Add the following Style.Triggers section within this style. The code has two triggers. The first fires when a TextBox receives the keyboard focus and the GotFocus event is raised. It causes the background to smoothly fade to gold over a period of a quarter of a second.

The second trigger also animates the background. It returns the colour to antique white when the focus is lost.

<Style.Triggers>
    <EventTrigger RoutedEvent="GotFocus">
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="Background.Color"
                    To="Gold" Duration="0:0:0.25"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>

    <EventTrigger RoutedEvent="LostFocus">
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="Background.Color"
                    To="AntiqueWhite" Duration="0:0:0.25"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Style.Triggers>

Run the program to see the results. At first, both text boxes have a pale background colour. Clicking into one of the text boxes, or giving it the focus using the tab key, causes the first animation to start. When the focus is lost, the colour fades to its original shade.