Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
It is common in Silverlight to have controls bound to underlying data. That data doesn't have to look boring though. Silverlight data templates can be applied to any data type. This means that if you have an item's control bound to a list of invoice items, you can create a UI to wrap each instance of the invoice class as it is added to the control. For this demonstration, I will start in Visual Studio. I'd like to take a brief look at the Rental Manager class. I'm going to be using this for my data for the binding. Here I have a class called RentalManager that derives from ObservableCollection of RentalHouse, and in the constructor of this class I'm instantiating a house in settings and properties, including a property that's important for this demo, ImageLocation. And then I add that to this collection, and then I add a few more houses.
I'll switch to Expression Blend to make my data template. I've opened MainPage.xaml and I want to add a list box control to this UI. To do that, I'm going to my Assets pane, type in List, and then select my ListBox. List Box is now added to my toolbox. Now I can just double-click to add it to my artwork. There it is. Press V to get the selector and then move it into the center of the screen, make it a little bit wider. Now I'm ready to do a data binding and a data template.
Expression Blend has a Data tab. Let's see what's inside the Data tab. Not much yet. But if I click on this button here, Create data source, I can create an object-based data source. When I click on that button, it lists all of the potential types that I can use as a data source. The one I'm interested in is the Rental Manager. So I'll select Rental Manager and then click OK. This looks promising. Over here in the Data window I now can see the something called a RentalManager and I can see the properties of my type.
This means that if I have a list box like this, I can drag RentalManager, which you remember as an observable book collection of rental houses, and drag it over here. And look at the blue tooltip I'm getting as I moving this around. If I drop here it says Create a List box and bind its Item Source Property to the RentalManager. This implies that you didn't have to create the list box first. If I hover over an existing list box, it says Data bind the List box Item Source to the RentalManager Data Source. That looks like one I'm looking for.
So I'll drop the data source here. Now you can see that in my list box is one row for each of the items in my underlying data source. Next, I'm going to edit my data template. I do that by going to this dropdown, choosing Edit Additional Templates, and then choosing this one here, Edit Generated Items Items Templates. Let's choose to Edit Current, and now let's look at what I'm working with. Over here it shows I'm working with the ItemTemplate as part of the list box, and the Objects and Timeline specifies I'm working with the template.
You see that right here ItemTemplate, and that shows I have a Stackpanel with five or six TextBlocks in it. That's not what I want. I just want to have a property name, which is this TextBlock here, and I want to have an image control. So I will delete these other TextBlocks from the Template. I'll take the Stackpanel and change its orientation by going to Properties and then changing this value here from Vertical to Horizontal. And then I'll go and I'll add an image control to my Stackpanel, like that.
Let's review what I've done. I took the default Data Template that was generated by Expression Blend, I modified it by changing the Stack panel, deleting some TextBlocks, and adding my own image. Now this TextBlock has a bound property. I can see it because it has a yellow border around it. My image is not currently data bound. Let's fix that. I'll click on Image and I'll go to Source, click on the property peg, and then choose Data Binding. And I choose the correct property.
In this case I'm choosing ImageLocation, and then click OK. I'm close to being done. I need to make sure these pictures align. I'm going to do that by choosing my TextBlock and then changing its Width property to 140 pixels. Let's run the application and see what it looks like. As you can see, it is easy to make your data look beautiful by using data templates.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104829 Viewers
56 Video lessons · 116687 Viewers
71 Video lessons · 85899 Viewers
131 Video lessons · 41088 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.