Wrapping your Listbox Content  - Page 1
       by kirupa  |  7 July 2009

When you think of a listbox in either WPF or Silverlight, you probably think of some rectangularly shaped container with scrollbars for scrolling through a list of content stacked either vertically or horizontally:

[ an example of a standard listbox with a stack of content ]

There are many cases, though, where a flat list of items is not what you want. You want your items to actualy wrap such as a collection of albums shown in Zune's album view:

[ a listbox whose content is wrapped ]

If you are creating your application, unfortunately, there is no default property that you can just set on a listbox to enable such wrapping. That is where this tutorial comes in. In this and the next page, I will show you how to modify the internals of your listbox to support your content wrapping.

Getting Started - Setting up your Listbox
First, launch Expression Blend and create a listbox with some items inside it. By default, all of your items will be stacked vertically. This is OK, because we will be changing really soon how the items actually get displayed.

For adding items to your listbox, the easiest way is to manually just create / draw / copy / paste content into it. If you want to get a bit more fancy, you can always add items to your listbox manually as shown in this tutorial, or you can use the Sample Data feature in Blend 3.

Whichever approach you take, you should have a listbox that contains enough items to show scrolling (and eventually, wrapping). For my example, all I am doing is just copying and pasting some rectangles:

[ here is a ListBox with some rectangles as its content ]

If you want to just use my example instead of creating your own, feel free to download, extract, and open the solution found below:

   Download Source (WPF) for Listbox Containing Rectangles

Don't worry. My example only contains the listbox with the rectangles. Everything else you will have to do by following the instructions you will see...on the next page!

Onwards to the next page!

1 | 2 | 3


kirupa.com's fast and reliable hosting provided by Media Temple.