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.

Image001

Have fun!                                                                                                                                                                   

About TechPreacher

Technical Evangelist working for Microsoft Switzerland. Focusing on the Internet of Things and Windows development. EV geek and passionate gamer, with a life.
%d bloggers like this: