Create an items control

Items controls have an Items property that can contain a collection of child elements. You can add child elements 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 elements 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 under Objects and Timeline 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 elements 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.

Note

Items controls are not available in Microsoft Silverlight 1.0 projects. However, you can layer TextBlock objects in a Canvas layout panel, and then hook up a JavaScript event hander to make the items appear or disappear. For information about JavaScript, see Silverlight scripting and mouse events.

To create an items control

1. In the Toolbox along the left side of Expression Blend, click the Asset Library  button. In the Controls tab, click System Controls (if it is not already selected), and select ListBox  from the list. The icon for the ListBox control appears above the Asset Library button, and is selected, ready for you to add a ListBox to the artboard.

   Tip

   The most common user interface (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.

2. To add a button to the artboard, double-click the Toolbox icon for the ListBox control.

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

   

   Tip

   You can also add a control to the artboard by selecting the control in the Toolbox and then clicking the artboard and dragging your mouse to specify the control's bounding box.

   Tip

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

3. Under Objects and Timeline, double-click the ListBox 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.

   Tip

   You can also activate an object on the artboard by first selecting the Selection  tool from the Toolbox, and then double-clicking the object on the artboard.

4. Draw several shapes into the ListBox using elements from the Toolbox such as the TextBlock , Button , or Rectangle . Notice how the list arranges these child elements in a vertical stack.

   Child objects added to a ListBox object

   

   Note

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

   Tip

   You can reorder elements in the list by dragging and dropping the objects under Objects and Timeline, or select the Selection  tool 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 the Edit items in this collection  button next to the Items (Collection) property in the Properties Panel.

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