How to design a directional compass using .NET MAUI Radial Gauge?
This article describes how to create the directional compass using the Syncfusion .NET MAUI Radial Gauge control.
Step 1: Create the RadialGauge control by referring to this getting started link. Set the StartAngle and EndAngle of RadialAxis as 320 to heading the North value as 0 and get the full circular axis.
XAML
<gauge:SfRadialGauge> <gauge:SfRadialGauge.Axes> <gauge:RadialAxis StartAngle="320" EndAngle="320"> </gauge:RadialAxis> </gauge:SfRadialGauge.Axes> </gauge:SfRadialGauge>
Step 2: Set the Minimum and Maximum of the radial axis as 0 and 360, respectively, and the Interval as 30 to display eight direction values in the radial axis.
XAML
<gauge:SfRadialGauge> <gauge:SfRadialGauge.Axes> <gauge:RadialAxis Minimum="0" Maximum="360" Interval="30" … > … </gauge:RadialAxis> </gauge:SfRadialGauge.Axes> </gauge:SfRadialGauge>
Step 3: To customize the major and minor ticks, you can use the MajorTickStyle and MinorTickStyle as shown in the following code sample.
XAML
<gauge:RadialAxis.MinorTickStyle> <gauge:RadialTickStyle LengthUnit="Factor" Length="0.12" /> </gauge:RadialAxis.MinorTickStyle> <gauge:RadialAxis.MajorTickStyle> <gauge:RadialTickStyle StrokeThickness="2" … /> </gauge:RadialAxis.MajorTickStyle>
Step 4: Add two Needle Pointers to divide the gauge into four parts: north, east, south, and west.
XAML
<gauge:RadialAxis.Pointers> … <gauge:NeedlePointer Value="310" NeedleLengthUnit="Factor" NeedleLength="0.9" NeedleStartWidth="1" NeedleEndWidth="1" NeedleFill="#FFC4C4C4" KnobRadius="0" TailLengthUnit="Factor" TailLength="0.9" TailWidth="1" TailFill="#FFC4C4C4"> </gauge:NeedlePointer> <gauge:NeedlePointer Value="221" … > </gauge:NeedlePointer> </gauge:RadialAxis.Pointers>
Step 5: To denote the directions, you can use Annotations as shown in the following code sample.
XAML
<gauge:RadialAxis.Annotations> <gauge:GaugeAnnotation DirectionValue="230" PositionFactor="0.5"> <gauge:GaugeAnnotation.Content> <Label Text="W" FontAttributes="Bold" FontSize="18" TextColor="Black" /> </gauge:GaugeAnnotation.Content> </gauge:GaugeAnnotation> <gauge:GaugeAnnotation DirectionValue="310" …> … </gauge:GaugeAnnotation> <gauge:GaugeAnnotation DirectionValue="129"…> … </gauge:GaugeAnnotation> <gauge:GaugeAnnotation DirectionValue="50" …> … </gauge:GaugeAnnotation> </gauge:RadialAxis.Annotations>
Step 6: Add a shape pointer to indicate the direction as follows.
XAML
<gauge:RadialAxis.Pointers> <gauge:ShapePointer Value="90" ShapeType="Triangle" /> … </gauge:RadialAxis.Pointers>
Output
View sample in GitHub.
See also
How to create an application using the .NET MAUI Radial Gauge?
How to customize Axis Label using Label Created Event?
How to customize the Needle pointer?
How to position and customize annotation?
Conclusion
I hope you enjoyed learning about how to design a directional compass using .NET MAUI Radial Gauge.
You can refer to our .NET MAUI Radial Gauge feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Radial Gauge documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
