|
This article explains the steps required to design circular gauge RangePointer with rounded corners. Circular Gauge control can be customized as follow,
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>
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
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
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.
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