Category / Section
How to customize Rim position for Scale
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,
