Data Binding in XAML (WPF, Silverlight, Windows Phone or Win8 App) Part 1

Introduction

Data Binding is one of the greatest and most powerful features of XAML (WPF, Silverlight, Windows Phone or Windows 8) compared to other traditional web and Windows app technology in .Net. There was simple data binding for displaying single values, and complex data binding for displaying and formatting a bunch of data. XAML (WPF, Silverlight, Windows Phone or Windows 8 ) however makes it easy to bind nearly any property to any element or object or data source. You take data from some property or object or dependency property and bind it to another dependency property or object or else directly to an element. In a single word you can say in XAML "Data binding is the process of getting information from one object to another and displaying it in one or more elements in the user interface".

Before starting this article, if you are a beginner then I'll request that you to learn the basics of XAML or go to this link and learn about XAML and various types of panels in XAML: http://www.c-sharpcorner.com/UploadFile/0b73e1/different-types-of-panels-in-xaml-layout/

DataBinding Concept in XAML

Binding is all about connecting a source to a target. Every time you use binding you must supply a source for the data and the target. Generally the target is a dependency property or some framework element of some user interface and the binding source can be any CLR object. Between the source and the target more objects are involved called value converters. This conversion represents an instance of a class that is implemented for doing the binding declaratively. XAML often requires value conversion using the Ivalueconverter interface. For example, you select student information from a source and you only need the first and last name in the target.

I will try to explain in the following diagram the basics of a Data Bindig scenario and data flow.



In the above image I try to explain the XAML Databinding structure as in the following:

• Target object: this is a complete UI Control or UI element where you can display your data. You cannot directly bind to the target object; it needs a dependency property or object or UI object.
• Binding object: this works between a target and a source object, you can specify data context binding mode converter and so on.
• Source Object: your data that you want to show on the UI is a source object, it can be any type (CLR object or some other object). Generally we use a CLR object or web service XML, LINQ or list<T>.

Binding object and Source object

Why DataBinding is Powerful in XAML

One of the greatest and powerful features of XAML databinding is that we can just write a few lines of code and connect the UI element to a source object and binding will also take care of updating the UI when the data is changed. Here data binding is quite flexible allowing the developer to connect disparate UI elements and data sources in a variety of useful ways. It's all the flexibility of XAML databinding provided by the {Binding} Keyword.

What is {Binding} Keyword in XAML

Binding is a class. It's glue between a target object and a source object. You can simply write one line code on a target to connect to your source object. If you make any changes in the source then your target will be automatically updated. It's all done by the Binding class.

How {Binding} works in WPF

The Binding keyword looks as in the following image. Here is the binding of TextBox UI controls with some binding property source object.



Binding to a WPF element From Code Behind.



In the above sample I bind a TextBox and slider from code behind using some binding property. I attached this sample example. You can download and test it. If you want to learn more about the Binding class then go to this sample in code behind or create a XAML project and create a Binding object from the code behind then click on Binding and select "Go To Defination" and view all the binding class properties and events.

The following few are in this image.



Some Very Useful Properties of the Binding Class

PROPERTY NAME	DESRIPTION
Element Name	The name of the element that gets or sets the binding source object when binding to a XAML element.
FallbackValue	Set the value to use when the binding does not return values.
Converter	Set the converter for the UI element.
Mode	Set the Binding diection between the target and source objects.
Path	Get or Set the path to the source property of the Binding source.
RelativeSource	Gets or Sets the binding source by specifying it's location and relative to the postion of the binding target.
Source	Gets or Sets the binding source when not binding to a WPF element.
StringFormat
UpdateSourceTrigger
ValidationRules
NotifyOnSourceUpdated	Gets or sets the value determining the direction of the dataflow in the binding.
NotifyOnTargetUpdated	Gets or sets a value that indicates whether to raise the source Update event when a value is transferred from the source to the target.

More about Binding Class Members: http://msdn.microsoft.com/en-us/library/system.windows.data.binding.aspx.

Some of Properties I'll discuss in this article

The Path property can refer to a property or a property of a property, or indexed property.

Such as if you need to refer to an attached propert. As for an example Grid.Row or set a path property to Grid.Row in Parentheses.

Binding Modes in XAML(WPF,Silverlight,WP or Win8 App)

The Mode Property of Binding just changes the behaviors. The DataBinding mode defines the communication direction to the source or the direction of data flow from the source . In XAML (WPF, Silverlight, WP or Win8 App) there are five ways you can bind a data target object to a source.



The diagram above attempts to explain the databinding mode or communication way to communicate between the target to the source in XAML.

OneWay: Data moves only one direction, the source property automatically updates the target property but the source is not changed.

TwoWay: Data moves both directions, if you change it in the source or target it is automatically updated to the other.

OneWayToSource: Data moves from the target to the source changes to the target property to automatically update the source property but the target is not changed .

OneTime: Data is changed only one time and after that it is never set again, only the first time changes to the source property automatically update the target property but the source is not changed and subsequent changes do not affect the target property

BindingMode is enum:



In the image above I tried to show the Binding way in XAML (WPF, Silverlight, WP or Win8 App). The BindingMode key is nothing more than an enum and this has the five members TwoWay, Oneway, Onetime, OnewayToSource and Default. You can set this member on the UI and define the flow or direction of the data.

I attached one sample example; please download the sample.

UpdateSourceTrigger in {Binding}.

The UpdatesourceTrigger feature is very powerful in the Binding class. It defines how and when the source should be updated. As I discussed above {Binding} is a powerful feature in XAML, if you change the source then the target will be automatically changed, but it only happens if you are using two-way binding, not for the other binding modes.



PropertyChanged: The source is updated whenever the target property value changes.

LostFocus: The source is updated when the target property changes and the target object loses focus.

Explicit: The source is updated when an explicit call is made to do the update using "BindingExpression.UpdateSource".

These are all in the sample attached to this article.

Sample of DataBinding in WPF



In this article I attached four sample examples; you can learn by the sample step-by-step XAML databinding .

In DataBindingSample4, you can learn a practical example of databinding and databing mode. You can change the data binding at runtime; just run the application then select Data binding, also you can learn about data binding to XAML as well as the code behind.