WPF：Canvas，动画矩形

Question

我要动画，在我的canvas上画一个矩形。这应该发生在后面的编码器中。最后，我想让矩形在while循环中上下移动，但我连一个方向都做不到。

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>

在我的代码中，我尝试了一些来自互联网的东西。其实我也不知道

代码：

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);
            };
        }
    }
}

感谢您的帮助！

Answer 1

您只需为 Canvas.Top 属性.

制作动画

以下示例将在 1 秒内使 Top 值从 100 变为 200，然后从 200 变为 100，直到永远。

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

在后面的代码中：

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

rectangle.BeginAnimation(Canvas.TopProperty, topAnimation);

WPF：Canvas，动画矩形

WPF: Canvas, animating rectangle

c#

wpf

canvas