Customize Character Segments in .NET MAUI Digital Gauge

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

Customize character size

The values of digital characters are scaled by altering the height and width of digital characters. This is achieved by setting the CharacterHeight and CharacterWidth properties in the digital gauge. The default value of CharacterHeight is 60 and CharacterWidth is 40.

<gauge:SfDigitalGauge Text="SYNCFUSION" 
                          CharacterHeight="60" CharacterWidth="40"/>
SfDigitalGauge digital = new SfDigitalGauge();

            digital.Text = "SYNCFUSION";

            digital.CharacterHeight = 117;

            digital.CharacterWidth = 25;

height-width-for-text

Setting character spacing

The values of digital characters are spaced by altering the space between digital characters. This is achieved by setting the CharacterSpacing property.

<gauge:SfDigitalGauge Text="01-01-24" 
                           CharacterType="EightCrossEightDotMatrix"
                           CharacterSpacing="10"/>
SfDigitalGauge digital = new SfDigitalGauge();

            digital.Time = "01-01-24";

            digital.CharacterSpacing = 10;

            digital.CharacterType = DigitalGaugeCharacterType.EightCrossEightDotMatrix;

character-spacing-digitalgauge

Customize character segment stroke

The values of digital characters color can be customized using the CharacterStroke property.

<gauge:SfDigitalGauge Text="12345" "
                          CharacterStroke="Purple"/>
SfDigitalGauge digital = new SfDigitalGauge();

            digital.Text = "12345";

            digital.CharacterStroke = Color.Purple;

characterstroke-digitalgauge

Customize character segment width

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

<gauge:SfDigitalGauge Text="12345" 
                           StrokeWidth="3"/>
SfDigitalGauge digital = new SfDigitalGauge();

            digital.Text = "12345";

            digital.StrokeWidth = 3;

characterwidth-digitalgauge

Customize disabled segment

You can customize the color and opacity of disabled segments using the DisabledSegmentStroke and DisabledSegmentAlpha properties.

<gauge:SfDigitalGauge Text="12345" 
                          DisabledSegmentAlpha="0.1" DisabledSegmentStroke="LightSkyBlue"/>
SfDigitalGauge digital = new SfDigitalGauge();

            digital.Text = "12345";

            digital.DisabledSegmentAlpha = 0.1

            digital.DisabledSegmentStroke = Color.LightSkyBlue;

disabled-segment-stroke-digitalgauge

Customize background color of digital gauge

You can customize the background color of the digital gauge using the BackgroundColor property.

<gauge:SfDigitalGauge Text="12345" 
                          BackgroundColor="Blue"/>
SfDigitalGauge digital = new SfDigitalGauge();

            this.BackgroundColor = Colors.Blue;

            digital.Text = "12345";

backgroundcolor-digitalgauge