DevExpress Radial Gauge for .NET MAUI

• Nov 28, 2023

The RadialGauge control visualizes values on a circular scale and allows you to track value changes using different visual indicators.

Review our demo app on GitHub to try out the RadialGauge:

View Example

Radial Gauge Elements (Anatomy)

The following figure shows basic elements of a radial gauge:

Refer to the help topics below to learn more about gauge elements:

• Scales
• Indicators
• Tickmarks
• Center content

Add a Radial Gauge to a Project

Follow the steps below to add a RadialGauge to an app:

1. Install the DevExpress.Maui.Gauges NuGet package. Refer to the following topic for more information: Get Started. Note that DevExpress.Maui.Gauges automatically references the SkiaSharp.Views.Maui.Controls library that is used to render gauges.
2. Declare the xmlns:dxga="clr-namespace:DevExpress.Maui.Gauges;assembly=DevExpress.Maui.Gauges" namespace in the ContentPage.
3. Add <dxga:RadialGauge>…</dxga:RadialGauge> tags to the page.
4. Add at least one RadialScale element to the gauge’s Scales collection. The scale can display tickmarks with labels and gauge indicators. Since RadialGauge.Scales is a content property, you can omit Scales tags in your markup.

XAML

<ContentPage ...
             xmlns:dxga="clr-namespace:DevExpress.Maui.Gauges;assembly=DevExpress.Maui.Gauges">
    <dxga:RadialGauge>
        <dxga:RadialScale StartAngle="0" 
                          StartValue="0" EndValue="120" 
                          ShowTickmarkLabels="True"
                          MajorTickmarkCount="5"
                          MinorTickmarkCount="4"
                          TickmarkLabelPosition="Inside">
            <dxga:RangeIndicator StartValue="20" EndValue="50"/>
            <dxga:NeedleIndicator Value="60"/>
            <dxga:MarkerIndicator Value="100"/>
        </dxga:RadialScale>
    </dxga:RadialGauge>
</ContentPage>