ComponentOne Xamarin Edition
Data Binding
Controls > Gauge > Features > Data Binding

While working in XAML, you can set the MinMax and Value properties from an external data source, instead of directly setting the properties.

The example in this topic follows the MVVM pattern. For information on MVVM pattern, see MVVM Pattern.

The following class can serve as a data source for the gauge.

C#
Copy Code
    class GaugeData
    {
        double _value;
        double _min;
        double _max;
        
        
        public double Value
        {
            get { return _value; }
            set
            {
                _value = value;
              
            }
        }
        public double Min
        {
            get { return _min; }
            set
            {
                _min = value;
            }
        }
        public double Max
        {
            get { return _max; }
            set
            {
                _max = value;
            }
        }
    }

In XAML

The following XAML code shows data binding in gauge.

C#
Copy Code
<c1:C1LinearGauge Value="{Binding Value}" Min="{Binding Min}" Max="{Binding Max}"
 Thickness="0.1" PointerColor="Blue">
  <c1:C1LinearGauge.Ranges>
    <c1:GaugeRange Min="0" Max="40" Color="Red"/>
    <c1:GaugeRange Min="40" Max="80" Color="Yellow"/>
    <c1:GaugeRange Min="80" Max="100" Color="Green"/>
  </c1:C1LinearGauge.Ranges>
</c1:C1LinearGauge>

In Code

To bind gauge to data, switch to the code view and set the BindingContext for the gauge inside the class constructor as shown below.

C#
Copy Code
public DataBinding()
{
    InitializeComponent();
    BindingContext = new GaugeData() { Value = 25, Max=100, Min=0 };
}