.NET 4.0+

WPF Triggers - MultiTriggers

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

The one hundred and fifty-first part of the Windows Presentation Foundation Fundamentals tutorial continues to examine triggers. This instalment looks at the MultiTrigger class. It allows the creation of property triggers that require more than one condition to be true.

MultiTrigger

In the previous two articles we've used property triggers to update the user interface of controls automatically, if one of their properties matches a specific value. This allows you to create interesting user interfaces but is quite limited. One of the key limitations is that you can only monitor a single property. Sometimes you will only want to change the control's properties when several values meet your criteria. For example, you might want a list item in a ListBox to be coloured differently when it contains a specific value and the mouse pointer is within its boundaries.

To solve the problem of needing more than one condition you can use a MultiTrigger. This works in much the same way as a standard property trigger. The key difference is that you can specify a collection of property values to match and the control is only updated when all of the conditions are met.

To demonstrate the use of MultiTriggers we need a sample solution. Create a new WPF Application in Visual Studio, naming the project, "MultiTriggerDemo". Once the solution is ready, replace the XAML of the main window with the code below:

<Window x:Class="MultiTriggerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MultiTrigger Demo"
        Height="200"
        Width="250">
    <Window.Resources>
        <Style TargetType="ListBoxItem">
            <Setter Property="Background" Value="LemonChiffon"/>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Yellow"/>
                </Trigger>
                <Trigger Property="Content" Value="Aaron Paul">
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <ListBox>
        <ListBoxItem>Bryan Cranston</ListBoxItem>
        <ListBoxItem>Anna Gunn</ListBoxItem>
        <ListBoxItem>Aaron Paul</ListBoxItem>
        <ListBoxItem>Dean Norris</ListBoxItem>
        <ListBoxItem>Betsy Brandt</ListBoxItem>
        <ListBoxItem>RJ Mitte</ListBoxItem>
        <ListBoxItem>Bob Odenkirk</ListBoxItem>
        <ListBoxItem>Steven Michael Quezada</ListBoxItem>
        <ListBoxItem>Johnathan Banks</ListBoxItem>
        <ListBoxItem>Giancarlo Esposito</ListBoxItem>
    </ListBox>
</Window>

The window contains a list box with a number of ListBoxItems, each holding simple text. A style is defined for the items that sets the background to lemon chiffon by default. The style also includes two property triggers. The first changes the background colour of an item to yellow when the mouse is moved over it. The second sets the font weight to bold if the item contains the name, "Aaron Paul".

Run the program to see the results. As you move the mouse over the items in the list they will change colour. This can make it easier to see the item that will be selected when you click the mouse button. You should also see that the "Aaron Paul" item appears darker.

Adding a MultiTrigger

You might decide that the example would be improved if moving the mouse over the bold item produced a different result. To do so, two properties must be matched. The IsMouseOver property must be true and the Content of the list box item must be correct. This cannot be achieved with a simple property trigger.

The MultiTrigger class introduces a collection of Condition objects in its Conditions property. Each has similar Property and Value attributes to those used in property triggers, allowing you to name a property and specify a target value.

Let's create a MultiTrigger that detects the mouse moving over items with the content, "Aaron Paul". We'll change the background colour, overriding the colour set by the existing trigger, and increase the font size. We won't affect the font weight, so this will be set by the base style and its existing triggers.

Add the following XAML immediately after the second trigger:

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True"/>
        <Condition Property="Content" Value="Aaron Paul"/>
    </MultiTrigger.Conditions>
    <MultiTrigger.Setters>
        <Setter Property="Background" Value="Orange"/>
        <Setter Property="FontSize" Value="15"/>
    </MultiTrigger.Setters>
</MultiTrigger>

Run the program again to see the changes. The image below shows the results of the new trigger when the mouse hovers over the "Aaron Paul" item.