syncfusion-wpf-digital-gauge

实现数字仪表（SfDigitalGauge）

SfDigitalGauge 控件可通过数字 LED 风格的分段显示字母数字字符，非常适合在 WPF 应用程序中创建虚拟数字显示屏、时钟、速度计和计数器。

何时使用此技能

在以下情况下使用 SfDigitalGauge：

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

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

---

文档与导航指南

入门

📄 阅读： references/getting-started.md

适用于以下需求：

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

字符类型和分段

📄 阅读： references/character-types.md

适用于以下需求：

• 在 4 种不同的分段显示类型之间进行选择
• 仅显示数字（7 段）
• 显示数字和字母（14 段或 16 段）
• 显示特殊字符（8×8 点阵）
• 了解适用于具体使用场景的 CharacterType
• 查看不同分段类型的直观对比

自定义和样式设置

📄 阅读： references/customization.md

适用于以下需求：

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

变换

📄 阅读： references/transformations.md

适用于以下需求：

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

分段样式和高级功能

📄 阅读： references/segment-styling.md

适用于以下需求：

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

---

快速入门

基本数字显示

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

using Syncfusion.UI.Xaml.Gauges;

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

数字时钟显示

<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" />

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;

---

常见模式

模式 1：简单数字计数器

仅显示数字时使用 7 段显示：

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

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

模式 2：字母数字显示

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

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

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

模式 3：用于特殊字符的点阵

需要完整字符支持时使用 8×8 点阵：

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

适用场景： 电子邮件地址、URL、特殊符号，以及复杂文本显示屏。

模式 4：带样式的仪表板显示

应用全面的样式设置，打造专业外观：

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

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

模式 5：倾斜的数字速度计

创建动态透视效果：

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

适用场景： 速度计、赛车仪表板，以及带有动态感的显示屏。

---

关键属性参考

属性	类型	描述
Value	string	要显示的字母数字文本
CharacterType	Enum	字符段类型：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	启用从右到左的文本方向

---

常见用例

1. 实时时钟显示

显示实时更新的时间：

// 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();

2. 倒计时器

为活动创建倒计时显示：

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

3. 实时传感器读数

以适当的格式显示传感器数据：

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

4. 数字里程表

显示带前导零的距离：

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

5. 状态指示器

显示系统状态消息：

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

---

最佳实践

1. 选择合适的 CharacterType：

   • 仅数字 → SegmentSeven
   • 数字 + 字母 → SegmentFourteen 或 SegmentSixteen
   • 特殊字符 → EightCrossEightDotMatrix

2. 确保可读性：

   • 使用合适的 CharacterHeight（大多数情况下为 40-70px）
   • 设置合适的 CharactersSpacing（5-15px）
   • 选择对比鲜明的 CharacterStroke 颜色

3. 优化变暗字符段：

   • 设置 DimmedBrush，使其与背景颜色相匹配
   • 调整 DimmedBrushOpacity（20-40），获得微妙效果

4. 性能注意事项：

   • 避免频繁更新 Value（间隔小于 50ms）
   • 使用字符串格式化，避免不必要的更新

5. 无障碍性：

   • 为屏幕阅读器提供文本替代内容
   • 确保颜色对比度足够
   • 考虑视障用户的需求

---

相关技能

• 实现径向仪表 - 用于圆形仪表显示
• 实现范围选择器 - 用于基于范围的数据可视化
• WPF 主题设置 - 用于应用统一的主题

---

其他资源

• Syncfusion 数字仪表文档
• 主题工作室
• GitHub 示例