/Expression/ Silverlight Tutorial: Using Expression Blend to Style a ListBox

06/11/2009 | Filed under Discover > Expression

Microsoft’s Mike Taulty demonstrates how to use sample data to style a ListBox to display a list of contacts

What You’ll Need

In order to work through these tutorials you will need to have installed the Silverlight Version 3 Runtime (download here) and either a full version or the trial version of Expression Blend 3 (download here).

Tutorial

One of the powers of the Silverlight platform is its ability to provide a high-degree of separation between the user interface design modelled in declarative XAML and the code that provides the UI’s data and interactivity. In this tutorial we’ll look at how that can be used to a your advantage in Expression Blend 3 by using sample data to style a ListBox to display a list of contacts.

1 – Creating a New Project

In Expression Blend, use the File|New Project... menu option to raise the New Project Dialog;

Select to create a “Silverlight 3 Application + Website” and choose a suitable name and location for your project and hit OK to create the project.

2 – Setting Up Expression Blend’s Panels

Expression Blend will open your new project with a blank design surface displaying the main user interface of your application defined in a file MainPage.xaml. It will also display a number of additional, tabbed windows depending on your setup. For this tutorial we will use the following panels;

•    Assets

•    Objects and Timeline

•    Data

•    Properties

Ensure that these panels are visible using the Window menu where all panels can be shown/hidden.

3 – Adding a ListBox to the Design Surface

Within the Assets panel, locate and select the ListBox control;

and use the cross-hair cursor to draw a ListBox onto the blank design surface. Make the ListBox as large as you like as it will be our one and only piece of UI that we’ll work with. Your design surface will now look something like;

And the structure of your user interface will update in the Objects and Timeline panel to reflect the newly added ListBox;

4 – Adding Sample Data to the Project

Styling a ListBox without data is hard. Expression Blend 3 makes this easier by allowing a designer to work with sample data which is either generated automatically by the tool itself or loaded from an XML file if you have suitable data already available.

The Data panel makes both options available and displays sample data sources and real data sources for both the current project and for the document open on the design surface;

Use the icon illustrated below to add a new sample data source to the project;

Here, you can choose between Define New Sample Data... and Import Sample Data from XML... Select the former option to raise the “Define New Sample Data” dialog;

Choose a suitable name for your sample data source and define it for the Project rather than for the document. Note that in the screenshot above I have chosen not to make the sample data available when the application actually runs.

The data panel will update to include the newly defined sample data source as displayed below. By default the designer creates a collection of data called Collection containing 10 records. Each record has two properties named Property1 (type String) and Property2 (type Boolean).

Use the Data panel to add/rename properties called Picture, Name, EmailAddress, Address, Phone as below – the “+” button adds a property and renaming is achieved by clicking on the existing name;

To make the sample data more realistic, use the drop down menu against each item to set the data type for the property. All but one property here should be set to be of type “string”. Also, set the format for the string ( e.g. “Phone Number” ) and options around the data generated as below;

For the Picture property you should use the type “Image” and then select a set of images that you want to use as samples. There is no need to have the right number of images as the tool will use duplicates where necessary;

if you do not have suitable images to hand, leave the “Location” box empty and Expression Blend will provide some default images for you.

5 – Binding the Sample Data to the ListBox

With your sample data defined, you can now data bind it to the ListBox. Drag and drop the Collection from the Data panel to the ListBox. You will see a ToolTip similar to the one below when your drag enters the ListBox;

The ListBox will now display the sample data and you can get a good picture of what items are going to look like without any code needing to be produced;

6 – Styling the ListBox Item Template

As part of the drag-drop operation, Expression Blend has generated a data bound item template that the ListBox uses to display each item. You can alter this template to control exactly how items are displayed.

Ensure that the ListBox is selected (tip: ‘V’ key enters selection mode) and use the breadcrumb menu at the top of the design surface to edit the item template as illustrated below;

The breadcrumb at the top of the screen changes to indicate that you are editing the item template;

and the Objects and Timeline panel updates to display the template being edited;

The designer has generated four TextBlock controls and an Image arranged in a StackPanel. Renaming the generated controls makes them easier to work with (right mouse click -> Rename);

Now we have the data displayed in the ListBox, making these controls form attractive ListBox items is much more of an art than a science. A simple example follows.

1)    Use the right mouse menu to change the StackPanel into a Grid;

2)    Use the right mouse menu again to group the address and email into a StackPanel;

3)    And repeat for the name and phone number;

Drag the image to the top of the tree structure to place it behind the other content;

On the design surface, click on the blue borders on the left and top of the Grid to create a 2x2 layout as illustrated below ( you may want to zoom the design surface with the mouse wheel );

 Use the Properties panel to set the following properties on controls;

•    imgPicture: Margin (0), Horizontal & Vertical Alignment (Stretch), Width & Height (Auto), Row 0, RowSpan (2), Column (0), ColumnSpan (1), MaxWidth(144),MaxHeight(144)

•    StackPanel (Name/Phone): Margin(0), Row (1), Column (0), ColumnSpan (2), Horizontal Alignment (Right)

•    StackPanel (Address/Email): Margin(0), Row(0), Column(1), Horizontal Alignment (Right), Vertical Alignment (Stretch)

You might also like to change the TextAlignment, TextWrap and font properties on the different TextBlocks. Going further you could wrap the Grid into a Border with a BorderBrush, BorderThickness and CornerRadius and perhaps use effects such as DropShadow on some of the controls.

If you find that the ListBox item is not fully filling the width of the ListBox then there is one more setting to alter. This is somewhat hidden in that you need to alter the style of the item container that the ListBox uses to display each item. Use the breadcrumb bar to select  the ListBox itself and use the Object|Edit Additional Styles|Edit Generated Item Container|Edit a Copy menu item

Accept the default values in the dialog box raised;

And then set the HorizontalContentAlignment property to Stretch in the Style for that item container in order that each item stretches to fill the container.

Revert to the template for the ListBox item itself by navigating through the breadcrumb menu again as in;

and then;

And continue styling - after applying a Border, DropShadow and some different fonts our ListBox now looks presentable;

and although there’s still some way to go, hopefully you can see the power and flexibility that designing with data gives you.

7 – Data at Runtime

The beauty of the Silverlight system is that in order to provide real data to the ListBox that we’ve designed at runtime you need to supply a list of data to the ItemsSource property of the ListBox and that list needs to contain objects with properties Name, Address, Picture, EmailAddress, Phone. Nothing about the design of the user interface need to change, we simply swap in a live data source.

About the Author

Mike Taulty works for Microsoft’s Developer and Platform Group in the UK where he promotes and educates around the Microsoft platform and tools to the broad UK community of developers and architects. You can find Mike at http://mtaulty.com