如何在 wpf 中动态选择 TextBlock 动画类型？答案

【问题标题】：How to dynamically choose TextBlock animation type in wpf?如何在 wpf 中动态选择 TextBlock 动画类型？
【发布时间】：2019-10-04 02:30:37
【问题描述】：

我想创建基于某个值的类型的简单动画。我需要更改 TextBlock 控件中文本的颜色，但目标颜色取决于有界变量。我已经创建了 2 个 DataTriggers，并且根据我的有界变量的值，应该开始正确的动画。一开始一切似乎都正常（AnimationValue在开始时等于0），当值变为1时，动画运行，然后值返回0。问题是，当值变为2时（另一种颜色的动画也运行）然后再次为 0，第一个动画将不再运行，但第二个动画仍然以正确的方式工作。

                <Border
                    Grid.Column="0"
                    Background="Transparent">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontSize="32"
                        Foreground="White"
                        Text="MyText">
                        <TextBlock.Style>
                            <Style>
                                <Style.Triggers>

                                    <DataTrigger Binding="{Binding Path=AnimationValue}" Value="1">
                                        <DataTrigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ColorAnimation
                                                        Storyboard.TargetProperty="Foreground.Color"
                                                        To="Gray"
                                                        Duration="0:0:0.2" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.EnterActions>
                                        <DataTrigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ColorAnimation
                                                        Storyboard.TargetProperty="Foreground.Color"
                                                        To="White"
                                                        Duration="0:0:0.2" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.ExitActions>
                                    </DataTrigger>

                                    <DataTrigger Binding="{Binding Path=AnimationValue}" Value="2">
                                        <DataTrigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ColorAnimation
                                                        Storyboard.TargetProperty="Foreground.Color"
                                                        To="Firebrick"
                                                        Duration="0:0:0.2" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.EnterActions>
                                        <DataTrigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ColorAnimation
                                                        Storyboard.TargetProperty="Foreground.Color"
                                                        To="White"
                                                        Duration="0:0:0.2" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.ExitActions>
                                    </DataTrigger>



                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </Border>

设置正确的值没有问题 - 我已经使用调试器检查过它，并且每次设置正确的值。 0 始终介于 1 和 2 之间。DataContext 也不是问题 - View 和 ViewModel 之间的连接没有被破坏。我注意到损坏的动画始终是 xaml 文件中的第一个动画。现在“灰色”动画停止正常工作，但如果我更改 xaml 文件中的顺序，耐火砖动画将是损坏的动画。感谢您的帮助。

【问题讨论】：

您能分享一下您是如何更改视图模型中的 AnimationValue 的吗？
你是在视图模型中将 AnimationValue 设置为 1 还是 2 后立即设置为 0 吗？还是在 AnimationValue 设置回 0 之前有延迟？

标签： c# wpf xaml animation

【解决方案1】：

看起来在触发器中运行StoryBoards 是一件很奇怪的事情。我没有关于它们的行为方式的技术解释，但这里是 SO question，我为你找到了答案。

这里有一些基于上述答案的代码：

<Style>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=AnimationValue}" Value="0">
            <DataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="Animation1" />
                <StopStoryboard BeginStoryboardName="Animation2" />
                <BeginStoryboard x:Name="Animation0">
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetProperty="Foreground.Color"
                            To="White"
                            Duration="0:0:0.2" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>

        <DataTrigger Binding="{Binding Path=AnimationValue}" Value="1">
            <DataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="Animation0" />
                <StopStoryboard BeginStoryboardName="Animation2" />
                <BeginStoryboard x:Name="Animation1">
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetProperty="Foreground.Color"
                            To="Gray"
                            Duration="0:0:0.2" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>

        <DataTrigger Binding="{Binding Path=AnimationValue}" Value="2">
            <DataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="Animation0" />
                <StopStoryboard BeginStoryboardName="Animation1" />
                <BeginStoryboard x:Name="Animation2">
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetProperty="Foreground.Color"
                            To="Firebrick"
                            Duration="0:0:0.2" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

【讨论】：