WPF: Canvas, animating rectangle-CodePudding

I want to animate, a rectangle in my canvas to go up. This should happen in the coder behind. In the end, I want to let the rectangle go up and down in while loop, but I can't even get it to go in one direction.

Xaml:

<Window x:Class="WpfApp.View.CPR"
        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:WpfApp.View"
        mc:Ignorable="d"
        Title="CPR" Height="250" Width="210">
    <Grid Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="0.5*"/>
        </Grid.ColumnDefinitions>

    
        


        <StackPanel Grid.Column="1">
            <TextBlock Text="Counter" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="0" Background="Black" Foreground="White"/>
            <TextBlock Text="" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="0" Background="Black" Foreground="White"/>
        </StackPanel>



        <Canvas Grid.Column="0" Grid.Row="0" Grid.RowSpan="2">
            <Rectangle Fill="Red" Height="2" Width="110" Canvas.Top="20" Canvas.Left="23.75"/>
            <Rectangle Fill="LawnGreen" Height="20" Width="5" Canvas.Top="170" Canvas.Left="76.25" x:Name="line"/>
            <Rectangle Fill="Red" Height="2" Width="110" Canvas.Top="190" Canvas.Left="23.75"/>
        </Canvas>
        <StackPanel Grid.Row="1"/>

    </Grid>
</Window>

In my code, I tried something from the internet. I actually have no clue.

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfApp.View
{
    /// <summary>
    /// Interaktionslogik für CPR.xaml
    /// </summary>
    public partial class CPR : Window
    {
        public CPR()
        {
            InitializeComponent();

            var translation = new TranslateTransform(0, -170);
            var animation = new DoubleAnimation();
            animation.Duration = new Duration(new TimeSpan(625));
            animation.RepeatBehavior = RepeatBehavior.Forever;
            animation.From = 76.25;
            animation.To = 20;
            var board = new Storyboard();
            board.Children.Add(animation);
            Storyboard.SetTarget(board, translation);
            Storyboard.SetTargetProperty(board, new PropertyPath(Rectangle.Y));
            line.Loaded  = delegate (object sender, RoutedEventArgs e)
            {
                line.BeginStoryboard(board);
            };
        }
    }
}

Thanks for your help!

CodePudding user response：

You would simply animate the Canvas.Top property.

The following example would animate the Top value from 100 to 200 within 1 second, then back from 200 to 100, forever.

<Canvas>
    <Rectangle x:Name="rectangle" Canvas.Left="100" Canvas.Top="100"
               Width="100" Height="100" Fill="Red"/>
</Canvas>

In code behind:

var topAnimation = new DoubleAnimation
{
    From = 100,
    To = 200,
    Duration = TimeSpan.FromSeconds(1),
    AutoReverse = true,
    RepeatBehavior = RepeatBehavior.Forever
};

rectangle.BeginAnimation(Canvas.TopProperty, topAnimation);