c# - 在 WPF 中更新 Canvas

Question

我想在 Canvas 上显示移动的 Ant 的动画。因此应该改变椭圆的位置。步骤的计算有效，但我无法在主窗口中显示椭圆位置的变化。只有在所有 Ant 步骤的计算完成后，才会显示 Canvas 。

XAML 代码:

<Window x:Class="WpfApplication1.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">
    <Canvas Name="myCanvas">
        <Ellipse x:Name="ant1" Width="11" Height="11" Stroke="Black" Fill="Red"/>
    </Canvas>
</Window>

C#代码:

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.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Threading;
using System.Diagnostics;
using System.Windows.Threading;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();




            var random = new Random();

            var iterations = 10000;

            var numberOfAnts = 10;
            var ants = CreateAntCollection(numberOfAnts);

            // time-loop
            for (var iteration = 0; iteration < iterations; iteration++)
            {

                // move ants
                foreach (var ant in ants)
                {
                    var x = (random.Next(3) - 1) + ant.Position.X;
                    var y = (random.Next(3) - 1) + ant.Position.Y;

                    ant.Move(x, y);
                }

                // animate the ant
                // test - todo
                Debug.WriteLine(ants[0].Position.X);
                Canvas.SetLeft(ant1, ants[0].Position.X);   // movement not shown
            }
        }

        private static List<Ant> CreateAntCollection(int count)
        {
            var ants = new List<Ant>(count);

            for (var i = 0; i < count; i++)
            {
                var name = string.Format("ant-{0}", i);

                var ant = new Ant(name);

                ants.Add(ant);
            }

            return ants;
        }

    }


    class Ant
    {
        public Ant(string name)
        {
            Name = name;
            Position = new Position(80, 80);
        }

        public string Name { get; private set; }

        public Position Position { get; private set; }

        public void Move(int x, int y)
        {
            Position = new Position(x, y);
        }

        public override string ToString()
        {
            return Name;
        }
    }


    struct Position
    {
        public readonly int X;

        public readonly int Y;

        public Position(int x, int y)
        {
            X = x;
            Y = y;
        }

        public override string ToString()
        {
            return string.Format("{0},{1}", X, Y);
        }
    }
}

这个“解决方案”不起作用:element.InvalidateVisual();

Answer 1

问题在于您正在同步运行运动。您需要在另一个线程中执行它。像这样:

Task.Run(() => {
    for (var iteration = 0; iteration < iterations; iteration++)
    {
        // move ants
        foreach (var ant in ants)
        {
            var x = (random.Next(3) - 1) + ant.Position.X;
            var y = (random.Next(3) - 1) + ant.Position.Y;
            ant.Move(x, y);
        }

        // animate the ant
        Debug.WriteLine(ants[0].Position.X);
        this.Dispatcher.Invoke((Action)(() =>
        {
            Canvas.SetLeft(ant1, ants[0].Position.X);
        }));
    }
});