Fabrikam Catalog Part 2: Control Templates

Home > Samples and Tutorials Gallery - Expression Blend > Fabrikam catalog part 2: Control templates

 

Download the sample project files for the RC build of Expression Blend

• FabrikamCatalogControlTemplates.zip

Fabrikam Catalog Part 2: Control Templates

Visually styling an interactive product catalog by using Microsoft® Expression Blend™

Contents

• Overview
• Features that you will learn about in this tutorial
• Task 1: Opening and saving the sample project
• Task 2: Styling the background
• Task 3: Styling the master and details panes using a control template
• Where to go from here

Overview

The finished project

This tutorial shows you how to take an existing Microsoft® Expression® Blend project for a very ordinary looking product catalog and develop the project into the styled version of the catalog shown in the preceding screenshot. This tutorial starts from a pre-built project that you can download from FabrikamCatalogLayoutAndData.zip. If you have completed the tutorial Fabrikam catalog part 1: Layout and data, you can use the project that you created in that tutorial.

At the completion of this tutorial, your finished project will display—in two adjacent panes—a catalog of the products that are manufactured by the fictitious company Fabrikam. The left pane, called the master pane, will contain the product list. Whenever you select a product in this pane, the details about that product are displayed in the right pane, called the details pane. Expression Blend uses data synchronization to update the content of one pane when an element is selected in another pane. Data synchronization is covered in the tutorial Fabrikam catalog part 1: Layout and data.

If you want to work through this tutorial while looking at an example of the completed project, you can open a second instance of Expression Blend and view the FabrikamCatalogControlTemplates sample project which you can download from FabrikamCatalogControlTemplates.zip.

• Back to top

Features that you will learn about in this tutorial

• Styling elements
• Editing a control template
• Using the ContentControl control
• Using the Properties panel
• Using the Brush Transform tool

• Back to top

Task 1: Opening and saving the sample project

1. Download the sample project from FabrikamCatalogLayoutAndData.zip. If you completed the tutorial Fabrikam catalog part 1: Layout and data, you can use the project that you created in that tutorial.
2. Open the project in Expression Blend.

   If you previously had a project open, you might first see a dialog box asking whether you want to save or discard your current project before opening the sample project.

3. Press F5 to make sure that your project builds and runs before you continue with the steps in this tutorial. 

   As you work in Expression Blend, your changes take place in memory and not on your hard disk, so be sure to save often.

• Back to top

Task 2: Styling the background

The following procedure shows you how to set and alter the background color of your project to create an appealing effect.

1. Under Objects and Timeline in the Interaction panel, click LayoutRoot to select it.
   Notice that when you select the element, its background color changes, and a blue bounding outline appears on the artboard to identify the area of the document root.

   When you want to change the properties of an element, click the element name once under Objects and Timeline. This action is called selection. The selected element is identified by a highlighted background color.When you want to add child elements to an element, double-click the parent element under Objects and Timeline and then add the child element. This action is called activating. The activated element is identified by a yellow bounding box around the element name.You can select an element without activating it.

2. Under Brushes in the Properties panel, select the Background property from the list of properties and look at the property's current settings.
   Below the Background and OpacityMask properties is a bank of brush types that can be used to paint the background of the LayoutRoot element. Currently, the No Brush  icon is selected.

3. Click Gradient Brush to change the brush type.
   Notice that the following three things happen:

   • A default linear-gradient brush is created and is painted onto the background of LayoutRoot.
   • A color selector appears below the brush types.
   • A gradient-stop slider bar appears under the color selector.

4. With the Background property still selected under Brushes in the Properties panel, select Brush Transform from the Toolbox. You will use this tool to rotate and resize the gradient brush.
   When you select Brush Transform, a gradient direction adorner appears on the artboard in the form of a blue arrow.

   To be able to see the handles of the brush transform, you might have to zoom out the artboard. To zoom out, enter a zoom value in the text box at the bottom of the artboard , click the arrow next to the zoom value, or rotate your mouse wheel while holding down CTRL.

   To undo any changes in Expression Blend, you can press CTRL+Z. Alternately, you can click Undo on the Edit menu . The Undo menu item will include a brief statement about the specific step that it will undo. You can undo an unlimited number of steps in Expression Blend, but your undo history is cleared every time you build your application.

   A close-up view of Brush Transform handles

