--- title: "Easily Create a Directional Compass Using .NET MAUI Radial Gauge" published_at: "2024-04-29T12:44:01+00:00" modified_at: "2026-02-10T13:25:58+00:00" url: "https://www.syncfusion.com/blogs/post/directional-compass-maui-radial-gauge" excerpt: "This blog explains how to design a directional compass using Syncfusion's .NET MAUI Radial Gauge control." taxonomy_category: - ".NET MAUI" - "Chart" - "Desktop" - "Mobile" - "Syncfusion" - "UI" taxonomy_post_tag: - ".NET MAUI" - "Charts" - "desktop" - "MAUI" - "Mobile" --- # Easily Create a Directional Compass Using .NET MAUI Radial Gauge [Jeyasri Murugan](https://www.syncfusion.com/blogs/author/jeyasrim) ![Easily Create a Directional Compass Using .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Easily-Create-a-Directional-Compass-Using-.NET-MAUI-Radial-Gauge-1.png) **TL;DR:** Learn to design a directional compass using Syncfusion .NET MAUI Radial Gauge control. Dynamically update the directional compass values using the Compass sensor and customize the Radial Gauge’s appearance for better visualization. Syncfusion [.NET MAUI Radial Gauge](https://www.syncfusion.com/maui-controls/maui-radial-gauge) is a multi-purpose data visualization control that displays numerical values on a circular scale. Its rich set of features includes axes, ranges, pointers, and annotations that are fully customizable and extendable. We can use this control to design speedometers, temperature monitors, multi-axis clocks, circular progress indicators, watches, and more. In this blog, we’ll see how to design a directional compass using the [Syncfusion .NET MAUI Radial Gauge](https://www.syncfusion.com/maui-controls/maui-radial-gauge) control and update the direction using the [Compass sensor](https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/device/sensors?view=net-maui-8.0&tabs=android#compass) . Let’s dive in! ## Understanding the compass sensor The [Compass sensor](https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/device/sensors?view=net-maui-8.0&tabs=android#compass) monitors the device’s orientation relative to the Earth’s magnetic North. By providing real-time information on device heading direction, it enables us to create dynamic compass apps. For more details, refer to the [Compass Platform-specific information.](https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/device/sensors?view=net-maui-8.0&tabs=android#platform-specific-information-compass) ## Monitoring the compass sensor Using the [Compass sensor](https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/device/sensors?view=net-maui-8.0&tabs=android#compass) , you can monitor the device’s magnetic North heading. Using the [ICompass](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.devices.sensors.icompass) interface, you can determine whether the compass is actively monitored or not. The [IsMonitoring](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.devices.sensors.icompass.ismonitoring) property returns **true** if monitoring is ongoing. You can start monitoring using the [ICompass.Start](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.devices.sensors.icompass.start) and stop it with [ICompass.Stop](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.devices.sensors.icompass.start) methods. Refer to the following code example. **RadialGaugeViewModel.cs** ``` private void ToggleCompass() { if (Compass.Default.IsSupported) { if (!Compass.Default.IsMonitoring) { Compass.Default.ReadingChanged += OnCompassReadingChanged; Compass.Default.Start(SensorSpeed.UI); } else { Compass.Default.Stop(); Compass.Default.ReadingChanged -= OnCompassReadingChanged; } } } ``` ## Updating the compass heading changes To obtain the changes in the compass heading, we will utilize the [ICompass.ReadingChanged](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.devices.sensors.icompass.readingchanged#microsoft-maui-devices-sensors-icompass-readingchanged) event. By using this event and handling it in our **OnCompassReadingChanged** method, we can dynamically update the compass direction. Refer to the following code example. **RadialGaugeViewModel.cs** ``` private double reading, rotationAngle; public double Reading { get { return reading; } set { reading = value; this.RaisePropertyChanged(nameof(Reading)); } } public double RotationAngle { get { return rotationAngle; } set { rotationAngle = value; this.RaisePropertyChanged(nameof(RotationAngle)); } } private void OnCompassReadingChanged(object sender, CompassChangedEventArgs e) { this.Reading = e.Reading.HeadingMagneticNorth; this.RotationAngle = 360 - e.Reading.HeadingMagneticNorth; } ``` In the above code example, we’ve updated the **Reading** property with the current heading and calculated the rotation angle to reflect the direction accurately. The **RadialGaugeViewModel** class subscribes to the ** Compass.ReadingChanged** event to receive updates on compass heading changes. Within the event handler ** Compass_ReadingChanged**, you can handle the compass heading changes as required. Refer to the following code example, which illustrates how to update the direction text based on the compass heading changes dynamically. **RadialGaugeViewModel.cs** ``` private string readingText; public string ReadingText { get { return readingText; } set { readingText = value; this.RaisePropertyChanged(nameof(ReadingText)); } } private void OnCompassReadingChanged(object sender, CompassChangedEventArgs e) { this.Reading = e.Reading.HeadingMagneticNorth; this.RotationAngle = 360 - e.Reading.HeadingMagneticNorth; var degree = (int)this.Reading; string direction = string.Empty; if (degree < 30) { direction = "N"; } else if (degree >= 30 && degree < 90) { direction = "NE"; } else if (degree >= 90 && degree < 120) { direction = "E"; } else if (degree >= 120 && degree < 180) { direction = "SE"; } else if (degree >= 180 && degree < 210) { direction = "S"; } else if (degree >= 210 && degree < 270) { direction = "SW"; } else if (degree >= 270 && degree < 300) { direction = "W"; } else if (degree >= 300 && degree <= 360) { direction = "NW"; } ReadingText = $"{degree}\u00B0 {direction}"; } ``` The **RadialGaugeViewModel** class efficiently handles updating direction text when there are changes in the compass heading. ## Designing a directional compass using .NET MAUI Radial Gauge We can create a visually appealing and functional compass by customizing the .NET MAUI Radial Gauge’s properties and binding the Compass sensor values. To do so, please follow these steps: ### Step1: Register the Syncfusion core handler First, we should set up the Syncfusion core handler in the **MauiProgram.cs** file to utilize the Syncfusion NET MAUI controls (In this case, Radial Gauge). **MauiProgram.cs** ``` builder .UseMauiApp() .ConfigureSyncfusionCore() ``` ### Step 2: Initialize the Radial Gauge Initialize the Syncfusion .NET MAUI Radial Gauge control in the **MainPage.xaml** file using this [documentation](https://help.syncfusion.com/maui/radial-gauge/getting-started) . Refer to the following code example. ``` xmlns:gauge="clr-namespace:Syncfusion.Maui.Gauges;assembly=Syncfusion.Maui.Gauges" ``` ### Step 3: Customize the Radial Gauge axis angle Let’s customize the Radial Gauge axis by setting its [StartAngle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_EndAngle) to 270 degrees to place the North (N) direction label at the top. Usually, the Radial Gauge axis’s start angle is zero and will be updated clockwise by default. Refer to the following code example. **MainPage.xaml** ``` ``` ### Step 4: Customize the Radial Gauge axis label You can customize the Radial Gauge axis labels by adjusting the properties such as [LabelPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_LabelPosition) , [CanRotateLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_CanRotateLabels) , [Minimum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_Minimum) , [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_Maximum) , and [ShowLastLabel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_ShowLastLabel) properties. Refer to the following code example. **MainPage.xaml** ``` ``` ### Step 5: Customize Radial Gauge axis ticks Then, customize the Radial Gauge axis ticks by utilizing the [TickPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_TickPosition) , [ShowAxisLine](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_ShowAxisLine) , and [MinorTicksPerInterval](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_MinorTicksPerInterval) properties. Refer to the following code example. **MainPage.xaml** ``` ``` ### Step 6: Customize the Radial Gauge axis shape pointer Using the [ShapePointer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.ShapePointer.html) class, let’s add an inverted triangle to indicate the current value on the Radial Gauge axis. **MainPage.xaml** ``` ``` ### Step 7: Customize the Radial Gauge axis needle pointer Now, add a [NeedlePointer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.NeedlePointer.html) to indicate the directions as shown in the following code example. **MainPage.xaml** ``` ``` ### Step 8: Customize Radial Gauge axis annotation To enhance the visual representation of the Radial Gauge, add the direction label onto the gauge axis using the [Annotations](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.GaugeAnnotation.html) . **MainPage.xaml** ``` ``` ![Designing a directional compass using .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Designing-a-directional-compass-using-.NET-MAUI-Radial-Gauge.png) Designing a directional compass using .NET MAUI Radial Gauge ## Bind compass value in the .NET MAUI Radial Gauge Finally, bind the Compass’ **Reading** property value from the ** RadialGaugeViewModel** class to the .NET MAUI Radial Gauge axis** Shape** pointer, which indicates the current direction. Also, bind the **RotationAngle** property value from the ** RadialGaugeViewModel** class to the Radial Gauge’s ** Rotation** property to rotate the Radial Gauge based on the Compass value. Refer to the following code example. **MainPage.xaml** ``` … ``` Refer to the following output image ![Dynamically updating the directional compass](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Dynamically-updating-the-directional-compass.gif) Dynamically updating the directional compass values ## GitHub reference For more details, refer to [Creating a directional compass using .NET MAUI Radial Gauge GitHub demo](https://github.com/SyncfusionExamples/Create-a-Directional-Compass-in.NET-MAUI-using-Radial-Gauge/tree/master) . ## Conclusion Thanks for reading! In this blog, we’ve seen how to design a directional compass using Syncfusion’s [.NET MAUI Radial Gauge control](https://www.syncfusion.com/maui-controls/maui-radial-gauge) and how to update its direction using the Compass sensor. We’d appreciate your feedback! If you have any suggestions, specific requirements, or ideas for controls you’d like to see in our .NET MAUI suite, please share them in the comments section below. Syncfusion’s [.NET MAUI](https://www.syncfusion.com/maui-controls) controls are meticulously crafted with .NET MAUI, ensuring seamless integration with native framework controls. Optimized to handle extensive data, these controls are ideal for developing high-quality, cross-platform mobile and desktop apps. If you need further assistance, don’t hesitate to contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/maui) . We’re always ready to help! ## Related blogs - [Developing a Temperature Monitor UI in .NET MAUI](https://www.syncfusion.com/blogs/post/temperature-monitor-dotnet-maui) - [Everything You Need to Know About .NET MAUI Radial Gauge Control](https://www.syncfusion.com/blogs/post/dotnet-maui-radial-gauge-control) - [Design Different Styles of Radial Sliders Using the .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/post/design-different-styles-of-radial-sliders-using-the-net-maui-radial-gauge) - [Create a Modern Conversational UI with the .NET MAUI Chat Control](https://www.syncfusion.com/blogs/post/conversational-ui-dotnet-maui-chat)