syncfusion-winforms-radial-gauge

实现仪表

何时使用此技能

当用户需要在 Windows Forms 应用程序中实现 Syncfusion 仪表控件时，使用此技能。本技能涵盖三种仪表类型，可满足不同的可视化需求：

RadialGauge 用例

1. 速度计和转速表——车辆仪表、RPM 显示
2. 温度计——HVAC 控件、系统监控、天气显示
3. 压力表——工业监控、轮胎气压、液压系统
4. 进度指示器——用于显示加载状态和完成百分比的圆形进度
5. KPI 仪表板——带颜色编码范围的性能指标
6. 旋钮控件——音量、亮度或任何旋转控件的可视化
7. 罗盘显示——导航、方向指示器
8. 时钟表盘——带自定义样式的模拟时间显示

LinearGauge 用例

1. 进度条——任务完成情况、下载进度、加载状态
2. 液位指示器——电池电量、燃油表、音量计
3. 滑块可视化——温度滑块、调节控件
4. 水平仪表——音频电平、信号强度、容量指示器
5. 垂直仪表——建筑物高度指示器、电梯位置
6. 温度计显示——温度刻度、医用温度计
7. 时间线指示器——项目时间线、里程碑跟踪

DigitalGauge 用例

1. 数字时钟——时间显示、倒计时器、秒表
2. 计数器——访客计数器、生产计数器、分数显示
3. 字母数字状态信息——系统代码、产品 ID、状态消息
4. LED 显示屏——复古风格指示器、工业显示屏
5. 价格显示——加油站价格、零售定价
6. 测量读数——数字万用表、传感器读数

**不适用场景：**对于不需要仪表可视化的简单文本显示，请使用标准 Label 或 TextBox 控件。对于图表，请使用 Chart 控件。

组件概览

Syncfusion 提供 三种仪表控件，用于在 Windows Forms 中实现数据可视化：

1. RadialGauge

在圆形或弧形刻度上显示数值，并支持自定义指针、范围和表盘。

主要功能：

• 4 种表盘类型：FullCircle、HalfCircle、QuarterCircle、Fill
• 支持多个指针
• 用于显示视觉阈值的颜色编码范围
• 可自定义刻度、刻度线和标签
• 渐变背景和样式
• 自定义指针样式（Default、Advanced、Pointer）

2. LinearGauge

通过指示器在线性刻度（水平或垂直）上显示数值。

主要功能：

• 水平和垂直方向
• 指针位置（Top、Center、Bottom）
• 颜色编码范围
• 主刻度线和次刻度线
• 数值指示条
• 渐变样式

3. DigitalGauge

以 LED/数字格式显示字母数字字符。

主要功能：

• 4 种字符类型：DotMatrix、SevenSegment、FourteenSegment、SixteenSegment
• 可配置字符数
• 可控制字符间距
• 可选择显示隐藏的笔画
• 支持圆角

所有仪表均支持：

• 视觉主题（9 种内置主题 + 自定义主题）
• 用于实时更新的数据绑定
• 用于完全控制视觉效果的自定义渲染器
• 专业样式选项

文档和导航指南

安装和设置

📄 阅读： references/installation-and-setup.md

当用户需要首次设置仪表控件时使用。内容包括：

• 程序集引用（Syncfusion.Gauge.Windows.dll、Syncfusion.Shared.Base.dll）
• NuGet 包安装
• 命名空间导入（Syncfusion.Windows.Forms.Gauge）
• 框架支持（.NET 4.5+、.NET 6.0-8.0）
• 部署要求
• 工具箱配置
• 示例浏览器位置

RadialGauge（圆形仪表）

📄 阅读： references/radial-gauge.md

适用于需要圆形、弧形或表盘式仪表的场景。涵盖：

• 框架类型（FullCircle、HalfCircle、QuarterCircle、Fill）
• 设计器和基于代码的设置
• 刻度和标签（位置、方向、颜色）
• 刻线（主刻线和次刻线的配置、高度、颜色）
• 指针（单个和多个、样式、颜色）
• 范围（带颜色编码的起始值和结束值范围）
• 刻度划分（MajorDifference、MinorDifference）
• 自定义 StartAngle 和 SweepAngle
• 框架外观（渐变、弧线颜色）
• 使用 DrawLabel 事件自定义标签
• 性能优化提示

LinearGauge（条形／滑块仪表）

📄 阅读： references/linear-gauge.md

适用于需要水平或垂直条形仪表的场景。涵盖：