5. To rotate the brush, move your pointer over the head or the tail of the gradient direction arrow until the pointer indicates rotation . Hold down SHIFT and drag the arrow to rotate it so that the tail is at the 12:00 position and the head is at the 6:00 position.
   Holding down SHIFT constrains the angle of rotation to 15-degree increments.
   Notice that the gradient arrow now extends beyond the top and bottom boundaries of  LayoutRoot. This means that the background of LayoutRoot is only using the middle range of the gradient-stop slider under Brushes in the Properties panel, and is unaffected by the gradient color at either end of the slider.

6. To adjust the gradient range that is applied to the background of LayoutRoot, click and drag the head of the arrow so that it ends at the bottom boundary of LayoutRoot. Likewise, drag the tail of the arrow to the edge of the top boundary.
   The entire range of the gradient-stop slider is now applied to the background of LayoutRoot.

   You can create interesting effects by using different combinations of brushes, gradients, and brush options. For example, you can create a corrugated appearance by first making the gradient direction arrow shorter than the element it is set on, and then repeating the brush by clicking Options under Brushes in the Properties panel and then clicking Repeat. For the purposes of this tutorial, use just the simple gradient brush.

7. Under Brushes in the Properties panel, drag the white gradient stop to the left by approximately one-third the length of the gradient-stop slider.
   This moves the center concentration of the white brush.

8. On the gradient-stop slider, click the far right end to create a new gradient stop. Use the color selector above the gradient slider to set the color of this gradient stop to black.

   If you need to delete a gradient stop, just drag it downward off the gradient-stop slider.

   The gradient-stop slider showing the position of the three gradient stops that are mentioned in Step 8. (Two of the gradient stops occur on the slider by default.)

9. Your final gradient-stop slider should appear as shown in the preceding screenshot. The background of LayoutRoot should reflect the attributes of the gradient stop.

• Back to top

Task 3: Styling the master and details panes using a control template

The following procedure shows you how to give your project a distinctive look, consisting of rounded rectangles that have a black-to-blue gradient background and a shiny highlight. Because the master pane and the details pane use the same kind of element (a ContentControl ), you can design a generic look, or template, for ContentControl elements and then apply this template to both panes.

To create a control template, you will first define the look for the ContentControl element of one of the panes. The control template will then be stored in your application’s resource dictionary so that it can be used by the control for the other pane. 

A ContentControl is similar to a picture frame, with content presented inside the frame. Like with a picture frame, the look of a ContentControl (the frame) is separate from the look of the frame’s content. In the case of the master pane, the content is a ListBox; the content of the details pane is a Grid, inside of which are TextBlock elements and an Image.

1. Under Objects and Timeline, right-click the ContentControl named MasterPane. In the context menu that appears, point to Edit Control Parts (Template) , and then click Edit a Copy.
   The Create Style Resource dialog box appears.

2. In the Resource Name (Key) field of the Create Style Resource dialog box, in the text box next to the first radio button, type PanelTemplate.
   This sets a name for your template in the resource dictionary so you can set it as the template for any ContentControl element.

3. In the Define in field, select the This document radio button and make sure that Window: Window is selected in the drop-down list.
   The Define in field indicates which resource dictionary to define your new template in. Selecting Window: Window means this template will be visible to all controls in the window.

4. Click OK.
   You have now copied the default control template of all ContentControl elements (because MasterPane is a ContentControl element) and have saved the copy as a new ControlTemplate named PanelTemplate. The new template has been placed in the resource dictionary, which you can view in the Window node of the Resources panel.
   With the creation of a new template, Expression Blend enters a mode in which you can view and edit the new template. Under Objects and Timeline, the word Template above the new element tree indicates the current scope in which you are editing.

   To exit the template-editing mode and return to the scope of your document, click the Scope Up button which is above the element tree next to the word Template.To return to template editing mode for an existing template, right-click the element whose template you want to edit under Objects and Timeline (in this case, the MasterPane element), click Edit Control Parts (Template) , and then click Edit Template.

