Data binding controls
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Data binding links your app's user interface with your app's data classes.
If you have used Key-Value Observing (KVO) when developing iOS apps, you'll find data binding rather familiar.
At its simplest, data binding allows you to link two XAML controls so they can update themselves automatically: for example, here's some XAML that declares a slider control which automatically updates a text block with its current value:
<Slider x:Name="mySlider" Width="100"/>
<TextBlock Text="{Binding Value, ElementName=mySlider}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
You can see that the TextBlock's Text property (the target) is set to use the special term Binding, along with the name of the control we're using to provide the data (the source) and the specific property of the control to use; in this case the Value property, which is the current numeric value displayed by the slider.
This type of data binding is called one way binding, because the data flows one way: from the source to the target. There is also form of binding called two way, in which data flows both ways.
As a simple example, look at this code, in which we swap the TextBlock for a TextBox (a text control which accepts a manually entered value):
<Slider x:Name="mySlider" Width="100"/>
<TextBox Text="{Binding Value, ElementName=mySlider, Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
As before, adjusting the slider changes the text in the text box. However, now if you enter a value in the text box the state of the slider control changes too.
For more info on binding syntax, see Binding markup extension (Windows Store apps using C#/VB/C++ and XAML).
Rather than enter the binding keywords by hand, you can also select the text box in the Solution Explorer view, and click the color square next to the Text property to select Create Data Binding....
Although this kind of code-free link between controls is nice, data binding really comes into its own when used with collection controls.
Data binding with collection controls
XAML controls can be data bound to C# classes which implement certain interfaces, but the simplest way to link a control to your data is to make use of ObservableCollection objects. These are array objects which store data but also look after all the communication with bound XAML controls. In fact, once you have linked the ObservableCollection object to a XAML collection control (say, a ListView) then adding or removing new data will automatically update the control.
Here is a simple example. First, here's the XAML which declares the ListView:
<ListView x:Name="ListOfPlanets" Height="100" Width="100"/>
Next, here's some C# which declares an ObservableCollection, puts some data into it, and then binds it to the XAML control:
// Add: using System.Collections.ObjectModel;
ObservableCollection<string> planets = new ObservableCollection<string>();
planets.Add("Mercury");
planets.Add("Venus");
planets.Add("Earth");
ListOfPlanets.ItemsSource = planets;
This code automatically populate the ListView with our strings and displays them, and if you were to use Add or Remove to change the list, the control would update itself. Notice that the ObservableCollection is a generic type: you tell it the data type you want it to store when you create it.
Collection controls offer great flexibility: by using Data Templates, you can define how the data should be formatted. For example, you can display strings and images and use StackPanels or Grids to define their layout inside the collection control. For more help on binding and data templates, see Quickstart: Data binding to controls.
Related topics
Topics for iOS devs
Windows 8 controls for iOS devs
Windows 8 cookbook for iOS devs
Data binding topics
Data binding overview (Windows Store apps using C#/VB/C++ and XAML)
Part 5: Create a blog reader (Windows Store apps using C#/VB and XAML)