WPF 仪表盘（Dashboard）的完整实现示例，聚焦工业上位机常见场景：实时圆形仪表盘（Circular Gauge） +线性仪表 +数字显示 + 多仪表联动

以下是针对WPF 仪表盘Dashboard的完整实现示例聚焦工业上位机常见场景实时圆形仪表盘Circular Gauge线性仪表数字显示多仪表联动。示例使用免费/开源方式实现避免商业控件依赖结合 2025–2026 年主流实践。推荐控件组合对比工业仪表盘方案开源/免费实时性能自定义难度推荐场景NuGet 包LiveCharts2是★★★★中趋势 简单仪表LiveChartsCore.SkiaSharpView.WPFScottPlot是★★★★★低高性能实时曲线/简单 gaugeScottPlot.WPFOxyPlot是★★★★中科学/工程图表OxyPlot.WpfCommunityToolkit RadialGauge是★★★低极简圆形 gaugeCommunityToolkit.WinUI.UI.Controls (但 WPF 需适配)自定义 DrawingVisual / Canvas是★★★★★高高精度工业仪表推荐无纯 WPF工业推荐自定义 Canvas DrawingVisual性能最高、可任意样式或LiveCharts2开发最快。示例1使用 LiveCharts2 实现圆形仪表盘GaugeNuGetPackageReferenceIncludeLiveChartsCore.SkiaSharpView.WPFVersion2.*/XAMLMainWindow.xamlWindow x:ClassWpfGaugeDashboard.MainWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml xmlns:lcclr-namespace:LiveChartsCore.SkiaSharpView.WPF;assemblyLiveChartsCore.SkiaSharpView.WPF Title工业仪表盘示例 Height600 Width1000 Grid Grid.ColumnDefinitions ColumnDefinition Width*/ ColumnDefinition Width*/ ColumnDefinition Width*/ /Grid.ColumnDefinitions !-- 温度仪表 -- lc:CartesianChart Grid.Column0 x:NameTempGauge Series{Binding TemperatureSeries} Height300 Width300 LegendPositionHidden AnimationsSpeed0:0:0.3 lc:CartesianChart.XAxes lc:Axis IsVisibleFalse MinLimit0 MaxLimit100/ /lc:CartesianChart.XAxes lc:CartesianChart.YAxes lc:Axis IsVisibleFalse MinLimit0 MaxLimit120/ /lc:CartesianChart.YAxes /lc:CartesianChart !-- 压力仪表 -- lc:CartesianChart Grid.Column1 x:NamePressureGauge Series{Binding PressureSeries} Height300 Width300/ !-- 转速仪表 -- lc:CartesianChart Grid.Column2 x:NameSpeedGauge Series{Binding SpeedSeries} Height300 Width300/ /Grid /WindowViewModel使用 CommunityToolkit.MvvmusingCommunityToolkit.Mvvm.ComponentModel;usingLiveChartsCore;usingLiveChartsCore.SkiaSharpView;usingLiveChartsCore.SkiaSharpView.Painting;usingSkiaSharp;usingSystem.Collections.ObjectModel;usingSystem.Windows.Threading;publicpartialclassDashboardViewModel:ObservableObject{privatereadonlyDispatcherTimer_timer;[ObservableProperty]privateISeries[]temperatureSeriesnewISeries[]{newGaugeSeriesdouble{ValuesnewObservableCollectiondouble{25},Max120,Min0,InnerRadius80,LabelsSize50,LabelsPaintnewSolidColorPaint(SKColors.White),FillnewSolidColorPaint(SKColors.OrangeRed),Strokenull}};[ObservableProperty]privateISeries[]pressureSeriesnewISeries[]{newGaugeSeriesdouble{ValuesnewObservableCollectiondouble{2.5},Max10,Min0,InnerRadius80,LabelsSize50,LabelsPaintnewSolidColorPaint(SKColors.Cyan),FillnewSolidColorPaint(SKColors.DodgerBlue)}};[ObservableProperty]privateISeries[]speedSeriesnewISeries[]{newGaugeSeriesdouble{ValuesnewObservableCollectiondouble{1200},Max3000,Min0,InnerRadius80,LabelsSize50,LabelsPaintnewSolidColorPaint(SKColors.LimeGreen),FillnewSolidColorPaint(SKColors.ForestGreen)}};publicDashboardViewModel(){_timernewDispatcherTimer{IntervalTimeSpan.FromMilliseconds(500)};_timer.Tick(s,e)UpdateGauges();_timer.Start();}privatevoidUpdateGauges(){// 模拟实时数据实际从 PLC/传感器读取Randomrandnew();TemperatureSeries[0].Values![0]rand.Next(20,90)rand.NextDouble();PressureSeries[0].Values![0]rand.Next(1,8)rand.NextDouble();SpeedSeries[0].Values![0]rand.Next(800,2500)rand.NextDouble()*100;// 触发 UI 更新LiveCharts2 自动响应集合变更}}绑定方式MainWindow.xaml.cspublicpartialclassMainWindow:Window{publicMainWindow(){InitializeComponent();DataContextnewDashboardViewModel();}}示例2纯自定义 Canvas DrawingVisual 高精度圆形仪表推荐工业级优点完全控制样式、无第三方依赖、极致性能。XAMLCircularGauge.xaml - UserControlUserControl x:ClassWpfGaugeDashboard.CircularGauge xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Namegauge Viewbox StretchUniform Canvas x:NameRootCanvas Width300 Height300/ /Viewbox /UserControlC# 代码CircularGauge.xaml.csusingSystem.Windows;usingSystem.Windows.Controls;usingSystem.Windows.Media;usingSystem.Windows.Shapes;publicpartialclassCircularGauge:UserControl{publicstaticreadonlyDependencyPropertyValuePropertyDependencyProperty.Register(Value,typeof(double),typeof(CircularGauge),newPropertyMetadata(0.0,OnValueChanged));publicstaticreadonlyDependencyPropertyMinValuePropertyDependencyProperty.Register(MinValue,typeof(double),typeof(CircularGauge),newPropertyMetadata(0.0));publicstaticreadonlyDependencyPropertyMaxValuePropertyDependencyProperty.Register(MaxValue,typeof(double),typeof(CircularGauge),newPropertyMetadata(100.0));publicdoubleValue{get(double)GetValue(ValueProperty);setSetValue(ValueProperty,value);}publicdoubleMinValue{get(double)GetValue(MinValueProperty);setSetValue(MinValueProperty,value);}publicdoubleMaxValue{get(double)GetValue(MaxValueProperty);setSetValue(MaxValueProperty,value);}privatereadonlyDrawingVisual_needleVisualnew();privatereadonlyDrawingVisual_scaleVisualnew();publicCircularGauge(){InitializeComponent();RootCanvas.Children.Add(newDrawingVisualHost(_scaleVisual));RootCanvas.Children.Add(newDrawingVisualHost(_needleVisual));Loaded(s,e)DrawScale();SizeChanged(s,e)DrawScale();}privatestaticvoidOnValueChanged(DependencyObjectd,DependencyPropertyChangedEventArgse){if(disCircularGaugegauge){gauge.DrawNeedle();}}privatevoidDrawScale(){usingvardc_scaleVisual.RenderOpen();dc.DrawEllipse(Brushes.Black,null,newPoint(150,150),140,140);// 外圈dc.DrawEllipse(Brushes.Gray,null,newPoint(150,150),120,120);// 内圈// 刻度线简化示例每 10 单位一条长线for(inti0;i100;i10){doubleangle(i-MinValue)/(MaxValue-MinValue)*270-135;// -135° 到 135° 范围doubleradangle*Math.PI/180;Pointouternew(150130*Math.Cos(rad),150130*Math.Sin(rad));Pointinnernew(150110*Math.Cos(rad),150110*Math.Sin(rad));dc.DrawLine(newPen(Brushes.White,3),outer,inner);}// 数字标签每 20 单位for(inti0;i100;i20){doubleangle(i-MinValue)/(MaxValue-MinValue)*270-135;doubleradangle*Math.PI/180;Pointposnew(15090*Math.Cos(rad),15090*Math.Sin(rad));FormattedTexttextnew(i.ToString(),System.Globalization.CultureInfo.CurrentCulture,FlowDirection.LeftToRight,newTypeface(Segoe UI),18,Brushes.White,1.0);dc.DrawText(text,newPoint(pos.X-text.Width/2,pos.Y-text.Height/2));}}privatevoidDrawNeedle(){usingvardc_needleVisual.RenderOpen();doublenormalized(Value-MinValue)/(MaxValue-MinValue);doubleanglenormalized*270-135;// 270° 范围doubleradangle*Math.PI/180;Pointtipnew(150110*Math.Cos(rad),150110*Math.Sin(rad));PointbaseLeftnew(15010*Math.Cos(radMath.PI/2),15010*Math.Sin(radMath.PI/2));PointbaseRightnew(15010*Math.Cos(rad-Math.PI/2),15010*Math.Sin(rad-Math.PI/2));PathGeometryneedlenew();PathFigurefigurenew(){StartPointbaseLeft};figure.Segments.Add(newLineSegment(tip,true));figure.Segments.Add(newLineSegment(baseRight,true));figure.IsClosedtrue;needle.Figures.Add(figure);dc.DrawGeometry(Brushes.Red,newPen(Brushes.DarkRed,2),needle);// 中心圆dc.DrawEllipse(Brushes.Black,newPen(Brushes.Gray,3),newPoint(150,150),12,12);}}// DrawingVisualHost 辅助类publicclassDrawingVisualHost:FrameworkElement{privatereadonlyDrawingVisual_visual;publicDrawingVisualHost(DrawingVisualvisual){_visualvisual;AddVisualChild(visual);}protectedoverrideintVisualChildrenCount1;protectedoverrideVisualGetVisualChild(intindex)_visual;}使用方式MainWindow.xamllocal:CircularGauge Value{Binding Temperature} MinValue0 MaxValue120 /总结与选择建议快速原型→ LiveCharts2 GaugeSeries最快上手高性能/自定义→ 纯 Canvas DrawingVisual推荐工业仪表复杂仪表盘→ 结合 LiveCharts2 自定义控件实时更新→ 使用 DispatcherTimer 或 Channel 节流推送避免频繁重绘如果你需要完整工程带多仪表联动、颜色预警、动画、数据源绑定 PLC 等或针对特定仪表样式如汽车仪表、过程控制圆盘告诉我你的需求细节我可以继续扩展代码。