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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Rounded corner support for RangePointer

Platform: Xamarin.Forms |
Control: SfCircularGauge

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.


<xForms:SfCircularGauge x:Name="circularGauge" BackgroundColor="White" HeightRequest="160" WidthRequest="80">
        <xForms:Scale x:Name="scale" EndValue="100" ScaleStartOffset="0.6" ScaleEndOffset="0.5" Interval="10" MinorTicksPerInterval="0" RimColor="#b1eaed"  StartAngle="270" StartValue="0" SweepAngle="360" ShowLabels="False" ShowTicks="False"/> 
          <xForms:Scale x:Name="scale1" EndValue="100" ScaleStartOffset="0.8" ScaleEndOffset="0.7" Interval="10" MinorTicksPerInterval="0" RimColor="#cef7c5"  StartAngle="270" StartValue="0" SweepAngle="360" ShowLabels="False" ShowTicks="False"/>            
            <xForms:Scale x:Name="scale2" EndValue="100" ScaleStartOffset="0.4" ScaleEndOffset="0.3"  Interval="10" MinorTicksPerInterval="0" RimColor="#f9f4bb"  StartAngle="270" StartValue="0" SweepAngle="360" ShowLabels="False" ShowTicks="False"/>


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.


   <xForms:RangePointer StartOffset="0.6" EndOffset="0.5" Color="#0bd8ef" RangeStart="0" Value="50" RangeCap="Both"/>
   <xForms:RangePointer StartOffset="0.8" EndOffset="0.7" Color="#7ef464" RangeStart="0" Value="50" RangeCap="Both"/>
  <xForms:RangePointer StartOffset="0.4" EndOffset="0.3" Color="#f2e230" RangeStart="0" Value="50" RangeCap="Both"/>


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


    <xForms:Header Font="Bold" ForegroundColor="Black" Position="0.52,0.49" Text="50%" TextSize="30" />


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


Rounded corner for range pointer using xamarin SfCircularGauge


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


2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment
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.

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.



Sri Gayathri. G


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile