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.

Customization of ListBox

In this section, you will create a customized items template.

Right-click on the ListBox you just created and select Edit Additional Templates > Edit Generated Items (ItemTemplate) > Edit Current.
Expand the StackPanel to reveal its contents, and select the topmost TextBlock, and then Shift+click on the Image and the other TextBlock.
Right-click and select Group Into > Canvas.
Right-click on the StackPanel and select Change Layout Type > Border. A border container offers the capability of having a stroke around the container. Since a border container can only hold one object, you converted your group of objects into one canvas.
Select the Border in the Objects and Timeline, and then bring forward the Properties panel.
Select BorderBrush in the Brushes pane, then select Solid color brush and select a black color.
In the BorderThickness section, add a value of 1 in for all four sides.
Switch to the Zoom tool, by selecting it in the Toolbar, or by pressing the ‘Z’ key. Click and drag around the first item in the ListBox. This zooms you into that area of the artboard only.
Select the Selection tool, and then right-click on the image and select Auto Size > Fill.
Select the Properties tab and scroll down until you see the Common Properties pane. Change the Stretch from Uniform to UniformToFill. The recipe name is covered, but that will change in the next few steps.
Since the order of items in the Objects and Timeline defaults to show the topmost item at the bottom of the stacking order, you will need to click and drag the recipe name TextBlock beneath the image object. Click and drag the TextBlock down underneath the Image object in the Objects and Timeline panel.
With the Selection tool, grab the middle-right handle of the TextBlock and pull it in towards the left. The text is set to NoWrap as a default, so it is not going to reflow at this time.
With the recipe name TextBlock still selected, choose the Show advanced properties button at the bottom of the Text panel in the Properties panel and change TextWrapping to Wrap.
Right-click on the TextBlock that contains the recipe name and select Group Into > Canvas.
Double-click on the newly create canvas and rename it RecipeName.
With the RecipeName canvas still selected, choose Background in the Brushes pane, in the Properties panel, and then click on Solid color brush. Select a white color, or type #FFFFFFFF into the Hexadecimal textbox.
Note: Keep in mind that the first two values in the Hexadecimal number represent the transparency value in the background.
Using the Selection tool, adjust the right side of the RecipeName canvas so that it expands to the right side of the image.
Expand the RecipeName canvas to select the TextBlock inside of it.
Press the right arrow key (on your keyboard) a couple of times to nudge the TextBlock in from the left edge.
Select the RecipeName canvas and using the Selection tool, click and drag the canvas to cover the lower portion of the image. The TextBlocks for the Recipe name and the tie are stacked on top of each other, but you will correct that in the next section.