.NET 4.0+

WPF Triggers - Multi Data Triggers

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

The one hundred and fifty-fourth part of the Windows Presentation Foundation Fundamentals tutorial completes the description of triggers. This article looks at the MultiDataTrigger, which waits for several target property values, each read using data binding.

MultiDataTrigger

In the previous article we looked at data triggers. These allow you to automate a user interface change when the value returned by a data binding matches a target value. In an earlier article, we saw the MultiTrigger, which monitors multiple properties and triggers a change when they all meet the given conditions. In this, the final article describing WPF triggers, we'll consider the MultiDataTrigger. This combines the key functionality of the two aforementioned types by triggering property changes when two or more bindings return the correct values.

Much of the functionality of MultiDataTriggers is identical to those of triggers that we've already seen, so only a brief description and example is needed. To begin, create a new WPF application in Visual Studio. Name the new solution, "MultiDataTriggerDemo". Once the project is ready, replace the XAML of the main window with the following:

<Window x:Class="MultiDataTriggerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MultiDataTrigger Demo"
        Height="110"
        Width="250">
    
    <Window.Resources>
        <Style TargetType="CheckBox">
            <Setter Property="Margin" Value="5 5 20 5"/>
        </Style>
    </Window.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        
        <StackPanel Orientation="Horizontal">
            <CheckBox Name="Chk1">Check Me</CheckBox>
            <CheckBox Name="Chk2">Check Me Too</CheckBox>
        </StackPanel>
        
        <Rectangle Grid.Row="1">
            <Rectangle.Style>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="Silver"/>
                    <Setter Property="Margin" Value="5"/>
                </Style>
            </Rectangle.Style>
        </Rectangle>
    </Grid>
</Window>

The window includes two CheckBoxes and a filled Rectangle. Note that the style for the rectangle is set within its Style property directly. We haven't set styles in this way before in the tutorial because this defines the appearance for a single control, rather than centralising a style for reuse. However, it can be useful if you wish to apply triggers to a single item.

Adding a MultiDataTrigger

Adding a MultiDataTrigger is very similar to adding the other types of trigger that we've seen. As with MultiTrigger, you need to define a collection of conditions using the Conditions property. Each requires two attributes to be set. You define the binding used to identify the monitored value in the Binding property. The target value is set in Value. You can change properties immediately by creating a collection of setters in the Setters property or launch animations with EnterActions and ExitActions.

Let's define a trigger that changes the fill colour for the rectangle when both of the checkboxes are checked. Add the following XAML within the rectangle's style:

<Style.Triggers>
    <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding ElementName=Chk1,Path=IsChecked}"
                       Value="True"/>
            <Condition Binding="{Binding ElementName=Chk2,Path=IsChecked}"
                       Value="True"/>
        </MultiDataTrigger.Conditions>
        <MultiDataTrigger.Setters>
            <Setter Property="Fill" Value="Gold"/>
        </MultiDataTrigger.Setters>
    </MultiDataTrigger>
</Style.Triggers>

Run the program to see the result. When both checkboxes are checked, the rectangle should become gold in colour. When only one checkbox is ticked, or neither is, the rectangle remains silver.