如何在 WPF 中使用动画移动 EllipsePath？

Question

我想使用 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>
    <Border Background="LightGray" Margin="167,63,224,190" CornerRadius="20,20,20,20" Height="40" Width="80">
        <Path Fill="Red">
            <Path.Data>
                <EllipseGeometry Center="20,20" RadiusX="20" RadiusY="20"/>
            </Path.Data>
            <Path.Effect>
                <DropShadowEffect Direction="270" ShadowDepth="2" Color="Gray"></DropShadowEffect>
            </Path.Effect>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Border.MouseDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <PointAnimation Storyboard.TargetProperty="Center" Duration="0:0:0.3" From="20,20" To="60,20"></PointAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </Border>
</Grid>

程序启动时出现就OK了。但是点击它会抛出异常。错误是 System.InvalidOperationException。那么我该如何解决这个问题呢？

Answer 1

也许这更接近您想要做的事情？

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Border Background="LightGray" Margin="167,63,224,190" CornerRadius="20,20,20,20" Height="40" Width="80">
        <Canvas>
            <Ellipse Fill="Red" Width="40" Height="40" Canvas.Left="0" Canvas.Top="0">
                <Ellipse.Effect>
                    <DropShadowEffect Direction="270" ShadowDepth="2" Color="Gray"></DropShadowEffect>
                </Ellipse.Effect>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Border.MouseDown">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:0.3" From="0" To="40" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
        </Canvas>
    </Border>
</Grid>

如何在 WPF 中使用动画移动 EllipsePath？

How can I move an EllipsePath using animation in WPF?

wpf

xaml

slider