Make a pulsating TextBlock with storyboards and DataTrigger - Exception in animation

Question

I have a TextBlock which displays an image from a font. I want the TextBlock to pulsate when a boolean flag is set in the ViewModel. I found the Answer given by Chris W in this similar Stackoverflow question. The second box in his example is just what I want. The pulsating example is basically:

<Storyboard x:Key="Pulse">
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
            Storyboard.TargetName="PulseBox"
        >
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.15"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
            Storyboard.TargetName="PulseBox"
        >
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.15"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

As I knowing nothing about triggers and Storyboards in WPF, I gave it a try to put this in a DataTrigger but failed big time.

I came up with this:

<TextBlock Text="SomeCodeToAImageInAFont" Background="CornflowerBlue">
    <TextBlock.Style>
        <Style>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Activate}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                             <Storyboard>
                                 <DoubleAnimationUsingKeyFrames 
                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                 >
                                     <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.15"/>
                                     <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames
                                     Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                >
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.15"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

Activate is a boolean property in the ViewModel.

When I set the Activate bool to True I get this exception:

System.InvalidOperationException
The property [Unknown] does not point to a DependencyObject in the path (0).(1)[0].(2).

It's quite clear that these lines are incorrect:

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"

Unfortunately I don't understand the exception and how to fix it.

Any suggestions?

Rekshino · Answer 1 · 2021-04-27T18:33:40.257

Since you access a transformation RenderTransform in your animation, you have to add it to the element. I also changed RepeatBehavior to do execution 10 times, or you can set it to RepeatBehavior="Forever".

<TextBlock Text="SomeCodeToAImageInAFont" Background="CornflowerBlue">
        <TextBlock.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
            </TransformGroup>
        </TextBlock.RenderTransform>
    <TextBlock.Style>
        <Style>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Activate}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames RepeatBehavior="10x"
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                            >
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.15"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames RepeatBehavior="10x"
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                        >
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.15"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

Make a pulsating TextBlock with storyboards and DataTrigger - Exception in animation

1 Answers1