syncfusion-winforms-radial-gauge

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing 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适用场景

  1. Speedometers and tachometers - Vehicle instrumentation, RPM displays
  2. Temperature gauges - HVAC controls, system monitoring, weather displays
  3. Pressure gauges - Industrial monitoring, tire pressure, hydraulic systems
  4. Progress indicators - Circular progress for loading, completion percentage
  5. KPI dashboards - Performance metrics with color-coded ranges
  6. Dial controls - Volume, brightness, or any rotary control visualization
  7. Compass displays - Navigation, orientation indicators
  8. Clock faces - Analog time displays with custom styling
  1. 速度表与转速表 - 车载仪表、RPM显示
  2. 温度仪表盘 - HVAC控制、系统监控、天气展示
  3. 压力表 - 工业监控、胎压检测、液压系统
  4. 进度指示器 - 圆形加载进度、完成百分比展示
  5. KPI仪表盘 - 带颜色编码区间的性能指标展示
  6. 刻度盘控件 - 音量、亮度或任意旋转控制的可视化
  7. 罗盘显示 - 导航、朝向指示器
  8. 时钟表盘 - 支持自定义样式的模拟时间显示

LinearGauge Use Cases

LinearGauge适用场景

  1. Progress bars - Task completion, download progress, loading status
  2. Level indicators - Battery level, fuel gauge, volume meters
  3. Slider visualizations - Temperature sliders, adjustment controls
  4. Horizontal meters - Audio levels, signal strength, capacity indicators
  5. Vertical meters - Building height indicators, elevator position
  6. Thermometer displays - Temperature scales, medical thermometers
  7. Timeline indicators - Project timelines, milestone tracking
  1. 进度条 - 任务完成度、下载进度、加载状态
  2. 液位指示器 - 电池电量、燃油表、音量计
  3. 滑块可视化 - 温度滑块、调节控件
  4. 水平计量表 - 音频电平、信号强度、容量指示器
  5. 垂直计量表 - 建筑高度指示器、电梯位置
  6. 温度计显示 - 温度刻度、医用温度计
  7. 时间线指示器 - 项目时间线、里程碑追踪

DigitalGauge Use Cases

DigitalGauge适用场景

  1. Digital clocks - Time displays, countdown timers, stopwatches
  2. Counters - Visitor counters, production counters, score displays
  3. Alphanumeric status - System codes, product IDs, status messages
  4. LED displays - Retro-style indicators, industrial displays
  5. Price displays - Gas station prices, retail pricing
  6. 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.
  1. 数字时钟 - 时间显示、倒计时器、秒表
  2. 计数器 - 访客计数器、生产计数器、比分展示
  3. 字母数字状态 - 系统代码、产品ID、状态消息
  4. LED显示屏 - 复古风格指示器、工业显示屏
  5. 价格显示 - 加油站价格、零售定价
  6. 测量读数 - 数字万用表、传感器读数
不适用场景: 无需仪表盘可视化的简单文本展示,请使用标准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类型选择指南

