Articles in this section
Category / Section

How to customize Rim position for Scale

2 mins read

This article explains the steps required to customize the Scale Positions.

Scale Rim position can be customized by using the following two ways:

  1. RadiusFactor property is used to define where the Rim position starts and ends. To increase the rim thickness, use RimThickness property.

XAML:

<xForms:SfCircularGauge x:Name="circularGauge" BackgroundColor="White" HeightRequest="160" WidthRequest="80">
    <xForms:SfCircularGauge.Scales>
<gauge:Scale x:Name="scale" StartAngle="270" StartValue="0" EndValue="16" Interval="2" LabelOffset="0.75" SweepAngle="360" MinorTicksPerInterval="1" ShowLastLabel="False" RadiusFactor="0.99" RimThickness="15" RimColor="#E0E0E0" LabelColor="#4B4B4B"/>
   </xForms:SfCircularGauge.Scales>
</xForms:SfCircularGauge>

 

  1. ScaleStartOffset property is used to define where the scale position starts, and ScaleEndOffset property is used to define where the scale position ends.

XAML:

<xForms:SfCircularGauge x:Name="circularGauge" BackgroundColor="White" HeightRequest="160" WidthRequest="80">
    <xForms:SfCircularGauge.Scales>
         <gauge:Scale x:Name="scale" StartAngle="270" StartValue="0" EndValue="16" Interval="2" LabelOffset="0.75" SweepAngle="360" MinorTicksPerInterval="1" ShowLastLabel="False" RimColor="#E0E0E0" 
        </xForms:Scale>
   </xForms:SfCircularGauge.Scales>
</xForms:SfCircularGauge>

 

  1. Additionally, pointers and ticks are added to the Scales.

 

XAML:

 

<gauge:Scale.Pointers>
    <gauge:NeedlePointer x:Name="pointer1" Value="14" Color="#f03e3e" Type="Triangle"
            LengthFactor="0.65" Thickness="20" KnobRadiusFactor="0" KnobColor="White"
            KnobStrokeWidth="3" KnobStrokeColor="White" />
     <gauge:NeedlePointer x:Name="pointer2" Value="6" Type="Triangle" LengthFactor="0.65" Thickness="20" Color="#9E9E9E" KnobRadiusFactor="0.11" KnobColor="White" KnobStrokeWidth="3" KnobStrokeColor="White" />
</gauge:Scale.Pointers>
 
 <gauge:Scale.MajorTickSettings>
   <gauge:TickSettings x:Name="majorTicks" StartOffset="0.9" EndOffset="0.83" Thickness="2" Color="#9E9E9E"/>
 </gauge:Scale.MajorTickSettings>
 
 <gauge:Scale.MinorTickSettings>
    <gauge:TickSettings x:Name="minorTicks" StartOffset="0.9" EndOffset="0.85" Thickness="2" Color="#9E9E9E"/>
 </gauge:Scale.MinorTickSettings>

 

 

The following screenshot illustrates the Customized Gauge,

 

Rim position customization using xamarin SfCircularGauge

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment