故事板动画没有动画

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>