WPF如何实现逐点带延时的Polyline动态绘制

你当前的同步for循环运行在UI线程上，循环执行过程中UI线程无法处理渲染请求，哪怕在循环中插入普通的延时逻辑，也只会等所有点位全部添加完成后一次性渲染出完整折线，看不到逐段呈现的效果。

直接将按钮点击事件改为异步方法，使用非阻塞的Task.Delay实现自定义间隔延时，每添加一个点位就留出UI渲染时间，不会造成界面卡顿。

修改后的后台代码 #

// 给事件处理器添加async关键字
private async void Button_Fire_P1_Click(object sender, RoutedEventArgs e)
{
    double InputAngle = Slider_Angle_P1.Value;
    double InputSpeed = Slider_Speed_P1.Value;

    List<Point> P1points = Projectile_Path_to_Right(1.0, 728.0, InputAngle, InputSpeed);
    // 自定义延时间隔，单位为毫秒，可根据速度参数做换算，例如速度值越大延时越短
    int delay = Math.Max(1, Convert.ToInt32(50 / InputSpeed));

    // 清空旧的折线路径
    Poly1.Points.Clear();

    for (int i = 0; i < P1points.Count; i++)
    {
        Poly1.Points.Add(P1points[i]);
        // 非阻塞等待，等待期间UI线程可正常渲染、响应用户操作
        await Task.Delay(delay);
    }

    P1points.Clear();
}

注意事项 #

• 禁止使用Thread.Sleep()实现延时，该方法会阻塞UI线程，直接导致界面无响应，直到所有点位加载完成才会刷新
• 现有XAML中Canvas内Polyline的定义不需要做任何修改，可以直接复用
• 如果需要中途终止绘制，可以引入CancellationTokenSource做取消控制，在需要停止时触发取消标识，循环中判断标识后跳出即可
• 如果觉得逐点添加的动画过于细碎，可以调整为每次添加2-3个点位再延时，平衡动画流畅度和性能。

内容的提问来源于stack exchange，提问作者Chessmate