How to programmatically create a rectangle/button and make it animate along a curve path?

Question

WPF: How to programmatically create a rectangle/button and make it animate along a curve path?

Thank you!

Answer 1

Just paste that in your Window1.xaml.cs file inside the Window1 class, Took the example from Here, have fun!

Storyboard pathAnimationStoryboard;

     public Window1()
     {
      InitializeComponent();

      this.Margin = new Thickness(20);

      // Create a NameScope for the page so that
      // we can use Storyboards.
      NameScope.SetNameScope(this, new NameScope());

      // Create a button.
      Button aButton = new Button();
      aButton.MinWidth = 100;
      aButton.Content = "A Button";

      // Create a MatrixTransform. This transform
      // will be used to move the button.
      MatrixTransform buttonMatrixTransform = new MatrixTransform();
      aButton.RenderTransform = buttonMatrixTransform;

      // Register the transform's name with the page
      // so that it can be targeted by a Storyboard.
      this.RegisterName("ButtonMatrixTransform", buttonMatrixTransform);

      // Create a Canvas to contain the button
      // and add it to the page.
      // Although this example uses a Canvas,
      // any type of panel will work.
      Canvas mainPanel = new Canvas();
      mainPanel.Width = 400;
      mainPanel.Height = 400;
      mainPanel.Children.Add(aButton);
      this.Content = mainPanel;

      // Create the animation path.
      PathGeometry animationPath = new PathGeometry();
      PathFigure pFigure = new PathFigure();
      pFigure.StartPoint = new Point(10, 100);
      PolyBezierSegment pBezierSegment = new PolyBezierSegment();
      pBezierSegment.Points.Add(new Point(35, 0));
      pBezierSegment.Points.Add(new Point(135, 0));
      pBezierSegment.Points.Add(new Point(160, 100));
      pBezierSegment.Points.Add(new Point(180, 190));
      pBezierSegment.Points.Add(new Point(285, 200));
      pBezierSegment.Points.Add(new Point(310, 100));
      pFigure.Segments.Add(pBezierSegment);
      animationPath.Figures.Add(pFigure);

      // Freeze the PathGeometry for performance benefits.
      animationPath.Freeze();

      // Create a MatrixAnimationUsingPath to move the
      // button along the path by animating
      // its MatrixTransform.
      MatrixAnimationUsingPath matrixAnimation =
       new MatrixAnimationUsingPath();
      matrixAnimation.PathGeometry = animationPath;
      matrixAnimation.Duration = TimeSpan.FromSeconds(5);
      matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

      // Set the animation to target the Matrix property
      // of the MatrixTransform named "ButtonMatrixTransform".
      Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform");
      Storyboard.SetTargetProperty(matrixAnimation,
       new PropertyPath(MatrixTransform.MatrixProperty));

      // Create a Storyboard to contain and apply the animation.
      pathAnimationStoryboard = new Storyboard();
      pathAnimationStoryboard.Children.Add(matrixAnimation);

      // Start the storyboard when the button is loaded.
      aButton.Loaded += new RoutedEventHandler(button_Loaded);
     }

     void button_Loaded(object sender, RoutedEventArgs e)
     {
      pathAnimationStoryboard.Begin(this);
     }