NeedUse This GaugeWhy
Circular display (speedometer style)RadialGaugeNatural for rotary values, intuitive needle movement
Arc/partial circleRadialGauge (HalfCircle/QuarterCircle)Space-efficient, modern dashboard look
Horizontal progress barLinearGauge (Horizontal)Clear left-to-right progression
Vertical level indicatorLinearGauge (Vertical)Natural for height/depth/level visualization
Time display (LED style)DigitalGauge (SevenSegment)Classic digital clock appearance
Alphanumeric status codeDigitalGauge (FourteenSegment/SixteenSegment)Supports letters and numbers
Multiple needles on one dialRadialGauge (EnableCustomNeedles)Compare multiple values on same scale
Fill-based progress indicatorRadialGauge (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通用属性

PropertyTypeDescription
Value
float (Radial/Linear) / string (Digital)Current displayed value
MinimumValue
floatMinimum scale value (Radial/Linear only)
MaximumValue
floatMaximum scale value (Radial/Linear only)
VisualStyle
ThemeStyleTheme: Blue, Black, Silver, Metro, Office2016*, Custom
DataSource
objectData source for binding
DisplayMember
stringColumn name for value binding
DisplayRecordIndex
intRow index for value binding
属性类型描述
Value
float (Radial/Linear) / string (Digital)当前展示的数值
MinimumValue
float刻度最小值(仅Radial/Linear支持)
MaximumValue
float刻度最大值(仅Radial/Linear支持)
VisualStyle
ThemeStyle主题:Blue、Black、Silver、Metro、Office2016系列、Custom
DataSource
object绑定的数据源
DisplayMember
string数值绑定对应的列名
DisplayRecordIndex
int数值绑定对应的行索引

RadialGauge Specific

RadialGauge专属属性

PropertyTypeDescription
FrameType
FrameTypeFullCircle, HalfCircle, QuarterCircle, Fill
StartAngle
intStarting angle of arc (degrees)
SweepAngle
intArc span length (degrees)
ShowNeedle
boolDisplay pointer needle
NeedleStyle
NeedleStyleDefault, Advanced, Pointer
EnableCustomNeedles
boolAllow multiple needles
Ranges
RangeCollectionColor-coded value ranges
MajorDifference
floatSpacing between major ticks
MinorDifference
floatSpacing between minor ticks
属性类型描述
FrameType
FrameTypeFullCircle、HalfCircle、QuarterCircle、Fill
StartAngle
int弧形起始角度(度)
SweepAngle
int弧形跨度长度(度)
ShowNeedle
bool是否显示指针
NeedleStyle
NeedleStyleDefault、Advanced、Pointer
EnableCustomNeedles
bool是否允许多指针
Ranges
RangeCollection颜色编码数值区间集合
MajorDifference
float主刻度间隔
MinorDifference
float副刻度间隔

LinearGauge Specific

LinearGauge专属属性

PropertyTypeDescription
LinearFrameType
LinearFrameTypeHorizontal or Vertical
PointerPlacement
PlacementTop, Center, Bottom
ShowNeedle
boolDisplay pointer
Ranges
LinearRangeCollectionColor-coded value ranges
MajorDifference
floatSpacing between major ticks
MinorTickCount
intNumber of minor ticks between majors
属性类型描述
LinearFrameType
LinearFrameTypeHorizontal或Vertical
PointerPlacement
Placement顶部、居中、底部
ShowNeedle
bool是否显示指针
Ranges
LinearRangeCollection颜色编码数值区间集合
MajorDifference
float主刻度间隔
MinorTickCount
int主刻度之间的副刻度数量

DigitalGauge Specific

DigitalGauge专属属性

PropertyTypeDescription
Value
stringText to display
CharacterType
CharacterTypeDotMatrix, SevenSegment, FourteenSegment, SixteenSegment
CharacterCount
intNumber of characters to display
SegmentSpacing
floatSpacing between characters
ShowInvisibleSegments
boolShow inactive segments
RoundCornerRadius
intCorner rounding radius
属性类型描述
Value
string展示的文本内容
CharacterType
CharacterTypeDotMatrix、SevenSegment、FourteenSegment、SixteenSegment
CharacterCount
int可展示的字符数量
SegmentSpacing
float字符之间的间距
ShowInvisibleSegments
bool是否显示未激活的段
RoundCornerRadius
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
场景: 监控多类传感器(压力、温度、RPM)
方案: 多个带颜色编码区间的RadialGauge,搭配实时数据绑定

2. Progress Indicator

2. 进度指示器

Scenario: Show task completion percentage
Solution: LinearGauge (Horizontal) or RadialGauge (Fill type) with 0-100 range
场景: 展示任务完成百分比
方案: 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
场景: 以LED格式展示当前时间
方案: 配置SevenSegment字符类型的DigitalGauge,搭配定时器实时更新

4. Vehicle Instrument Cluster

4. 车载仪表集群

Scenario: Speedometer, tachometer, fuel gauge
Solution: RadialGauges (HalfCircle for speed/RPM), LinearGauge (Vertical for fuel)
场景: 速度表、转速表、燃油表
方案: RadialGauge(速度/RPM用HalfCircle类型)、LinearGauge(燃油表用垂直类型)

5. System Monitor

5. 系统监控

Scenario: CPU usage, memory, network speed
Solution: Mix of RadialGauges (percentage dials) and DigitalGauges (numeric readouts)
场景: CPU使用率、内存、网络速度
方案: 混合使用RadialGauge(百分比刻度盘)和DigitalGauge(数值读数)

6. Temperature Control

6. 温度控制

Scenario: Thermostat with visual temperature display
Solution: RadialGauge (FullCircle) with color ranges (blue=cold, yellow=moderate, red=hot)
场景: 带可视化温度展示的恒温器
方案: RadialGauge(FullCircle类型),搭配颜色区间(蓝色=冷、黄色=适中、红色=热)

Best Practices

最佳实践

  1. Choose appropriate gauge type - RadialGauge for rotary values, LinearGauge for linear progression, DigitalGauge for alphanumeric
  2. Use color-coded ranges - Visual thresholds improve readability (green=good, yellow=warning, red=critical)
  3. Set meaningful scales - Configure Min/Max and MajorDifference to match your data range
  4. Apply consistent themes - Use same VisualStyle across all gauges in application
  5. Optimize real-time updates - Use data binding for frequent updates instead of manual Value setting
  6. Label your gauges - Set GaugeLabel property to clarify what's being measured
  7. Consider performance - For many gauges, use SuspendLayout/ResumeLayout when configuring multiple properties
  8. Test different frame types - HalfCircle and QuarterCircle save space while remaining readable
  1. 选择合适的Gauge类型 - 旋转类数值用RadialGauge、线性进度用LinearGauge、字母数字展示用DigitalGauge
  2. 使用颜色编码区间 - 可视化阈值可提升可读性(绿色=正常、黄色=警告、红色=危急)
  3. 设置合理的刻度范围 - 配置最小/最大值和主刻度间隔匹配你的数据范围
  4. 应用统一的主题 - 应用内所有Gauge使用相同的VisualStyle保证风格一致
  5. 优化实时更新 - 高频更新场景使用数据绑定,而非手动修改Value属性
  6. 为Gauge添加标签 - 配置GaugeLabel属性明确展示的测量指标
  7. 考虑性能 - 同时配置多个Gauge属性时,使用SuspendLayout/ResumeLayout减少重绘
  8. 测试不同边框类型 - HalfCircle和QuarterCircle在节省空间的同时仍能保证可读性