Show ticks over scale in MAUI SfRadialGauge

[Tom Hollander]

I've previously used both the Xamarin Forms and UWP versions of the radial gauge to render with the ticks showing above the range as follows:

I'm trying to port this to MAUI but I'm not able to achieve this effect as the range colour always shows over the tick lines. Is there a way to do this?

[Vishal Omprasad]

Hi Tom,

Regarding “the range color always shows above the ticks”:

As per the current implementation, in the .NET MAUI SfRadialGauge control, the ticks will render behind the range. This is the expected behavior.

However, your requirement to show ticks above the range can be achieved at sample by hiding the default ticks using ShowTicks=”False”, and creating multiple RadialRange elements positioned at the desired tick location, as shown in the following code snippet.

[XAML]:

<gauge:RadialAxis Minimum="0"

                  Maximum="100"

                  StartAngle="90"

                  EndAngle="90"

                  MinorTicksPerInterval="0"

                  Interval="10"

                  TickPosition="Cross"

                  ShowTicks="False"

                  ShowLabels="False">

    <gauge:RadialAxis.Ranges>

        <gauge:RadialRange StartValue="0"

                           EndValue="60" />

       

        <gauge:RadialRange StartValue="9.9"

                           EndValue="10.1"

                           Fill="Black"/>

        <gauge:RadialRange StartValue="19.9"

                           EndValue="20.1"

                           Fill="Black"/>

        <gauge:RadialRange StartValue="29.9"

                           EndValue="30.1"

                           Fill="Black"/>

        <gauge:RadialRange StartValue="39.9"

                           EndValue="40.1"

                           Fill="Black"/>

        <gauge:RadialRange StartValue="49.9"

                           EndValue="50.1"

                           Fill="Black" />

        <gauge:RadialRange StartValue="59.9"

                           EndValue="60.1"

                           Fill="Black" />

        <gauge:RadialRange StartValue="69.9"

                           EndValue="70.1"

                           Fill="Black" />

        <gauge:RadialRange StartValue="79.9"

                           EndValue="80.1"

                           Fill="Black" />

        <gauge:RadialRange StartValue="89.9"

                           EndValue="90.1"

                           Fill="Black" />

        <gauge:RadialRange StartValue="99.9"

                           EndValue="0.1"

                           Fill="Black" />

    </gauge:RadialAxis.Ranges>

</gauge:RadialAxis>

We have prepared an example sample illustrating the above and attached it below for your reference. Please check our sample and let us know whether your requirement is achieved.

If you have any further questions or require assistance with any other aspect, please don't hesitate to let us know. We are here to help.

Regards,
Vishal O.

Attachment: RadialGaugeDemo_ab9496e2.zip

[Tom Hollander]

Thanks for the quick response. This is a good workaround. Although it's a little disappointing to have arbitrary behaviour differences across the multiple platform versions of the same component. 

[Vishal Omprasad]

Hi Tom,

Regarding “to render the ticks over the range”:

As of now, the .NET MAUI SfRadialGauge control does not have support to render the ticks over the range on the axis, and we have logged feature request for the same.

We plan to implement this feature in any of our upcoming release. During the planning stage for each release cycle, we review all open features and identify implementations based on parameters such as product vision, technological feasibility, and customer interest. Please upvote this feature to prioritize it.

We will notify you when this feature is implemented. However, you can communicate with us regarding any open features at any time using our Feature Report page.

Feedback link: https://www.syncfusion.com/feedback/58324/provide-support-to-render-the-ticks-over-the-range-in-sfradialgauge

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.

Thank you for your patience.

Regards,
Vishal O.