Export (0) Print
Expand All

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 Microsoft Expression Blend 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.

For more information, see Using the StackPanel layout panel.

  1. In the Tools panel along the left side of Expression Blend, click Assets Cc294882.0d8b8d29-1af9-418f-8741-be3097d76eab(en-us,Expression.30).png. In the Controls category, select ListBox Cc294882.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(en-us,Expression.30).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.

    Cc294882.alert_tip(en-us,Expression.30).gifTip:

    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)
    Cc294882.cd6e2b8c-8640-474d-81b3-5c476113947a(en-us,Expression.30).png
    Cc294882.alert_tip(en-us,Expression.30).gifTip:

    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.

    Cc294882.alert_tip(en-us,Expression.30).gifTip:

    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. Notice that a yellow highlight appears around the object. Activating an object enables you to add a child object.

    Cc294882.alert_tip(en-us,Expression.30).gifTip:

    You can also activate an object on the artboard by first selecting Selection Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).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 Cc294882.42165963-00f7-4a33-abcd-b0849edebada(en-us,Expression.30).png, Button Cc294882.05df1779-a68f-436b-b834-a91b7995a3ec(en-us,Expression.30).png, or Rectangle Cc294882.ae750268-92e8-403a-9e07-b662da4e9e1e(en-us,Expression.30).png. Notice how the list arranges these child objects in a vertical stack.

    Child objects added to a ListBox object
    Cc294882.926bd9e5-e1d9-47a3-a37a-33cd351984b4(en-us,Expression.30).png
    Cc294882.alert_note(en-us,Expression.30).gifNote:

    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.

    Cc294882.alert_tip(en-us,Expression.30).gifTip:

    You can reorder objects in the list by dragging and dropping the objects in the Objects and Timeline panel, or select Selection Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).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 Cc294882.3f9fe48b-caf8-4989-8a91-017ba1e0cb77(en-us,Expression.30).png next to the Items (Collection) property in the Properties Panel.

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

Community Additions

ADD
Show:
© 2014 Microsoft