Panorama Tricks – Using WrapPanel in wide PanoramaItems

The Silverlight for Windows Phone Toolkit also includes the WrapPanel from the Silverlight Tookit. It is ideal for displaying content in wide PanoramaItems. The sample application that ships with the Silverlight for Windows Phone Toolkit source includes an example of this.

Since the subject has come up a few times, here’s how you do it:

1. Give your PanaramaItem a horizontal orientation.
2. Make the WrapPanel the child of the PanormaItem, and set its orientation to vertical.

Here’s a snippet that does just that:

Code Snippet

1. <controls:PanoramaItem Header="vertical" Orientation="Horizontal">
2.     <!-- This WrapPanel will fill columns first -->
3.     <toolkit:WrapPanel x:Name="verticalWrapPanel" Orientation="Vertical"/>
4. </controls:PanoramaItem>

It is a little confusing, because they both have Orientation properties. The PanoramaItem’s Orientation usage is like StackPanel’s—the Orientation refers to the direction that is measured at infinity, or in other words, that’s the direction that grows.

For WrapPanel, the semantics are different. The Orientation refers to the direction that the WrapPanel will fill first, in other words, it starts at the top left of the WrapPanel, then the next items fill in vertically until the first column is full.

This will look like this:

 

This may not be the look that you desire, however. You may wish rows to be filled first, but using as few columns as possible. The first thing that you might try is to change the Orientation of the WrapPanel to Horizontal, like this:

Code Snippet

1. <controls:PanoramaItem x:Name="horizontalWrapPanelItem" Header="horizontal" Orientation="Horizontal">
2.     <!-- This WrapPanel will fill rows first, but we will use
3.     code-behind to make it take as few columns as possible -->
4.     <toolkit:WrapPanel x:Name="horizontalWrapPanel" Orientation="Horizontal" VerticalAlignment="Top"/>
5. </controls:PanoramaItem>

However, since this means that the WrapPanel will extend horizontally first (filling columns before rows) and the PanoramaItem lets its content extend horizontally indefinitely, the items all wind up in a single row. Time to break out some code.

Here’s how this example makes it so that the WrapPanel lays its items out horizontally, but taking as few columns as possible, so the look is nice and full. First, here’s what it looks like:

And here’s the guts of code-behind that does it:

Code Snippet

1. private void AdjustHorizontalWrapPanelSize()
2. {
3.     // The goal here is to configure the WrapPanel to lay the items out in rows, while
4.     // taking as few columns as possible.
5.  
6.     int columnsRequired = Math.Max(ColumnsPerPage, (int) Math.Ceiling((double) horizontalWrapPanel.Children.Count / (double) RowsPerPage));
7.     
8.     horizontalWrapPanel.Width = columnsRequired * TileDimensionWithMargins;
9.     horizontalWrapPanel.Height = RowsPerPage * TileDimensionWithMargins;
10. }

In this case “Page” refers to the size of a single, vertically-oriented PanoramaItem. The attached project puts it all together.

PanoramaWrapPanel.zip

Comments

• Anonymous
  June 30, 2011
  Thanks for posting this, Dave. Very useful.