syncfusion-wpf-digital-gauge

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Digital Gauge (SfDigitalGauge)

实现数字仪表（SfDigitalGauge）

The SfDigitalGauge control displays alphanumeric characters in digital LED-style segments, perfect for creating virtual digital displays, clocks, speedometers, and counters in WPF applications.

SfDigitalGauge控件以数字LED样式的分段显示字母数字字符，非常适合在WPF应用中创建虚拟数字显示屏、时钟、速度表和计数器。

When to Use This Skill

适用场景

Use SfDigitalGauge when you need to:

Display numeric values in a digital LED format (clocks, timers, counters)
Create digital displays for dashboards or instrument panels
Show alphanumeric text in segment-based format (product codes, status messages)
Build digital speedometers or odometers showing speed/distance
Create retro-style digital interfaces with classic LED segment aesthetics
Display special characters in dot matrix format
Implement real-time updating displays (live data feeds, sensor readings)

Component Type: Data Visualization Control
Platform: Windows Presentation Foundation (WPF)
Package: Syncfusion.SfGauge.WPF

在以下场景中使用SfDigitalGauge：

以数字LED格式显示数值（时钟、计时器、计数器）
为仪表板或仪器面板创建数字显示屏
以分段格式显示字母数字文本（产品代码、状态消息）
构建显示速度/距离的数字速度表或里程表
创建具有经典LED分段外观的复古风格数字界面
以点阵格式显示特殊字符
实现实时更新显示屏（实时数据馈送、传感器读数）

组件类型： 数据可视化控件
平台： Windows Presentation Foundation（WPF）
包： Syncfusion.SfGauge.WPF

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

When you need to:

Install and configure SfDigitalGauge in a WPF project
Add assembly references (NuGet, Toolbox, or Manual)
Set up namespaces for XAML and C# code
Initialize the control for first use
Display basic values
Apply theme support

📄 阅读： references/getting-started.md

适用于以下需求：

在WPF项目中安装和配置SfDigitalGauge
添加程序集引用（NuGet、工具箱或手动方式）
为XAML和C#代码设置命名空间
初始化控件以首次使用
显示基础数值
应用主题支持

Character Types and Segments

字符类型与分段

📄 Read: references/character-types.md

When you need to:

Choose between 4 different segment display types
Display numbers only (7-segment)
Display numbers and alphabets (14-segment or 16-segment)
Display special characters (8×8 dot matrix)
Understand which CharacterType to use for your use case
See visual comparisons of segment types

📄 阅读： references/character-types.md

适用于以下需求：

在4种不同的分段显示类型中选择
仅显示数字（七段）
显示数字和字母（14段或16段）
显示特殊字符（8×8点阵）
了解针对你的使用场景应选择哪种CharacterType
查看分段类型的视觉对比

Customization and Styling

自定义与样式设置

📄 Read: references/customization.md

When you need to:

Adjust character dimensions (height, width)
Control spacing between characters
Change character stroke color
Style dimmed (inactive) segments
Adjust opacity of background segments
Create visually appealing displays

📄 阅读： references/customization.md

适用于以下需求：

调整字符尺寸（高度、宽度）
控制字符间距
更改字符描边颜色
设置变暗（非活动）分段的样式
调整背景分段的不透明度
创建视觉效果出色的显示屏

Transformations

变换效果

📄 Read: references/transformations.md

When you need to:

Scale characters (increase/decrease size)
Apply skew transformations
Create slanted digital displays
Transform characters along X or Y axis
Implement perspective effects

📄 阅读： references/transformations.md

适用于以下需求：

缩放字符（增大/减小尺寸）
应用倾斜变换
创建倾斜的数字显示屏
沿X或Y轴变换字符
实现透视效果

Segment Styling and Advanced Features

分段样式与高级功能

📄 Read: references/segment-styling.md

When you need to:

Adjust segment thickness
Enable Right-to-Left (RTL) text direction
Fine-tune visual appearance
Match background colors

📄 阅读： references/segment-styling.md

适用于以下需求：

调整分段厚度
启用从右到左（RTL）文本方向
微调视觉外观
匹配背景颜色

Quick Start

快速开始

Basic Digital Display

基础数字显示屏

xaml

<Window xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf">
    <gauge:SfDigitalGauge Value="12345" />
</Window>

csharp

using Syncfusion.UI.Xaml.Gauges;

SfDigitalGauge digitalGauge = new SfDigitalGauge();
digitalGauge.Value = "12345";
this.Content = digitalGauge;

xaml

