This is the second episode in the series: Creating a Hidden Object Game in Silverlight 3

In this episode, we will add the image for the item list and create a wrap panel with a text blocks for each item in the list. If you have not already installed the Silverlight Toolkit, you will need to download and install it. This project is using the Silverlight 3 Toolkit July 2009 Installer.

I found an image of a whiteboard and did some cropping, removed the background, and saved it as a PNG. This was added to the Images folder.

Drag the image to the bottom center of the canvas and resize it to 328×205 and position it at 202, 395.

Now it is time to add the WrapPanel and position it on top of the whiteboard image:

• Go to the Assets tab
• Select Controls
• Scroll down until you find the WrapPanel control and select it

Now you can draw the WrapPanel over the whiteboard image. If you go to the Projects tab and open the References folder you will notice that the following references have been added:

• System.Windows.Controls.dll
• System.Windows.Controls.Toolkit.dll

Before we start adding TextBlock controls to the WrapPanel, lets create a style called WhiteboardText and add it to the Application.Resources section of App.xaml:

<Style x:Key="WhiteboardText" TargetType="TextBlock">
 <Setter Property="Foreground" Value="#FFB11111"/>
 <Setter Property="FontFamily" Value="Comic Sans MS"/>
 <Setter Property="FontSize" Value="16"/>
 <Setter Property="Margin" Value="10,15,10,0"/>
</Style>

To keep the Image and WrapPanel together, select both in the tree and from the context menu pick Group Into > Canvas:

Select the WrapPanel in the tree, select the TextBlock tool in the Tools panel and double-click the canvas. This will add a TextBlock control as a child of the WrapPanel. Make sure the Width and Height properties are set to Auto. In the Miscellaneous group click the peg to the right of the textbox and pick Local Resources > WhiteboardText. We will now copy that TextBlock and paste it 12 more times so that the WrapPanel has a total of 13 items. For each TextBlock, change the Text and Name properties based on this list of items:

• Stapler
• Idol
• Candies
• Ball
• Tape
• Eeyore
• Pencil
• Tigger
• Business Cards
• Learning WCF
• Rock
• Dog
• Post Its

So for the first TextBlock the Text is “Stapler” and the Name is staplerText. When I copied and pasted the TextBlock in the tree, it added a Margin property to the 12 items pasted. Since that property is contained in WhiteboardText I did a quick manual clean-up of the xaml. The hidden object game now looks like this:

In the next episode, we will use the ChangePropertyAction to mark items off the list when we select them as well as the PlaySoundAction.