Share via

Create a content control

  • Article

This page applies to WPF and Silverlight 2

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). You can also use this procedure with other content controls that are listed under "Types" in the topic ContentControl Types on MSDN.

Note

Content controls are not available in Microsoft Silverlight 1.0 projects. However, you can layer objects in a Canvas layout panel, with a TextBlock object on the top, and then hook up a JavaScript event hander to make the Canvas element behave like a button or other content control. For an example, see Create a button that controls a storyboard in a Silverlight application.

To create a content control

  1. In the Toolbox along the left side of Microsoft Expression Blend, click the Asset Library Cc295336.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png button. In the Controls tab, click System Controls (if it is not already selected), and select Button Cc295336.05df1779-a68f-436b-b834-a91b7995a3ec(en-us,Expression.10).png 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 user interface (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 (upper left)

    Cc295336.38211dc1-69d4-46bd-acd2-d7f9b48102bb(en-us,Expression.10).png

    Tip

    You can also add a control to the artboard by selecting the control in the Toolbox and then clicking 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 Cc295336.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png tool from the Toolbox, and then double-clicking the object on the artboard.

  4. In the Toolbox, select the StackPanel Cc295336.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(en-us,Expression.10).png control, 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 in 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 CommonProperties category of the Properties panel.

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

    Cc295336.fb639649-9e46-4aef-960f-d0b40e9e8aff(en-us,Expression.10).png

  5. The StackPanel has a 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 that 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 dragging 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 does not affect the StackPanel because it is displayed on the artboard until items are added to the StackPanel.

  7. Under Objectsand Timeline, double-click the [StackPanel] object 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 Layout overview.

  8. From the Toolbox, select the Ellipse Cc295336.d7a04618-e35a-44f9-b78c-1f22e38016c1(en-us,Expression.10).png tool, and then draw a circle inside the StackPanel on the artboard. Then, select the TextBox Cc295336.343296b4-5c7d-4145-84cc-91b08ba67a1b(en-us,Expression.10).png 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

    Cc295336.12af719b-02a4-4334-801d-9dedeebec030(en-us,Expression.10).png

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