Trigger to set Property in ItemTemplate

Question

I have the following definition of a UserControl

<UserControl x:Class="Logger.View.AdvancedToggleButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:converter="clr-namespace:Logger.Converter"
             xmlns:commonControls="clr-namespace:Logger.CommonControls"
             mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"
             DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <UserControl.Resources>
        <converter:CountToVisibilityConverter x:Key="CountToVisibilityConverter" />
    </UserControl.Resources>
    <ItemsControl ItemsSource="{Binding LogElements, UpdateSourceTrigger=PropertyChanged}">
        <ItemsControl.Resources>
            <Style TargetType="{x:Type ToggleButton}" >
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="container" 
                                    BorderThickness="1" Margin="1,2,1,1" Padding="2,2,4,2" BorderBrush="Black">
                                <ContentPresenter x:Name="contentPresenter" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Background" TargetName="container" Value="{Binding SelectionBrush, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
                                    <Setter Property="BorderThickness" TargetName="container" Value="1,1,1,0"></Setter>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Cursor" Value="Hand"/>
                                    <Setter Property="Background" TargetName="container" Value="{Binding SelectionBrush, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
                                    <Setter Property="Background" Value="{Binding SelectionBrush, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ItemsControl.Resources>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <ToggleButton Margin="2,1"
                        IsChecked="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                        Command="{Binding DataContext.ToggleCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"
                        CommandParameter="{Binding}">
                        <ToggleButton.Content>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="4,0,5,0" x:Name="tbText"/>

                                <Border Grid.Column="1" Margin="0,-1,-3,-1" MinWidth="20"
                                        VerticalAlignment="Stretch" HorizontalAlignment="Center"
                                        Background="Yellow" BorderBrush="LightGray" BorderThickness="1,0,0,0"
                                        Visibility="{Binding WarningCount, Converter={StaticResource CountToVisibilityConverter}}"
                                        Cursor="Hand">
                                    <commonControls:ActionLink HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding WarningCount}" 
                                                       FontFamily="Consolas" Margin="2,0" Command="{Binding DataContext.NavigateToWarningCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
                                </Border>

                                <Border Grid.Column="2" Margin="3,-1,-3,-1" MinWidth="20"
                                        VerticalAlignment="Stretch" HorizontalAlignment="Center"
                                        Background="Red" BorderBrush="LightGray" BorderThickness="1,0,0,0"
                                        Visibility="{Binding ErrorCount, Converter={StaticResource CountToVisibilityConverter}}"
                                        Cursor="Hand" >
                                    <commonControls:ActionLink HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ErrorCount}" 
                                                       FontFamily="Consolas" Foreground="White" Margin="2,0" />
                                </Border>
                            </Grid>
                        </ToggleButton.Content>
                    </ToggleButton>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

Everything just works fine. Now I've added another Property to this UserControl to set the BackgroundColor of the Checked ToggleButton-TextBlock (tbText) to a given SolidColorBrush.

My problem now is, that I have no idea how to correctly set the Trigger for this.

I tried to add the Trigger to the ControlTemplate.Triggers when the IsChecked is True. But I don't know how to access tbText from this point. Is this the correct location for the Trigger or do I have to add another Trigger at a lower level?

Answer 1

Your ToggleButton.IsChecked property is data bound to your IsSelected property so by default, you also want to set the TextBlock.Background when this IsSelected property is true. You can do that like this:

<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="4,0,5,0" 
    x:Name="tbText">
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected}" Value="True">
                    <Setter Property="Background" Value="{Binding YourColourBrush, 
                        RelativeSource={RelativeSource AncestorType={x:Type 
                        YourPrefix:YourUserControl}}}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>

Alternatively, you could just data bind directly to the ToggleButton.IsChecked property like this:

<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="4,0,5,0" 
    x:Name="tbText">
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource
                    AncestorType={x:Type ToggleButton}}}" Value="True">
                    <Setter Property="Background" Value="{Binding YourColourBrush, 
                        RelativeSource={RelativeSource AncestorType={x:Type 
                        YourPrefix:YourUserControl}}}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>