We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Rounded corner support for RangePointer

This article explains the steps required to design circular gauge RangePointer with rounded corners.

Circular Gauge control can be customized as follow,

 

  1. Create a Xamarin application, and initialize SfCircularGauge control on it, and then add Scale with suitable angles for rendering full circle by using StartAngle and SweepAngle. Also, you can add multiple Scales in gauges as shown in the following code.

XAML:

 

2. To achieve the rounded corner support, set RangeCap property for RangePointer.

 To achieve both sides as rounded corner, set RangeCap property to Both. If rounded corner should be applied to the scale start position alone, set RangeCap property to Start or if rounded corner should be applied to the scale end position alone, set RangeCap property to End.

XAML:

 

  1. Headers can be used to display the Percentage value, and the positions can be altered respectively

XAML:

 

The following screenshot illustrates the gauge with rounded corner support on both sides,

 

 

Please find the complete sample for the above document in the link

 

Article ID: Published Date: Last Revised Date: Platform: Control:
8291 01/10/2018 07/05/2018 Xamarin.Forms SfCircularGauge
Did you find this information helpful?
Comments
Lyndon Hughey Jul 01, 2018

I think your sample code (like above) would generally be more useful if you end the post with all of the pieces in a final working form. As it is, users are spending time trying to add each piece to the parts together with varied levels of success. For instance, the first piece of XAML rendered without issue, but i'm unable to add the 2nd code snippet to the first without an error.

Maybe you could change the background color of the new code to illustrate that this is the section of code that adds this functionality. Thanks.

Reply
Sri Gayathri Gopalakrishnan [Syncfusion] Jul 06, 2018

Hi Lyndon,

 

We have provided step by step procedure to apply RoundedCorner for RangePointer. Now we have updated the complete sample for the above code. Please find the complete sample from the above link.

 

Regards,

Sri Gayathri. G


Reply
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.