Wpf: Storyboard.TargetName works, but Setter TargetName doesn't.

Question

Hi,

Let's say we have a XAML code like this:

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Border.LayoutTransform>
                        <!--We are rotating randomly each image. Selected one will be rotated to 45°.-->
                        <RotateTransform Angle="{Binding RandomAngle}" x:Name="globalRotation"/>
                    </Border.LayoutTransform>
                    <Grid>
                        <Image Source="{Binding ImageLocation}" Stretch="None" />
                        <TextBlock x:Name="title" Text="{Binding Title}" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="title" Property="Visibility" Value="Visible"/>
                        <!--The next line will not compile.-->
                        <Setter TargetName="globalRotation" Property="Angle" Value="45"/>
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <!--This compiles well.-->
                                    <DoubleAnimation Storyboard.TargetName="globalRotation" Storyboard.TargetProperty="Angle" To="45" Duration="00:00:03"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This code is intended to display a set of images in a listbox. Each image has a random rotation, but when selected, rotates to 45 degrees.

Rotating selected image through a storyboard works well. I just specify Storyboard.TargetName and it rotates the image when selected (Trigger.ExitActions is omitted to make the code shorter).

Now, if I want, instead of using a storyboard, assign 45 degrees value directly, I can't do that, because <Setter TargetName="globalRotation" Property="Angle" Value="45"/>: it compiles with

"Cannot find the Trigger target 'globalRotation'. (The target must appear before any Setters, Triggers, or Conditions that use it.)"

error. What happens? I suppose that Storyboard.TargetName is evaluated during runtime, so let me compile it. Is it right?

How to make it work with just a setter, without using a storyboard?

Answer 1

Hi. The thing is that Trigger Setter can target only FrameworkElement or FrameworkContentElement objects, whereas Storyboard works with any DependencyProperty.

Here is a workaround:

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border x:Name="brd" HorizontalAlignment="Center" VerticalAlignment="Center" Tag="{Binding RandomAngle}">                            
                    <Border.LayoutTransform>
                        <!--We are rotating randomly each image. Selected one will be rotated to 45°.-->
                        <RotateTransform Angle="{Binding ElementName=brd, Path=Tag}" x:Name="globalRotation"/>
                    </Border.LayoutTransform>
                    <Grid>
                        <Image Source="{Binding ImageLocation}" Stretch="None" />
                        <TextBlock x:Name="title" Text="{Binding Title}" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="title" Property="Visibility" Value="Visible"/>
                        <!--The next line will not compile.-->
                        <Setter TargetName="brd" Property="Tag" Value="45"/>
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <!--This compiles well.-->
                                    <DoubleAnimation Storyboard.TargetName="globalRotation" Storyboard.TargetProperty="Angle" To="45" Duration="00:00:03"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>