Category / Section
How to bind scale collection to SfCircularGauge
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