<Window xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf">
    <gauge:SfDigitalGauge Value="12345" />
</Window>

csharp

using Syncfusion.UI.Xaml.Gauges;

SfDigitalGauge digitalGauge = new SfDigitalGauge();
digitalGauge.Value = "12345";
this.Content = digitalGauge;

Digital Clock Display

数字时钟显示屏

xaml

<gauge:SfDigitalGauge Value="11:59:50 PM"
                      Height="100"
                      Width="375"
                      CharacterHeight="60"
                      CharacterWidth="25"
                      CharacterType="EightCrossEightDotMatrix"
                      CharacterStroke="#146CED"
                      DimmedBrush="#F2F2F2"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center" />

csharp

SfDigitalGauge clock = new SfDigitalGauge();
clock.Value = "11:59:50 PM";
clock.Height = 100;
clock.Width = 375;
clock.CharacterHeight = 60;
clock.CharacterWidth = 25;
clock.CharacterType = CharacterType.EightCrossEightDotMatrix;
clock.CharacterStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#146CED");
clock.DimmedBrush = (SolidColorBrush)new BrushConverter().ConvertFrom("#F2F2F2");
clock.HorizontalAlignment = HorizontalAlignment.Center;
clock.VerticalAlignment = VerticalAlignment.Center;

xaml

<gauge:SfDigitalGauge Value="11:59:50 PM"
                      Height="100"
                      Width="375"
                      CharacterHeight="60"
                      CharacterWidth="25"
                      CharacterType="EightCrossEightDotMatrix"
                      CharacterStroke="#146CED"
                      DimmedBrush="#F2F2F2"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center" />

csharp

SfDigitalGauge clock = new SfDigitalGauge();
clock.Value = "11:59:50 PM";
clock.Height = 100;
clock.Width = 375;
clock.CharacterHeight = 60;
clock.CharacterWidth = 25;
clock.CharacterType = CharacterType.EightCrossEightDotMatrix;
clock.CharacterStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#146CED");
clock.DimmedBrush = (SolidColorBrush)new BrushConverter().ConvertFrom("#F2F2F2");
clock.HorizontalAlignment = HorizontalAlignment.Center;
clock.VerticalAlignment = VerticalAlignment.Center;

Common Patterns

常见模式

Pattern 1: Simple Numeric Counter

模式1：简单数字计数器

Use 7-segment display for numbers only:

xaml

<gauge:SfDigitalGauge Value="12345" 
                      CharacterType="SegmentSeven"
                      CharacterHeight="40"
                      CharacterWidth="20"
                      CharacterStroke="Red" />

When to use: Counters, timers, numeric displays where only digits 0-9 are needed.

使用七段显示仅显示数字：

xaml

<gauge:SfDigitalGauge Value="12345" 
                      CharacterType="SegmentSeven"
                      CharacterHeight="40"
                      CharacterWidth="20"
                      CharacterStroke="Red" />

适用场景： 计数器、计时器、仅需显示0-9数字的数值显示屏。

Pattern 2: Alphanumeric Display

模式2：字母数字显示屏

Use 14-segment or 16-segment for text and numbers:

xaml

<gauge:SfDigitalGauge Value="SPEED 088" 
                      CharacterType="SegmentFourteen"
                      CharacterHeight="50"
                      CharacterWidth="30"
                      CharacterStroke="Green" />

When to use: Status messages, product codes, labels with mixed alphanumeric content.

使用14段或16段显示文本和数字：

xaml

<gauge:SfDigitalGauge Value="SPEED 088" 
                      CharacterType="SegmentFourteen"
                      CharacterHeight="50"
                      CharacterWidth="30"
                      CharacterStroke="Green" />

适用场景： 状态消息、产品代码、包含字母数字混合内容的标签。

Pattern 3: Dot Matrix for Special Characters

模式3：特殊字符点阵显示

Use 8×8 dot matrix for full character support:

xaml

<gauge:SfDigitalGauge Value="SYNC@2024!" 
                      CharacterType="EightCrossEightDotMatrix"
                      CharacterHeight="60"
                      CharacterWidth="35"
                      CharacterStroke="Orange" />

When to use: Email addresses, URLs, special symbols, complex text displays.

使用8×8点阵显示全字符：

xaml

<gauge:SfDigitalGauge Value="SYNC@2024!" 
                      CharacterType="EightCrossEightDotMatrix"
                      CharacterHeight="60"
                      CharacterWidth="35"
                      CharacterStroke="Orange" />

适用场景： 电子邮件地址、网址、特殊符号、复杂文本显示。

