Partager via

Draw a content control

  • Article

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 JJ170353.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,VS.110).png. In the Controls category of the Assets panel, select Button JJ170353.05df1779-a68f-436b-b834-a91b7995a3ec(fr-fr,VS.110).png 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.

    ConseilConseil

    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)

    JJ170353.38211dc1-69d4-46bd-acd2-d7f9b48102bb(fr-fr,VS.110).png

    ConseilConseil

    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.
    ConseilConseil

    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 JJ170353.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(fr-fr,VS.110).png. 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 CommonProperties category of the Properties panel.

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

    JJ170353.B4_controls_stackpanel_in_button(fr-fr,VS.110).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] 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.

    ConseilConseil

    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.

    ConseilConseil

    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 JJ170353.d7a04618-e35a-44f9-b78c-1f22e38016c1(fr-fr,VS.110).png, and then draw a circle inside the StackPanel on the artboard. Then, select TextBox JJ170353.343296b4-5c7d-4145-84cc-91b08ba67a1b(fr-fr,VS.110).png 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

    JJ170353.B4_controls_stackpanel_children(fr-fr,VS.110).png

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