WrapPanel Control
The WrapPanel control is one of those controls that you'll find yourself using frequently especially if you need to display a collection of objects in a user interface without resorting to a grid-style layout. Although the standard StackPanel built into Silverlight 2 provides a way to display controls in a horizontal or vertical manner, any content that exceeds the bounds of the control will be clipped. This presents a problem with images or any other types of data that need to be wrapped rather than clipped. Although there are a few third-party WrapPanel controls floating around on the Web, the one available in the Silverlight Toolkit gets the job done quickly and efficiently. Here's an example of using the WrapPanel control within an ItemsControl to define the parent container for images:
<ItemsControl x:Name="icPhotos" Grid.Row="1" VerticalAlignment="Top"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <controls:WrapPanel x:Name="wpImages" Margin="10" Orientation="Horizontal" VerticalAlignment="Top" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Rectangle Stroke="LightGray" Tag="{Binding Url}" Fill="{Binding ImageBrush}" StrokeThickness="2" RadiusX="15" RadiusY="15" Margin="15" Height="75" Width="75" Loaded="Rectangle_Loaded" MouseLeave="Rectangle_MouseLeave" MouseEnter="Rectangle_MouseEnter" MouseLeftButtonDown="rect_MouseLeftButtonDown"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1" CenterX="37.5" CenterY="37.5" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>
An example of using the WrapPanel control to display a series of images in a "wrapped" manner is shown next: