{"id":23827,"date":"2016-01-13T13:05:12","date_gmt":"2016-01-13T21:05:12","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=23827"},"modified":"2019-04-04T09:07:43","modified_gmt":"2019-04-04T16:07:43","slug":"introduction-to-data-binding","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/introduction-to-data-binding\/","title":{"rendered":"Introduction to Data Binding"},"content":{"rendered":"

\t\t\t\tWriting code that sets the properties of user interface controls to the required data is a tried-and-tested technique for wiring a user interface (UI) to a data source, but can result in having to write lengthy and repetitive code to ensure that the UI is correctly synchronized.<\/p>\n

Writing code to wire a user interface to a data source doesn’t have to feel like the dark ages! In this blog post, I\u2019m going to detail an alternative to manually connecting a UI to its data source. Data binding is a technique to automatically synchronize a user interface with its data source and can vastly simplify how your app displays and interacts with data.<\/p>\n

Data Binding 101<\/h2>\n

Data binding connects two objects, called the source<\/em> and the target<\/em>. The source<\/em> object provides the data. The target<\/em> object, which must be a bindable property, will consume (and often display) data from the source object. For example, a Label<\/code><\/a> (target <\/em>object) will commonly bind its Text<\/code><\/a> property to a public string property in a source object. The following diagram illustrates the binding relationship:<\/p>\n

\"Displaying<\/p>\n

The main benefit of data binding is that you no longer have to worry about synchronizing data between your views and data source. Changes in the source object are automatically pushed to the target object behind-the-scenes by the binding framework, and changes in the target object can be optionally pushed back to the source object.<\/p>\n

Establishing data binding is a two step process:<\/p>\n

    \n
  1. The BindingContext<\/code><\/a> property of the target<\/em> object must be set to the source<\/em>.<\/li>\n
  2. A binding must be established between the target and the source. In XAML, this is achieved by using the Binding<\/code><\/a> markup extension.<\/li>\n<\/ol>\n

    The following code, taken from the accompanying sample<\/a>, shows an example of performing data binding in XAML:<\/p>\n

    <ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\" xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\" x:Class=\"DataBinding101.HomePage\">\n\t<StackLayout Padding=\"0,20,0,0\">\n\t\t<Label Text=\"Data Binding 101 Demo\" FontAttributes=\"Bold\" HorizontalOptions=\"Center\" \/>\n\t\t<Label Text=\"Forename:\" \/>\n\t\t<Entry Text=\"{Binding Forename, Mode=TwoWay}\" \/>\n\t\t<Label Text=\"Surname:\" \/>\n\t\t<Entry Text=\"{Binding Surname, Mode=TwoWay}\" \/>\n\t\t<StackLayout Padding=\"0,20,0,0\" Orientation=\"Horizontal\">\n\t\t\t<Label Text=\"Your forename is:\" \/>\n\t\t\t<Label Text=\"{Binding Forename}\" \/>\n\t\t<\/StackLayout>\n\t\t<StackLayout Orientation=\"Horizontal\">\n\t\t\t<Label Text=\"Your surname is:\" \/>\n\t\t\t<Label Text=\"{Binding Surname}\" \/>\n\t\t<\/StackLayout>\n\t<\/StackLayout>\n<\/ContentPage><\/pre>\n
    Although the\u00a0BindingContext<\/code><\/a>\u00a0property of the HomePage<\/code><\/strong> class (the target object) can be set in XAML, here it’s set in code-behind to DetailsViewModel<\/code><\/strong> (the source object):<\/p>\n
    public partial class HomePage : ContentPage\n{\n\tpublic HomePage ()\n\t{\n\t\tInitializeComponent ();\n\t\tBindingContext = new DetailsViewModel ();\n\t}\n}<\/pre>\n
    While the BindingContext<\/code><\/a> property of each target object can be individually set, this isn\u2019t necessary. BindingContext<\/code><\/strong> is a special property that\u2019s inherited by all its children. Therefore, when the BindingContext<\/code><\/strong> on the ContentPage<\/code><\/a> is set to DetailsViewModel<\/code><\/strong>, all of the children of the ContentPage<\/code><\/strong> have the same BindingContext<\/code><\/strong>, and can bind to public properties of DetailsViewModel<\/code><\/strong>.\u00a0For information about setting the\u00a0BindingContext<\/code><\/strong>\u00a0in XAML, see\u00a0From Data Bindings to MVVM<\/a>.<\/p>\n
    The Binding<\/code><\/a> markup extension can specify several properties, including Path<\/code><\/a> and Mode<\/code><\/a>. The Path<\/code><\/strong> property is used to specify the property name of the source object to use for the binding. However, this property name can be omitted provided that it\u2019s the first item in the  Binding<\/code><\/strong> markup extension.<\/p>\n
    The Mode<\/code><\/a> property is used to specify the direction in which property value changes will propagate:<\/p>\n