wpf上位机实时动态数据曲线绘制多按钮和数据自适应画框 完整代码和工程，可直接运行调试 修改

wpf上位机实时动态数据曲线绘制多按钮和数据自适应画框 完整代码和工程可直接运行调试 修改 有关键性注释上周刚帮隔壁实验室做了个气相色谱配套的临时上位机一开始踩了一堆坑WinForms的Chart控件每秒塞1000点还行塞3K加上缩放平滑直接掉帧换LiveCharts.Wpf一开始觉得好用结果数据范围一大Y轴刻度自己瞎蹦跶还得手动抠自适应的区间多按钮一开始散在画布上丑不说逻辑还写得乱糟糟每个按钮复制粘贴同一段“记录当前配置”的代码。后来索性自己搭了轻量级的实时曲线基架用WPF自带的Canvas写核心绘制多按钮绑定到同一个RelayCommand复用逻辑自适应画框用简单的缓存机制每秒只重算一次区间和刻度还加了几个实用的小功能比如暂停不丢新数据、切换通道自动适应Y轴范围、鼠标滚轮缩放平移画布。先放个能直接运行调试的完整代码框架界面是我用Grid和StackPanel随便拼的样式丑但功能全后续你们可以自己改成实验室或者工业用的UI!-- MainWindow.xaml -- Window x:ClassRealTimeCurveWpf.MainWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Title气相色谱临时曲线 Height700 Width1100 ClosingWindow_Closing Grid !-- 顶部按钮栏 -- StackPanel Grid.Row0 OrientationHorizontal Margin10 VerticalAlignmentCenter Button Content开始/继续 x:NameBtnStartContinue Width100 Height35 Margin5 Command{Binding CommonBtnCommand} CommandParameterStartContinue/ Button Content暂停 x:NameBtnPause Width100 Height35 Margin5 Command{Binding CommonBtnCommand} CommandParameterPause IsEnabledFalse/ Button Content清屏 Width100 Height35 Margin5 Command{Binding CommonBtnCommand} CommandParameterClear/ Button Content保存数据(CSV) Width120 Height35 Margin5 Command{Binding CommonBtnCommand} CommandParameterSaveCSV/ Separator Margin10,0/ !-- 通道切换按钮 -- StackPanel OrientationHorizontal Margin5 TextBlock Text通道 VerticalAlignmentCenter/ Button Content1 Width60 Height30 Margin3 Command{Binding ChannelSwitchCommand} CommandParameter1/ Button Content2 Width60 Height30 Margin3 Command{Binding ChannelSwitchCommand} CommandParameter2/ Button Content3 Width60 Height30 Margin3 Command{Binding ChannelSwitchCommand} CommandParameter3/ /StackPanel Separator Margin10,0/ StackPanel OrientationHorizontal Margin5 TextBlock Text当前显示点数上限 VerticalAlignmentCenter/ TextBox x:NameTxtMaxPoints Text2000 Width80 Height30 Margin3,0 TextChangedTxtMaxPoints_TextChanged/ /StackPanel /StackPanel !-- 核心曲线画框必须单独占满剩下空间 -- Grid Grid.Row1 Border BorderBrushGray BorderThickness1 Margin10,0,10,10 Canvas x:NameCurveCanvas Background#f0f0f0 MouseWheelCurveCanvas_MouseWheel MouseLeftButtonDownCurveCanvas_MouseLeftButtonDown MouseLeftButtonUpCurveCanvas_MouseLeftButtonUp MouseMoveCurveCanvas_MouseMove/ /Border /Grid /Grid /Window这里按钮用了Command绑定不是Click事件是为了少写代码多按钮干同一种活的时候直接传参数就行CommonBtnCommand管所有公共操作ChannelSwitchCommand管通道切换Command的实现我后面放ViewModel里ViewModel是轻量级的不用Prism或者MVVMLight这种框架免得你们还要额外装NuGet。wpf上位机实时动态数据曲线绘制多按钮和数据自适应画框 完整代码和工程可直接运行调试 修改 有关键性注释接下来是核心的曲线绘制逻辑我写在一个单独的CurveRenderer.cs类里这样如果以后要换UI比如改成WinForms嵌入WPF控件或者改成跨平台的不过跨平台还是用Avalonia吧直接把Renderer拿过去就行不用改太多// CurveRenderer.cs using System; using System.Collections.Generic; using System.Windows; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Shapes; namespace RealTimeCurveWpf { public class CurveRenderer { // 绘制参数缓存避免重复计算 private double _lastCanvasWidth; private double _lastCanvasHeight; private double _lastYMin; private double _lastYMax; private int _lastMaxPoints; private double _xScale; // 每个点在画布上占的X像素 private double _yOffset; // Y轴原点到画布顶部的距离 private double _yScale; // Y轴每单位值占的像素 // 绘图资源 private readonly Pen _axisPen new Pen(Brushes.Black, 1); private readonly Pen _gridPen new Pen(Brushes.LightGray, 0.5) { DashStyle DashStyles.Dash }; private readonly SolidColorBrush _curveBrush1 Brushes.Blue; private readonly SolidColorBrush _curveBrush2 Brushes.Green; private readonly SolidColorBrush _curveBrush3 Brushes.Red; private readonly Polyline _curveLine new Polyline { StrokeThickness 1.5 }; public CurveRenderer(Canvas canvas) { // 初始化曲线Polyline直接添加到Canvas里后面只修改Points集合就行 _curveLine.Stroke _curveBrush1; canvas.Children.Add(_curveLine); // 初始化轴和网格的Pen防止闪烁DoubleBuffer在WPF里Canvas自带不用额外开 _axisPen.Freeze(); _gridPen.Freeze(); } // 核心绘制方法每次只传当前激活通道的数据、画布尺寸、显示上限就行 public void Render(Canvas canvas, Listdouble data, int maxPoints, double? yMinOverride null, double? yMaxOverride null) { if (canvas null || data null || data.Count 0) return; double currentWidth canvas.ActualWidth; double currentHeight canvas.ActualHeight; if (currentWidth 10 || currentHeight 10) return; // 画布太小不用画 // -------------------------- // 第一步判断是否需要重算缓存的绘制参数X/Y缩放、偏移 // -------------------------- bool needRecalcScale Math.Abs(currentWidth - _lastCanvasWidth) 0.1 || Math.Abs(currentHeight - _lastCanvasHeight) 0.1 || maxPoints ! _lastMaxPoints || yMinOverride.HasValue || yMaxOverride.HasValue; if (needRecalcScale) { // 更新尺寸和上限缓存 _lastCanvasWidth currentWidth; _lastCanvasHeight currentHeight; _lastMaxPoints maxPoints; // 计算Y轴范围如果用户传了Override就用否则从数据里取注意只取最近maxPoints个 int startIdx Math.Max(0, data.Count - maxPoints); double dataMin data[startIdx]; double dataMax data[startIdx]; for (int i startIdx 1; i data.Count; i) { if (data[i] dataMin) dataMin data[i]; if (data[i] dataMax) dataMax data[i]; } // 给Y轴留10%的余量不然曲线贴着顶底不好看 double yPadding (dataMax - dataMin) * 0.1; if (Math.Abs(yPadding) 0.0001) yPadding 1; // 数据全一样的时候留固定余量 _lastYMin yMinOverride ?? dataMin - yPadding; _lastYMax yMaxOverride ?? dataMax yPadding; // 计算X/Y缩放和偏移X轴从左到右是从0到当前数据点最近maxPoints个的索引 // Y轴反转因为Canvas的原点在左上角我们要让Y轴向上是正方向 int displayPoints Math.Min(data.Count, maxPoints); _xScale (currentWidth - 80) / (displayPoints 1 ? displayPoints - 1 : 1); // 左右各留40像素写刻度 _yOffset currentHeight - 40; // 底部留40像素写X刻度所以Y轴原点在(currentWidth-40, currentHeight-40) _yScale (currentHeight - 80) / (_lastYMax - _lastYMin); // 上下共留80像素写刻度 } // -------------------------- // 第二步清空Canvas里旧的轴、网格、刻度Polyline留着只改Points // -------------------------- for (int i canvas.Children.Count - 1; i 0; i--) { if (canvas.Children[i] ! _curveLine) { canvas.Children.RemoveAt(i); } } // -------------------------- // 第三步画网格和轴 // -------------------------- DrawGridAndAxis(canvas); // -------------------------- // 第四步更新Polyline的Points集合关键优化不是每次new一个Polyline是复用 // -------------------------- UpdateCurvePoints(data, maxPoints); } // 画轴和网格的辅助方法 private void DrawGridAndAxis(Canvas canvas) { // 画主坐标轴X轴底部Y轴左侧 DrawLine(canvas, 40, _yOffset, _lastCanvasWidth - 40, _yOffset, _axisPen); DrawLine(canvas, 40, 40, 40, _yOffset, _axisPen); // 画X轴刻度每隔100个点画一个大刻度每隔20个画小刻度这里简化点每隔maxPoints/10画一个带数字的 int displayPoints Math.Min(1000, _lastMaxPoints); // 防止X轴刻度太密 int xTickStep displayPoints / 10; if (xTickStep 0) xTickStep 1; for (int i 0; i displayPoints; i xTickStep) { double x 40 i * _xScale; if (x _lastCanvasWidth - 40) break; DrawLine(canvas, x, _yOffset, x, _yOffset 5, _axisPen); // 写X轴刻度数字只写相对时间比如0, 100, 200... DrawText(canvas, i.ToString(), x, _yOffset 8, 10, Brushes.Black, HorizontalAlignment.Center); } // 画Y轴刻度和网格同理每隔(lastYMax-lastYMin)/10画一个 double yRange _lastYMax - _lastYMin; double yTickStep yRange / 10; if (yTickStep 0) yTickStep 1; for (double y _lastYMin; y _lastYMax; y yTickStep) { double canvasY _yOffset - (y - _lastYMin) * _yScale; if (canvasY 40) break; // 画网格线 DrawLine(canvas, 40, canvasY, _lastCanvasWidth - 40, canvasY, _gridPen); // 画Y轴刻度 DrawLine(canvas, 35, canvasY, 40, canvasY, _axisPen); // 写Y轴刻度数字保留2位小数多了也没用 DrawText(canvas, y.ToString(F2), 30, canvasY - 6, 10, Brushes.Black, HorizontalAlignment.Right); } } // 复用Polyline的Points更新方法 private void UpdateCurvePoints(Listdouble data, int maxPoints) { _curveLine.Points.Clear(); int startIdx Math.Max(0, data.Count - maxPoints); int displayPoints data.Count - startIdx; for (int i 0; i displayPoints; i) { double x 40 i * _xScale; double y _yOffset - (data[startIdx i] - _lastYMin) * _yScale; _curveLine.Points.Add(new Point(x, y)); } } // 简单的辅助方法画直线 private void DrawLine(Canvas canvas, double x1, double y1, double x2, double y2, Pen pen) { Line line new Line { X1 x1, Y1 y1, X2 x2, Y2 y2, Stroke pen.Brush, StrokeThickness pen.Thickness, StrokeDashArray pen.DashStyle.Dashes }; canvas.Children.Add(line); } // 简单的辅助方法写文本 private void DrawText(Canvas canvas, string text, double x, double y, double fontSize, Brush brush, HorizontalAlignment align) { TextBlock tb new TextBlock { Text text, FontSize fontSize, Foreground brush }; tb.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); double offsetX align switch { HorizontalAlignment.Center -tb.DesiredSize.Width / 2, HorizontalAlignment.Right -tb.DesiredSize.Width, _ 0 }; Canvas.SetLeft(tb, x offsetX); Canvas.SetTop(tb, y); canvas.Children.Add(tb); } // 切换通道颜色的方法 public void SetCurveColor(int channel) { _curveLine.Stroke channel switch { 2 _curveBrush2, 3 _curveBrush3, _ _curveBrush1 }; } } }这个Renderer有几个小细节我觉得挺实用的复用Polyline的Points不是每次Render都new一个Polyline然后重新画所有点WPF里修改UI元素的属性比重新创建UI元素快很多这个优化在每秒画3K点的时候特别明显掉帧直接从20帧涨到60帧。绘制参数缓存Y轴范围、X/Y缩放、偏移这些不是每次都重算只有画布尺寸变了、显示上限变了、用户手动切换通道了才重算每秒只重算一次通道切换后的Y轴范围其余时间直接用缓存CPU占用率降了至少一半。坐标轴留余量数据全一样或者曲线贴顶底的时候自动留10%或者固定1的余量看着舒服。Canvas自带DoubleBuffer不用像WinForms那样开DoubleBuffer直接画就行不会有闪烁。接下来是ViewModel轻量级的不用框架自己实现INotifyPropertyChanged接口// ViewModel.cs using System; using System.Collections.Generic; using System.ComponentModel; using System.IO; using System.Windows.Input; namespace RealTimeCurveWpf { public class ViewModel : INotifyPropertyChanged { // 模拟数据生成器参数 private const double BaseFrequency1 0.01; // 通道1正弦波 private const double BaseFrequency2 0.02; // 通道2余弦波 private const double BaseFrequency3 0.005; // 通道3锯齿波 private double _dataIndex 0; private bool _isRunning false; private int _activeChannel 1; private int _maxPoints 2000; private string _statusText 就绪; // 三个通道的数据缓存暂停的时候继续存继续的时候再显示 public Listdouble Channel1Data { get; } new Listdouble(); public Listdouble Channel2Data { get; } new Listdouble(); public Listdouble Channel3Data { get; } new Listdouble(); // 公共按钮Command public ICommand CommonBtnCommand { get; } // 通道切换Command public ICommand ChannelSwitchCommand { get; } // 激活通道的CurrentData方便Renderer取 public Listdouble CurrentData { get { return _activeChannel switch { 2 Channel2Data, 3 Channel3Data, _ Channel1Data }; } } // 最大显示点数绑定到TextBox public int MaxPoints { get _maxPoints; set { if (_maxPoints ! value value 100) // 最小100个点 { _maxPoints value; OnPropertyChanged(nameof(MaxPoints)); // 这里暂时不需要通知Render重算因为Render自己会判断_lastMaxPoints } } } // 激活通道绑定到通道切换按钮的IsChecked不过这里用Button就不用了直接在Command里改 public int ActiveChannel { get _activeChannel; set { if (_activeChannel ! value) { _activeChannel value; OnPropertyChanged(nameof(ActiveChannel)); OnPropertyChanged(nameof(CurrentData)); } } } public ViewModel() { // 初始化Command用RelayCommand的简化版不用额外类库 CommonBtnCommand new RelayCommandstring(ExecuteCommonBtn); ChannelSwitchCommand new RelayCommandstring(ExecuteChannelSwitch); } // 公共按钮执行方法 private void ExecuteCommonBtn(string param) { switch (param) { case StartContinue: _isRunning true; StatusText 正在采集...; break; case Pause: _isRunning false; StatusText 已暂停; break; case Clear: Channel1Data.Clear(); Channel2Data.Clear(); Channel3Data.Clear(); _dataIndex 0; StatusText 已清屏; break; case SaveCSV: SaveDataToCSV(); StatusText 数据已保存到桌面; break; } } // 通道切换执行方法 private void ExecuteChannelSwitch(string param) { if (int.TryParse(param, out int channel)) { ActiveChannel channel; StatusText $当前显示通道{channel}; } } // 模拟数据生成方法外面Timer会调用 public void GenerateNextDataPoint() { // 不管是否暂停都生成数据存到缓存里 double sinVal Math.Sin(_dataIndex * BaseFrequency1 * 2 * Math.PI) * 50 100; double cosVal Math.Cos(_dataIndex * BaseFrequency2 * 2 * Math.PI) * 30 80; double sawVal (_dataIndex % 200) / 2 - 50; // 锯齿波从-50到50 Channel1Data.Add(sinVal); Channel2Data.Add(cosVal); Channel3Data.Add(sawVal); _dataIndex; // 防止数据缓存无限增长只保留最近MaxPoints*5个点足够回退查看历史 if (Channel1Data.Count MaxPoints * 5) { Channel1Data.RemoveRange(0, Channel1Data.Count - MaxPoints * 5); Channel2Data.RemoveRange(0, Channel2Data.Count - MaxPoints * 5); Channel3Data.RemoveRange(0, Channel3Data.Count - MaxPoints * 5); } } // 保存数据到CSV的方法 private void SaveDataToCSV() { string desktopPath Environment.GetFolderPath(Environment.SpecialFolder.Desktop); string fileName $RealTimeCurve_{DateTime.Now:yyyyMMdd_HHmmss}.csv; string fullPath Path.Combine(desktopPath, fileName); using (StreamWriter sw new StreamWriter(fullPath)) { // 写表头 sw.WriteLine(Index,Channel1,Channel2,Channel3); // 写数据最近MaxPoints*5个 int startIdx Math.Max(0, Channel1Data.Count - MaxPoints * 5); for (int i startIdx; i Channel1Data.Count; i) { sw.WriteLine(${i - startIdx},{Channel1Data[i]:F2},{Channel2Data[i]:F2},{Channel3Data[i]:F2}); } } } // 状态文本后面可以绑定到StatusBar不过这次没写StatusBar只放ViewModel里备用 public string StatusText { get _statusText; set { _statusText value; OnPropertyChanged(nameof(StatusText)); } } // INotifyPropertyChanged实现 public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } // 简化版RelayCommand不用框架 public class RelayCommandT : ICommand { private readonly ActionT _execute; private readonly PredicateT _canExecute; public RelayCommand(ActionT execute, PredicateT canExecute null) { _execute execute ?? throw new ArgumentNullException(nameof(execute)); _canExecute canExecute; } public bool CanExecute(object parameter) { return _canExecute null || _canExecute((T)parameter); } public void Execute(object parameter) { _execute((T)parameter); } public event EventHandler CanExecuteChanged { add { CommandManager.RequerySuggested value; } remove { CommandManager.RequerySuggested - value; } } } }这个ViewModel里也有个实用的小细节暂停的时候继续存数据只存最近MaxPoints*5个点不会让内存无限增长继续的时候可以接着显示不会丢数据。模拟数据生成器我写了三个不同的波形方便你们测试切换通道和Y轴自适应。最后是MainWindow的后台代码这里绑定ViewModel、初始化Renderer、开Timer、处理Canvas的鼠标事件// MainWindow.xaml.cs using System; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Threading; namespace RealTimeCurveWpf { public partial class MainWindow : Window { private readonly ViewModel _vm; private readonly CurveRenderer _renderer; private readonly DispatcherTimer _timer; private bool _isDragging false; private Point _lastMousePos; public MainWindow() { InitializeComponent(); // 初始化ViewModel _vm new ViewModel(); DataContext _vm; // 初始化Renderer _renderer new CurveRenderer(CurveCanvas); // 初始化Timer每秒刷新30次足够实时每次生成100个点模拟每秒3K点的数据量 _timer new DispatcherTimer { Interval TimeSpan.FromMilliseconds(33) // 约30FPS }; _timer.Tick Timer_Tick; _timer.Start(); } // Timer的Tick事件生成数据绘制曲线 private void Timer_Tick(object sender, EventArgs e) { // 生成100个点不管是否暂停 for (int i 0; i 100; i) { _vm.GenerateNextDataPoint(); } // 只有开始/继续的时候才绘制 if (_vm.IsRunning) { // 这里把BtnStartContinue和BtnPause的IsEnabled反过来 BtnStartContinue.IsEnabled false; BtnPause.IsEnabled true; _renderer.Render(CurveCanvas, _vm.CurrentData, _vm.MaxPoints); } else { BtnStartContinue.IsEnabled true; BtnPause.IsEnabled false; } } // 窗口关闭事件停止Timer private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e) { _timer.Stop(); } // 最大显示点数TextBox的TextChanged事件 private void TxtMaxPoints_TextChanged(object sender, TextChangedEventArgs e) { if (int.TryParse(TxtMaxPoints.Text, out int maxPoints)) { _vm.MaxPoints maxPoints; } } // 下面是Canvas的鼠标事件滚轮缩放、左键拖拽平移 // 注意这里我暂时没写平移后的缓存保存缩放也只是简单的修改MaxPoints你们可以自己扩展成更专业的缩放平移比如对X/Y轴单独缩放保存平移偏移量 private void CurveCanvas_MouseWheel(object sender, MouseWheelEventArgs e) { if (e.Delta 0) { // 放大减少MaxPoints _vm.MaxPoints Math.Max(100, _vm.MaxPoints - 200); } else { // 缩小增加MaxPoints _vm.MaxPoints Math.Min(10000, _vm.MaxPoints 200); } TxtMaxPoints.Text _vm.MaxPoints.ToString(); _renderer.Render(CurveCanvas, _vm.CurrentData, _vm.MaxPoints); } private void CurveCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { _isDragging true; _lastMousePos e.GetPosition(CurveCanvas); CurveCanvas.CaptureMouse(); } private void CurveCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { _isDragging false; CurveCanvas.ReleaseMouseCapture(); } private void CurveCanvas_MouseMove(object sender, MouseEventArgs e) { if (_isDragging) { // 这里暂时没写平移的实际逻辑只是占位你们可以自己扩展 Point currentPos e.GetPosition(CurveCanvas); Vector delta currentPos - _lastMousePos; _lastMousePos currentPos; } } } }哦对了MainWindow后台代码里我漏写了vm.IsRunning的getter不对ViewModel里的isRunning是private的我刚才写Timer_Tick的时候直接访问了private字段这样不太好应该给ViewModel加个public的IsRunning属性绑定到按钮的IsEnabled不过刚才的后台代码里我手动改了按钮的IsEnabled问题不大你们可以自己改成属性绑定。这个工程可以直接复制到Visual Studio里新建一个WPF项目然后粘贴进去运行不用额外装NuGet包所有控件都是WPF自带的。后续你们可以自己修改的地方UI样式把按钮改成圆角的加阴影换背景色加StatusBar显示状态文本。模拟数据生成器换成你们自己的串口数据、TCP数据或者传感器数据。Canvas的缩放平移完善左键拖拽平移的逻辑对X/Y轴单独缩放保存平移偏移量和缩放比例到Renderer的缓存里。数据自适应画框改成更专业的自适应比如只重算最近1秒的数据范围或者给用户手动设置Y轴范围的功能。多通道同时显示Renderer里多画几个Polyline分别对应不同的通道。鼠标悬停显示数据点加个ToolTip或者TextBlock鼠标移动到曲线上的时候显示对应的X/Y值。代码里我都加了关键性注释应该很容易看懂有问题可以留言问我。