Pattern 4: Styled Dashboard Display

模式4：样式化仪表板显示屏

Apply comprehensive styling for professional appearance:

xaml

<gauge:SfDigitalGauge Value="TEMP 72°F"
                      CharacterType="SegmentSixteen"
                      CharacterHeight="55"
                      CharacterWidth="32"
                      CharactersSpacing="8"
                      CharacterStroke="#00FF00"
                      DimmedBrush="#1A1A1A"
                      DimmedBrushOpacity="30"
                      SegmentThickness="3" />

When to use: Dashboard panels, control rooms, monitoring displays requiring clear visibility.

应用全面样式设置以实现专业外观：

xaml

<gauge:SfDigitalGauge Value="TEMP 72°F"
                      CharacterType="SegmentSixteen"
                      CharacterHeight="55"
                      CharacterWidth="32"
                      CharactersSpacing="8"
                      CharacterStroke="#00FF00"
                      DimmedBrush="#1A1A1A"
                      DimmedBrushOpacity="30"
                      SegmentThickness="3" />

适用场景： 仪表板面板、控制室、需要清晰可见性的监控显示屏。

Pattern 5: Skewed Digital Speedometer

模式5：倾斜数字速度表

Create dynamic perspective effect:

xaml

<gauge:SfDigitalGauge Value="125 MPH"
                      CharacterType="SegmentSeven"
                      CharacterHeight="70"
                      CharacterWidth="40"
                      SkewAngleX="15"
                      CharacterStroke="Cyan" />

When to use: Speedometers, racing dashboards, dynamic displays with motion feel.

创建动态透视效果：

xaml

<gauge:SfDigitalGauge Value="125 MPH"
                      CharacterType="SegmentSeven"
                      CharacterHeight="70"
                      CharacterWidth="40"
                      SkewAngleX="15"
                      CharacterStroke="Cyan" />

适用场景： 速度表、赛车仪表板、具有动感的动态显示屏。

Key Properties Reference

关键属性参考

Property	Type	Description
Value	string	The alphanumeric text to display
CharacterType	Enum	Segment type: SegmentSeven, SegmentFourteen, SegmentSixteen, EightCrossEightDotMatrix
CharacterHeight	double	Height of each character in pixels
CharacterWidth	double	Width of each character in pixels
CharactersSpacing	double	Distance between characters
CharacterStroke	Brush	Color of active (lit) segments
DimmedBrush	Brush	Color of inactive (dimmed) segments
DimmedBrushOpacity	double	Opacity of dimmed segments (0-100)
SegmentThickness	double	Thickness of segment lines
SkewAngleX	double	Horizontal skew angle (degrees)
SkewAngleY	double	Vertical skew angle (degrees)
EnableRTLFormat	bool	Enable Right-to-Left text direction

属性	类型	描述
Value	string	要显示的字母数字文本
CharacterType	枚举	分段类型：SegmentSeven、SegmentFourteen、SegmentSixteen、EightCrossEightDotMatrix
CharacterHeight	double	每个字符的高度（像素）
CharacterWidth	double	每个字符的宽度（像素）
CharactersSpacing	double	字符间距
CharacterStroke	Brush	活动（亮起）分段的颜色
DimmedBrush	Brush	非活动（变暗）分段的颜色
DimmedBrushOpacity	double	变暗分段的不透明度（0-100）
SegmentThickness	double	分段线条的厚度
SkewAngleX	double	水平倾斜角度（度）
SkewAngleY	double	垂直倾斜角度（度）
EnableRTLFormat	bool	启用从右到左文本方向

Common Use Cases

常见使用场景

1. Real-Time Clock Display

1. 实时时钟显示

Display current time with updating segments:

csharp

// Update timer every second
DispatcherTimer timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromSeconds(1);
timer.Tick += (s, e) => digitalGauge.Value = DateTime.Now.ToString("hh:mm:ss tt");
timer.Start();

显示当前时间并更新分段：

csharp

// 每秒更新计时器
DispatcherTimer timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromSeconds(1);
timer.Tick += (s, e) => digitalGauge.Value = DateTime.Now.ToString("hh:mm:ss tt");
timer.Start();

2. Countdown Timer

2. 倒计时计时器

Create countdown displays for events:

csharp

TimeSpan remaining = TimeSpan.FromMinutes(10);
digitalGauge.Value = remaining.ToString(@"mm\:ss");

为活动创建倒计时显示：

csharp

TimeSpan remaining = TimeSpan.FromMinutes(10);
digitalGauge.Value = remaining.ToString(@"mm\:ss");

