Customize Character Segments in .NET MAUI Digital Gauge

12 Jul 20264 minutes to read

The characters of a digital gauge can be customized in terms of CharacterWidth, CharacterHeight, CharacterSpacing, and CharacterStroke.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfDigitalGauge control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

Customize character size

The height and width of the digital characters can be altered using the CharacterHeight and CharacterWidth properties of the digital gauge. The default value of CharacterHeight is 60 and CharacterWidth is 40.

XAML

<gauge:SfDigitalGauge Text = "SYNCFUSION"
                      CharacterHeight = "117"
                      CharacterWidth = "25"/>

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.Text = "SYNCFUSION";
digital.CharacterHeight = 117;
digital.CharacterWidth = 25;
this.Content = digital;

Setting character spacing

The spacing between digital characters can be customized using the CharacterSpacing property.

XAML

<gauge:SfDigitalGauge Text = "01-01-24"
                      CharacterType = "EightCrossEightDotMatrix"
                      CharacterSpacing = "10"/>

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.Text = "01-01-24";
digital.CharacterSpacing = 10;
digital.CharacterType = DigitalGaugeCharacterType.EightCrossEightDotMatrix;
this.Content = digital;

Customize character segment stroke

The color of the digital character segments can be customized using the CharacterStroke property.

XAML

<gauge:SfDigitalGauge Text = "12345"
                      CharacterStroke = "Purple"/>

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.Text = "12345";
digital.CharacterStroke = Color.Purple;
this.Content = digital;

Customize character segment width

The stroke width of the digital character segments can be customized using the StrokeWidth property.

XAML

<gauge:SfDigitalGauge Text = "12345"
                      StrokeWidth = "3"/>

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.Text = "12345";
digital.StrokeWidth = 3;
this.Content = digital;

Customize disabled segment

The color and opacity of the disabled segments can be customized using the DisabledSegmentStroke and DisabledSegmentAlpha properties.

XAML

<gauge:SfDigitalGauge Text = "12345"
                      DisabledSegmentAlpha = "0.1"
                      DisabledSegmentStroke = "LightSkyBlue"/>

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.Text = "12345";
digital.DisabledSegmentAlpha = 0.1;
digital.DisabledSegmentStroke = Color.LightSkyBlue;
this.Content = digital;

Customize background color of digital gauge

The background color of the digital gauge can be customized using the BackgroundColor property.

XAML

<gauge:SfDigitalGauge Text = "12345"
                      BackgroundColor = "Blue"/>

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.BackgroundColor = Colors.Blue;
digital.Text = "12345";
this.Content = digital;