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 - Data Triggers

The one hundred and fifty-third part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of triggers. This instalment considers data triggers, which automatically update user interface elements according to data-bound values.

Data Triggers

In the previous few articles we've looked at three types of trigger. These allow you to perform instantaneous or animated changes to a control's properties in response to specific actions. We've seen property triggers, multitriggers and event triggers so far.

The fourth type of trigger that we'll consider is the data trigger. Data triggers are somewhat like property triggers. They monitor a value and trigger a user interface update if it is set to a specific value. The key difference is that the target value is found using data binding. This makes these triggers much more powerful.

Data triggers are ideal when you are developing a program that is dependent upon data binding, such as software that uses the Model View ViewModel (M-V-VM) design pattern. You can bind the monitored value to a property that is used elsewhere in the user interface, or create a member specifically for the trigger. You can even use value converters with the data binding. This means that you can work around the limitation of detecting a single value.

To demonstrate, create a new WPF application in Visual Studio. Name the project, "DataTriggerDemo". Once prepared, replace the XAML of the main window with the code below. This creates a simple window with a Slider and a ProgressBar. Both controls have their Value properties bound to the same member, "TheValue". Note the style, which sets the foreground colour of the progress bar to be green.

<Window x:Class="DataTriggerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Data Trigger Demo"
        Height="110"
        Width="250">
    <Window.Resources>
        <Style TargetType="{x:Type ProgressBar}">
            <Setter Property="Foreground" Value="Green" />
        </Style>
    </Window.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <Slider x:Name="MySlider" Margin="5" Minimum="0" Maximum="100"
                Value="{Binding TheValue}"/>
        <ProgressBar Grid.Row="1" Value="{Binding TheValue}" />
    </Grid>
</Window>

We need a data object that contains the target property for the bindings. Add a new class named, "DataObject" and create an integer property, as shown below:

public class DataObject
{
    public int TheValue { get; set; }
}

To complete the initial version of the program, we need to set the data context for the main window. Edit the code behind the window and change the constructor to set the DataContext property to a new instance of DataObject.

public MainWindow()
{
    InitializeComponent();
    DataContext = new DataObject();
}

Run the program to see the results. As you move the Slider, the ProgressBar should update with the same value.

WPF DataTrigger example window

Adding a Data Trigger

We can now add a data trigger to the style for the progress bar. As with property triggers, you set two attributes for the trigger. The first, Binding, holds the data binding that will be used to find a value. The second, Value, determines the specific value that will cause the trigger to fire.

Add the Triggers property and a DataTrigger object to the style, using the XAML shown below. This changes the bar colour to red when the Value is set to 100.

<Style.Triggers>
    <DataTrigger Binding="{Binding TheValue}" Value="100">
        <Setter Property="Foreground" Value="Red" />
    </DataTrigger>
</Style.Triggers>

Run the program again. You should see that the progress bar is green initially. When you move the slider to the far right, the bar changes colour to red.

WPF window with DataTrigger

22 April 2015