Easily Create a Directional Compass Using .NET MAUI Radial Gauge
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (181).NET Core  (28).NET MAUI  (227)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (236)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (200)File Formats  (73)Flutter  (136)JavaScript  (226)Microsoft  (122)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (964)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (163)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (147)Chart of the week  (58)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (681)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (21)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (522)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (406)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (628)What's new  (341)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Easily Create a Directional Compass Using .NET MAUI Radial Gauge

Easily Create a Directional Compass Using .NET MAUI Radial Gauge

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 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 control and update the direction using the Compass sensor.

Let’s dive in!

Understanding the compass sensor

The Compass sensor 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.

Monitoring the compass sensor

Using the Compass sensor, you can monitor the device’s magnetic North heading. Using the ICompass interface, you can determine whether the compass is actively monitored or not. The IsMonitoring property returns true if monitoring is ongoing. You can start monitoring using the ICompass.Start and stop it with ICompass.Stop 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 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<App>()
   .ConfigureSyncfusionCore()

Step 2: Initialize the Radial Gauge

Initialize the Syncfusion .NET MAUI Radial Gauge control in the MainPage.xaml file using this documentation

Refer to the following code example.

xmlns:gauge="clr-namespace:Syncfusion.Maui.Gauges;assembly=Syncfusion.Maui.Gauges"

<gauge:SfRadialGauge/>

Step 3: Customize the Radial Gauge axis angle

Let’s customize the Radial Gauge axis by setting its StartAngle and 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

<gauge:SfRadialGauge>
 <gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis StartAngle="270" EndAngle="270" RadiusFactor="0.6">
  </gauge:RadialAxis>
 </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Step 4: Customize the Radial Gauge axis label

You can customize the Radial Gauge axis labels by adjusting the properties such as LabelPosition, CanRotateLabels, Minimum, Maximum, and ShowLastLabel properties.

Refer to the following code example.

MainPage.xaml

<gauge:SfRadialGauge>
<gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis LabelPosition="Outside" CanRotateLabels="True" Minimum="0" Maximum="360" ShowLastLabel="False">
</gauge:SfRadialGauge.Axes>

Step 5: Customize Radial Gauge axis ticks

Then, customize the Radial Gauge axis ticks by utilizing the TickPosition, ShowAxisLine, and MinorTicksPerInterval properties.

Refer to the following code example.

MainPage.xaml

<gauge:SfRadialGauge>
 <gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis ShowAxisLine="False" TickPosition="Outside" MinorTicksPerInterval="5" Interval="30">
   <gauge:RadialAxis.MajorTickStyle>
    <gauge:RadialTickStyle LengthUnit="Pixel"
                           StrokeThickness="2"
                           Length="15" />
   </gauge:RadialAxis.MajorTickStyle>
   <gauge:RadialAxis.MinorTickStyle>
    <gauge:RadialTickStyle LengthUnit="Pixel"
                           Length="10" />
   </gauge:RadialAxis.MinorTickStyle>
  </gauge:SfRadialGauge.Axes>

Step 6: Customize the Radial Gauge axis shape pointer

Using the ShapePointer class, let’s add an inverted triangle to indicate the current value on the Radial Gauge axis.

MainPage.xaml

<gauge:RadialAxis.Pointers>
 <gauge:ShapePointer Offset="-45" OffsetUnit="Pixel"
                     ShapeType="InvertedTriangle" />
</gauge:RadialAxis.Pointers>

Step 7: Customize the Radial Gauge axis needle pointer

Now, add a NeedlePointer to indicate the directions as shown in the following code example.

MainPage.xaml

