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

In the previous page you went into your ListBox's ItemsPanel and replaced the StackPanel with a panel that wraps - aptly called a WrapPanel. In this page, we will make some minor changes to make your content truly wrap.

Making your Content Wrap
As you saw in the previous page, despite change your ItemsPanel to a WrapPanel, our content isn't actually wrapping. The change to make that happen is very simple.

First, make sure to scope back up (use the breadcrumb bar like you did before) to the ListBox level and ensure your ListBox is selected. Find the Layout category and expand it by clicking on the little expander found towards the bottom of that category:

[ advanced properties are hidden by default ]

Click on that expander to display all of the advanced properties found in the Layout category. One of the properties you will see is something called HorizontalScrollbarVisibility, though it may be truncated due to space limitations:

[ find the HorizontalScrollbarVisibility property ]

Change the value of the property from Auto to Disabled. This change will cause the Listbox to no longer allow horizontal scrolling, and that (strangely enough) ensures your content wraps properly:

[ the content is now wrapped ]

Conclusion
Hopefully this tutorial helped you wrap your head around wrapping (ha!) items in a ListBox. Looking back, what you did was pretty straightforward. You went into your ItemsPanel and replaced the StackPanel that was there with a WrapPanel. Next, you simply told your listbox that scrolling horizontally is off the table.

Straightforward does not mean trivial or easy, so if you find your final result not matching mine, feel free to download the final source file:

Download Final Source

1 | 2 | 3




SUPPORTERS:

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