Implementing Digital Gauge (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.

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

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

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

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

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

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

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;

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;

Common Patterns

Pattern 1: Simple Numeric Counter

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.

Pattern 2: Alphanumeric Display

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.

Pattern 3: Dot Matrix for Special Characters

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.

Pattern 4: Styled Dashboard Display

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.

Pattern 5: Skewed Digital Speedometer

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.

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

Common Use Cases

1. Real-Time Clock Display

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

2. Countdown Timer

Create countdown displays for events:

csharp

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

3. Live Sensor Reading

Display sensor data with appropriate formatting:

csharp

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

4. Digital Odometer

Show distance with leading zeros:

csharp

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

5. Status Indicator

Display system status messages:

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

Related Skills

Implementing Radial Gauges - For circular gauge displays
Implementing Range Selectors - For range-based data visualization
WPF Theming - For applying consistent themes

syncfusion-wpf-digital-gauge

NPX Install

Tags

SKILL.md Content

Implementing Digital Gauge (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

Pattern 2: Alphanumeric Display

Pattern 3: Dot Matrix for Special Characters

Pattern 4: Styled Dashboard Display

Pattern 5: Skewed Digital Speedometer

Key Properties Reference

Common Use Cases

1. Real-Time Clock Display

2. Countdown Timer

3. Live Sensor Reading

4. Digital Odometer

5. Status Indicator

Best Practices

Related Skills

Additional Resources