Category / Section
Rounded corner support for RangePointer
3 mins read
This article explains the steps required to design circular gauge RangePointer with rounded corners.
Circular Gauge control can be customized as follow,
- 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:
<xForms:SfCircularGauge x:Name="circularGauge" BackgroundColor="White" HeightRequest="160" WidthRequest="80"> <xForms:SfCircularGauge.Scales> <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"/> </xForms:SfCircularGauge.Scales> </xForms:SfCircularGauge>
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:
<xForms:Scale.Pointers> <xForms:RangePointer StartOffset="0.6" EndOffset="0.5" Color="#0bd8ef" RangeStart="0" Value="50" RangeCap="Both"/> </xForms:Scale.Pointers> <xForms:Scale.Pointers> <xForms:RangePointer StartOffset="0.8" EndOffset="0.7" Color="#7ef464" RangeStart="0" Value="50" RangeCap="Both"/> </xForms:Scale.Pointers> <xForms:Scale.Pointers> <xForms:RangePointer StartOffset="0.4" EndOffset="0.3" Color="#f2e230" RangeStart="0" Value="50" RangeCap="Both"/> </xForms:Scale.Pointers>
- Headers can be used to display the Percentage value, and the positions can be altered respectively
XAML:
<xForms:SfCircularGauge.Headers> <xForms:Header Font="Bold" ForegroundColor="Black" Position="0.52,0.49" Text="50%" TextSize="30" /> </xForms:SfCircularGauge.Headers>
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