• 框架类型（Horizontal、Vertical）
• 设计器和基于代码的设置
• 刻度和标签配置
• 刻线（主刻线和次刻线）
• 指示器位置选项
• 指针显示和样式设置
• 范围（带颜色的 LinearRange）
• 数值指示器定位
• 自定义框架外观
• 完整的方向示例

DigitalGauge（LED 显示屏）

📄 阅读： references/digital-gauge.md

适用于需要 LED 风格字母数字显示屏的场景。涵盖：

• 字符类型（DotMatrix、SevenSegment、FourteenSegment、SixteenSegment）
• 设计器和基于代码的设置
• 限制字符数量
• 配置字符间距
• ShowInvisibleSegments 属性
• 用于圆角的 RoundCornerRadius
• 用于显示字符串的 Value 属性
• 框架自定义
• 各字符类型的示例

视觉主题和样式

📄 阅读： references/visual-themes.md

适用于需要应用专业主题或自定义样式的场景。涵盖：

• VisualStyle 属性（适用于所有 3 种仪表类型）
• 内置主题（Blue、Black、Silver、Metro、Office2016 变体）
• 创建自定义主题（ThemeBrush 集合）
• 颜色自定义属性
• 设计时主题设置
• 各仪表类型的主题示例
• 全应用范围一致的主题设置

自定义渲染器

📄 阅读： references/custom-renderers.md

适用于需要全面控制仪表渲染和外观的场景。涵盖：

• IRadialGaugeRenderer 接口
• ILinearGaugeRenderer 接口
• 创建自定义渲染器类
• DrawOuterArc、DrawNeedle、DrawLabel、DrawRanges 方法
• 分配 Renderer 属性
• 高级自定义场景
• 完整的自定义渲染器示例

数据绑定

📄 阅读： references/data-binding.md

适用于需要实时数据更新或由数据库驱动的仪表的场景。涵盖：

• 配置 DataSource 属性
• DisplayMember（列映射）
• DisplayRecordIndex（行映射）
• 高频数据更新
• 实时监控场景
• 性能注意事项
• 所有仪表类型的完整绑定示例

快速入门示例

RadialGauge：速度计

using Syncfusion.Windows.Forms.Gauge;

// Create RadialGauge
RadialGauge speedometer = new RadialGauge();
speedometer.Size = new Size(300, 300);
speedometer.Location = new Point(20, 20);

// Configure gauge properties
speedometer.MinimumValue = 0;
speedometer.MaximumValue = 200;
speedometer.MajorDifference = 20;
speedometer.MinorDifference = 5;
speedometer.Value = 60;

// Set frame type
speedometer.FrameType = FrameType.HalfCircle;

// Configure appearance
speedometer.ShowNeedle = true;
speedometer.NeedleStyle = NeedleStyle.Advanced;
speedometer.GaugeLabel = "Speed (MPH)";

// Add color-coded ranges
Range range1 = new Range();
range1.StartValue = 0;
range1.EndValue = 80;
range1.Color = Color.Green;
range1.Height = 10;
speedometer.Ranges.Add(range1);

Range range2 = new Range();
range2.StartValue = 80;
range2.EndValue = 150;
range2.Color = Color.Yellow;
range2.Height = 10;
speedometer.Ranges.Add(range2);

Range range3 = new Range();
range3.StartValue = 150;
range3.EndValue = 200;
range3.Color = Color.Red;
range3.Height = 10;
speedometer.Ranges.Add(range3);

// Add to form
this.Controls.Add(speedometer);

LinearGauge：电池电量

using Syncfusion.Windows.Forms.Gauge;

// Create LinearGauge
LinearGauge batteryLevel = new LinearGauge();
batteryLevel.Size = new Size(300, 125);
batteryLevel.Location = new Point(20, 20);

// Set horizontal orientation
batteryLevel.LinearFrameType = LinearFrameType.Horizontal;

// Configure gauge properties
batteryLevel.MinimumValue = 0;
batteryLevel.MaximumValue = 100;
batteryLevel.MajorDifference = 20;
batteryLevel.MinorTickCount = 3;
batteryLevel.Value = 75;

// Configure appearance
batteryLevel.ShowNeedle = true;
batteryLevel.PointerPlacement = Placement.Center;

// Add color-coded ranges
LinearRange lowRange = new LinearRange();
lowRange.StartValue = 0;
lowRange.EndValue = 20;
lowRange.Color = Color.Red;
lowRange.Height = 8;
batteryLevel.Ranges.Add(lowRange);

