Today’s tip focuses on the WrapPanel that’s available in the Silverlight Toolkit for Windows Phone.  If you’re not familiar with the Toolkit, check out the introductory post.

About the WrapPanel

The WrapPanel has always been a popular control in both Silverlight and WPF.  Originally shipping with WPF, the WrapPanel lets you drop a series of controls into a container that will arrange them as if they were words on a page …. left-to-right and then top-to-bottom. Or think of Windows Explorer arranging icons. It’s a natural extension of the StackPanel.

The WrapPanel has been part of the non-Phone Silverlight Toolkit since the very beginning, and could be used in phone projects by adding the non-Phone Toolkit references to your project. 

Now that the WrapPanel is part of the phone-specific toolkit, things are even easier.  Same basic steps, but without the extra baggage of the non-Phone toolkit.

Using the WrapPanel

To use the WrapPanel, first add a reference to Microsoft.Phone.Controls.Toolkit.dll, which is installed with the toolkit.

Next, add a reference to the assembly in your page XAML

   1: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;

   2:                assembly=Microsoft.Phone.Controls.Toolkit" 

The XAML

Since the WrapPanel is a container, the XAML is pretty simple.  Here’s a wrap panel with six obnoxiously colored buttons in it. 

   1: <toolkit:WrapPanel>

   2:     <Button Content="One" BorderBrush="Aqua" />

   3:     <Button Content="Two" BorderBrush="CadetBlue" />

   4:     <Button Content="Three" BorderBrush="DarkMagenta" />

   5:     <Button Content="Four" BorderBrush="Fuchsia" />

   6:     <Button Content="Five" BorderBrush="LightBlue" />

   7:     <Button Content="Six" BorderBrush="Orange" />

   8: </toolkit:WrapPanel>

This creates the standard left-to-right, top-to-bottom wrap panel.

You can also set the Orientation to “Vertical” to create a top-to-bottom, left-to-right wrap panel.

   1: <toolkit:WrapPanel Orientation="Vertical" Height="400">

   2:     <Button Content="One" BorderBrush="Aqua" />

   3:     <Button Content="Two" BorderBrush="CadetBlue" />

   4:     <Button Content="Three" BorderBrush="DarkMagenta" />

   5:     <Button Content="Four" BorderBrush="Fuchsia" />

   6:     <Button Content="Five" BorderBrush="LightBlue" />

   7:     <Button Content="Six" BorderBrush="Orange" />

   8: </toolkit:WrapPanel>

Other Resources

• Get the tools
• Windows Phone Design and Interaction Guide
• Silverlight Toolkit
• Tim Heuer post

More Tips

• Introduction to the Silverlight Toolkit for Windows Phone
• http://www.codebadger.com/blog/category/WP7-Tip-of-the-Day.aspx
• Subscribe to WP7 Development Tip of the Day