Content Index Search
 

Create a content control

Content controls have a single content property that defines what the control will display. The content property can be as simple as a string of text or as complex as a Microsoft® .NET Framework object. If you add a layout panel control to a content control, then the panel control becomes the content to which you can add multiple child elements, thus working around the limitation of a single content element.

The following procedure shows you how to create a content control (a Button), and set its content property to a layout panel (a StackPanel). This procedure can also be used with other content controls that are listed under Types in the topic ContentControl Types on MSDN.

To create a content control

  1. In the Toolbox along the left side of Microsoft Expression® Blend, click the Asset Library button Asset Library button. In the Controls tab, click System Controls (if it is not already selected), and select Button Button control from the list.
    The icon for the Button control appears above the Asset Library button, and is selected, ready for you to add a Button to the artboard.
    Tip The most common UI elements (such as the Button control) are already displayed in drop-down lists above the Asset Library button so that you can add them quickly.
  2. To add a button to the artboard, double-click the Toolbox icon for the Button control.
    The default content of a Button is the string, "Button".

    A Button object created on the artboard at its default size and location (top-left)

    A Button object created on the artboard at its default size and location (top-left)

    Tip You can also add a control to the artboard by selecting the control in the Toolbox and then clicking on the artboard and dragging your mouse to specify the control's bounding box.
    Tip After a UI design element, such as a Button control, is added to the artboard, it becomes an object in your application.
  3. Under Objects and Timeline, double-click the Button object to make it the activated element. Notice that a yellow highlight appears around the element. Activating an object enables you to add a child element.
    Tip You can also activate an object on the artboard by first selecting the Selection tool Selection tool from the Toolbox, and then double-clicking on the object on the artboard.
  4. In the Toolbox, select the StackPanel control Stack panel, either from the Asset Library or from one of the drop-down lists of common controls. Double-click the icon for the StackPanel control to add it as a child element within the button.
    The StackPanel replaces the content string of the Button object. To see evidence of this, select [Button] under Objects and Timeline, and then view the Content property in the Common Properties category of the Properties panel.

    A StackPanel object added as a child element within a Button on the artboard

    A StackPanel object added as a child element within a Button on the artboard

  5. The StackPanel has height and width of 100, and a minimum height and width of 0, set as the default size. To make the StackPanel easier to work with, select [StackPanel] under Objects and Timeline, and then change Width to 150 pixels (or, device-independent units which are approximately 1/96 inch) and Height to 75 pixels in the Layout category of the Properties panel. Notice that the button resizes automatically as you resize its child element (StackPanel).
    Tip You can also resize an object on the artboard by clicking and dragging on the adorners at the corners of the bounding box.
  6. With [StackPanel] still selected under Objects and Timeline, set the Orientation property in the Layout category of the Properties panel to Horizontal so that child elements in the StackPanel stack horizontally. This property change will not affect the StackPanel as it is displayed on the artboard until items are added to the StackPanel.
  7. Under Objects and Timeline, double-click the [StackPanel] object in order to activate it so that you can add child elements.
    Tip Unlike most UI elements, some layout panels (such as the StackPanel and Grid) can contain more than one child element. This is useful for organizing and laying out your application design. For more information, see The layout system.
  8. From the Toolbox select the Ellipse tool Ellipse tool, and then draw a circle inside the StackPanel on the artboard. Then, select the TextBox control TextBox control from the Toolbox and draw it inside the StackPanel.
    The child elements are stacked side-by-side from left to right because of the horizontal orientation of the containing StackPanel. If you want to add space between the child elements, you can adjust the Margin properties of the elements in the Layout category of the Properties panel.

    Child objects added to a StackPanel object

    Child objects added to a StackPanel object

  9. Build your project (F5) to see the resulting application.