Some more fun with a Silverlight ListBox
In my previous post I created a horizontally scrolling ListBox. Nice but sometimes I want to have the items wrap around. Sort of a multi column flow ListBox. Turns out this was quite a bit harder because unlike WPF Silverlight didn’t have a WrapPanel. However the Silverlight Toolkit, recently released does contain the required WrapPanel,
So remember the code was like this:
Partial Public ClassPage
InheritsUserControl
Public Sub New()
InitializeComponent()
End Sub
Private SubUserControl_Loaded(ByVal sender AsSystem.Object, ByVal e AsSystem.Windows.RoutedEventArgs)
For Eachnumber InEnumerable.Range(1, 100)
DemoList.Items.Add(number)
Next
End Sub
End Class
If we replace the horizontal StackPanel with a WrapPanel we should be done right? Well unfortunately not quite. If we use the following XAML (changes in bold):
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
Loaded="UserControl_Loaded"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<ListBox x:Name="DemoList">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</UserControl>
we end up with the following Silverlight application:
The problem is that the ListBox will lets its contents grow both horizontally and vertically so we need to stop its contents from growing horizontally so it can wrap around as we want. What we need to do is add a ListBox template with a slightly different content like this:
<ListBox.Template>
<ControlTemplate>
<Grid>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</Grid>
</ControlTemplate>
</ListBox.Template>
The grid will make sure the contents do not become to wide. The result looks like this:
Nice 
So just to make it a little but nicer by formatting the number to display by adding a ItemTemplate like this:
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
TextAlignment="Right"
Width="25" />
</DataTemplate>
</ListBox.ItemTemplate>
The result is a nice flow layout:
If I make the Silverlight app take up the full browser window we can see the wrap around in action as we resize the browser window
The full XAML is like this:
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls=
"clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
Loaded="UserControl_Loaded">
<Grid x:Name="LayoutRoot" Background="White">
<ListBox x:Name="DemoList">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<Grid>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</Grid>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
TextAlignment="Right"
Width="25" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
Enjoy
www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu