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 Sub
UserControl_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:



image



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:



image



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:



image



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



image



image



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



[f1]
[f2]

3 thoughts on “Some more fun with a Silverlight ListBox

  1. Another way to ensure the correct wrapping of the list box items would be to add:

    ScrollViewer.HorizontalScrollBarVisibility=”Disabled”

    to the first code sample on this page.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>