DevExpress Radial Gauge for .NET MAUI

• Jul 25, 2024

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

View ExampleWatch Video

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:dx="http://schemas.devexpress.com/maui" XAML namespace in the ContentPage.
3. Add <dx:RadialGauge>…</dx: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:dx="http://schemas.devexpress.com/maui">
    <dx:RadialGauge>
        <dx:RadialScale StartAngle="0" 
                        StartValue="0" EndValue="120" 
                        ShowTickmarkLabels="True"
                        MajorTickmarkCount="5"
                        MinorTickmarkCount="4"
                        TickmarkLabelPosition="Inside">
            <dx:RangeIndicator StartValue="20" EndValue="50"/>
            <dx:NeedleIndicator Value="60"/>
            <dx:MarkerIndicator Value="100"/>
        </dx:RadialScale>
    </dx:RadialGauge>
</ContentPage>