wpf - 需要帮助更改 wpf 动画的代码

Question

我是 wpf 的初学者。我从 wpf 动画网站获得了代码。动画在停靠面板加载时开始。我想改变动画播放时间。我希望当用户单击椭圆然后动画开始，当用户单击停靠面板时动画将停止。这里是代码。

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <DockPanel>
        <Ellipse Width="200" Height="200" Name="MyEllipse">
            <Ellipse.Fill>
                <RadialGradientBrush >
                    <GradientStop Offset="0" Color="#CCCCCCCC" />
                    <GradientStop Offset="0.5" Color="white" />
                    <GradientStop Offset="1" Color="black"/>
                </RadialGradientBrush >
            </Ellipse.Fill>
        </Ellipse>
        <DockPanel.Triggers>
            <EventTrigger RoutedEvent="Page.Loaded">
                <BeginStoryboard Name="MyBeginStoryBoard">
                    <Storyboard Name="MyStoryBoard">
                        <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Ellipse.Height)" 
           From="0" To="200" AutoReverse="true"
           RepeatBehavior="0:0:10" BeginTime="0:0:0" />
                        <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Ellipse.Width)" 
           From="0" To="200" AutoReverse="true"
           RepeatBehavior="0:0:10" BeginTime="0:0:0" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </DockPanel.Triggers>
    </DockPanel>
</Grid>

Answer 1

将RoutedEvent改为PreviewMouseDown代替Page.Loaded。

编辑： 您可以通过将此触发器添加到DockPanel.Triggers：

<EventTrigger SourceName="MyEllipse" RoutedEvent="Ellipse.PreviewMouseDown">
    <StopStoryboard BeginStoryboardName="MyBeginStoryBoard" />
</EventTrigger>

这将让您通过单击 来停止动画Ellipse。有关暂停/恢复等的示例，请参阅MSDN 。