如何在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> 

它好，它顯示了程序啓動時。但是點擊它時會拋出異常。錯誤是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>