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>