How can I get a trigger to change the color of a TextBlock based on a DataContext Property?

Question

Why does the following code get the runtime error:

Members of the Triggers collection must be of type EventTrigger

But the EventTrigger element doesn't have a Binding property.

So how do I change the color of the TextBlock based on the DataContext Property?

XAML:

<Window x:Class="TestTrigger123345.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <StackPanel HorizontalAlignment="Left">
        <TextBlock Text="{Binding Status}">
            <TextBlock.Triggers>
                <DataTrigger Binding="{Binding Status}" Value="off">
                    <Setter Property="TextBlock.Background" Value="Red"/>
                </DataTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </StackPanel>
</Window>

Code:

namespace TestTriggers
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            DataContext = this;
            Status = "off";
        }

        public string Status { get; set; }    
    }
}

Solution 1

That is because you can only set event triggers directly on the Trigger property..

Use a style to achieve what you want:

<Style x:Key="Triggers" TargetType="TextBlock">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Status}" Value="off">
            <Setter Property="TextBlock.Background" Value="Red"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

The following objects have Triggers collections that can contain the trigger types listed:

FrameworkElement     Style, ControlTemplate, DataTemplate
----------------     ------------------------------------
EventTrigger         EventTrigger
                     Trigger or MultiTrigger
                     DataTrigger or MultiDataTrigger

Solution 2

You can do it in a style:

<TextBlock Text="{Binding Status}">
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Status}" Value="off">
                    <Setter Property="Background" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

Solution 3

There is a typo as you did not close out Style.Triggers. And I found I needed to use the property TextBlock.Background. Thanks, you got me to the solution.

    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Status}" Value="off">
                    <Setter Property="TextBlock.Background" Value="Red"/>
                 </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>