Scale in .NET MAUI Linear Gauge (SfLinearGauge)

13 Jul 202613 minutes to read

NOTE

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

The Linear Gauge scale on which a set of values can be plotted. A scale can be customized by changing the thickness, color, and edge styles. Scale elements such as labels and ticks can also be easily customized and the scale can be inversed.

Default scale

By default, scale will have the Minimum scale value as 0 and the Maximum scale value as 100. Without any changes, the default scale of the Linear Gauge will be displayed as follows.

XAML

<gauge:SfLinearGauge />

C#

SfLinearGauge gauge = new SfLinearGauge();
this.Content = gauge;

Customize minimum and maximum scale values

The Minimum and Maximum properties of a Linear Gauge can be used to customize the scale values. In the following code sample, the scale is customized with a Minimum value of -50 and a Maximum value of 50. The scale values are displayed by the labels. Customizing these label styles are further explained in next topics.

XAML

<gauge:SfLinearGauge  Minimum="-50" Maximum="50" />

C#

SfLinearGauge gauge = new SfLinearGauge();
gauge.Minimum=-50;
gauge.Maximum=50;
this.Content = gauge;

Customize scale orientation

The orientation of linear scale can be customized by using the Orientation property of linear gauge. The default value is Horizontal.

When the Orientation property is Vertical, the scale will be rendered in bottom-to-top direction.

XAML

<gauge:SfLinearGauge Orientation="Vertical"/>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.Orientation = GaugeOrientation.Vertical;
		this.Content = gauge;

Customize scale track style

The linear scale track can be customized using the LineStyle property. The LineStyle has the following properties.

• Thickness – Customizes the thickness of the scale track.
• Fill – Customizes the color of the scale track with any Brush (solid or gradient).
• GradientStops - Customizes the color of the scale track with a gradient.
• CornerRadius - Customizes the scale track edge corners.
• CornerStyle - Customizes the scale track edge style as flat or curve.

The following code sample demonstrates how to customize the Thickness and Fill properties:

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.LineStyle>
                    <gauge:LinearLineStyle Thickness="15"/>
                </gauge:SfLinearGauge.LineStyle>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();

		gauge.LineStyle.Thickness = 15;
		this.Content = gauge;

Apply solid color

The following code sample sets solid colors to the gauge track.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.LineStyle>
                    <gauge:LinearLineStyle Fill="Blue"/>
                </gauge:SfLinearGauge.LineStyle>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.LineStyle.Fill = new SolidColorBrush(Colors.Blue);
		this.Content = gauge;

Apply gradient

The Fill property of LineStyle allows to set a solid color, while the GradientStops property of LineStyle allows to apply linear-gradient to scale track.

The following code sample sets gradient colors to the scale track.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.LineStyle>
                    <gauge:LinearLineStyle>
                        <gauge:LinearLineStyle.GradientStops>
                            <gauge:GaugeGradientStop Value="0" Color="Red"/>
                            <gauge:GaugeGradientStop Value="100" Color="Blue"/>
                        </gauge:LinearLineStyle.GradientStops>
                    </gauge:LinearLineStyle>
                </gauge:SfLinearGauge.LineStyle>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.LineStyle.GradientStops.Add(new GaugeGradientStop() { Value = 0, Color = Colors.Red });
		gauge.LineStyle.GradientStops.Add(new GaugeGradientStop() { Value = 100, Color = Colors.Blue });
		this.Content = gauge;

Customize corners

The CornerStyle property of LineStyle specifies the corner type for the scale track. The corners can be customized with BothFlat, BothCurve, StartCurve, and EndCurve options. The default value of this property is BothFlat.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.LineStyle>
                    <gauge:LinearLineStyle Thickness="20" 
                                           CornerStyle="BothCurve"/>
                </gauge:SfLinearGauge.LineStyle>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.LineStyle.Thickness = 20;
		gauge.LineStyle.CornerStyle = CornerStyle.BothCurve;
		this.Content = gauge;

Also CornerRadius allows to set custom corner style for linear scale.

XAML

<gauge:SfLinearGauge>
                 <gauge:SfLinearGauge.LineStyle>
                    <gauge:LinearLineStyle Thickness="20" 
                                           CornerRadius="0,10,0,10"/>
                </gauge:SfLinearGauge.LineStyle>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.LineStyle.Thickness = 20;
		gauge.LineStyle.CornerRadius = new Thickness(0, 10, 0, 10);
		this.Content = gauge;

NOTE

If you set both CornerStyle and CornerRadius in the LineStyle, CornerStyle takes precedence over CornerRadius for the scale.

Inverse the scale

The direction of linear gauge scale can be customized by the IsInversed property.
When the IsInversed property is true, the scale can be placed in an inverse direction. The default value of the IsInversed property is false.

XAML

<gauge:SfLinearGauge IsInversed="True">
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.IsInversed = true;
		this.Content = gauge;

You can see that the scale values are displayed from 100 to 0 as the scale track is inversed.

Change scale track visibility

You can hide the scale track by setting the ShowLine property to false. The default value of this property is true.

XAML

<gauge:SfLinearGauge ShowLine="False">
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.ShowLine = false;
		this.Content = gauge;

Customize scale values (logarithmic scale example)

Linear gauge allows you to display a set of values along with a custom scale based on your business logic. This is useful for scenarios such as a logarithmic scale. To do this, override the GenerateVisibleLabels, ValueToFactor, and FactorToValue methods of SfLinearGauge.

The GenerateVisibleLabels method returns a list of GaugeLabelInfo objects, where each GaugeLabelInfo has a Value (the scale value) and Text (the display text) property.

NOTE

Ensure that GenerateVisibleLabels is called before ValueToFactor or FactorToValue, as the latter two depend on values computed during label generation.

Create a subclass of SfLinearGauge and override the methods as shown below.

XAML

<!-- code omitted for brevity -->
 <local:LinearGauge Minimum="1" Maximum="10000">
                <local:LinearGauge.MarkerPointers>
                    <gauge:LinearShapePointer Value="1000" />
                </local:LinearGauge.MarkerPointers>
            </local:LinearGauge>

C#

public class LinearGauge : SfLinearGauge
{
    int labelsCount = 1;
    public override List<GaugeLabelInfo> GenerateVisibleLabels()
    {
        List<GaugeLabelInfo> labelInfos = new List<GaugeLabelInfo>();
        int minimum = (int)LogBase(this.Minimum, 10);
        int maximum = (int)LogBase(this.Maximum, 10);
        for (int i = minimum; i <= maximum; i++)
        {
            double value = Math.Floor(Math.Pow(10, i)); // logBase  value is
            GaugeLabelInfo label = new GaugeLabelInfo()
            {
                Value = value,
                Text = value.ToString()
            };
            labelInfos.Add(label);
        }

        labelsCount = labelInfos.Count;
        return labelInfos;
    }

    private double LogBase(double value, int baseValue)
    {
        return Math.Log(value) / Math.Log(baseValue);
    }

    public override double ValueToFactor(double value)
    {
        return LogBase(value, 10) / (labelsCount - 1);
    }

    public override double FactorToValue(double factor)
    {
        return Math.Pow(Math.E, factor * (labelsCount - 1) * Math.Log(10));
    }
}