Ticks in .NET MAUI Linear Gauge (SfLinearGauge)

13 Jul 20266 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 default style of scale ticks is as follows.

Customize Tick Style

There are two types of ticks in the .NET MAUI Linear Gauge namely major and minor ticks. In the above image, the larger ticks are major ticks and the ticks between the major ticks are minor ticks. The major and minor ticks of a SfLinearGauge can be customized using the MajorTickStyle and MinorTickStyle properties. Both properties accept a LinearTickStyle object (which derives from GaugeTickStyle). The following properties can be customized for both the major and the minor ticks:

• Stroke – Customizes the tick color. Accepts a Brush value.
• StrokeThickness – Customizes the thickness of ticks.
• Length – Specifies the length of ticks.
• StrokeDashArray – Specifies the dash array of ticks.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.MajorTickStyle>
                    <gauge:LinearTickStyle Length="25" Stroke="Red" 
                                           StrokeThickness="2" 
                                           StrokeDashArray="2,3"/>
                </gauge:SfLinearGauge.MajorTickStyle>
                <gauge:SfLinearGauge.MinorTickStyle>
                    <gauge:LinearTickStyle Length="15" Stroke="Blue" 
                                           StrokeThickness="1" 
                                           StrokeDashArray="2,2"/>
                </gauge:SfLinearGauge.MinorTickStyle>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();

		DoubleCollection collection = new DoubleCollection();
		collection.Add(2);
		collection.Add(3);
		gauge.MajorTickStyle = new LinearTickStyle()
		{
			Length = 25,
			Stroke = new SolidColorBrush(Colors.Red),
			StrokeThickness = 2,
			StrokeDashArray = collection
		};
		
		collection = new DoubleCollection();
		collection.Add(2);
		collection.Add(2);
		gauge.MinorTickStyle = new LinearTickStyle()
		{
			Length = 15,
			Stroke = new SolidColorBrush(Colors.Blue),
			StrokeThickness = 1,
			StrokeDashArray = collection
		};

		this.Content= gauge;

Customize Minor Tick Interval

The major ticks are generated based on the Interval property, which defines the interval between major ticks. For more details, refer to the Customize the interval between labels topic. The minor ticks are calculated using the MinorTicksPerInterval property of SfLinearGauge. By default, the value of this property is 1.

XAML

<gauge:SfLinearGauge MinorTicksPerInterval="4"/>

C#

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

Change Tick Visibility

The ShowTicks property of the scale is used to enable or disable the visibility of both the major and the minor ticks. The default value of this property is true.

XAML

<gauge:SfLinearGauge ShowTicks="False"/>

C#

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

Customize Tick Position

The linear scale allows you to position the ticks either inside or outside the scale track using the TickPosition property. The available positions are Inside, Outside, and Cross. By default, ticks are positioned inside the scale track. N> The LabelPosition property is also set to Outside in the sample below for visual consistency. For details, refer to the labels topic.

XAML

<gauge:SfLinearGauge  TickPosition="Outside" LabelPosition="Outside">
                
  </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.TickPosition = GaugeElementPosition.Outside;
		gauge.LabelPosition = GaugeLabelsPosition.Outside;
		this.Content = gauge;

Customize Tick Offset

The ticks can be moved near or far to the scale line using the TickOffset property. The offset is specified in device-independent units. The default value of tick offset is double.NaN, which means the offset is auto-calculated. When setting an offset for the ticks, the scale labels move with the ticks.

XAML

<gauge:SfLinearGauge TickOffset="20"/>

C#

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