Jaa

Using Silverlight Toolkit WrapPanel in your Listbox

  • Artikkeli

I love the Silverlight Toolkit – it’s a great set of free Silverlight extensions that you can use in your Silverlight project.  Source code and unit tests are included: everything you’d want in an extension library.  I am playing around with the toolkit and have always been inspired by Bea Stollnitz’s adventures with control templates (especially her Planets Listbox article).  One of the great components of the Silverlight Toolkit is a WrapPanel that “Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box.”  I wanted to see if I could adapt a Listbox to use the WrapPanel instead of its default vertical StackPanel.  It turns out that all I have to do is change the ItemsPanelTemplate to use the WrapPanel:

I have this defined in my App.xaml resources:

 <Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    x:Class="Demo.App" 
    xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
    xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls">
        <Application.Resources>
                <!-- Resources scoped at the Application level should be defined here. -->
                <ItemsPanelTemplate x:Key="CatalogItemsPaneltemplate">
                                <controls:WrapPanel/>
                </ItemsPanelTemplate>
        </Application.Resources>
</Application>

And in the Listbox I use the template for the ItemsPanel attribute:

 <ListBox 
    ItemsPanel="{StaticResource CatalogItemsPaneltemplate}"
    ScrollViewer.HorizontalScrollBarVisibility="Disabled" />

And here’s what I get, all of the ListBox functionality (data binding, selection, templates, styling), but now with the WrapPanel as well:

image

 

1/23/2009 – Fixed XAML.

Comments