Xamarin Forms - Data Binding

Data binding, automates the connection between properties of two object by installing event handler and handlers under the cover. It also plays a curcial role in MVVM architecture. 

There are some basic concepts while involving data binding:

• data bindings always have a source and a target.
• the target of a data binding must be backed by a bindableProperty object
• the source can be a plain old c# property, but must implement INotifyPropertyChanged interface. 

 

1. Data binding in Code

• et BindingContext property on the target object to refer to the source object, then call SetBinding on the target object to specify both the target and source properties.

 

//label is the target, slider is the source
label.BindingContext = slider;
//text changes while the value of slider changes
label.SetBinding(Label.TextProperty, "Value");

• Binding context property is actually one of two ways to link the source and target objects. We can include a reference to the source object within the binding expression itself

Binding binding = new Binding()
            {
                Source = slider,
                Path = "Value"
            };
label.SetBinding(Label.TextProperty, binding);

 

 

 

2. Data binding in XAML

Define data binding in XAML involves two markup extension, x:Reference and Binding. 

<StackLayout>
        <Label Text="test"
               BackgroundColor="White"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center"
               BindingContext="{x:Reference Name=slider}"    
               Opacity="{Binding Path=Value}"></Label>
        
        <Slider x:Name="slider" VerticalOptions="EndAndExpand"></Slider>
</StackLayout>

The syntax can be shorten by removing 'Name' and 'Path', as ReferenceExtension defines name as its content property, and BindingExtension defines path as its content property.

               BindingContext="{x:Reference slider}"    
               Opacity="{Binding Value}"

You can also specify the source in the binding markeup extension.

Opacity="{Binding Source={x:Reference Name=slider},Path=Value }">

 

3. Binding Mode

• Default
• OneWay - changes in the source affect the target
• OneWayToSource - changes in the target affect the source
• TwoWay - changes in the source and target affect each other

When you create a BindableProperty object by using Create, you can specify a default bindingMode value. 

4. String Formatting

The binding class has a stringFormat property that allows you to include an entire .net formatting string. Most of the time, the target of such a binding is the Text property of a label.

<Label Text="{Binding Source={x:Reference slider},Path=Value,StringFormat='The value is {0}'}"></Label>

 

5. Path

The binding class defines a property named Path that you use to set the source property name. It can be a stack of properties, subproperties, and even indexers.

<Label Text="{Binding Path=Padding.Top, StringFormat='top padding is {0}'}"></Label>

 

6. value converter

Value converter is used to convert binding source object to required target source property type. Value converter classe implements IValueConverter interface.  

    public class IntToBoolConverter : IValueConverter
    {

        //convert int to bool type
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (int)value != 0;
        }

        //conver to from bool to int
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool)value ? 1 : 0;
        }
    }

<ContentPage.Resources>
        <ResourceDictionary>
            <local:IntToBoolConverter x:Key="intToBool"></local:IntToBoolConverter>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>
        <Entry x:Name="entry" Text="">
        </Entry>

        <Button Text="Save"
                IsEnabled="{Binding Source={x:Reference entry}, Path=Text.Length,Converter={StaticResource intToBool}}">
        </Button>
    </StackLayout>