Shape Marker Pointer in .NET MAUI Linear Gauge (SfLinearGauge)

13 Jul 202610 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 LinearShapePointer in SfLinearGauge has the following pre-defined shapes to mark a specific value. The default shape pointer is InvertedTriangle.

1. Triangle
2. InvertedTriangle
3. Circle
4. Diamond
5. Rectangle

The following is the default appearance of the shape pointer.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.MarkerPointers>
                    <gauge:LinearShapePointer Value="50"/>
                </gauge:SfLinearGauge.MarkerPointers>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.MarkerPointers.Add(new LinearShapePointer()
		{
			Value = 50,
		});
		this.Content = gauge;

Change the Size

The size of the marker pointer can be changed by the ShapeHeight and ShapeWidth properties of LinearShapePointer. The following code sample demonstrates how to change the size of a shape pointer.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.MarkerPointers>
                    <gauge:LinearShapePointer Value="50" ShapeHeight="25" 
                                              ShapeWidth="25"/>
                </gauge:SfLinearGauge.MarkerPointers>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.MarkerPointers.Add(new LinearShapePointer()
		{
			Value = 50,
			ShapeHeight = 25,
			ShapeWidth = 25,
		});
		this.Content = gauge;

Customize the Color

The color of the shape pointer can be changed by the Fill property. The following code example demonstrates the same.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.MarkerPointers>
                    <gauge:LinearShapePointer Value="50" Fill="Red"/>
                </gauge:SfLinearGauge.MarkerPointers>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.MarkerPointers.Add(new LinearShapePointer()
		{
			Value = 50,
			Fill=new SolidColorBrush(Colors.Red)
		});
		this.Content = gauge;

Customize the Border

The border can be customized using the Stroke and StrokeThickness properties of the LinearShapePointer.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.MarkerPointers>
                    <gauge:LinearShapePointer Value="50" 
                                              StrokeThickness="2" 
                                              Stroke="Red"/>
                </gauge:SfLinearGauge.MarkerPointers>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.MarkerPointers.Add(new LinearShapePointer()
		{
			Value = 50,
			StrokeThickness = 2,
			Stroke = new SolidColorBrush(Colors.Red)
		});
		this.Content = gauge;

Shadow Support

A shadow can be applied using the HasShadow property.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.MarkerPointers>
                    <gauge:LinearShapePointer Value="50" ShapeType="Circle" 
                                              HasShadow="True"/>
                </gauge:SfLinearGauge.MarkerPointers>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.MarkerPointers.Add(new LinearShapePointer()
		{
			Value = 50,
			ShapeType = ShapeType.Circle,
			HasShadow = true,
		});
		this.Content = gauge;

Change Marker Alignment

The marker pointer alignment can be changed by the Alignment property of LinearShapePointer. The available marker pointer alignments are Start, End, and Center. For details on the OffsetY property used below, see the Customize Offset section.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.MarkerPointers>
                    <gauge:LinearShapePointer Value="50" ShapeType="Rectangle" 
                                              Alignment="End" OffsetY="-5"/>
                </gauge:SfLinearGauge.MarkerPointers>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.MarkerPointers.Add(new LinearShapePointer()
		{
			Value = 50,
			ShapeType = ShapeType.Rectangle,
			OffsetY = -5,
			Alignment = GaugeAlignment.End
		});
		this.Content = gauge;

Customize Position

By default, the shape pointer is positioned Outside the scale. This position can be changed by the Position property of pointer. It is possible to position the shape pointer Inside, Cross, or Outside the scale. The following code sample demonstrates how to change the shape pointer position to cross the scale.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.MarkerPointers>
                    <gauge:LinearShapePointer Value="50" ShapeType="Circle" 
                                              Position="Cross" Fill="Blue"/>
                </gauge:SfLinearGauge.MarkerPointers>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.MarkerPointers.Add(new LinearShapePointer()
		{
			Value = 50,
			ShapeType = ShapeType.Circle,
			Position=GaugeElementPosition.Cross,
			Fill=new SolidColorBrush(Colors.Blue),
		});
		this.Content = gauge;

Customize Offset

In addition to positioning the shape pointer, it is also possible to change the offset of the shape pointer. The OffsetX and OffsetY are the distance from the scale and the cross-positioned elements are not affected by the OffsetX and OffsetY values. The following code sample demonstrates how to change the OffsetX and OffsetY values of the shape pointer.

XAML

<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.MarkerPointers>
                    <gauge:LinearShapePointer Value="50" ShapeType="Triangle" 
                                              Position="Inside" OffsetY="25"/>
                </gauge:SfLinearGauge.MarkerPointers>
            </gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
		gauge.MarkerPointers.Add(new LinearShapePointer()
		{
			Value = 50,
			ShapeType = ShapeType.Triangle,
			Position = GaugeElementPosition.Inside,
			OffsetY = 25
		});
		this.Content = gauge;