5. On the artboard, the template has a yellow highlighted border. There is also a yellow border around the Template element under Objects and Timeline, indicating that the template is activated. In Task 3 you learned that activating an element means that any new elements you create become children of the containing element.
   The control template contains a ContentPresenter element, which is a special placeholder for the contents of whatever ContentControl element uses this template. For example, after you apply this template to the DetailsPane element, which you will do later in this tutorial, the contents of the DetailsPane will appear in the area of the ContentPresenter element.

6. Under Objects and Timeline, select the ContentPresenter element and delete it.
   The content, which is a ListBox in the case of our MasterPane, disappears from the artboard. The content still exists, but the ContentPresenter element is required to present it. After you add a new ContentPresenter control here (a later step in this tutorial), your content will reappear.

7. In the Toolbox, double-click Grid to add a new Grid control ( [Grid] ) to the template. Remember that the Template element must be activated for the new Grid to become a child element.

   If you do not see the Grid control in the Toolbox, you can locate it by right-clicking the arrow in the bottom right corner of the fourth tool from the bottom of the Toolbox. If you cannot find the Grid control this way, you can click the Asset Library button to see the list of available assets, and then select the Show All check box. After you select a control from this gallery, its icon will appear in the Toolbox above the Asset Library button.

   Double-clicking a control in the Toolbox will cause the control to entirely fill the area of the containing control. Alternately, you can select the control in the Toolbox (by clicking it once) and then click and drag on the artboard to draw it where you would like it to be located.

   When you add new elements to your application, they are initially unnamed, but are identified by the type of the element in square brackets ([]). You can change the name of an element to help you to keep things organized if you have more than one element of the same type. You only need to name the element if you will need to refer to it from somewhere else in your application, like from a code file (.cs or .vb).

8. Under Objects and Timeline, activate the [Grid] element by double-clicking it.

9. With the [Grid] element activated, select Rectangle in the Toolbox, and then draw a new Rectangle inside the [Grid] control on the artboard.

   The Grid control and most of the other panels are unique in that, unlike other elements, they can contain more than one child element. Additionally, with panels, and you can use the special layout features of each panel to position the child elements in various ways.

10. With the [Rectangle] element selected under Objects and Timeline, change the properties under Layout in the Properties panel to the following:

    • Set the Width and Height properties to Auto (if they are not already set to Auto) by clicking the Set to Auto button .
      This configures the rectangle to resize according to alignment and margin properties. Also, if this was a panel control instead of a Rectangle, then setting the Height and Width properties to Auto would configure the control to resize according to the size requirements of the child elements.
    • Set the HorizontalAlignment and VerticalAlignment properties to Stretch (if they are not already set to Stretch).
      This configures the rectangle to fill the containing element ( [Grid] ), while respecting the Margin properties.
    • Set the Margin property to the default (all zeros) by clicking the Property Marker and selecting Reset.
      This configures the edges of the rectangle to line up with the edges of the containing element ( [Grid] ).

11. With [Rectangle] selected under Objects and Timeline, change the properties under Brushes in the Properties panel to the following:

    • Set the Fill property to a Gradient Brush and change the white gradient stop to blue. Use the Brush Transform tool, as you did earlier in Task 3 of this tutorial, to rotate the brush so that the black gradient is at the top of the rectangle.
    • Set the Stroke property to No Brush.
      This means that no border is drawn for the rectangle.

12. In the Toolbox, click the Selection tool.
    The Selection tool allows you to make changes to the layout of selected controls on the artboard.

13. With [Rectangle] selected under Objects and Timeline, pause your pointer over a corner of the rectangle on the artboard. The mouse pointer changes, depending on the following actions that you can perform:

    • A double-ended diagonal arrow means that you can scale the rectangle.
    • A curved double-ended arrow means that you can rotate the rectangle.
    • Two crossed double-ended arrows means that you can move the rectangle.
    • A rounded square means that you can round the corners of the rectangle.

    When you see the rounded square, click and drag your mouse to increase the radius angle of the corners.
    This updates the value of the RadiusX and RadiusY properties under Appearance in the Properties panel. Alternatively, to round the corners of your rectangle, you can manually change the values in the RadiusX and RadiusY text boxes. Any change on the artboard results in a property change.

