Step by step: How to use the WrapPanel instead of the StackPanel inside of the ListBox control in Windows Phone 7 SDK (MIX 2010 Preview).

This is a small guide on how to use the WrapPanel instead of the StackPanel inside of the ListBox control in Windows Phone 7 SDK (MIX 2010 Preview).

First, go out to http://www.codeplex.com/Silverlight and get yourself the Silverlight 3 Control Toolkit including source code.

Extract this on your machine and find the following files in “..Silvelright Control ToolkitReleaseSilverlight3SourceControls.Toolkit”:

·         LenthConverter.cs

·         NumericExtensions.cs

·         OrientedSize.cs

·         TypeConvertes.cs

·         WrapPanel.cs

Add them to an empty Windows Phone 7 (Silverlight) project. Now, find:

·         Resources.resx

·         Resources.Designer.cs

and add them to your project’s “Properties” folder.

Make sure to include all the new files in the Visual Studio Project. Make sure that all files have a Build Action of “Compile” except Resouce.resx which has a Build Action of “Embedded Resource”.

Now open the project’s “App.xaml” file and add:

        <!–****** WrapPanel Template ******–>

        <ItemsPanelTemplate x:Key="WrapPanelTemplate">

            <my:WrapPanel/>

        </ItemsPanelTemplate>

Inside the tag:

    <Application.Resources>

The final step is to add the my: namespace to the phoneNavigation element of each XAML page where you want to use the WrapPanel:

<phoneNavigation:PhoneApplicationPage

    …

    xmlns:my="clr-namespace:System.Windows.Controls">

Now simply drag-and-drop the WrapPanel from the toolbox or add it to the ListBox as default display control using the ItemsPanel attribute:

            <ListBox Height="576" HorizontalAlignment="Left" Margin="0,77,0,0" Name="lbxResult" VerticalAlignment="Top" Width="474"

                    ItemsPanel="{StaticResource WrapPanelTemplate}"

                    ScrollViewer.HorizontalScrollBarVisibility="Disabled">

For this to work in Expression Blend, you need to open and compile it once in Blend before it recognizes the my: namespace. After that, the WrapPanelTemplate is available via the Templates pane.

Have fun!