WPF C#中如何实现Polyline实时绘制（仿任务管理器图表）

核心问题与修复步骤 #

• 集合通知缺失：默认PointCollection不支持属性变更通知，ViewModel必须实现INotifyPropertyChanged，修改集合后手动触发通知，否则UI不会更新。
• 跨线程更新错误：如果后台线程更新数据，直接修改PointCollection会触发跨线程异常，必须通过UI线程调度更新。
• 绑定上下文未设置：确认ViewModel已被设置为窗口/页面的DataContext，否则绑定路径无效。
• 坐标映射逻辑缺失：原始数据需要转换为Polyline可识别的坐标（将数值映射到Y轴高度，X轴按时间步进）。

修复后的完整代码 #

XAML布局 #

<Window x:Class="RealTimeChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="实时监控图表" Height="300" Width="600">
    <Grid>
        <!-- 绑定ViewModel中的ChartPoints集合，设置折线样式 -->
        <Polyline Points="{Binding ChartPoints}" 
                  Stroke="#0078D7" 
                  StrokeThickness="2"
                  Margin="20"/>
    </Grid>
</Window>

ViewModel实现（MVVM模式） #

using System;
using System.ComponentModel;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Media;

namespace RealTimeChart
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private PointCollection _chartPoints;
        private readonly int _maxDisplayPoints = 50; // 最多显示50个点，模拟滚动效果
        private double _currentX = 0;
        private readonly double _xStep = 10; // X轴每次步进的像素值

        public PointCollection ChartPoints
        {
            get => _chartPoints;
            set
            {
                _chartPoints = value;
                OnPropertyChanged(nameof(ChartPoints));
            }
        }

        public MainViewModel()
        {
            ChartPoints = new PointCollection();
            StartRealTimeUpdate();
        }

        // 启动每秒一次的数据更新
        private async void StartRealTimeUpdate()
        {
            while (true)
            {
                // 替换此处为你的业务数组数据读取逻辑
                double currentValue = new Random().Next(0, 200);
                // 将数值映射到Y轴（基于窗口高度减去边距，数值越大Y坐标越小）
                double yCoordinate = 260 - currentValue;

                // 必须在UI线程更新集合
                Application.Current.Dispatcher.Invoke(() =>
                {
                    ChartPoints.Add(new Point(_currentX, yCoordinate));
                    _currentX += _xStep;

                    // 超过最大显示数时，移除最旧的点并平移所有点的X坐标
                    if (ChartPoints.Count > _maxDisplayPoints)
                    {
                        ChartPoints.RemoveAt(0);
                        for (int i = 0; i < ChartPoints.Count; i++)
                        {
                            var oldPoint = ChartPoints[i];
                            ChartPoints[i] = new Point(oldPoint.X - _xStep, oldPoint.Y);
                        }
                        _currentX -= _xStep;
                    }
                });

                await Task.Delay(1000);
            }
        }

        // 实现属性变更通知接口
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

窗口后台代码（设置DataContext） #

using System.Windows;

namespace RealTimeChart
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 将ViewModel绑定到窗口的DataContext
            DataContext = new MainViewModel();
        }
    }
}

关键说明 #

• 属性通知：ViewModel通过INotifyPropertyChanged接口确保ChartPoints变更时UI同步更新。
• 线程安全：使用Dispatcher.Invoke将集合修改操作切换到UI线程，避免跨线程访问异常。
• 滚动效果：通过限制显示点数、移除旧点并平移坐标，实现类似任务管理器的实时滚动折线效果。
• 坐标映射：可根据实际业务需求调整Y轴映射逻辑（例如将0-100的使用率映射到0-260的像素高度）。

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