WPF DataTrigger cannot find Trigger Target

Question

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid x:Name="grid">
            <Grid.Background>
                <SolidColorBrush x:Name="backgroundBrush" Color="Transparent" Opacity="0.1"/>
            </Grid.Background>
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsExpanded}" Value="True">
                <Setter TargetName="backgroundBrush" Property="Color" Value="Green" />
            </DataTrigger>
            <Trigger SourceName="grid" Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="backgroundBrush"
                                 Storyboard.TargetProperty="Color"
                                 To="White" Duration="0:0:1.5"/>
                         </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="backgroundBrush"
                                Storyboard.TargetProperty="Color"
                                AccelerationRatio="1" Duration="0:0:1.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions> 
            </Trigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ListBox.ItemTemplate>

Doesn't compile with error 'Cannot find the trigger target 'backgroundBrush'.'

If I remove the DataTrigger it will compile and work. If I change the DataTrigger to use TargetName="grid" Property="Background" it will compile and work (but without the desired opacity).

Where am I going wrong?

Splint

+1, good question. I thought I understood WPF, but I have no clue why this doesn't work... – Cain

(late comment, but yet...) You're changing the value of a color when you should actually have two different colors (defined as local resources) and then swap between them in the triggers' setters. I would think this is the cause of the problem (although it should be tested to know for sure). – Kiwanis

Answer 1

While I'm not sure why the brush isn't in the namescope, you can do this by swapping out the brush, and "dotting-down" to the Color property of the background brush in the animations like so:

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid x:Name="grid">
            <Grid.Background>
                <SolidColorBrush Color="Transparent" Opacity="0.1"/>
            </Grid.Background>
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsExpanded}" Value="True">
                <Setter TargetName="grid" Property="Background">
                    <Setter.Value>
                        <SolidColorBrush Color="Green" Opacity="0.1"/>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
            <Trigger SourceName="grid" Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="grid"
                             Storyboard.TargetProperty="Background.Color"
                             To="White" Duration="0:0:1.5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="grid"
                            Storyboard.TargetProperty="Background.Color"
                            AccelerationRatio="1" Duration="0:0:1.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ListBox.ItemTemplate>

Meredith

That worked - Thanks. backgroundBrush is actually in scope for the StoryBoard trigger and works without modification. I just can't understand why it would be out of scope for the DataTrigger. – Splint

Yeah, I couldn't figure that out either. I think it might be that the Storyboard's TargetName is resolved at runtime, while the Setter's TargetName is resolved at XAML parse time. – Meredith

OP code was changing the color property of a named brush. This code is changing the brush of a named element's property. I guess this is why this code works, and OP's doesn't. A better practice would be to declare both brushes as (different) resources in the datatemplate, and reference them in the setters. – Kiwanis