Category / Section
How to bind scale collection to SfCircularGauge
1 min read
The Scales property in the SfCircularGauge control is used to bind a collection of scales in SfSCircularGuage. The following steps describe how to bind the scales collection.
Create a ViewModel class and declare the property type as ObservableCollection<Scale>. Define each scale with the required properties and add them to the scales collection.
Refer to the following code snippet for defining the collection property in view model.
C#:
public ObservableCollection<Scale> Scales { get; set; } public ViewModel() { Scales = new ObservableCollection<Scale>() { new Scale() { StartValue =0, EndValue=240, Interval =20, MinorTicksPerInterval=1, LabelOffset =0.8 }, new Scale() { StartValue =0, EndValue=160, Interval =40, MinorTicksPerInterval=1, LabelOffset=0.45, ScaleStartOffset =0.6, ScaleEndOffset =0.58, MajorTickSettings =new TickSettings() { StartOffset=0.58,EndOffset=0.53 }, MinorTickSettings =new TickSettings() { StartOffset=0.58,EndOffset=0.54 } } }; }
Bind the collection property defined in the ViewModel to the Scales property of circular gauge as demonstrated in the following code snippet.
Code snippet
XAML:
<gauge:SfCircularGauge Scales="{Binding Scales}"> </gauge:SfCircularGauge>
Refer the below snippet for setting binding context.
Xaml:
<ContentPage.BindingContext> <local:ViewModel/> </ContentPage.BindingContext>
Screenshot
You can download the sample from the following link: Sample