故事板动画没有动画

Storyboard animation does not animate

我创建了一个自定义控件,它的目的是显示任务的当前状态,在没有动画的情况下更改选择的部分已经完成,我正在努力的是动画。它不播放应该是的整个序列:状态 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>

问题

问题是,当尝试为一个故事板制作动画时,最后一个故事板没有停止,因此应该开始的故事板没有

解决方案

为了让另一个故事板动画化,我们需要停止上一个动画故事板,为此,我们必须为所有 <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>