Windows Store Apps (XAML/C#) - XAML Data Bindings

XAML is highly flexible when it comes to data bindings. In this tutorial I will run through the basics so that you should be able to link your data directly to view elements. (You can find a detailed MSDN overview here)

What you need to know before create a binding:

1. The data type or format that is required by the field you are binding to
2. The Context (This is basically the parent element that will have the object we are binding from)
3. The binding mechanism (How the binding should take place)
1. OneTime
2. OneWay
3. TwoWay
4. Binding object (Optional depending on how the Context was set)

 Basic Binding Syntax:

 ... Property="{Binding [SourceItem], Mode=[Direction], Converter={StaticResource [converterName]}}" ...

XAML UI Data bindings

Overview of examples we are going to cover:

• Bind text to Static Page Resource
• Bind image control from code behind image (OneTime)
• Bind to a custom class (TwoWay)
• Custom class with a converter

(A) Bind text to Static Page Resources

Use static resources to bind property values to. You can access items from:

1. The current Page Resources (Defined under <Page.Resources>)
2. Global Resource Dictionary Files (Attached in App.xaml as <ResourceDictionary Source=”path” />)

If you don’t have a “<Page.Resources>” section (A), create it and add both a string entry (B) and a style entry (C) underneath it. Use both values to define a “<TexBlock>” element (D).

 (B) Bind image control from code behind image (OneTime)

You might need to read images dynamically and bind to them. In this example we will use a code behind property to fetch the correct image and bind the XAML element's property to it.

• Create a new “Images” folder and add an image to it.
• Create a public page property in the code behind to retrieve the newly added image. Be sure to use the correct path from the application root.

• Set the context of the XAML element to the page itself (Parent of the property we created) on the load of the page in the code behind.

• Create the binding on the source property in the XAML side of the class.

(C) Bind to a custom class (TwoWay)

One can easily bind to a custom class object. Allowing for flexible specification of these binding rules that allows for more confidence in the integrity between the view and data object.

Keep in mind with custom class objects that when a field is bound without an exact property it will use the ToString to represent the complete object. You might want to create a custom override to ensure it displays meaningful data.

•  Create the custom C# class that will be used as the data binding source

•  Create the XAML representative view fields:

• In the code behind define a property of the same custom class, set all the view elements DataContext that will bound to this custom object and initiate the instance.

If you add an update button and you inspect the code behind property it will already have the latest values, the reason the combined label does not update is because it requires a change notification implementation to dynamically update.


(D) Bind to a custom class with converter

For this example I will be modifying the previous custom class (C) binding implementation to convert the data going backwards and forwards in the data binding. This enables you to store your content in one format but display it in another.

• Create a converter class, each type of conversion will require its own class that implements two methods (Convert and ConvertBack)

• Create a static resource converter in the XAML under User Control Resources. This will use to the custom converter class you have made in the previous step.

•   Update the existing binding to also include the converter.

Some other important items of note:

• For changes in the source object to propagate through you need to implement Change notification (INotifyPropertyChanged)
• If you want to bind a collection of elements you use an ItemsControl and use a DataTemplate to display each item.