OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-digital-gauge
Implement Syncfusion WPF Digital Gauge (SfDigitalGauge) to display alphanumeric characters in digital LED-style segments. Use this when working with seven-segment displays, digital clocks, LED indicators, or digital counters. This skill covers segment display configuration, dot matrix displays, character-based digital visualizations, and creating virtual digital readouts in WPF applications.
npx skills add syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-digital-gauge
The SfDigitalGauge control displays alphanumeric characters in digital LED-style segments, perfect for creating virtual digital displays, clocks, speedometers, and counters in WPF applications.
Use SfDigitalGauge when you need to:
Component Type: Data Visualization Control
Platform: Windows Presentation Foundation (WPF)
Package: Syncfusion.SfGauge.WPF
📄 Read: references/getting-started.md
When you need to:
📄 Read: references/character-types.md
When you need to:
📄 Read: references/customization.md
When you need to:
📄 Read: references/transformations.md
When you need to:
📄 Read: references/segment-styling.md
When you need to:
Use 7-segment display for numbers only:
When to use: Counters, timers, numeric displays where only digits 0-9 are needed.
Use 14-segment or 16-segment for text and numbers:
When to use: Status messages, product codes, labels with mixed alphanumeric content.
Use 8×8 dot matrix for full character support:
When to use: Email addresses, URLs, special symbols, complex text displays.
Apply comprehensive styling for professional appearance:
When to use: Dashboard panels, control rooms, monitoring displays requiring clear visibility.
Create dynamic perspective effect:
When to use: Speedometers, racing dashboards, dynamic displays with motion feel.
| 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 |
Display current time with updating segments:
Create countdown displays for events:
Display sensor data with appropriate formatting:
Show distance with leading zeros:
Display system status messages:
Choose the right CharacterType:
Ensure readability:
Optimize dimmed segments:
Performance considerations:
Accessibility:
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;<gauge:SfDigitalGauge Value="12345"
CharacterType="SegmentSeven"
CharacterHeight="40"
CharacterWidth="20"
CharacterStroke="Red" /><gauge:SfDigitalGauge Value="SPEED 088"
CharacterType="SegmentFourteen"
CharacterHeight="50"
CharacterWidth="30"
CharacterStroke="Green" /><gauge:SfDigitalGauge Value="SYNC@2024!"
CharacterType="EightCrossEightDotMatrix"
CharacterHeight="60"
CharacterWidth="35"
CharacterStroke="Orange" /><gauge:SfDigitalGauge Value="TEMP 72°F"
CharacterType="SegmentSixteen"
CharacterHeight="55"
CharacterWidth="32"
CharactersSpacing="8"
CharacterStroke="#00FF00"
DimmedBrush="#1A1A1A"
DimmedBrushOpacity="30"
SegmentThickness="3" /><gauge:SfDigitalGauge Value="125 MPH"
CharacterType="SegmentSeven"
CharacterHeight="70"
CharacterWidth="40"
SkewAngleX="15"
CharacterStroke="Cyan" />// 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();TimeSpan remaining = TimeSpan.FromMinutes(10);
digitalGauge.Value = remaining.ToString(@"mm\:ss");digitalGauge.Value = $"TEMP {sensorReading:F1}°C";
digitalGauge.CharacterType = CharacterType.SegmentSixteen;double miles = 12345.6;
digitalGauge.Value = miles.ToString("000000.0");
digitalGauge.CharacterType = CharacterType.SegmentSeven;digitalGauge.Value = isOnline ? "ONLINE" : "OFFLINE";
digitalGauge.CharacterStroke = isOnline ? Brushes.Green : Brushes.Red;
digitalGauge.CharacterType = CharacterType.SegmentFourteen;