Data Binding in Expression Blends

Diagram for the Data Binding Concept !

In this article , I will be explaining how to apply and use the data binding feature in Expression Blends 4.

First of all, Start with the Expression Blends 4.

Click on New Project from the file menu.

You will then get the below screen. Select the WPF ( Windows Presentation Foundation ) Project and select the WPF Application. Select the Version 4.0 as this is the latest version on the .net framework installed in my system. I have chosen the c# as the language here. You can choose vb also. Give any name and select ok.

After clicking on OK, this blank screen will appear. The right hand side contains the properties , project, resources and data view options and on the left hand side, all the tools are given . At the bottom you will get to see the objects and timeline and results tab.

Now click on the arrow button which is on the left hand side tool box at the bottom and a box will popup. Type Textblock in the search box and you will get the textblock. Select it and drag it on the white blank screen.

Similarly, search for the slider and drag it onto the screen.

After putting the textblock and the slider onto the screen, your screen will look like this.

Now if you want to change the properties of the textblock, just goto the properties tab and change whichever property you want. Here, I have changed the content of the textblock using the text property which is included inside the common properties block.

Now coming towards the data binding which is our aim. Our aim is to increase or decrease as the value of the slider increases and decreases. So click on the textblock, then goto the properties window. In this click on the very small box( button) which is beside the font property of the textblock. After clicking on it, a small box screen will popup there and select the data binding option.

After selecting the data binding option, goto the element property tab, select the slider from the left pane which you have already inputed in the screen. After selecting the slider, goto the right pane and select the value ( double ) and click ok.

Now after doing all this, select the slider and change its maximum and the minimum values from the properties pane. We are doing this because, our font default is small. If we want to increase the font size of the text in the textblock then it should increase to a certain limit.

After doing all this, our work is over. Just run the application by pressing f5 and there you go. I have given the demo of the data binding in the video given below.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s