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:
- 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>
- 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>
- 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,