3. Live Sensor Reading

3. 实时传感器读数

Display sensor data with appropriate formatting:

csharp

digitalGauge.Value = $"TEMP {sensorReading:F1}°C";
digitalGauge.CharacterType = CharacterType.SegmentSixteen;

显示格式化后的传感器数据：

csharp

digitalGauge.Value = $"TEMP {sensorReading:F1}°C";
digitalGauge.CharacterType = CharacterType.SegmentSixteen;

4. Digital Odometer

4. 数字里程表

Show distance with leading zeros:

csharp

double miles = 12345.6;
digitalGauge.Value = miles.ToString("000000.0");
digitalGauge.CharacterType = CharacterType.SegmentSeven;

显示带前导零的距离：

csharp

double miles = 12345.6;
digitalGauge.Value = miles.ToString("000000.0");
digitalGauge.CharacterType = CharacterType.SegmentSeven;

5. Status Indicator

5. 状态指示器

Display system status messages:

csharp

digitalGauge.Value = isOnline ? "ONLINE" : "OFFLINE";
digitalGauge.CharacterStroke = isOnline ? Brushes.Green : Brushes.Red;
digitalGauge.CharacterType = CharacterType.SegmentFourteen;

显示系统状态消息：

csharp

digitalGauge.Value = isOnline ? "ONLINE" : "OFFLINE";
digitalGauge.CharacterStroke = isOnline ? Brushes.Green : Brushes.Red;
digitalGauge.CharacterType = CharacterType.SegmentFourteen;

Best Practices

最佳实践

Choose the right CharacterType:
- Numbers only → SegmentSeven
- Numbers + Letters → SegmentFourteen or SegmentSixteen
- Special characters → EightCrossEightDotMatrix
Ensure readability:
- Use appropriate CharacterHeight (40-70px for most cases)
- Set proper CharactersSpacing (5-15px)
- Choose contrasting CharacterStroke colors
Optimize dimmed segments:
- Set DimmedBrush to match your background
- Adjust DimmedBrushOpacity (20-40) for subtle effect
Performance considerations:
- Avoid rapid Value updates (<50ms intervals)
- Use string formatting to prevent unnecessary updates
Accessibility:
- Provide text alternatives for screen readers
- Ensure sufficient color contrast
- Consider users with visual impairments

选择合适的CharacterType：
- 仅数字 → SegmentSeven
- 数字+字母 → SegmentFourteen或SegmentSixteen
- 特殊字符 → EightCrossEightDotMatrix
确保可读性：
- 使用合适的CharacterHeight（大多数场景为40-70px）
- 设置适当的CharactersSpacing（5-15px）
- 选择对比鲜明的CharacterStroke颜色
优化变暗分段：
- 将DimmedBrush设置为与背景匹配
- 调整DimmedBrushOpacity（20-40）以获得微妙效果
性能注意事项：
- 避免过于频繁的Value更新（间隔<50ms）
- 使用字符串格式化以避免不必要的更新
可访问性：
- 为屏幕阅读器提供文本替代方案
- 确保足够的颜色对比度
- 考虑视障用户需求

syncfusion-wpf-digital-gauge

Original

Translation

Implementing Digital Gauge (SfDigitalGauge)

实现数字仪表（SfDigitalGauge）

When to Use This Skill

适用场景

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

Character Types and Segments

字符类型与分段

Customization and Styling

自定义与样式设置

Transformations

变换效果

Segment Styling and Advanced Features

分段样式与高级功能

Quick Start

快速开始

Basic Digital Display

基础数字显示屏

Digital Clock Display

数字时钟显示屏

Common Patterns

常见模式

Pattern 1: Simple Numeric Counter

模式1：简单数字计数器

Pattern 2: Alphanumeric Display

模式2：字母数字显示屏

Pattern 3: Dot Matrix for Special Characters

模式3：特殊字符点阵显示

Pattern 4: Styled Dashboard Display

模式4：样式化仪表板显示屏

Pattern 5: Skewed Digital Speedometer

模式5：倾斜数字速度表

Key Properties Reference

关键属性参考

Common Use Cases

常见使用场景

1. Real-Time Clock Display

1. 实时时钟显示

2. Countdown Timer

2. 倒计时计时器

3. Live Sensor Reading

3. 实时传感器读数

4. Digital Odometer

4. 数字里程表

5. Status Indicator

5. 状态指示器

Best Practices

最佳实践

Related Skills

相关技能

Additional Resources

额外资源