如何在 wpf 中动态选择 TextBlock animation 类型？

Question

I would like to create simple animation which type is based on some value. I need to change color of text in TextBlock control, but the target color is depending on bounded variable. I've already created 2 DataTriggers and depending on a value of my bounded variable, a proper animation should start. At the beginning everything seems to work properly (AnimationValue is equal to 0 on start), when the value changes to 1, animation runs, then value returns to 0. The problem is, when the value turns to 2 (Animation with another color also runs) and then again 0, the first animation is not going to run anymore but the second one still works in a proper way.

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

There is no problem with setting a correct value - i've checked it using a debugger and everytime correct value is set. 0 is always between 1 and 2. DataContext is also not a problem - a connection between View and ViewModel is not being broken. I've noticed that broken animation is always the first one in xaml file. Now the "Gray" animation stops working correctly, but if i change order in xaml file, firebrick animation will be the broken one. Thanks for any help.

Answer 1

It looks like running StoryBoard s in triggers is a weird thing. I don't have a technical explanation as to how they behave but here is a SO question where I found an answer for you.

Here is some code based on the answer above that works:

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