syncfusion-winforms-radial-gauge
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing Gauges
实现Gauge控件
When to Use This Skill
何时使用该技能
Use this skill when the user needs to implement Syncfusion Gauge controls in a Windows Forms application. This skill covers three gauge types for different visualization needs:
当用户需要在Windows Forms应用中实现Syncfusion Gauge控件时可使用本技能。本技能覆盖三类适用于不同可视化需求的仪表盘类型:
RadialGauge Use Cases
RadialGauge适用场景
- Speedometers and tachometers - Vehicle instrumentation, RPM displays
- Temperature gauges - HVAC controls, system monitoring, weather displays
- Pressure gauges - Industrial monitoring, tire pressure, hydraulic systems
- Progress indicators - Circular progress for loading, completion percentage
- KPI dashboards - Performance metrics with color-coded ranges
- Dial controls - Volume, brightness, or any rotary control visualization
- Compass displays - Navigation, orientation indicators
- Clock faces - Analog time displays with custom styling
- 速度表与转速表 - 车载仪表、RPM显示
- 温度仪表盘 - HVAC控制、系统监控、天气展示
- 压力表 - 工业监控、胎压检测、液压系统
- 进度指示器 - 圆形加载进度、完成百分比展示
- KPI仪表盘 - 带颜色编码区间的性能指标展示
- 刻度盘控件 - 音量、亮度或任意旋转控制的可视化
- 罗盘显示 - 导航、朝向指示器
- 时钟表盘 - 支持自定义样式的模拟时间显示
LinearGauge Use Cases
LinearGauge适用场景
- Progress bars - Task completion, download progress, loading status
- Level indicators - Battery level, fuel gauge, volume meters
- Slider visualizations - Temperature sliders, adjustment controls
- Horizontal meters - Audio levels, signal strength, capacity indicators
- Vertical meters - Building height indicators, elevator position
- Thermometer displays - Temperature scales, medical thermometers
- Timeline indicators - Project timelines, milestone tracking
- 进度条 - 任务完成度、下载进度、加载状态
- 液位指示器 - 电池电量、燃油表、音量计
- 滑块可视化 - 温度滑块、调节控件
- 水平计量表 - 音频电平、信号强度、容量指示器
- 垂直计量表 - 建筑高度指示器、电梯位置
- 温度计显示 - 温度刻度、医用温度计
- 时间线指示器 - 项目时间线、里程碑追踪
DigitalGauge Use Cases
DigitalGauge适用场景
- Digital clocks - Time displays, countdown timers, stopwatches
- Counters - Visitor counters, production counters, score displays
- Alphanumeric status - System codes, product IDs, status messages
- LED displays - Retro-style indicators, industrial displays
- Price displays - Gas station prices, retail pricing
- Measurement readouts - Digital multimeters, sensor readings
When NOT to use: For simple text displays without gauge visualization, use standard Label or TextBox controls. For charts and graphs, use Chart controls.
- 数字时钟 - 时间显示、倒计时器、秒表
- 计数器 - 访客计数器、生产计数器、比分展示
- 字母数字状态 - 系统代码、产品ID、状态消息
- LED显示屏 - 复古风格指示器、工业显示屏
- 价格显示 - 加油站价格、零售定价
- 测量读数 - 数字万用表、传感器读数
不适用场景: 无需仪表盘可视化的简单文本展示,请使用标准Label或TextBox控件。图表类需求请使用Chart控件。
Component Overview
组件概览
Syncfusion provides three gauge controls for data visualization in Windows Forms:
Syncfusion为Windows Forms中的数据可视化提供了三类Gauge控件:
1. RadialGauge
1. RadialGauge
Visualizes values on a circular or arc scale with customizable needles, ranges, and frames.
Key Features:
- 4 frame types: FullCircle, HalfCircle, QuarterCircle, Fill
- Multiple needles support
- Color-coded ranges for visual thresholds
- Customizable scales, ticks, and labels
- Gradient backgrounds and styling
- Custom needle styles (Default, Advanced, Pointer)
在圆形或弧形刻度上展示数值,支持自定义指针、范围区间和边框。
核心特性:
- 4种边框类型:FullCircle、HalfCircle、QuarterCircle、Fill
- 支持多指针
- 用于可视化阈值的颜色编码区间
- 可自定义刻度、刻度线和标签
- 渐变背景与样式配置
- 自定义指针样式(Default、Advanced、Pointer)
2. LinearGauge
2. LinearGauge
Visualizes values on a linear scale (horizontal or vertical) with pointer indicators.
Key Features:
- Horizontal and vertical orientations
- Pointer placement (Top, Center, Bottom)
- Color-coded ranges
- Major and minor tick marks
- Value indicator bars
- Gradient styling
在线性刻度(水平或垂直)上展示数值,附带指针指示器。
核心特性:
- 支持水平和垂直两种方向
- 指针位置配置(顶部、居中、底部)
- 颜色编码区间
- 主/副刻度线
- 数值指示器条
- 渐变样式
3. DigitalGauge
3. DigitalGauge
Displays alphanumeric characters in LED/digital format.
Key Features:
- 4 character types: DotMatrix, SevenSegment, FourteenSegment, SixteenSegment
- Configurable character count
- Segment spacing control
- Invisible segment display option
- Rounded corners support
All gauges support:
- Visual themes (9 built-in + custom)
- Data binding for real-time updates
- Custom renderers for complete visual control
- Professional styling options
以LED/数字格式展示字母数字字符。
核心特性:
- 4种字符类型:DotMatrix、SevenSegment、FourteenSegment、SixteenSegment
- 可配置字符数量
- 段间距控制
- 不可见段显示选项
- 支持圆角
所有仪表盘均支持:
- 可视化主题(9款内置+自定义)
- 支持数据绑定实现实时更新
- 自定义渲染器实现完全的视觉控制
- 专业样式配置选项
Documentation and Navigation Guide
文档与导航指南
Installation and Setup
安装与配置
📄 Read: references/installation-and-setup.md
When user needs to set up gauge controls for the first time. Covers:
- Assembly references (Syncfusion.Gauge.Windows.dll, Syncfusion.Shared.Base.dll)
- NuGet package installation
- Namespace imports (Syncfusion.Windows.Forms.Gauge)
- Framework support (.NET 4.5+, .NET 6.0-8.0)
- Deployment requirements
- Toolbox configuration
- Sample browser location
📄 阅读: references/installation-and-setup.md
适用于用户首次配置Gauge控件的场景。内容覆盖:
- 程序集引用(Syncfusion.Gauge.Windows.dll、Syncfusion.Shared.Base.dll)
- NuGet包安装
- 命名空间导入(Syncfusion.Windows.Forms.Gauge)
- 框架支持(.NET 4.5+、.NET 6.0-8.0)
- 部署要求
- 工具箱配置
- 示例浏览器位置
RadialGauge (Circular Gauges)
RadialGauge(圆形仪表盘)
📄 Read: references/radial-gauge.md
When user needs circular, arc, or dial-style gauges. Covers:
- Frame types (FullCircle, HalfCircle, QuarterCircle, Fill)
- Designer and code-based setup
- Scales and labels (placement, orientation, colors)
- Ticks (major/minor configuration, heights, colors)
- Needles (single and multiple, styles, colors)
- Ranges (color-coded value ranges with start/end)
- Scaling divisions (MajorDifference, MinorDifference)
- StartAngle and SweepAngle customization
- Frame appearance (gradients, arc colors)
- Label customization with DrawLabel event
- Performance optimization tips
📄 阅读: references/radial-gauge.md
适用于用户需要圆形、弧形或刻度盘风格仪表盘的场景。内容覆盖:
- 边框类型(FullCircle、HalfCircle、QuarterCircle、Fill)
- 设计器与代码两种配置方式
- 刻度与标签(位置、朝向、颜色)
- 刻度线(主/副配置、高度、颜色)
- 指针(单/多指针、样式、颜色)
- 区间(带起止值的颜色编码数值区间)
- 刻度分度(MajorDifference、MinorDifference)
- StartAngle和SweepAngle自定义
- 边框外观(渐变、弧形颜色)
- 基于DrawLabel事件的标签自定义
- 性能优化技巧
LinearGauge (Bar/Slider Gauges)
LinearGauge(条形/滑块仪表盘)
📄 Read: references/linear-gauge.md
When user needs horizontal or vertical bar-style gauges. Covers:
- Frame types (Horizontal, Vertical)
- Designer and code-based setup
- Scales and label configuration
- Tick marks (major/minor)
- Pointer placement options
- Needle display and styling
- Ranges (LinearRange with colors)
- Value indicator positioning
- Frame appearance customization
- Complete orientation examples
📄 阅读: references/linear-gauge.md
适用于用户需要水平或垂直条形风格仪表盘的场景。内容覆盖:
- 边框类型(Horizontal、Vertical)
- 设计器与代码两种配置方式
- 刻度与标签配置
- 刻度线(主/副)
- 指针位置选项
- 指针显示与样式
- 区间(带颜色的LinearRange)
- 数值指示器定位
- 边框外观自定义
- 完整的方向配置示例
DigitalGauge (LED Display)
DigitalGauge(LED显示屏)
📄 Read: references/digital-gauge.md
When user needs LED-style alphanumeric displays. Covers:
- Character types (DotMatrix, SevenSegment, FourteenSegment, SixteenSegment)
- Designer and code-based setup
- Character count limiting
- Segment spacing configuration
- ShowInvisibleSegments property
- RoundCornerRadius for rounded edges
- Value property for string display
- Frame customization
- Examples for each character type
📄 阅读: references/digital-gauge.md
适用于用户需要LED风格字母数字显示屏的场景。内容覆盖:
- 字符类型(DotMatrix、SevenSegment、FourteenSegment、SixteenSegment)
- 设计器与代码两种配置方式
- 字符数量限制
- 段间距配置
- ShowInvisibleSegments属性
- 用于圆角的RoundCornerRadius
- 用于字符串展示的Value属性
- 边框自定义
- 每种字符类型的示例
Visual Themes and Styling
视觉主题与样式
📄 Read: references/visual-themes.md
When user wants to apply professional themes or custom styling. Covers:
- VisualStyle property (applies to all 3 gauge types)
- Built-in themes (Blue, Black, Silver, Metro, Office2016 variants)
- Custom theme creation (ThemeBrush collections)
- Color customization properties
- Design-time theme setup
- Theme-specific examples for each gauge type
- Consistent application-wide theming
📄 阅读: references/visual-themes.md
适用于用户想要应用专业主题或自定义样式的场景。内容覆盖:
- VisualStyle属性(适用于全部三类Gauge控件)
- 内置主题(Blue、Black、Silver、Metro、Office2016系列)
- 自定义主题创建(ThemeBrush集合)
- 颜色自定义属性
- 设计时主题配置
- 每类Gauge控件的主题专属示例
- 全应用一致的主题配置
Custom Renderers
自定义渲染器
📄 Read: references/custom-renderers.md
When user needs complete control over gauge rendering and appearance. Covers:
- IRadialGaugeRenderer interface
- ILinearGaugeRenderer interface
- Creating custom renderer classes
- DrawOuterArc, DrawNeedle, DrawLabel, DrawRanges methods
- Renderer property assignment
- Advanced customization scenarios
- Complete custom renderer examples
📄 阅读: references/custom-renderers.md
适用于用户需要完全控制Gauge渲染和外观的场景。内容覆盖:
- IRadialGaugeRenderer接口
- ILinearGaugeRenderer接口
- 自定义渲染器类创建
- DrawOuterArc、DrawNeedle、DrawLabel、DrawRanges方法
- Renderer属性赋值
- 高级自定义场景
- 完整的自定义渲染器示例
Data Binding
数据绑定
📄 Read: references/data-binding.md
When user needs real-time data updates or database-driven gauges. Covers:
- DataSource property configuration
- DisplayMember (column mapping)
- DisplayRecordIndex (row mapping)
- High-frequency data updates
- Real-time monitoring scenarios
- Performance considerations
- Complete binding examples for all gauge types
📄 阅读: references/data-binding.md
适用于用户需要实时数据更新或数据库驱动仪表盘的场景。内容覆盖:
- DataSource属性配置
- DisplayMember(列映射)
- DisplayRecordIndex(行映射)
- 高频数据更新
- 实时监控场景
- 性能注意事项
- 所有Gauge类型的完整绑定示例
Quick Start Examples
快速入门示例
RadialGauge: Speedometer
RadialGauge: 速度表
csharp
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);csharp
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: Battery Level
LinearGauge: 电池电量
csharp
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);csharp
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 Clock
DigitalGauge: LED时钟
csharp
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);csharp
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);Common Patterns
通用模式
Pattern 1: Dashboard with Multiple Gauges
模式1: 多仪表盘看板
csharp
// 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);csharp
// 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);Pattern 2: Data-Bound Real-Time Gauge
模式2: 数据绑定实时仪表盘
csharp
// 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();csharp
// 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();Pattern 3: Themed Gauge Set
模式3: 主题化仪表盘集合
csharp
// 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);csharp
// 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);Gauge Type Selection Guide
Gauge类型选择指南
| Need | Use This Gauge | Why |
|---|---|---|
| Circular display (speedometer style) | RadialGauge | Natural for rotary values, intuitive needle movement |
| Arc/partial circle | RadialGauge (HalfCircle/QuarterCircle) | Space-efficient, modern dashboard look |
| Horizontal progress bar | LinearGauge (Horizontal) | Clear left-to-right progression |
| Vertical level indicator | LinearGauge (Vertical) | Natural for height/depth/level visualization |
| Time display (LED style) | DigitalGauge (SevenSegment) | Classic digital clock appearance |
| Alphanumeric status code | DigitalGauge (FourteenSegment/SixteenSegment) | Supports letters and numbers |
| Multiple needles on one dial | RadialGauge (EnableCustomNeedles) | Compare multiple values on same scale |
| Fill-based progress indicator | RadialGauge (FrameType.Fill) | Visual fill from start to current value |
| 需求 | 推荐使用的Gauge | 原因 |
|---|---|---|
| 圆形显示(速度表风格) | RadialGauge | 适合旋转类数值,指针移动直观易懂 |
| 弧形/局部圆形显示 | RadialGauge(HalfCircle/QuarterCircle) | 节省空间,符合现代看板设计风格 |
| 水平进度条 | LinearGauge(Horizontal) | 清晰的从左到右进度展示 |
| 垂直液位指示器 | LinearGauge(Vertical) | 适合高度/深度/液位类场景的可视化 |
| 时间显示(LED风格) | DigitalGauge(SevenSegment) | 经典数字时钟外观 |
| 字母数字状态码 | DigitalGauge(FourteenSegment/SixteenSegment) | 支持字母和数字展示 |
| 单个表盘多指针 | RadialGauge(EnableCustomNeedles) | 可在同刻度下对比多个数值 |
| 填充式进度指示器 | RadialGauge(FrameType.Fill) | 从起点到当前值的填充式视觉效果 |
Key Properties Comparison
核心属性对比
Common to All Gauges
所有Gauge通用属性
| Property | Type | Description |
|---|---|---|
| float (Radial/Linear) / string (Digital) | Current displayed value |
| float | Minimum scale value (Radial/Linear only) |
| float | Maximum scale value (Radial/Linear only) |
| ThemeStyle | Theme: Blue, Black, Silver, Metro, Office2016*, Custom |
| object | Data source for binding |
| string | Column name for value binding |
| int | Row index for value binding |
| 属性 | 类型 | 描述 |
|---|---|---|
| float (Radial/Linear) / string (Digital) | 当前展示的数值 |
| float | 刻度最小值(仅Radial/Linear支持) |
| float | 刻度最大值(仅Radial/Linear支持) |
| ThemeStyle | 主题:Blue、Black、Silver、Metro、Office2016系列、Custom |
| object | 绑定的数据源 |
| string | 数值绑定对应的列名 |
| int | 数值绑定对应的行索引 |
RadialGauge Specific
RadialGauge专属属性
| Property | Type | Description |
|---|---|---|
| FrameType | FullCircle, HalfCircle, QuarterCircle, Fill |
| int | Starting angle of arc (degrees) |
| int | Arc span length (degrees) |
| bool | Display pointer needle |
| NeedleStyle | Default, Advanced, Pointer |
| bool | Allow multiple needles |
| RangeCollection | Color-coded value ranges |
| float | Spacing between major ticks |
| float | Spacing between minor ticks |
| 属性 | 类型 | 描述 |
|---|---|---|
| FrameType | FullCircle、HalfCircle、QuarterCircle、Fill |
| int | 弧形起始角度(度) |
| int | 弧形跨度长度(度) |
| bool | 是否显示指针 |
| NeedleStyle | Default、Advanced、Pointer |
| bool | 是否允许多指针 |
| RangeCollection | 颜色编码数值区间集合 |
| float | 主刻度间隔 |
| float | 副刻度间隔 |
LinearGauge Specific
LinearGauge专属属性
| Property | Type | Description |
|---|---|---|
| LinearFrameType | Horizontal or Vertical |
| Placement | Top, Center, Bottom |
| bool | Display pointer |
| LinearRangeCollection | Color-coded value ranges |
| float | Spacing between major ticks |
| int | Number of minor ticks between majors |
| 属性 | 类型 | 描述 |
|---|---|---|
| LinearFrameType | Horizontal或Vertical |
| Placement | 顶部、居中、底部 |
| bool | 是否显示指针 |
| LinearRangeCollection | 颜色编码数值区间集合 |
| float | 主刻度间隔 |
| int | 主刻度之间的副刻度数量 |
DigitalGauge Specific
DigitalGauge专属属性
| Property | Type | Description |
|---|---|---|
| string | Text to display |
| CharacterType | DotMatrix, SevenSegment, FourteenSegment, SixteenSegment |
| int | Number of characters to display |
| float | Spacing between characters |
| bool | Show inactive segments |
| int | Corner rounding radius |
| 属性 | 类型 | 描述 |
|---|---|---|
| string | 展示的文本内容 |
| CharacterType | DotMatrix、SevenSegment、FourteenSegment、SixteenSegment |
| int | 可展示的字符数量 |
| float | 字符之间的间距 |
| bool | 是否显示未激活的段 |
| int | 圆角半径 |
Common Use Cases
通用使用场景
1. Industrial Dashboard
1. 工业看板
Scenario: Monitor multiple sensors (pressure, temperature, RPM)
Solution: Multiple RadialGauges with color-coded ranges and real-time data binding
Solution: Multiple RadialGauges with color-coded ranges and real-time data binding
场景: 监控多类传感器(压力、温度、RPM)
方案: 多个带颜色编码区间的RadialGauge,搭配实时数据绑定
方案: 多个带颜色编码区间的RadialGauge,搭配实时数据绑定
2. Progress Indicator
2. 进度指示器
Scenario: Show task completion percentage
Solution: LinearGauge (Horizontal) or RadialGauge (Fill type) with 0-100 range
Solution: LinearGauge (Horizontal) or RadialGauge (Fill type) with 0-100 range
场景: 展示任务完成百分比
方案: LinearGauge(水平)或RadialGauge(Fill类型),配置0-100的范围
方案: LinearGauge(水平)或RadialGauge(Fill类型),配置0-100的范围
3. Digital Clock Display
3. 数字时钟展示
Scenario: Display current time in LED format
Solution: DigitalGauge with SevenSegment character type, timer for updates
Solution: DigitalGauge with SevenSegment character type, timer for updates
场景: 以LED格式展示当前时间
方案: 配置SevenSegment字符类型的DigitalGauge,搭配定时器实时更新
方案: 配置SevenSegment字符类型的DigitalGauge,搭配定时器实时更新
4. Vehicle Instrument Cluster
4. 车载仪表集群
Scenario: Speedometer, tachometer, fuel gauge
Solution: RadialGauges (HalfCircle for speed/RPM), LinearGauge (Vertical for fuel)
Solution: RadialGauges (HalfCircle for speed/RPM), LinearGauge (Vertical for fuel)
场景: 速度表、转速表、燃油表
方案: RadialGauge(速度/RPM用HalfCircle类型)、LinearGauge(燃油表用垂直类型)
方案: RadialGauge(速度/RPM用HalfCircle类型)、LinearGauge(燃油表用垂直类型)
5. System Monitor
5. 系统监控
Scenario: CPU usage, memory, network speed
Solution: Mix of RadialGauges (percentage dials) and DigitalGauges (numeric readouts)
Solution: Mix of RadialGauges (percentage dials) and DigitalGauges (numeric readouts)
场景: CPU使用率、内存、网络速度
方案: 混合使用RadialGauge(百分比刻度盘)和DigitalGauge(数值读数)
方案: 混合使用RadialGauge(百分比刻度盘)和DigitalGauge(数值读数)
6. Temperature Control
6. 温度控制
Scenario: Thermostat with visual temperature display
Solution: RadialGauge (FullCircle) with color ranges (blue=cold, yellow=moderate, red=hot)
Solution: RadialGauge (FullCircle) with color ranges (blue=cold, yellow=moderate, red=hot)
场景: 带可视化温度展示的恒温器
方案: RadialGauge(FullCircle类型),搭配颜色区间(蓝色=冷、黄色=适中、红色=热)
方案: RadialGauge(FullCircle类型),搭配颜色区间(蓝色=冷、黄色=适中、红色=热)
Best Practices
最佳实践
- Choose appropriate gauge type - RadialGauge for rotary values, LinearGauge for linear progression, DigitalGauge for alphanumeric
- Use color-coded ranges - Visual thresholds improve readability (green=good, yellow=warning, red=critical)
- Set meaningful scales - Configure Min/Max and MajorDifference to match your data range
- Apply consistent themes - Use same VisualStyle across all gauges in application
- Optimize real-time updates - Use data binding for frequent updates instead of manual Value setting
- Label your gauges - Set GaugeLabel property to clarify what's being measured
- Consider performance - For many gauges, use SuspendLayout/ResumeLayout when configuring multiple properties
- Test different frame types - HalfCircle and QuarterCircle save space while remaining readable
- 选择合适的Gauge类型 - 旋转类数值用RadialGauge、线性进度用LinearGauge、字母数字展示用DigitalGauge
- 使用颜色编码区间 - 可视化阈值可提升可读性(绿色=正常、黄色=警告、红色=危急)
- 设置合理的刻度范围 - 配置最小/最大值和主刻度间隔匹配你的数据范围
- 应用统一的主题 - 应用内所有Gauge使用相同的VisualStyle保证风格一致
- 优化实时更新 - 高频更新场景使用数据绑定,而非手动修改Value属性
- 为Gauge添加标签 - 配置GaugeLabel属性明确展示的测量指标
- 考虑性能 - 同时配置多个Gauge属性时,使用SuspendLayout/ResumeLayout减少重绘
- 测试不同边框类型 - HalfCircle和QuarterCircle在节省空间的同时仍能保证可读性