Working with Data in Expression Blend 4

Element to Element Data Binding

In this section we are going to see how we can use data binding in Expression Blend. We will see how we can create sample data sources and how to use them in data binding.

Data binding is a functionality that both Silverlight and WPF have that helps us set the property of an element to an external data source. That data source can be xml if we are using WPF and can be any CLR object if we are using Silverlight or WPF. It could also be a sample data source. When we apply data binding to an element then that element does not get its value directly but it has to go to some other location for getting its value. This other location can be another element or a database or an xml.

• Let’s have a look at the element to element data binding. Open Expression blend 4 and create a new Silverlight Project.
• Now go to the tools pallet and select rectangle.

• Now create a rectangle by pressing the left button of the mouse and dragging it on the artboard.

 

• Now go to the properties of the rectangle and set the horizontal alignment to stretch and left and right margins to 0.

 

• Let’s go back to the tools pane and grab a slider and drop it on the artboard.

 

• If you have a look at the properties of the slider you would see values like Maximum (The maximum value of the slider), Minimum (the minimum value of a slider), SmallChange (the value that will change when user has focused the slider and uses the up and down arrow key to change the value of the slider), LargeChange (the value that will change when do a mouse click at any location on the slider track). Let’s set these properties as shown below.

 

• Now let’s setup the data binding. There are two ways to set the data binding: one way or two way. In one way data binding only one property can change the other but not vice versa. In two way data binding both the properties can change each other. In this case we want only one way binding so that the width of the rectangle can change on the change in the slider. So let’s select the rectangle and go to the width property and click on the property marker next to it.

 

• And select element property binding.

 

• Now our cursor has been moved to the object picker mode so we need to point to the element with which we want to do the property binding. In this case we will move our cursor to the slider and click on the slider.

 

• Once we will click on the slider we will get an option select which property of the slider we want to bind to and we will select value.

 

• The moment we do this we see that the width of the rectangle is changed and the Width property has a yellow rectangle around it showing that this property is getting its value from some other location.

 

• Now we can run the application and see that the width of the rectangle will change as we change the slider value.

 

Two Way Data Binding

In this section we will see how we can create two way data binding. Along with the Slider we will provide a textbox to modify the width of the rectangle.

• Let’s drag out a textbox on to the artboard.

 

• Now go to the text property of the textbox and click on the property marker and select Element Property Binding.

 

• Select the slider control again and select its value property again as we did in the case of the rectangle. Also we will select the TwoWay Binding so that both the controls i.e. TextBox and Slider can change each other’s value.

 

• Now we can run the application and change the value of the slider or textbox and we will see that the width of the rectangle is changing and the other control’s value is also updated.

Data Binding with Data Sources

 

In this section we will see how we can use data binding with data sources. Data sources can either be xml or any other CLR object. As we know that xml works only with WPF so for this demo we will have to use data binding with sample data. When we work on an actual project we have CLR objects in which data is stored and they definitely follow some schema. So we can build up sample data in Blend to represent that sample data. So let’s get started.

• Create a new project in Blend. Navigate to the data tab in the right panel. If the data tab is not visible then goto the window menu of blend and select data.

• Click on the Create Data Source.

 

• And select New Sample Data. You will also see option to create Sample data using XML or Class. If we have those then we can use them. When we select any of those two options then blend will not exactly use those but take them as a basis for generating sample data.

 

• Give the Sample Data Source some name and select the define in as project. We do want to enable sample data when application is running so keep It checked.

 

• When we click ok we will see that the data source appears in the data tab at project level and we have a collection with properties in it.

 

• We can also see that in the Projects that a new folder is added named SampleData. When we expand it we see that there is a xaml in it which will store all the data and an xsd which is the schema.

 

• If we open the MyAddresses.xaml, we will see that we have some items already added in the data source. We modify their values or add new items.

 

• Let’s go back to the data tab and click on Edit Sample Values as shown in the image below.

 

• We will see something like below. We can edit the values or the types of these properties.

 

• Let’s rename the properties as shown below. Also lets change the specification of the Address property as shown below.

 

• Also similarly change the Format of name to Name. When we do that if you go back to Edit Values we will see that the data is has been populated according to the format selected.

 

• Let’s add email, phone number  and CustomColor properties.Also modify the format accordingly

 

• And we will see data something like below.

 

• Now let’s start using this data that we have created. Drag and drop the Collection onto the artboard.

 

 

• And a listbox will be automatically created. And each entry will show all the fields. Also the yellow rectangle around the datasource shows data binding.

 

• Let’s improve the look of the List Box by the use of Data Template. Right Click the ListBox and Go to Edit Additional Template à Edit Generated Items (ItemTemplate) à Edit Current

 

• We would something like this. Let’s delete the Color textblock as we do not want to display the color in this way. When we delete that textblock you would see that that textblock is deleted from each item and that’s the way templates work.

 

• Now let’s select the listbox from the breadcrumb bar and stretch it.

 

• Now let’s go back to the template and change the  orientation of the stackpanel to horizontal from vertical. And then build the solution. We will see something like below.

 

• Lets give specific width to all the textblocks and we will see a clean layout.

 

• Let’s delete all the textblocks except the Name TextBlock. Then let’s go back and select the listbox and reduce its width.

 

• Now go to the data tab and select the view mode to details view.

 

• Now let’s drag the Name field on to the art board. We will see that a grid is created along with textblock as its child. Now whenever we select the item in the listbox we will see that the content of the textblock in the grid is changing. This happens because the grid that got created has a concept called Data Context. The grid has its data context set to the list box. So as soon as an item is selected in listbox then the the value changes in the grid as the items in the grid have already specified what item of the listbox they want to display. We can other fields as well in the grid and see that their value change as the selection of the listbox changed.

 

• When we run the application we will see something like below.

 

• Lets go to the grid à Background à Property marker à Data Binding. We will a window like below.

 

• Select Customcolor string and the background of the grid is bound to the color string of the selected item. The value conversion is going on in the background.

 

• When we run the application we see something like below.

 

The code for this post can be found here.

 

Any questions, comments or feedback are welcome.