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.
|
|
|
|