重新触发 WPF 动画

Question

我有以下 WPF XAML，它尝试根据复选框的 IsChecked 属性对 2 个矩形的可见性进行动画处理。所以 Checked 表示蓝框出现一秒后红框消失，Unchecked 表示红框出现蓝框消失，Undetermined 表示没有可见。 我正在使用故事板，但我错过了一些东西。它适用于第一个触发器，但一些动画属性卡住了。

  <DataTemplate x:Key="dt">
                <DockPanel>
                    <CheckBox x:Name="ckToggle" Content="Toggle" DockPanel.Dock="Top" IsThreeState="True"/>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle x:Name="a" Visibility="Hidden" Width="100" Height="100" Fill = "Red"/>
                        <Rectangle x:Name="b" Visibility="Hidden" Width="100" Height="100" Fill = "Blue"/>
                    </StackPanel>
                </DockPanel>

                <DataTemplate.Triggers>

                    <DataTrigger Binding="{Binding ElementName=ckToggle, Path=IsChecked}" Value="True">
                         <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="a" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="b" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                                        <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Hidden}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions> 
                         <DataTrigger.ExitActions>
                        </DataTrigger.ExitActions> 

                    </DataTrigger>

                    <DataTrigger Binding="{Binding ElementName=ckToggle, Path=IsChecked}" Value="False">
                           <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="b" Storyboard.TargetProperty="Visibility"  >
                                        <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="a" Storyboard.TargetProperty="Visibility">
                                         <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                                            <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Hidden}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions> 
                         <DataTrigger.ExitActions>
                        </DataTrigger.ExitActions> 
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>

     <ContentControl ContentTemplate="{StaticResource dt}"/>

如果有人可以帮忙，谢谢 布莱恩

Answer 1

您遇到的问题是 wpf 故事板的属性。当你开始一个故事板时，它永远不会停止，直到你告诉它。因此，当您调用第二个故事板时，您调用的第一个故事板仍在运行，您遇到了麻烦。离开那里的方法如下： 首先将每个触发器的两个情节提要合并为一个（您可以将多个动画放在一个情节提要中，您不必这样做，但这会使事情变得更容易......）。现在为剩下的两个 BeginStoryboard 调用中的每一个添加一个名称，并将具有相同名称的 StopStoryboard 调用添加到 exitActions 块中的每个 dataTrigger 中。我最终得到了以下代码（希望）可以按照您的意愿工作：

<Window x:Class="Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Test"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <DataTemplate x:Key="dt">
        <DockPanel>
            <CheckBox x:Name="ckToggle" Content="Toggle" DockPanel.Dock="Top" IsThreeState="True"/>
            <StackPanel Orientation="Horizontal">
                <Rectangle x:Name="a" Visibility="Hidden" Width="100" Height="100" Fill = "Red"/>
                <Rectangle x:Name="b" Visibility="Hidden" Width="100" Height="100" Fill = "Blue"/>
            </StackPanel>
        </DockPanel>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding ElementName=ckToggle, Path=IsChecked}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Name="st1">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="a" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="b" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                                <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Hidden}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="st1"/>
                </DataTrigger.ExitActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding ElementName=ckToggle, Path=IsChecked}" Value="False">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Name="st2">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="b" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="a" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                                <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Hidden}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="st2"/>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</Window.Resources>
<ContentControl ContentTemplate="{StaticResource dt}"/></Window>