Transformation of Characters in UWP Digital Gauge

18 Nov 20183 minutes to read

The digital characters in the digital gauge can be transformed by setting certain properties in the SfDigitalGauge. Two kinds of transformations are supported: Scaling and Skewing.

• Scaling
• Skewing

Scaling

Digital characters are scaled by altering their height and width. It is achieved by setting the CharacterHeight and CharacterWidth properties in the digital gauge. The two properties can be set independently to scale each dimension. The default values and valid ranges are as follows:

• CharacterHeight — default value is 40; valid range is any positive numeric value.
• CharacterWidth — default value is 25; valid range is any positive numeric value.

CharacterHeight

XAML

<syncfusion:SfDigitalGauge Value="SYNCFUSION" CharacterHeight="70" CharacterType="SegmentFourteen" />

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.Value = "SYNCFUSION";
digital.CharacterHeight = 70;
digital.CharacterType = CharacterType.SegmentFourteen;
this.Grid.Children.Add(digital);

CharacterWidth

XAML

<syncfusion:SfDigitalGauge Value="SYNCFUSION" CharacterWidth="60" CharacterType="SegmentFourteen" />

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.Value = "SYNCFUSION";
digital.CharacterWidth = 60;
digital.CharacterType = CharacterType.SegmentFourteen;
this.Grid.Children.Add(digital);

Skewing

The digital gauge also supports skew transformation of digital characters. It can be done on the x-axis and y-axis through the SkewAngleX and SkewAngleY properties, respectively. Both skew angles can be applied simultaneously. The default values, valid ranges, and units are as follows:

• SkewAngleX — default value is 0; valid range is any numeric value (in degrees).
• SkewAngleY — default value is 0; valid range is any numeric value (in degrees).

SkewAngleX

XAML

<syncfusion:SfDigitalGauge Value="SYNCFUSION" SkewAngleX="35" CharacterType="SegmentFourteen" />

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.Value = "SYNCFUSION";
digital.SkewAngleX = 35;
digital.CharacterType = CharacterType.SegmentFourteen;
this.Grid.Children.Add(digital);

SkewAngleY

XAML

<syncfusion:SfDigitalGauge Value="SYNCFUSION" SkewAngleY="30" CharacterType="SegmentFourteen" />

C#

SfDigitalGauge digital = new SfDigitalGauge();
digital.Value = "SYNCFUSION";
digital.SkewAngleY = 30;
digital.CharacterType = CharacterType.SegmentFourteen;
this.Grid.Children.Add(digital);