LinearRange normalRange = new LinearRange();
normalRange.StartValue = 20;
normalRange.EndValue = 80;
normalRange.Color = Color.Yellow;
normalRange.Height = 8;
batteryLevel.Ranges.Add(normalRange);

LinearRange highRange = new LinearRange();
highRange.StartValue = 80;
highRange.EndValue = 100;
highRange.Color = Color.Green;
highRange.Height = 8;
batteryLevel.Ranges.Add(highRange);

// Add to form
this.Controls.Add(batteryLevel);

DigitalGauge：LED 时钟

using Syncfusion.Windows.Forms.Gauge;

// Create DigitalGauge
DigitalGauge digitalClock = new DigitalGauge();
digitalClock.Size = new Size(250, 100);
digitalClock.Location = new Point(20, 20);

// Configure character display
digitalClock.CharacterType = CharacterType.SevenSegment;
digitalClock.CharacterCount = 8;
digitalClock.SegmentSpacing = 2.0f;

// Set initial value
digitalClock.Value = DateTime.Now.ToString("HH:mm:ss");

// Configure appearance
digitalClock.ForeColor = Color.Red;
digitalClock.ShowInvisibleSegments = true;

// Add timer to update clock
Timer clockTimer = new Timer();
clockTimer.Interval = 1000; // 1 second
clockTimer.Tick += (s, e) => {
    digitalClock.Value = DateTime.Now.ToString("HH:mm:ss");
};
clockTimer.Start();

// Add to form
this.Controls.Add(digitalClock);

常见模式

模式 1：包含多个仪表的仪表板

// Create dashboard layout
FlowLayoutPanel dashboard = new FlowLayoutPanel();
dashboard.Dock = DockStyle.Fill;

// Temperature gauge (RadialGauge)
RadialGauge tempGauge = new RadialGauge();
tempGauge.MinimumValue = -20;
tempGauge.MaximumValue = 120;
tempGauge.Value = 72;
tempGauge.GaugeLabel = "°F";
tempGauge.FrameType = FrameType.HalfCircle;
dashboard.Controls.Add(tempGauge);

// Fuel level (LinearGauge)
LinearGauge fuelGauge = new LinearGauge();
fuelGauge.LinearFrameType = LinearFrameType.Vertical;
fuelGauge.MinimumValue = 0;
fuelGauge.MaximumValue = 100;
fuelGauge.Value = 45;
dashboard.Controls.Add(fuelGauge);

// Status counter (DigitalGauge)
DigitalGauge statusCounter = new DigitalGauge();
statusCounter.CharacterType = CharacterType.SevenSegment;
statusCounter.Value = "1234";
dashboard.Controls.Add(statusCounter);

this.Controls.Add(dashboard);

模式 2：数据绑定的实时仪表

// Setup data source
DataTable sensorData = new DataTable();
sensorData.Columns.Add("SensorValue", typeof(float));
sensorData.Rows.Add(0);

// Create and bind gauge
RadialGauge sensorGauge = new RadialGauge();
sensorGauge.DataSource = sensorData;
sensorGauge.DisplayMember = "SensorValue";
sensorGauge.DisplayRecordIndex = 0;

// Timer to simulate sensor updates
Timer dataTimer = new Timer();
dataTimer.Interval = 100; // 10 updates per second
dataTimer.Tick += (s, e) => {
    // Update data source (gauge updates automatically)
    sensorData.Rows[0]["SensorValue"] = GetSensorReading();
};
dataTimer.Start();

模式 3：主题化仪表组

// Apply consistent theme to all gauges
void ApplyTheme(Control.ControlCollection controls, ThemeStyle theme)
{
    foreach (Control control in controls)
    {
        if (control is RadialGauge radial)
            radial.VisualStyle = theme;
        else if (control is LinearGauge linear)
            linear.VisualStyle = theme;
        else if (control is DigitalGauge digital)
            digital.VisualStyle = theme;
            
        if (control.HasChildren)
            ApplyTheme(control.Controls, theme);
    }
}

// Usage
ApplyTheme(this.Controls, ThemeStyle.Office2016Colorful);

仪表类型选择指南

需求	使用此仪表	原因
圆形显示（速度计样式）	RadialGauge	适用于旋转数值，指针移动直观
圆弧／部分圆形	RadialGauge（HalfCircle/QuarterCircle）	节省空间，呈现现代仪表板外观
水平进度条	LinearGauge（Horizontal）	清晰显示从左到右的进度
垂直液位指示器	LinearGauge（Vertical）	适合显示高度／深度／液位
时间显示（LED 样式）	DigitalGauge（SevenSegment）	经典数字时钟外观
字母数字状态代码	DigitalGauge（FourteenSegment/SixteenSegment）	支持字母和数字
在同一表盘上显示多个指针	RadialGauge（EnableCustomNeedles）	在同一刻度上比较多个数值
基于填充的进度指示器	RadialGauge（FrameType.Fill）	以填充方式显示从起始值到当前值的进度

