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
- In the Toolbox along the left side of Microsoft
Expression® Blend, click the Asset Library button .
In the Controls tab, click System Controls (if it is not already selected),
and select Button
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.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. - 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)
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. After a UI design element, such as a Button control, is added to the artboard, it becomes an object in your application. - 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.
You can also activate an object on the artboard by first selecting the Selection tool from the Toolbox, and then double-clicking on the object on the artboard. - In the Toolbox, select the StackPanel
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 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
- 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).
You can also resize an object on the artboard by clicking and dragging on the adorners at the corners of the bounding box. - 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.
- Under Objects and Timeline, double-click the
[StackPanel] object in order to activate it so that you can add
child elements.
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. - From the Toolbox select the Ellipse tool ,
and then draw a circle inside the StackPanel on the artboard.
Then, select the 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
- Build your project (F5) to see the resulting application.