14. With [Grid] activated under Objects and Timeline, select Rectangle in the Toolbox and draw another rectangle, inside of and slightly smaller than the first rectangle. The second rectangle will already have rounded corners and a rotated gradient brush like the last rectangle you made.

    When you draw the second rectangle, you might find that you can not resize it exactly as you would like. This might be due to snapping. Snapping is useful for lining up elements on the artboard, but it does not allow for fine control. To turn off snapping, click Options on the Tools menu, and then clear the Snap to snaplines check box in the Artboard controls. Alternatively, you can use the buttons at the bottom of the artboard. If you do not want to turn off snapping but you still want fine control, you can instead manually alter the Margin properties of the rectangle under Layout in the Properties panel, or you can hold down the S key while resizing.

    Notice that the second rectangle that you added now appears under Objects and Timeline above the first rectangle. The higher the element in this list, the further forward the element will be displayed on the artboard, covering up elements that are lower in the list.

15. Click on the name of the second rectangle under Objects and Timeline until the name becomes editable. Change the name to Hightlight so that you can identify it easier.

16. With the Highlight rectangle selected under Objects and Timeline, change the properties under Brushes in the Properties panel to the following:

    • Make sure that the Fill property is set to a Gradient Brush, and make both gradient stops white.
    • Set the Alpha of the right gradient stop to 0.
      This makes the bottom of the brush transparent.
    • Make sure that the Stroke property is set to No Brush.
      This makes the border of the rectangle invisible.
    • Move the right gradient stop closer to the left stop, as shown in the following image.
      This produces a convex visual effect.

    The gradient slider showing stops.

17. To see your results clearly on the artboard without the yellow borders and blue bounding outlines, you can activate the Template node under Objects and Timeline. After doing so, you can still select the rectangles to make additional changes.

18. With [Grid] activated under Objects and Timeline, click the Asset Library button in the Toolbox, and then choose the ContentPresenter control from the Controls tab of the Asset Library. The ContentPresenter icon then appears above the Asset Library button in the Toolbox. Double-click the ContentPresenter control to add the control inside your [Grid] .
    This restores the content from the MasterPane element.

    You can use the search text box in the top left corner of the Asset Library to quickly find available assets. Type in a portion of the asset name to filter the list that is displayed. Remember to clear the search text box when you done. The assets will remain filtered by whatever is typed into the search text box until it is cleared. To clear the search text box , click the Clear button.

19. Resize the ContentPresenter element by using your mouse on the artboard or by using the Margin properties under Layout in the Properties panel. Position the control just below the white part of the Highlight rectangle.

    Remember that you are not actually laying out a ListBox here. You are laying out a ContentPresenter. When you apply this template to another ContentControl, the content of the other control—no matter what that is—will be laid out this same way.

20. You are now done editing PanelTemplate. Exit template editing mode by clicking Scope Up under Objects and Timeline.
    This returns you to the scope of your document.

    Expression Blend wraps control templates in Style elements and stores them in your resource dictionary. You can see the results of this best by clicking on the XAML tab of the artboard. At the top of your file, inside the <Window.Resources> section, you will see a <Style TargetType="{x:Type ContentControl}" x:Key="PanelTemplate"> section. Remember to return to Design view when you are finished viewing the XAML.

21. Under Objects and Timeline, select the DetailsPane element. In the Object menu, click Edit Style, Apply Resource, then click PanelTemplate.
    This applies your PanelTemplate to the DetailsPane control.

    If you are curious to see the results of the action described in the previous step, right-click DetailsPane under Objects and Timeline and click View XAML. This switches your artboard to the XAML view with the DetailsPane code highlighted. To see it better, click Window and click Hide Panels (F4 or TAB). The following attribute has been added to the opening <ContentControl x:Name="DetailsPane"...> element: Style="{DynamicResource PanelTemplate}" When you are finished looking at the XAML, remember to switch back to Design view and restore the panels (F4 or TAB).

22. Expand the MasterPane element under Objects and Timeline to view the child elements and select the MasterList element. With MasterList selected under Objects and Timeline, change the properties under Brushes in the Properties panel to the following:

    • Set the Background property to No Brush.
    • Set the BorderBrush property to No Brush.
    • Set the Foreground property to Solid Color Brush and set the color to white.

23. Under Objects and Timeline, expand the MainGrid, DetailsPane, and DetailsGrid elements.
    The DetailsGrid element contains the image, price, and description for the product that is selected in the MasterList of the MasterPane.

24. Under Objects and Timeline, select the ProductPrice element, and then hold down the Ctrl key while you select the ProductDescription elements.

    Holding down CTRL allows you to select multiple elements under Objects and Timeline so that you can change properties on all of the selected elements at the same time.

25. Under Brushes in the Properties panel, set the Foreground property to Solid Color Brush, and set the color to white.

    In the last few steps, you set the Foreground property of three elements (MasterList, ProductDescription, and ProductPrice) to white. You might wonder why you could not set this property in the control template that is used by these controls. As mentioned earlier in this tutorial, the control template applies to the control and not to its content.

26. On the Project menu, click Test Project (F5) to see your new visuals in action.
    The text "Build started..." appears at the bottom of the artboard. After building, the application will open in a separate window. If there is a build error, it will be displayed in the Results panel of Expression Blend.
    Selecting Test Project  gives you the opportunity to test your application by resizing the window and clicking items in the MasterPane.
    You might notice that when you make the window larger, your highlight starts to grow into the contents of the MasterList.

27. Close your application window and return to your project in Expression Blend.

28. Under Objects and Timeline, right-click MasterPane, click Edit Control Parts (Template) , and then click Edit Template.
    Expression Blend re-enters template-editing mode, with PanelTemplate loaded because that is the template that MasterPane uses.

29. With the Highlight rectangle selected under Objects and Timeline, change the properties under Layout in the Properties panel to the following:

    • Set the VerticalAlignment property to Top .
      This keeps the rectangle at the top of the [Grid] element. However, the rectangle is no longer stretching from top to bottom, and since Height is set to Auto instead of a numerical value, both ends of the rectangle overlap one another at the top.
    • Set the Height property to 50.
      This sets the height of the rectangle to a fixed size. Resizing the window of your built application will now no longer affect the height of the Highlight recta rectangle.

30. If your highlight is too thin, move the right gradient stop under Brushes in the Properties panel farther to the right.

31. Test your application again (F5) to see if there are any other changes that you want to make to the layout.

32. Save your project and your file.

• Back to top

Where to go from here

• Add animation to your project by completing the tutorial Fabrikam catalog part 3: Special effects.
• Learn about data binding by completing the tutorial Fabrikam catalog part 1: Layout and data.
• Learn about using CLR data sources by completing the tutorial AdventureWorks product photos.

• Back to top

Comments

• Anonymous
  March 04, 2006
  To view a sample or tutorial, click on one of thumbnails or links below. Some samples also have supporting...

• Anonymous
  March 19, 2007
  PingBack from http://blogs.msdn.com/expression/pages/fabrikam-catalog-part-2-control-templates.aspx

• Anonymous
  May 28, 2008
  A lot of thanks for details instructions.

• Anonymous
  June 25, 2008
  I agree, thank you for the clear, easy to follow instructions.  The tutorials have been very helpful.

• Anonymous
  July 15, 2008
  Nice example, but I was having problems keeping the objects from scaling out of the containers.

• Anonymous
  August 01, 2008
  The comment has been removed

• Anonymous
  January 12, 2009
  This tutorial is really good.But when i drag the contentpresenter in grid i get the white backgound contentprensenter,i couldn't edit its background.So could anybody tell me how to solve this problem

• Anonymous
  May 20, 2009
  I am unable to download the zip files. It seems that the link is broken.