主要属性比较

所有仪表共有的属性

属性	类型	说明
Value	float（Radial/Linear）/ string（Digital）	当前显示的数值
MinimumValue	float	最小刻度值（仅适用于 Radial/Linear）
MaximumValue	float	最大刻度值（仅适用于 Radial/Linear）
DataSource	object	用于绑定的数据源
DisplayMember	string	用于绑定数值的列名
DisplayRecordIndex	int	用于绑定数值的行索引

RadialGauge 专属属性

属性	类型	说明
FrameType	FrameType	FullCircle、HalfCircle、QuarterCircle、Fill
StartAngle	int	圆弧起始角度（度）
SweepAngle	int	圆弧跨度（度）
ShowNeedle	bool	显示指针
VisualStyle	ThemeStyle	主题：Blue、Black、Silver、Metro、Office2016*、Custom
NeedleStyle	NeedleStyle	Default、Advanced、Pointer
EnableCustomNeedles	bool	允许显示多个指针
Ranges	RangeCollection	以颜色标示的数值范围
MajorDifference	float	主刻度间距
MinorDifference	float	次刻度间距

LinearGauge 专属属性

属性	类型	说明
LinearFrameType	LinearFrameType	Horizontal 或 Vertical
PointerPlacement	Placement	Top、Center、Bottom
ShowNeedle	bool	显示指针
VisualStyle	ThemeStyle	主题：Blue、Black、Silver、Metro、Office2016*、Custom
Ranges	LinearRangeCollection	以颜色标示的数值范围
MajorDifference	float	主刻度间距
MinorTickCount	int	每两个主刻度之间的次刻度数量

DigitalGauge 专属属性

属性	类型	说明
Value	string	要显示的文本
CharacterType	CharacterType	DotMatrix、SevenSegment、FourteenSegment、SixteenSegment
CharacterCount	int	要显示的字符数量
SegmentSpacing	float	字符间距
ShowInvisibleSegments	bool	显示未激活的段
RoundCornerRadius	int	圆角半径
注意： DigitalGauge 不支持 VisualStyle 属性。请改用 ForeColor 和 BackColor 设置样式。

常见用例

1. 工业仪表板

场景： 监控多个传感器（压力、温度、RPM）
解决方案： 使用多个 RadialGauge，并设置以颜色标示的范围和实时数据绑定

2. 进度指示器

场景： 显示任务完成百分比
解决方案： 使用 LinearGauge（Horizontal）或 RadialGauge（Fill 类型），范围设为 0-100

3. 数字时钟显示

场景： 以 LED 格式显示当前时间
解决方案： 使用字符类型为 SevenSegment 的 DigitalGauge，并通过计时器更新

4. 车辆仪表盘

场景： 车速表、转速表、燃油表
解决方案： RadialGauges（车速／转速使用 HalfCircle），LinearGauge（燃油使用 Vertical）

5. 系统监控

场景： CPU 使用率、内存、网络速度
解决方案： 混合使用 RadialGauges（百分比刻度盘）和 DigitalGauges（数字读数）

6. 温度控制

场景： 带有可视化温度显示的恒温器
解决方案： RadialGauge（FullCircle），并设置颜色范围（蓝色＝冷、黄色＝适中、红色＝热）

最佳实践

1. 选择合适的仪表类型 - RadialGauge 用于旋转值，LinearGauge 用于线性变化，DigitalGauge 用于字母数字显示
2. 使用颜色编码范围 - 可视化阈值有助于提高可读性（绿色＝良好、黄色＝警告、红色＝严重）
3. 设置有意义的刻度 - 配置 Min/Max 和 MajorDifference，使其与数据范围相匹配
4. 应用一致的主题 - 在应用中的所有仪表上使用相同的 VisualStyle
5. 优化实时更新 - 对于频繁更新，请使用数据绑定，而不是手动设置 Value
6. 为仪表添加标签 - 设置 GaugeLabel 属性，说明测量的内容
7. 考虑性能 - 配置多个属性时，如果仪表较多，请使用 SuspendLayout/ResumeLayout
8. 测试不同的框架类型 - HalfCircle 和 QuarterCircle 在保持可读性的同时节省空间