<gauge:RadialAxis.Pointers>
 <gauge:NeedlePointer Value="0"
                      NeedleLengthUnit="Factor"
                      NeedleLength="0.3"
                      NeedleStartWidth="1"
                      NeedleEndWidth="1"
                      NeedleFill="#FFC4C4C4"
                      KnobRadius="0"
                      TailLengthUnit="Factor"
                      TailLength="0.3"
                      TailWidth="1"
                      TailFill="#FFC4C4C4">
 </gauge:NeedlePointer>
 <gauge:NeedlePointer Value="270"
                      NeedleLengthUnit="Factor"
                      NeedleLength="0.3"
                      NeedleStartWidth="1"
                      NeedleEndWidth="1"
                      NeedleFill="#FFC4C4C4"
                      KnobRadius="0"
                      TailLengthUnit="Factor"
                      TailLength="0.3"
                      TailWidth="1"
                      TailFill="#FFC4C4C4">
 </gauge:NeedlePointer>
</gauge:RadialAxis.Pointers>

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.

MainPage.xaml

<gauge:RadialAxis.Annotations>
 <gauge:GaugeAnnotation DirectionUnit="AxisValue" DirectionValue="270" PositionFactor="0.6">
  <gauge:GaugeAnnotation.Content>
   <Label Text="W" FontAttributes="Bold"  FontSize="20" TextColor="Black" />
  </gauge:GaugeAnnotation.Content>
 </gauge:GaugeAnnotation>
 <gauge:GaugeAnnotation DirectionUnit="AxisValue" DirectionValue="0" PositionFactor="0.6">
  <gauge:GaugeAnnotation.Content>
   <Label Text="N" FontAttributes="Bold" FontSize="20" TextColor="Black" />
  </gauge:GaugeAnnotation.Content>
 </gauge:GaugeAnnotation>
 <gauge:GaugeAnnotation DirectionUnit="AxisValue" DirectionValue="90" PositionFactor="0.6">
  <gauge:GaugeAnnotation.Content>
   <Label Text="E" FontAttributes="Bold" FontSize="20" TextColor="Black" />
  </gauge:GaugeAnnotation.Content>
 </gauge:GaugeAnnotation>
 <gauge:GaugeAnnotation DirectionUnit="AxisValue" DirectionValue="180" PositionFactor="0.6">
  <gauge:GaugeAnnotation.Content>
   <Label Text="S" FontAttributes="Bold" FontSize="20" TextColor="Black" />
  </gauge:GaugeAnnotation.Content>
 </gauge:GaugeAnnotation>
</gauge:RadialAxis.Annotations>
Designing a directional compass using .NET MAUI Radial Gauge
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

 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RadialGaugeMAUI"
             xmlns:system="clr-namespace:System;assembly=netstandard"
             xmlns:gauge="clr-namespace:Syncfusion.Maui.Gauges;assembly=Syncfusion.Maui.Gauges"
             x:Class="RadialGaugeMAUI.MainPage">
    <ContentPage.BindingContext>
        <local:RadialGaugeViewModel/>
    </ContentPage.BindingContext>
    
    <!-- Display direction text -->        
    <Label x:Name="CompassLabel"
           HorizontalTextAlignment="Center"
           FontAttributes="Italic,Bold"
           VerticalOptions="Center"
           HorizontalOptions="Center">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="Current location" />
                <Span Text="{x:Static system:Environment.NewLine}" />
                <Span Text="{Binding ReadingText}"
                      FontAutoScalingEnabled="True"
                      FontAttributes="Italic,Bold"
                      FontSize="20" />
            </FormattedString>
        </Label.FormattedText>
    </Label>
    
    <!-- Bind Compass value in the .NET MAUI Radial Gauge -->        
    <gauge:SfRadialGauge Rotation="{Binding RotationAngle}" >
        <gauge:SfRadialGauge.Axes>
            …
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value="{Binding Reading}" Offset="-100" OffsetUnit="Pixel" ShapeType="InvertedTriangle" />
            </gauge:RadialAxis.Pointers>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>
</ContentPage>

Refer to the following output image

Dynamically updating the directional compass
Dynamically updating the directional compass values

GitHub reference

For more details, refer to Creating a directional compass using .NET MAUI Radial Gauge GitHub demo.

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Conclusion

Thanks for reading! In this blog, we’ve seen how to design a directional compass using Syncfusion’s .NET MAUI Radial Gauge control 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 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 forumsupport portal, or feedback portal. We’re always ready to help!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed