Silverlight Wrap Panel

Wrap panel in Silverlight is missing out of the box, but this need is fulfilled by Silverlight Toolkit which also includes many other controls. In this post we will look at WrapPanel. I will show you how to use it and what it is used for.

To use wrap panel you have to install Silverlight Toolkit. Once installed, you will need to add a reference to Silverlight.Windows.Controls.Toolkit

And you can now use the WrapPanel. In the XAML below you can see that the main container of my user control is a WrapPanel.

<UserControl
xmlns:controls=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
  x:Class="SilverlightWrapPanelDemo.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <controls:WrapPanel x:Name="LayoutRoot" Background="White">

  </controls:WrapPanel>
</UserControl>

WrapPanel as the name says will wrap controls. Any controls which cannot fit on the first line will be wrapped to next line and so forth. Here is a demo.

<UserControl
xmlns:controls=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
  x:Class="SilverlightWrapPanelDemo.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300" Background="CornflowerBlue">
  <controls:WrapPanel x:Name="LayoutRoot" Background="Honeydew">
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkBlue" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkRed" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkGoldenrod" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkSeaGreen" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DodgerBlue" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkOrchid" />
  </controls:WrapPanel>
</UserControl>

If I reduce the width of UserControl you can see that WrapPanel automatically wraps controls placed inside the container.

<UserControl
xmlns:controls=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
  x:Class="SilverlightWrapPanelDemo.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="350" Height="300" Background="CornflowerBlue">
  <controls:WrapPanel x:Name="LayoutRoot" Background="Honeydew">
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkBlue" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkRed" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkGoldenrod" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkSeaGreen" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DodgerBlue" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkOrchid" />
  </controls:WrapPanel>
</UserControl>