Simple Data Binding in Universal Windows Platform

What is Data Binding?
 Data binding is a technique used to make dependent one item to the other item. Either source (User) is dependent on target (Server) or either target is dependent on source or either both are dependent to each others.
The change in one item will also change the second item.

Data Binding Types:
i- One way binding => Only One item is dependent to the other item.
ii- Two way binding =>  Both first and the second items are dependent to each other.
In logical words, in One way binding Server can change the User form or whtaever the user is accessing while in two way binding both can access each other whatever they are accessing.

Here in this example we are going to implement just one way binding, we will also talk about two way binding in the next tutorial.

Example:
 In this example we will make a slider in our "MainPage.xaml" and a one image. we will bind image height with the slider. As we will increase slider volume the height of picture will be increased accordingly. So let's start with the new project.

• Click on the "New Project" in the start screen.

• Under "Visual C#" click on Windows => Universal then click on "Blank App" and name your blank app.

• After creating Blank app double click on "MainPage.xaml" in the solution explorer. This will open Designer and Xaml. in the Design you can simply drag and drop items from toolbox in the menu and in the Xaml you simply write the code your own.

• You can split your windows as you want by just clicking at bottom windows splitter icons as you can see in the picture.

• Now drag the image from your computer and drop it on the "Assets" in the solution explorer window.

• Now in the "MainPage.xaml" , open xaml and here we create on slider and one image tag.

• Here we put image and slider in "Stack Panel". The reason is that stack panel organize the sequence of your controls in the center and also align them horizontally and vertically.

•  In the image tag we bind the height of image with the slider where "saqib" is the name of the slider. Also we provide the source of the image that is in our "Assets" folder and the name of the image is "Superior_University.jpg".

•  "ElementName" in the image tag is the control name with which you want to bind the current control or image.
• Slider has a minimum and maximum value. By default maximum value is equals to 100.

Output:

 On increasing the Slider value...

On decreasing the value of slider...

So actually as we increase the slider value the greater will be the image height. we bind the image height with the slider value.