使用情节提要和 DataTrigger 制作一个脉动的 TextBlock - 动画中的异常

Posted 2023-02-21

【中文标题】使用情节提要和 DataTrigger 制作一个脉动的 TextBlock - 动画中的异常

【英文标题】：Make a pulsating TextBlock with storyboards and DataTrigger - Exception in animation

【发布时间】：2021-07-21 01:47:40

【问题描述】：

我有一个 TextBlock，它显示来自字体的图像。 当在 ViewModel 中设置布尔标志时，我希望 TextBlock 跳动。 我在这个类似的 *** 问题中找到了Answer given by Chris W。他示例中的第二个框正是我想要的。脉动的例子基本上是：

<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>

由于我对 WPF 中的触发器和情节提要一无所知，因此我尝试将其放入 DataTrigger 中，但失败了。

我想出了这个：

<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 是 ViewModel 中的布尔属性。

当我将 Activate bool 设置为 True 时，我得到了这个异常：

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

很明显，这些行是不正确的：

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

很遗憾，我不了解该异常以及如何修复它。

有什么建议吗？

【参考方案1】：

由于您在动画中访问了转换RenderTransform，因此您必须将其添加到元素中。我还把RepeatBehavior改成执行10次，也可以设置成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>