Getting Started

RadGauge is rendered via the SkiaSharp graphics library so you need to install also SkiaSharp.Views.Forms.Maui.Controls.Compatibility.

Define RadGauge control

<telerikGauges:RadRadialGauge x:Name="gauge">
    <telerikGauges:RadRadialGauge.Axis>
        <telerikGauges:GaugeLinearAxis Maximum="200"
                                       Minimum="0"
                                       Step="25" />
    </telerikGauges:RadRadialGauge.Axis>
    <telerikGauges:RadRadialGauge.Indicators>
        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
        <telerikGauges:GaugeShapeIndicator Value="80" />
    </telerikGauges:RadRadialGauge.Indicators>
    <telerikGauges:RadRadialGauge.Ranges>
        <telerikGauges:GaugeRangesDefinition>
            <telerikGauges:GaugeRange Color="Green"
                                      From="0"
                                      To="150" />
            <telerikGauges:GaugeGradientRange From="150" To="200">
                <telerikCommon:RadGradientStop Offset="150" Color="Yellow" />
                <telerikCommon:RadGradientStop Offset="200" Color="Red" />
            </telerikGauges:GaugeGradientRange>
        </telerikGauges:GaugeRangesDefinition>
    </telerikGauges:RadRadialGauge.Ranges>
</telerikGauges:RadRadialGauge>

Add the following namespace:

xmlns:telerikGauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.Maui.Controls.Compatibility"
xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.Maui.Controls.Compatibility"

Register the Telerik controls through Telerik.Maui.Controls.Compatibility.UseTelerik extension method called inside the Configure method of the Startup.cs file of your project:

using Telerik.Maui.Controls.Compatibility;



public void Configure(IAppHostBuilder appBuilder)
{
    appBuilder        
        .UseTelerik()
        .UseMauiApp<App>();

}              

This is the result:

Gauge example

You can follow this tutorial to set up also the RadVerticalGauge and RadHorizontalGauge controls which expose the same API.

Gauge types

There are 2 gauge types that you can use to display different layout - radial and linear (horizontal and vertical). You can read more about these types at the listed articled below:

See Also

In this article
Not finding the help you need?