在WPF中更新画布

Question

我希望展示一个在画布上移动的蚂蚁的动画效果。因此，椭圆的位置应该会发生改变。步骤的计算已经完成，但是我无法在MainWindow中展示椭圆位置的变化。只有在所有蚂蚁步骤的计算完成后，画布才会被展示。

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();。

- kame

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

- Domysee

---

我修改了源代码。这样可以吗？对我来说这个可以运行。 - kame

Answer 2

你在哪里调用element.InvalidateVisual？更具体地说，是哪个线程？如果你在UI线程上运行模拟，则画布不会更新，直到完成为止。通常建议使用Dispatcher类，通过调用Invoke或BeginInvoke来使用。

正如我所说，我不知道你从哪里调用，但渲染可能看起来像这样：

private void Render()
{
    Dispatcher.Invoke((Action)(() =>
    {
        element.InvalidateVisual();
    }));
}

这篇文章似乎是关于如何从另一个线程更新GUI的好问题（虽然比较老）。

更仔细地看你的问题，你应该将更新代码移动到另一个线程中。像你现在这样在构造函数中进行所有迭代肯定会阻塞其他所有东西。基本上，在InitializeComponent()之后的所有内容都应该使用回调函数或线程处理。

- Tobbe

---

我在 Canvas.SetLeft(ant1, ants[0].Position.X); 后调用了 element.InvalidateVisual。现在我将创建一个新线程。 - kame