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.

Using a Value Converter

As data triggers can only monitor a single value, they are limited in the same way as property triggers. With property triggers, this makes it difficult to trigger an action when the value is within a range. However, you can easily overcome this limitation with a data trigger.

One option is to change the value to which the trigger is bound. For example, you might decide to implement a Boolean property that is true for one range of values and false for another. This would be an ideal target for the Binding property.

Another option is to create a value converter that converts an existing property, or group of properties, into a value purely designed for the trigger's operation. This is what we will do in the next example. We'll change the progress bar colour according to one of four ranges. 0-30 will be shown in green, 31-60 in yellow, 61-90 in orange and value of 90 or more will be displayed with a red bar.

To begin, we need to create a new converter. This will check which of the four ranges is in use and return a value between zero and three. We'll detect these values with triggers and change the bar colour accordingly.

Create a new class file named, "ProgressBarColorConverter" and add the following code:

public class ProgressBarColorConverter : IValueConverter
{
    public object Convert(
        object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        int progressValue = (int)value;

        if (progressValue <= 30)
            return 0;
        else if (progressValue <= 60)
            return 1;
        else if (progressValue <= 90)
            return 2;
        else
            return 3;
    }

    public object ConvertBack(
        object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

We now need to reference this value converter in the main window's XAML. Start by adding the namespace declaration within the Window element's opening tag:

xmlns:conv="clr-namespace:DataTriggerDemo"

Next we need to declare a resource for the converter. Add the following resource element within the Window's Resources collection. Add it just before the style so that it can be referenced as a static resource.

<conv:ProgressBarColorConverter x:Key="PBCConverter"/>

We can now add the triggers. We need three triggers in total, monitoring for the values 1, 2 and 3. We don't need to change the colour for the lower range, as this will use the default foreground colour for the progress bar.

Replace the existing trigger with the three shown below. Note how each monitors the same property, using the same converter. However, each looks for a different value.

<Style.Triggers>
    <DataTrigger Binding="{Binding TheValue,Converter={StaticResource PBCConverter}}"
                 Value="1">
        <Setter Property="Foreground" Value="Yellow" />
    </DataTrigger>
    <DataTrigger Binding="{Binding TheValue,Converter={StaticResource PBCConverter}}"
                 Value="2">
        <Setter Property="Foreground" Value="Orange" />
    </DataTrigger>
    <DataTrigger Binding="{Binding TheValue,Converter={StaticResource PBCConverter}}"
                 Value="3">
        <Setter Property="Foreground" Value="Red" />
    </DataTrigger>
</Style.Triggers>

Run the program to see the results. You should find that as you slide the slider, the progress bar's colour changes.

22 April 2015