I want to customize the gauge(HorizontalGauge)

[Yoshirou]

Hi
I want to customize the gauge like in the example.

①I want to set the tick and label as follows.

Span(Step?) Thick(short)10 Thick(long)50(and Min/Max) Label100(and Min/Max)

② How similar can you make it to the example visual?
・Red bar representing the current value
・Positional relationship between current value and Tick

 

①I want to set the tick and label as follows.

①I want to set the tick and label as follows.

①I want to set the tick and label as follows.

[Didi]

Hello Yoshirou,

Thank you for the provided images and details. 

Here is a sample gauge definition: 

    <telerik:RadHorizontalGauge x:Name="gauge">
        <telerik:RadHorizontalGauge.Axis>
            <telerik:GaugeLinearAxis Maximum="210"
                                    Minimum="-40"
                                    StrokeThickness="0"
                                    TickThickness="1"
                                    TickPosition="Start"
                                    LabelPosition="Start"
                                    Step="20" />
        </telerik:RadHorizontalGauge.Axis>
        <telerik:RadHorizontalGauge.Indicators>
            <telerik:GaugeBarIndicator Value="50" 
                                       StartThickness="30"
                                       EndThickness="10"
                                       StartCap="Oval"
                                       Position="End"
                                       EndCap="Flat"
                                       IsOffsetRelative="True"/>
        </telerik:RadHorizontalGauge.Indicators>
        <telerik:RadHorizontalGauge.Ranges>
            <telerik:GaugeRangesDefinition Position="End" 
                                           Offset="20"
                                           StartThickness="30"
                                           EndThickness="10"
                                           >
                <telerik:GaugeRange Color="Green"
                                    From="-40"
                                    To="10" />
            </telerik:GaugeRangesDefinition>
        </telerik:RadHorizontalGauge.Ranges>
    </telerik:RadHorizontalGauge>

 

and the result is attached as an image. 

The Gauge Range has From and To values. This can be used to design the red indicator. Or you can use the GaugeBarIndicator for the red indicator on the image. Still this indicator has value which starts from 0. it does not start from the gauge minimum value. 

Regarding to the axis, there isn't an option to add original value. So you can set the minimum to -40 and maximum to 210 but you need a step, and the labels are displayed based on the step set. 

Gauge Customization Examples:

I can suggest you review all examples we have for the gauge control here: https://github.com/telerik/telerik-xamarin-forms-samples/tree/master/QSF/QSF/Examples/GaugeControl  - these are the Xamarin examples we have. The .NET MAUI is the evolution of Xamarin. Still these examples are not migrated to the MAUI controls samples app. I share these examples as you can check different customization options applied to the gauge control.

You can download the application from the windows store/ google play store and apple app store. Here is a link https://docs.telerik.com/devtools/xamarin/demos-and-sample-apps/sdk-browser-overview#telerik-ui-for-xamarin-samples-application that points to the stores.

The code from the examples can be copied to maui application, just need to replace the telerikGauges: , telerikCommon: with the common telerik: schema namespace.

I hope these resources will be of help.

Regards,
Didi
Progress Telerik