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, in the case of 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 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. This procedure can also be used 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 Creating an RSS news reader in this User Guide.
To create an items control
- In the Toolbox along the left side of Microsoft
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.
The most common 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.
- To add a button to the artboard, double-click
the Toolbox icon for the
A ListBox object created on the artboard at its default size and location (top-left)
You can also add a control to the artboard by selecting the control in the Toolbox and then clicking on the artboard and dragging your mouse to specify the control's bounding box. After a UI design element, such as a ListBox control, is added to the artboard, it becomes an object in your application.
- Under Objects and Timeline, double-click the
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.
You can also activate an object on the artboard by first selecting the Selection tool from the Toolbox, and then double-clicking on the object on the artboard.
- Draw several shapes into the ListBox using elements
from the Toolbox such as the TextBlock ,
Button , or Rectangle
. Notice how the list box arranges
these child elements in a vertical stack:
Child objects added to a ListBox object
If you add more elements than will fit into the items control, then a scrollbar will appear when you run your application, allowing you to view the extra elements. You can reorder elements in the list by dragging and dropping the objects under Objects and Timeline, or select the Selection tool to drag and drop them on the artboard.
- You can view the items in your ListBox and add others in the Collection Editor window. To open the Collection Editor, click the button next to the Items (Collection) property in the Properties Panel.
- Build your project (F5) to see the resulting application.