Reader Level:
ARTICLE

Adding items to a listbox in Expression Blend

Posted by Manoj Singh Panwar Articles | Expression Studio October 17, 2011
In this article I wil demonstrate how to add a listbox and item to a listbox in Expression blend.
  • 0
  • 0
  • 6379

The listbox control is used for displaying a list of things in Silverlight and WPF. In this article we will learn how to add items to a listbox in Expression Blend and how we can modify the data in a Listbox. It is very simple and really fun to deal with. With a listbox you can enter new items, select items, and click items as well.

Follow the following Steps :

Step 1 : Open the asset library in the following way.

listbox1.gif

Step 2 : The search field will be displayed; type listbox: in it. 

lb2.gif 

Step 3 : Now after you select the Listbox tool from the asset library, the Listbox icon appears in the tool menu. Double click the icon.

 listbox-icon.gif 

Step 4 : A listbox will be inserted as a Plain control on the artboard this plainness vanishes when you start adding items to the Listbox. You can resize and arrange the Listbox anywhere in the artboard.

listbox 

Step 5 : Now in order to add items to the listbox, the first and foremost thing is that you have to confirm that the listbox is the active container, and this is done by double-clicking on the listbox in the object tree. When you double click on the listbox in the object tree, a yellow line will appear around it like this.

lining.gif

The yellow outline indicates that this element will be the default location for inserted elements. So, let's start inserting items to the listbox.

Step 6 : Now here we start with adding items to our listbox, for this launch the Asset Library and type listboxitem in the search field. It appears like this.

listboxitem.gif 

Step 7 : After selecting the listboxitem from the asset library, the icon shown below is added to the tool menu. Now double click the icon and just like before with the listbox, select the listbox item to make it the active control. Just like the listbox, a yellow line appears in listboxitem too.

listboxitemicon.gif

Step 8 : Now Double click on the ListBoxItem icon in your toolbox and you'll notice that your listbox now displays an item.


item-added.gif

In order to add more items, keep double-clicking on the ListBoxItem icon to insert more items into the listbox and in the object tree as well.

 lb5.gif

There are two ways of making changes to the listboxitem; the first is by clicking the listboxitem and typing the text there itself. The second is by selecting the listboxitem and modifying the properties from the property menu. This menu looks like this.

lb6.gif

Listbox is a container control and can be used to add other elements as well.

Thats all in this Topic, next topic will be uploaded soon..

COMMENT USING