Add and style the cards

This topic shows you how to style the images to resemble game cards by creating card templates (the cardTemplate control).

The following are the card templates for the project:

• BackOfCardRect   This is the back of a face-down card.

• FrostedRect   This is a frosted overlay on a matched card.

• FrameRect   This is the frame around a card that is face-up but not matched.

To create the container for the face-down cards

1. In the Project panel, right-click Memory, and then click Add New Item.

2. In the Add New Item dialog box, select User Control. In the Name text box, type CardTemplate.xaml. Click OK.

   

3. In the Objects and Timeline panel, select Grid. In the Properties panel, in the Layout category, in the Width text box, type 150. Repeat for Height. Press Enter.

To simplify data binding

1. In the Objects and Timeline panel, select Grid. In the Properties panel, in the Common category, click New next to DataContext.

2. In the Select Object window, expand Memory, and then expand MemoryClassLibrary. Select Card and click OK.

   

3. In the Properties panel, in the Common category, click Advanced Options  next to DataContext (Card).

4. Click Custom Expression.

5. In the Custom Expression dialog box, paste the following code

   {d:DesignInstance MemoryClassLibrary:Card, IsDesignTimeCreatable=True}
   

   Press Enter.

6. In the top right of the document window, click Split .

7. In the Code editor, locate the following:

   DataContext="{d:DesignInstance MemoryClassLibrary:Card, IsDesignTimeCreatable=True}" 
   

8. Add d: before DataContent so that the code looks like the following:

   d:DataContext="{d:DesignInstance MemoryClassLibrary:Card, IsDesignTimeCreatable=True}" 
   

9. Switch back to Design view by clicking the Design button in the top right of the document window.

To create the face-down card

1. In the Tools panel, double-click Rectangle to add it to Grid.

2. To reset the default properties, in the Objects and Timeline panel, right-click Rectangle, point to Reset Layout, and then click All.

3. In the Properties panel, in the Brush category, click Fill.

4. In the color Editor, in the Hex value text box, type #FFFF0000. Press Enter.

5. To create round corners for the cards, you must add a corner radius. To do this, make sure that Rectangle is still selected. Then, in the Properties panel, in the Appearance category, set the following:

   • RadiusX   40.

   • RadiusY   20.

6. In the Objects and Timeline panel, double-click Rectangle and then type BackOfCardRect. Press Enter.

   Tip

   You can also modify the corner radius of a rectangle by selecting the rectangle on the artboard, and then dragging the corner radius handles at the corners of the rectangle.

The next section shows you how to add an Image control. The template you just created represents the image on the card face. The template displays the image. To display the image, you have to add an Image element to the root Grid and modify the Source property.

To add an image

1. In the Tools panel, click Assets . In the Assets panel, in the Search text box, type Image, Click Image in the search results to activate it in the Tools panel, and then double-click it again in the Tools panel to add it to the Grid.

2. In the Objects and Timeline panel, right-click Image, click Reset Layout, and then click All.

To bind the Image source property

1. Click Image in the Objects and Timeline panel. In the Properties panel, in the Common category, click Advanced Options  next to Source.

2. Click Create Data Binding.

3. In the Create Data Binding for [Image].Source, under Binding type, verify that Data context is selected.

4. Under Path select ImageUri: (String). Click OK.

   

5. In the Properties panel, in the Common category, next to Stretch, select UniformToFill from the drop-down list.

To create a frosted overlay card

1. In the Tools panel, double-click Rectangle to add it to the root Grid.

2. To reset the default properties, in the Objects and Timeline panel, right-click Rectangle, click Reset Layout, and then click All.

3. Right-click Rectangle, and then click Rename. Type FrostedRect. Press Enter.

4. In the Properties panel, in the Brush category, click Fill. Set the following properties:

   • Fill   In the color Editor, in the Hex value text box, type #40000000. Press Enter.

   • Stroke   Below the Fill property, click the Stroke property. In the color Editor, in the Hex value text box, type White. Press Enter.

   • StrokeThickness   In the Appearance category, in the StrokeThickness text box, type 5. Press Enter.

   • Opacity   In the Appearance category, in the Opacity text box, type 0. Press Enter.

To create the frame

1. In the Tools panel, double-click Rectangle to add it to the root Grid.

2. In the Objects and Timeline panel, right-click Rectangle, and then click Rename. Type FrameRect. Press Enter.

3. In the Objects and Timeline panel, right-click Rectangle, click Reset Layout, and then click All.

4. In the Properties panel, in the Brush category, set the properties:

   • Fill   Select Fill property and then click No brush  under Stroke.

   • Stroke   Click Stroke. In the color Editor, in the Hex value text box, type orange. Press Enter.

   • StrokeThickness   In the Appearance category, in the StrokeThickness text box, type 5. Press Enter.

To add rounded corners

1. Note

   Only complete the following steps if the two elements FrostedRect and FrameRect do not have rounded corners. When you created the first rectangle (BackOfCard) above and set its corners to rounded, Blend will always remember these properties for this control type until you change the properties.

   Hold down Ctrl and, in the Objects and Timeline panel, click FrostedRect and FrameRect.

2. In the Properties panel, in the Appearance text field, set the following properties:

   • RadiusX   40

   • RadiusY   20

The next step: Add animation to your app.