Draw 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, the panel control becomes the content to which you can add multiple child objects, thus working around the limitation of a single content object.

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.

To create a content control

1. In the Tools panel on the left side of the Blend for Visual Studio 2012 application window, click Assets . In the Controls category of the Assets panel, select Button  from the list.

   The icon for the Button control appears underneath the Assets button in the Tools panel, and is selected, ready for you to add a Button to the artboard.

   提示

   The most common user interface (UI) elements (such as the Button control) are already displayed in drop-down lists underneath the Assets button so that you can add them quickly.

2. To add a button to the artboard, double-click the Tools panel 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)

   

   提示

   You can also add a control to the artboard by selecting the control in the Tools panel and then clicking the artboard and dragging your mouse to specify the bounding box of the control.

   提示

   After a UI design element, such as a Button control, is added to the artboard, it becomes an object in your application.

3. In the Assets panel, under Panels in the Controls category, select StackPanel . Double-click the icon for the StackPanel control to add it to the artboard.

4. In the Objects and Timeline panel, drag the StackPanel object onto the Button object.

   The StackPanel replaces the content string of the Button object. To see evidence of this, select [Button] in the Objects and Timeline panel, and then view the Content property in the Common Properties category of the Properties panel.

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

   

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] in the Objects and Timeline panel, 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.

   提示

   You can also resize an object on the artboard by dragging the adorners at the corners of the bounding box.

6. To make the Button object resize automatically as you resize its child object (the StackPanel object), select the Button object, and then, in the Layout category of the Properties panel, set the Width and Height properties to Auto.

7. With [StackPanel] selected in the Objects and Timeline panel, set the Orientation property in the Layout category of the Properties panel to Horizontal so that child objects in the StackPanel stack horizontally.

8. In the Objects and Timeline panel, click the [StackPanel] object to activate it so that you can add child objects.

   提示

   Unlike most UI elements, some layout panels (such as the StackPanel and Grid) can contain more than one child object. This is useful for organizing and laying out your application design. For more information, see Arranging objects.

9. From the Tools panel, select Ellipse , and then draw a circle inside the StackPanel on the artboard. Then, select TextBox  from the Tools panel and draw it inside the StackPanel. The child objects are stacked side by side from left to right because of the horizontal orientation of the containing StackPanel object. If you want to add space between the child objects, you can adjust the Margin properties of the objects in the Layout category of the Properties panel.

   Child objects added to a StackPanel object

   

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