Shape Pointer in .NET MAUI Radial Gauge

17 Jul 20269 minutes to read

Indicate current values by using different types of shape pointers. You can change the shape type using the ShapeType property.

NOTE

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

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value = "60" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

C#

SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

ShapePointer pointer = new ShapePointer();
pointer.Value = 60;
radialAxis.Pointers.Add(pointer);

this.Content = sfRadialGauge;

Gauge supports the following types of shapes:

• Circle
• Diamond
• Inverted triangle
• Rectangle
• Triangle

Shape customization

The shape pointer can be customized using the following properties:

• Fill - Specifies the color of the shape.
• ShapeHeight - Specifies the height of the shape.
• ShapeWidth - Specifies the width of the shape.
• Stroke - Specifies the border color of the shape.
• BorderWidth - Specifies the border width of the shape.
• HasShadow - Specifies whether to apply a shadow to the shape.

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value = "60"
                                    ShapeHeight = "30"
                                    ShapeWidth = "30"
                                    Stroke = "Black"
                                    BorderWidth = "3"
                                    ShapeType = "Circle"
                                    Fill = "LightBlue"/>
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

C#

SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

ShapePointer pointer = new ShapePointer();
pointer.Value = 60;
pointer.ShapeHeight = 30;
pointer.ShapeWidth = 30;
pointer.Stroke = new SolidColorBrush(Colors.Black);
pointer.BorderWidth = 3;
pointer.ShapeType = ShapeType.Circle;
pointer.Fill = new SolidColorBrush(Colors.LightBlue);
radialAxis.Pointers.Add(pointer);

this.Content = sfRadialGauge;

Shadow support

The shadow can be applied by the HasShadow property.

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value = "60" 
                                    ShapeType = "Circle" 
                                    HasShadow = "True"/>
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

C#

SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

ShapePointer pointer = new ShapePointer();
pointer.Value = 60;
pointer.ShapeType = ShapeType.Circle;
pointer.HasShadow = true;
radialAxis.Pointers.Add(pointer);

this.Content = sfRadialGauge;

Shape pointer overlay

The shape pointer overlay is rendered around the shape when the shape pointer is dragged. When IsInteractive property of pointer is set to true and the marker is dragged, the overlay will come around the marker pointer.

The shape pointer overlay can be customized using the following properties:

• OverlayFill - Specifies the color of the dragging overlay.
• OverlayRadius - Specifies the radius of the dragging overlay.

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value = "60" 
                                    ShapeType = "Circle" 
                                    IsInteractive = "True" 
                                    OverlayRadius = "20"/>
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

C#

SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

ShapePointer pointer = new ShapePointer();
pointer.Value = 60;
pointer.ShapeType = ShapeType.Circle;
pointer.OverlayRadius = 20;
pointer.IsInteractive = true;
radialAxis.Pointers.Add(pointer);

this.Content = sfRadialGauge;

Shape pointer position customization

The shape pointer can be moved near or far from its actual position using the Offset and OffsetUnit properties.

When OffsetUnit is set to SizeUnit.Pixel, the shape pointer is moved by the provided pixel value. When OffsetUnit is set to SizeUnit.Factor, the provided value is multiplied by the axis radius and the pointer is moved to the corresponding position. The default value of OffsetUnit is SizeUnit.Pixel.

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value = "60"
                                    Offset = "-18"/>
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

C#

SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

ShapePointer pointer = new ShapePointer();
pointer.Value = 60;
pointer.Offset = -18;
radialAxis.Pointers.Add(pointer);

this.Content = sfRadialGauge;