How can you use data binding in Gauge with the MVVM pattern?
In order to achieve data binding in Gauge with MVVM pattern, you can refer the following procedure.
Create a new Forms Xaml Page in the PCL project and include the SfCircularGauge Xaml code in it.
Set the created Forms Xaml page as a MainPage in the constructor of the App class.
C#
public App()
{
MainPage = new HomePage ();
}
Include the required code example for Circular Gauge in the Forms Xaml Page. Here it is named as the HomePage.
Once you have included the Circular Gauge related code examples, set the ViewModel as a BindingContext for the SfCircularGauge.
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:syncfusion="clr-namespace:Syncfusion.SfGauge.XForms;assembly=Syncfusion.SfGauge.XForms"
xmlns:local="clr-namespace:GaugeGettingStarted;assembly=GaugeGettingStarted"
x:Class="GaugeGettingStarted.HomePage">
<syncfusion:SfCircularGauge >
<syncfusion:SfCircularGauge.BindingContext>
<local:ViewModel />
</syncfusion:SfCircularGauge.BindingContext>
<syncfusion:SfCircularGauge.Scales>
<syncfusion:Scale StartValue="0" EndValue="100" StartAngle="135" SweepAngle="265" >
<syncfusion:Scale.Pointers>
<syncfusion:NeedlePointer Color="Red" Thickness="5" Value="{Binding Value}" />
</syncfusion:Scale.Pointers>
</syncfusion:Scale>
</syncfusion:SfCircularGauge.Scales>
</syncfusion:SfCircularGauge>
</ContentPage>
The ViewModel implements INotifyPropertyChanged, so that the view is notified once the Value property gets changed.
C#
public class ViewModel : INotifyPropertyChanged
{
private double _value = 10;
public double Value
{
set
{
if (_value != value)
{
_value = value;
OnPropertyChanged();
}
}
get
{
return _value;
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName]string Membername = null)
{
var handler = PropertyChanged;
if (handler != null)
{
PropertyChangedEventArgs propertyChangedEvent
= new PropertyChangedEventArgs(Membername);
handler(this, propertyChangedEvent);
}
}
}
So that Value property in the CircularPointer in the CircularGauge control can be dynamically updated by updating the Value property in the ViewModel.
