Data Binding

While working in XAML, you can fetch the values for Min, Max and Value from an external data source, instead of directly setting the properties.

The example in this topic follows the MVVM pattern. Visit https://msdn.microsoft.com/en-us/library/hh848246.aspx for information on MVVM pattern.

The following class can serve as a datasource 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; } } }

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

Initialize the control in XAML, as shown below.

XAML	Copy Code
<xuni:XuniLinearGauge Value="{Binding Value}" Min="{Binding Min}" Max="{Binding Max}" Thickness="0.1" HeightRequest="50" WidthRequest="50" PointerColor="Blue"> <xuni:XuniLinearGauge.Ranges> <xuni:GaugeRange Min="0" Max="40" Color="Red"/> <xuni:GaugeRange Min="40" Max="80" Color="Yellow"/> <xuni:GaugeRange Min="80" Max="100" Color="Green"/> </xuni:XuniLinearGauge.Ranges> </xuni:XuniLinearGauge>

XAML

Copy Code

<xuni:XuniLinearGauge Value="{Binding Value}" Min="{Binding Min}" Max="{Binding Max}"
 Thickness="0.1" HeightRequest="50" WidthRequest="50" PointerColor="Blue">
  <xuni:XuniLinearGauge.Ranges>
    <xuni:GaugeRange Min="0" Max="40" Color="Red"/>
    <xuni:GaugeRange Min="40" Max="80" Color="Yellow"/>
    <xuni:GaugeRange Min="80" Max="100" Color="Green"/>
  </xuni:XuniLinearGauge.Ranges>
</xuni:XuniLinearGauge>

In Code

To databind a Gauge, open the C# code behind of the XAML page 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 }; }