Draw an items control

  • [アーティクル]

Items controls have an Items property that can contain a collection of child objects. You can add child objects of any type to the items collection, or you can display an array of items from a data source by using data binding. Items controls have no content property and no header property. Child objects are added into the items host of the items control, which, for a ListBox, is a Stack panel that arranges the items in a vertical stack. You will not see the items host in the Objects and Timeline panel in Blend for Visual Studio 2012 unless you are editing the template of the items control.

The following procedure shows you how to create an items control (a ListBox) and add objects to the items collection. You can use this procedure with other items controls that are listed under "Types" in the topic ItemsControl Types on MSDN.

If you want to display an array of items from a data source, see the topic Try it: Create an RSS news reader in Blend.

For more information, see Using the StackPanel layout panel.

To create an items control

  1. In the Tools panel along the left side of Blend, click Assets JJ171010.0d8b8d29-1af9-418f-8741-be3097d76eab(ja-jp,VS.110).png. In the Controls category, select ListBox JJ171010.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ja-jp,VS.110).png from the list. The icon for the ListBox control appears underneath the Assets button, and is selected, ready for you to add a ListBox 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 ListBox control.

    A ListBox object created on the artboard at its default size and location (upper left)

    JJ171010.cd6e2b8c-8640-474d-81b3-5c476113947a(ja-jp,VS.110).png

    ヒントヒント

    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 control's bounding box.
    ヒントヒント

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

  3. In the Objects and Timeline panel, click the ListBox object to make it the activated object. Activating an object enables you to add a child object.

    ヒントヒント

    You can also activate an object on the artboard by first selecting Selection JJ171010.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,VS.110).png from the Tools panel, and then double-clicking the object on the artboard.

  4. Draw several shapes into the ListBox using objects from the Tools panel such as TextBlock JJ171010.42165963-00f7-4a33-abcd-b0849edebada(ja-jp,VS.110).png, Button JJ171010.05df1779-a68f-436b-b834-a91b7995a3ec(ja-jp,VS.110).png, or Rectangle JJ171010.ae750268-92e8-403a-9e07-b662da4e9e1e(ja-jp,VS.110).png. Notice how the list arranges these child objects in a vertical stack.

    Child objects added to a ListBox object

    JJ171010.B4_controls_listbox_children(ja-jp,VS.110).png

    [!メモ]

    If you add more objects than will fit into the items control, then a scrollbar appears when you run your application. This lets you view the extra objects.

    ヒントヒント

    You can reorder objects in the list by dragging and dropping the objects in the Objects and Timeline panel, or select Selection JJ171010.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,VS.110).png to drag them to the artboard.

  5. You can view the items in your ListBox and add others in the Collection Editor window. To open the Collection Editor, click Edit items in this collection JJ171010.3f9fe48b-caf8-4989-8a91-017ba1e0cb77(ja-jp,VS.110).png next to the Items (Collection) property in the Properties Panel.

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