Video: Dressing up your data with DataTemplates

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.

Microsoft Silverlight 5 is a rich application framework for creating high-performance, cross-platform desktop and mobile applications. In this course, author Walt Ritscher demonstrates how to build a variety of applications in Silverlight, with particular focus on building compelling business applications and delivering premium video and audio content. Developers will work with the C# programming language and Visual Studio Professional, as well as Expression Blend, a tool that simplifies creation of the interactive user interfaces expected in modern-day applications.

Dressing up your data with DataTemplates

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 ObservableCollectionof RentalHouse, and in the constructor of this class I'm instantiating a housein settings and properties, including a property that's important for thisdemo, 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, makeit 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 cancreate an object-based data source.When I click on that button, it lists all of the potential types that I canuse 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 RentalManagerand I can see the properties of my type.

This means that if I have a list box like this, I can drag RentalManager, whichyou remember as an observable book collection of rental houses, and drag it overhere. 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 Propertyto 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 ItemSource 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 myunderlying data source.Next, I'm going to edit my data template.I do that by going to this dropdown, choosing Edit Additional Templates, andthen 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 withfive 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 tohave 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 andthen changing this value here from Vertical to Horizontal. And then I'll go andI'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 thenchoose 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 Widthproperty 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 usingdata templates.

Q: I'm trying to access a Silverlight 3D application template, [cid:image001.png@01CD0E7D.3E07ECA0]. I have already installed the Silverlight 5 SDK and my Visual Studio 2010 is professional. Could you please help me?

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.