Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


Change the arrangement of items in a listbox

All WPF controls deriving from ItemsControl provide an ItemsPanel property that allows you to replace the internal layout panel that arranges the items.

Horizontal

We override the ItemsPanel property and set it to a StackPanel layout manager with an orientation set to Horizontal. We use an VirtualizingStackPanel that works just like a normal StackPanel, except that is does only create the items that are visible. If you scroll it automatically creates the new items that become visible and recycles the hidden.

 
<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
 
 

Wrapped

Using a WrapPanel to layout the items row by row is a bit more complex. Since the layout panel is wrapped by a ScrollContentPresenter (as seen by the scrolbar of the exmple above) the available width is infinite. So the WrapPanel does not see a reason to wrap to a new line.

What we need to do is to set the width of the warp panel to the ActualWidth if the internal ScrollContentPresenter. The ScrollContentPresenter can be found by using the FindAncestor mode of the relative source extension.

 
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
 
 




Last modified: 2009-10-07 14:32:12
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
eldose
Commented on 25.January 2010
very simple to study by using this tips
janu
Commented on 10.August 2010
good
hero
Commented on 25.August 2010
Very good, very very good!
Adnan
Commented on 22.November 2010
Dear Christian,

I've tried this and it is working fine, but the time whenever i use any theme its not working (all items in listbox appearing in vertical order), and when i remove the theme reference it is working fine.

I am using


<Application x:Class="Application"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="Login.xaml">
<Application.Resources>
<ResourceDictionary Source="Themes/ExpressionLight.xaml" />
</Application.Resources>
</Application>
dave
Commented on 3.January 2011
in 10 years of computing I have never commented on a technical article that I've read. This is the first, and it's only because it's genius. Thanks for being concise, and getting this way overcomplicated thing to work.

Name
E-Mail (optional)
Comment