円を描いてC＃WPFでアニメーションとして移動する方法

Question

単純な円を描き、それをX、Y軸の定義された位置にコーディングしていきたいと思います。

たとえば、

WPFウィンドウに2つのボタンがあり、0,0（x、y）に円が表示されます。最初のボタンをクリックすると、X = 150とY = 40になります。しかし、その形はスムーズに行かなければなりません。私はそれが現在の位置で消滅し、定義された位置に現れたくないという意味です。私はそれがそこに行きたい。私はこれをどのようにするべきですか？手順を教えていただけますか？可能であれば、いくつかのコード例？

更新されたコード：

int X = 0; 
    int Y = 0; 

    public bool inside = true; 

    private void Button_Click_1(object sender, RoutedEventArgs e) 
    { 

     if (inside) 
     { 
      DoubleAnimation animatex = new DoubleAnimation(); 
      animatex.To = X++; 
      // animatex.Duration = new Duration(TimeSpan.FromSeconds(1)); 
      // animatex.RepeatBehavior = RepeatBehavior.Forever; 
      el.BeginAnimation(Canvas.LeftProperty, animatex); 

      DoubleAnimation animatey = new DoubleAnimation(); 
      animatey.To = Y++; 
      // animatey.RepeatBehavior = RepeatBehavior.Forever; 
      el.BeginAnimation(Canvas.TopProperty, animatey); 
     } 
    } 

Answer 1

XAMLは、ボタンの <Canvas> <Ellipse Width="10" Height="10" Canvas.Left="0" Canvas.Top="0" Fill="Black" x:Name="el"/> </Canvas> Clickイベントのようなものであるが、これは動作します。この

希望のようなものです。私はそれを試して、それは働いた。

Answer 2

それともだけXAMLで：ここや他の場所でストーリーボードの使用については、

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <StackPanel> 
     <Button Content="Move it"> 
      <Button.Triggers> 
       <EventTrigger RoutedEvent="Button.Click" > 
        <BeginStoryboard> 
         <Storyboard Storyboard.TargetName="theEllipse" Duration="00:00:05"> 
          <DoubleAnimation From="-5" To="145" Storyboard.TargetProperty="(Canvas.Left)"/> 
          <DoubleAnimation From="-5" To="35" Storyboard.TargetProperty="(Canvas.Top)"/> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Button.Triggers> 
     </Button> 
    </StackPanel> 
    <Border Margin="10" Grid.Row="1"> 
     <Canvas> 
      <Ellipse x:Name="theEllipse" Width="10" Height="10" Fill="BlueViolet" Canvas.Left="-5" Canvas.Top="-5" /> 
     </Canvas> 
    </Border> 
</Grid> 

検索。