What this lesson is about:

Data binding provides a simple way for Windows Runtime apps using C++, C#, or Visual Basic to display and interact with data. The way data is displayed is separated from the management of the data. A connection, or binding, between the UI and a data object allows data to flow between the two. When a binding is established and the data changes, the UI elements that are bound to the data can display changes automatically. Similarly, changes made by the user in a UI element can be saved in the data object. For example, if the user edits the value in a TextBox, the underlying data value is automatically updated to reflect that change. Some common binding scenarios include binding a ListBox to a list of headlines or an Image to the current user’s photo.

In simple words, Data Binding means to connect any property of one control with any property of other control. Data Binding is very much useful and important if you want a perfect,attractive and user friendly user interface design. So let me share some of the data binding examples with you.

Example 1 : Binding TextBox Controls

 Binding in two TextBox Controls in XAMLIn this scenario  i will use two TextBox controls to bind their  values with each other. Sometimes our applications requires the data to be imputed twice for the data  consistency and stability. In this example my one TextBox will take input from the user and that  TextBox is actually binded with another TextBox so TextBox2 will display whatever you have wrote in  textBox1.

Assumptions: Before sharing code i assume that you have created two TextBox controls. In my case my TextBox controls names are TextBox1 and TextBox2. Now if  we want to bind both the controls we will just Bind the Text Property of TextBox2 with the Text Property of TextBox1 as shown below :

<textBox x:Name="TextBox1"/>
<textBox x:Name="TextBox2" Text="{Binding ElementName=TextBox1, Path=Text}"/>

 

Example 2 : Binding TextBox with TextBlock Control

In this scenario i will display the length (number of characters) in my TextBox control by Binding it with TextBlock Control. For this i assume that you have created two controls, a TextBox control and a TextBlock control and give them a name accordingly. In my case the name of TextBox is TextBox1 and the name of TextBlock is TextBlock1, so now we will do the same thing which we have done in the example 1 here. Here’s the code of binding both the controls :

<textBox x:Name="TextBox1"/>
<textBlock FontSize="40" x:Name="TextBlock1" Text="{Binding ElementName=TextBox1, Path=Text.Length}"/>

So here everything is same as in example 1 except one, we have displayed the number of characters using Text.Length property so the purpose of sharing this example is to tell you how we can make different variations in our binding.

 

 

Example 3 : Rotating Image using Slider control with Binding

This example is very useful in understanding the binding control as in this example we will use two Slider controls to rotate Image in different directions.

First of all in a stack Panel i will import an image (For importing an image in your project just copy the image and paste it into the Assets folder of your project afterwards use its path e.g Assets/myPic.jpg ) then i have to set the Image.Projection property so that i may bind the slider controls for it.

Until this my Code will look like this :

<stackPanel>
<image Source="Assets/bg.ico" Height="381" Margin="127,0,174,0">
<image.Projection>
<planeProjection x:Name="MyImageProjection"/>
</image.Projection>
</image>
</stackPanel>

Now i have to use two Slider controls and have to bind them with Image.Projection property. I’m using two Slider controls because projections always held on two positions, X-Postion and Y-Position so my first slider will provide the X-Position to the Image.Projection and second will provide the Y-Position to my image.Projection as below :


<slider x:Name="RotationX" Minimum="0" Maximum="360" Value="{Binding RotationX, ElementName=MyImageProjection, Mode=TwoWay}"/>
<slider x:Name="RotationY" Minimum="0" Maximum="360" Value="{Binding RotationY, ElementName=MyImageProjection, Mode=TwoWay}"/>

So Finally my code will look like this :

<stackPanel>
<image Source=”Assets/bg.ico” Height=”381″ Margin=”127,0,174,0″>
<image.Projection>
<planeProjection x:Name=”MyImageProjection”/>
</image.Projection>
</image>
<!–RotationX and RotationY are properties below –>
<slider x:Name=”RotationX” Minimum=”0″ Maximum=”360″ Value=”{Binding RotationX, ElementName=MyImageProjection, Mode=TwoWay}”/>
<slider x:Name=”RotationY” Minimum=”0″ Maximum=”360″ Value=”{Binding RotationY, ElementName=MyImageProjection, Mode=TwoWay}”/>
</stackPanel>

Download the project
 

Video Tutorial


XAML- Data Binding by Lessons By Bilal