Styling and working with Design-Time Data

Explore how Templates and Bindings are used to display dynamic data

Displaying dynamic data is a common function when designing and building application interfaces. This functionality is a core concept in Silverlight and Expression Blend makes it accessible to the UI designer.

In this tutorial, we will bind a ListBox to generated Sample Data, design the look of the Item display and experiment with Bindings.

Tools Time Downloads
Expression Blend Silverlight 30 minutes
30 minutes
Word (.docx) Word
Acrobat (.pdf) PDF

01 Start a New Project

Open Blend and go to File > New Project. Select Silverlight 3 Application + Website as your project type and name the project BasicDataTemplates. After hitting OK, the new Project will be created for you and MainPage will be open on the Artboard.

02 Add a ListBox

Using the Assets panel, find and select the ListBox Tool and draw a ListBox onto the Grid. The ListBox is a very useful control for displaying a group of items. Due to the concept of Templates you can reuse the functionality of the ListBox (e.g. SelectedIndex, dynamic item generation) to create a variety of interfaces.

03 Create Sample Data

Open the Data panel, found on the right side of the screen. Click the oil-barrel icon with a “+” sign to add a sample data source. Click “Define New Sample Data”, keep the defaults on the popup and hit OK. Often the projects we’re working use dynamic data which can be difficult to design for. Sample Data allows us to preview dynamic data during design time based on generated or actual data.

04 Customize the Sample Data

In the Data panel, select Property1 and click the property type icon to the right, currently set to a String denoted by the “ABC” icon. Change the format to “Name”. Double-click Property1 and change the property’s name to Name. Change Property2 to a String type with an Email Address format and rename it to Email. Using the “+” sign next to Collection, add another property named InviteSent of type Boolean. Add another property named ChairImage of type Image and leave Location blank.

05 Bind ListBox to Sample Data

Here comes the fun part. Drag and drop Collection from the Data panel onto the ListBox. The Sample Data is bound to the ListBox which is now displaying the data as interactive items. This is done by Blend automatically generating a DataTemplate for the data. Run the Project to scroll the list of items.

06 Rearrange the DataTemplate

Right-click the ListBox and select Edit Additional Templates > Edit Generated Items (ItemTemplate) > Edit Current. This is a good time to Zoom In using the mousewheel. In the Objects panel, right-click StackPanel and click Change Layout Type > Grid. Add a Column the width of the chair Image. Make the Grid wider, and move the two TextBlocks and CheckBox to Column 1. Reposition the Controls in the order of name, email, Checkbox. Shorten the Height of the Grid.

07 Modify the DataTemplate

Right-click the Grid and select Group Into > Border. Set the BorderThickness to 1, Corner Radius to 8, the BorderBrush to Gray and the Background to LinearGradient ranging from LightYellow to GrayYellow. On the TextBlock displaying the name set the Font to 10pt and Bold. Set the content of the Checkbox to “Invite Sent”.

08 Edit the Item Layout

Click [ListBox] in the breadcrumb menu at the top to exit the Template editing mode. Right-click the ListBox and select Edit Additional Templates > Edit Layout of Items (ItemsPanel) > Create Empty. Keep the defaults on the Create ItemPanelTemplate Resource popup and hit OK. In the Objects panel, select the StackPanel and change the Orientation property from Vertical to Horizontal. Exit the Template editing mode and resize the ListBox to fill the bottom of the Grid.

09 Element Binding

Draw a new Grid to fill the remaining space and name it itemGrid. Add an Image Control to itemGrid with a Margin set to 0. Select itemGrid, find the DataContext property and click the small gray square next to the New button. Click Data Binding and on the popup, select the Element Property tab. Choose [ListBox] as the Scene element and SelectedItem as the property. Hit OK. Select the Image Control and then click the small gray square next to the Source property. Click Data Binding and on the popup, select the Explicit Data Context tab. Select Collection > ChairImage and hit OK.

10 Test the Bindings

Run the Project and select an item in the ListBox and an image of the selected chair will be displayed. All this functionality and we haven’t written a line of code. The secret is in the Templates and Bindings. We bound the Sample Data to the ListBox to show the Items. The DataTemplate defined the look and interactivity of the Items using property Bindings. The itemGrid was then bound to the SelectedItem of the ListBox, where the Image Source was bound to the Image property of that SelectedItem.

» Next Step

Now let's add some interactivity by Giving Behaviors a Test Drive.

To continue learning about DataTemplates read this Displaying data article on the Expression Community site.