Анимация раскадровки не оживляет

Question

Я создал пользовательский элемент управления, его целью является отображение текущего состояния задачи, часть изменения выбора без анимации выполнена, с чем я борюсь, это анимация. Он не воспроизводит всю последовательность, которая должна быть: Состояние 1: Свернуть => Изменить цвет переднего плана на серый | => Состояние 2: изменить цвет переднего плана на белый => выделить. Вместо этого он, кажется, пропускает раскадровку.

Проблема заключается в приведенном ниже коде, и я не знаю, что я делаю здесь неправильно, я довольно новичок в XAML и уверен, что сделал что-то глупое:

<UserControl.Template>
        <ControlTemplate>
            <Border Background="#252E3B">
                <Grid>
                    <Grid.RowDefinitions>

                        <RowDefinition/>
                        <RowDefinition/>

                    </Grid.RowDefinitions>

                    <TextBlock x:Name="text1" Text="State 1" Grid.Row="0"
                       VerticalAlignment="Center"/>
                    <TextBlock x:Name="text2" Text="State 2" Grid.Row="1"
                       VerticalAlignment="Center"/>
                 </Grid>
            </Border>

            <!-- Triggers: here lies the problem -->
            <ControlTemplate.Triggers>
                <!-- State 1 -->

                <!-- State 1 Selected -->
                <DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Selected}">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>

                                <!-- Change Font Color -->
                                <ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                                                Storyboard.TargetName="text1"
                                                To="White"
                                                Duration="0:0:0.2"/>
                                <!-- Make font bigger -->
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 Storyboard.TargetName="text1"
                                                 From="15"
                                                 To="30" 
                                                 BeginTime="0:0:0.3"
                                                 Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>

                <!-- State 1 Unselected -->
                <DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Unselected}">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>

                                <!-- Make font smaller -->
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 Storyboard.TargetName="text1"
                                                 From="30"
                                                 To="15" 
                                                 Duration="0:0:0.5"/>
                                <!-- Change Font Color -->
                                <ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                                                Storyboard.TargetName="text1"
                                                To="Gray"
                                                BeginTime="0:0:0.6"
                                                Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>


                <!-- State 2 -->

                <!-- State 2 Selected -->
                <DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Selected}">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>

                                <!-- Change Font Color -->
                                <ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                                                Storyboard.TargetName="text2"
                                                To="White"
                                                Duration="0:0:0.2"/>
                                <!-- Make font bigger -->
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 Storyboard.TargetName="text2"
                                                 From="15"
                                                 To="30" 
                                                 BeginTime="0:0:0.3"
                                                 Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>

                <!-- State 2 Unselected -->
                <DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Unselected}">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>

                                <!-- Make font smaller -->
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 Storyboard.TargetName="text2"
                                                 From="30"
                                                 To="15" 
                                                 Duration="0:0:0.5"/>
                                <!-- Change Font Color -->
                                <ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                                                Storyboard.TargetName="text2"
                                                To="Gray"
                                                BeginTime="0:0:0.6"
                                                Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </UserControl.Template>

Answer 1

Проблема

Проблема заключалась в том, что при попытке анимировать одну раскадровку последняя не остановилась, поэтому раскадровка, которая должна была запускаться, не

Решение

Для анимации другой раскадровки нам нужно остановить последнюю анимированную раскадровку, чтобы сделать это, мы должны установить имя для всех <BeginStoryboard>, после этого когда мы начинаем новую раскадровку (<BeginStoryboard>), мы должны позвонить другим <StopStoryboard BeginStoryboardName="Storyboard1"/>, чтобы остановиться до <BeginStoryboard x:Name="Storyboard2">

Код

<!-- State 1 -->

                <!-- State 1 Selected -->
                <DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Selected}">
                    <DataTrigger.EnterActions>
                        <StopStoryboard BeginStoryboardName="StoryboardUnselected1"/>

                        <BeginStoryboard x:Name="StoryboardSelected1">
                            <Storyboard>

                                <!-- Change Font Color -->
                                <ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                                                Storyboard.TargetName="text1"
                                                To="White"
                                                Duration="0:0:0.2"/>
                                <!-- Make font bigger -->
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 Storyboard.TargetName="text1"
                                                 From="15"
                                                 To="30" 
                                                 BeginTime="0:0:0.3"
                                                 Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>

                <!-- State 1 Unselected -->
                <DataTrigger Binding="{Binding Value1}" Value="{x:Static core:StatusState.Unselected}">
                    <DataTrigger.EnterActions>
                        <StopStoryboard BeginStoryboardName="StoryboardSelected1"/>

                        <BeginStoryboard x:Name="StoryboardUnselected1">
                            <Storyboard>

                                <!-- Make font smaller -->
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 Storyboard.TargetName="text1"
                                                 From="30"
                                                 To="15" 
                                                 Duration="0:0:0.5"/>
                                <!-- Change Font Color -->
                                <ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                                                Storyboard.TargetName="text1"
                                                To="Gray"
                                                BeginTime="0:0:0.6"
                                                Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>


                <!-- State 2 -->

                <!-- State 2 Selected -->
                <DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Selected}">
                    <DataTrigger.EnterActions>
                        <StopStoryboard BeginStoryboardName="StoryboardUnselected2"/>

                        <BeginStoryboard x:Name="StoryboardSelected2">
                            <Storyboard>

                                <!-- Change Font Color -->
                                <ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                                                Storyboard.TargetName="text2"
                                                To="White"
                                                Duration="0:0:0.2"/>
                                <!-- Make font bigger -->
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 Storyboard.TargetName="text2"
                                                 From="15"
                                                 To="30" 
                                                 BeginTime="0:0:0.3"
                                                 Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>

                <!-- State 2 Unselected -->
                <DataTrigger Binding="{Binding Value2}" Value="{x:Static core:StatusState.Unselected}">
                    <DataTrigger.EnterActions>
                        <StopStoryboard BeginStoryboardName="StoryboardSelected2"/>

                        <BeginStoryboard x:Name="StoryboardUnselected2">
                            <Storyboard>

                                <!-- Make font smaller -->
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 Storyboard.TargetName="text2"
                                                 From="30"
                                                 To="15" 
                                                 Duration="0:0:0.5"/>
                                <!-- Change Font Color -->
                                <ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                                                Storyboard.TargetName="text2"
                                                To="Gray"
                                                BeginTime="0:0:0.6"
                                                Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>