BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Triggers - Property Triggers

The one hundred and forty-ninth part of the Windows Presentation Foundation Fundamentals tutorial starts to look at triggers. Triggers allow property values to change automatically in response to user actions.

Triggers

WPF controls support the use of triggers. A trigger changes one or more properties of a control in response to some action. There are several types of trigger that you can use, depending upon the triggering action that you wish to detect. They include property triggers, which update the control when one of its properties is set to a specific value, event triggers, which change properties when a routed event is raised, and data triggers, which react to data-bound values. The actions initiated by these triggers can also vary. In basic situations, a property can be immediately changed. In other situations, you may elect to perform an animation, based upon a storyboard.

In this article we'll start to examine the basics of triggers. We'll look at property triggers that change values immediately. In the following articles in the tutorial we will consider animations, storyboards and the other types of trigger.

To begin the demonstration we need a new solution. Create a WPF application in Visual Studio named, "PropertyTriggerDemo". Once the solution is ready, replace the XAML of the main window with the following code:

<Window x:Class="PropertyTriggerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="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 20 0 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}"/>
        <Button Style="{StaticResource ButtonStyle}">OK</Button>
    </StackPanel>
</Window>

This XAML generates a window containing two Labels, two TextBoxes and a Button. The text boxes and button controls are linked to styles that control their appearance.

WPF property triggers demo window

Adding a Property Trigger

A property trigger waits for a property to be set to a specific value. When the value is matched, one or more style setters are invoked to change the visuals for the control. If the property is changed again, the style returns to its original state.

There are three things that are required to create a property trigger within a style. Firstly, you must name the property that is to be monitored. Secondly, you need to set the value that triggers the user interface updates. These two values are set in the Property and Value properties of a Trigger object, defined within the style's Triggers collection. The third thing that is required is a list of style setters. These are applied when the trigger is active, in addition to, or overriding, the existing setters for the style.

Let's update the NameBox style to add a Triggers collection. We'll monitor the Text property and set the background colour of text boxes when they hold an empty string. Replace the XAML of the style with the code below:

<Style x:Key="NameBox" TargetType="TextBox">
    <Setter Property="Background" Value="AntiqueWhite"/>
    <Setter Property="Margin" Value="5 0 5 5"/>
            
    <Style.Triggers>
        <Trigger Property="Text" Value="">
            <Setter Property="Background" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

Run the program to see the results. When the two text boxes are empty, they will appear red. Entering some text into either control will change the background to antique white, which is defined in the first of the style's standard setters.

WPF property triggers based upon Text poperty being blank

WPF defines many dependency properties that allow you to react to certain events. For example, you can detect that the mouse pointer has moved into the area defined by a control using the Boolean IsMouseOver property. This type of property is ideally suited for use with property triggers.

To demonstrate, update the ButtonStyle style to match the XAML below. This changes the standard opacity of the button to 0.25, making the control quite transparent. The property trigger detects the mouse being over the button and increases the opacity to one, removing all transparency.

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="Margin" Value="0 20 0 0"/>
    <Setter Property="Opacity" Value="0.25"/>
    <Setter Property="Width" Value="100"/>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Opacity" Value="1" />
        </Trigger>
    </Style.Triggers>
</Style>

Run the program and move the mouse pointer over the button to see the effect.

6 April 2015