|
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.
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!
|
Wrapping your Listbox Content - Page
1
