courses I tutorials

Explore different tutorials to get hands on with Silverlight and Expression Blend across a wide array of topics in a short time.

Using SketchFlow for Windows Phone Series

In this ToolBox module you discover principles of good UX design. You also discover how to start and build your prototype using the SketchFlow Template for Windows Phone.

Adding controls and graphics to a ListBox

In this section, you will access the Rating Control that is available with the Silverlight Toolkit. You will also add the separator line inside the listbox Template.

Start editing the ItemsTemplate of the ListBox by right-clicking on the ListBox, either on the artboard or in the TopPicksPanoItem in the Objects and Timeline panel. Select Edit Additional Templates > Edit Generated Items (ItemsTemplate) > Edit Current. The content of the ListBox is ready for editing.

In the Objects and Timeline panel, there is a StackPanel. A StackPanel’s default property is to stack. This means that as long as your ListBox items are in a StackPanel, they cannot freely be repositioned.
Right-click on the StackPanel in the Objects and Timeline panel and select Change Layout Type > Canvas. You can now arrange items freely inside the canvas container.
Make sure you have the Selection tool active, and then click and drag the lower-right corner of the canvas down slightly and to the right. Notice that this is also how you control spacing between your canvas items. You want to have enough room on the right side to slide the rating information over to the right.
Select one of the TextBlocks and then Shift+click to select the other. In the Text pane, inside the Properties panel, change the text size to 22. Don’t worry about the spacing between the lines of text.
Select the TextBlock that contains the Ratings, and click and drag it over to the right side of the ListBox. Move it down slightly, if necessary.
Select the top TextBlock (With Recipe name) and then click on B (Bold) in the Text pane.

Adding the Rating Control

You will now access the Rating control and add it to the ListBox items.

Select Assets at the bottom of the Tools panel, and then type rating in the Search textbox. Select Rating.
Select the Canvas in the Objects and Timeline panel.
Double-click on the Rating control to add it to the ListBox items.
Using your Selection tool, click and drag to reposition the rating stars to the left of the number of ratings.
Reposition the ratings to be closer to the ratings control if necessary.
Select the Pen tool and click once to the right, right above the ratings stars, and then slightly below to create a hash mark, or divider. Notice that everything you do, reposition, and create in the topmost canvas is repeated throughout the ListBox.
Exit the Template by clicking on the ListBox Breadcrumb at the top of the artboard.
Press Ctrl+S, to Save this file.

Summary

In this lesson, you discovered how to add sample data and how to edit it using Visual Editor and the XAML editor. You also discovered where you can locate additional controls like Ratings, as well as how to customize your data.