WrapPanel for Silverlight 2.0

• Download source code - 578 KB

Introduction

One of the most exciting features of Silverlight 2.0 (beta 1) is the ability to create custom panels - just like WPF! Silverlight 2.0 (beta 1) comes with three panels: Canvas, Grid, and StackPanel. Many people will miss other popular panels already included with WPF. This article shows how to build a simple WrapPanel using the extensibility features available with Silverlight 2.0.

Background

A custom panel in Silverlight (and WPF) contains two important parts: Measure and Arrange. This is a two-pass recursive system. The first round measures the size of all children in the panel. In a recursive manner, all children in turn measure the size of their children, and so on. In the next round, the children of the panel are arranged using whatever algorithm you like.

For a complete description of building a custom panel, see this MSDN article.

Using the code

The first important aspect of the custom WrapPanel is to inherit from Panel. Panel is an abstract class from which all panels must derive. The Orientation dependency property determines whether WrapPanel flows vertically or horizontally.

public class WrapPanel : Panel
{

  public Orientation Orientation
  { 
    get { return (Orientation)GetValue(OrientationProperty); }
    set { SetValue(OrientationProperty, value); }
   }

   public static readonly DependencyProperty OrientationProperty =
     DependencyProperty.Register("Orientation", 
     typeof(Orientation), typeof(WrapPanel), null);

 public WrapPanel()
 {
   // default orientation
   Orientation = Orientation.Horizontal;
 }

Next, we must override the Measure function. The input parameter 'availableableSize' to MeasureOverride tells the panel how much size it has to work with. This size is given to the panel by its parent. The most important aspect in measuring each child is to indicate to each child their allowed size. In this simple example, we are just saying to each child that they can have the whole space of the panel. The result of the measuring yields a 'DesiredSize' for each child - this desired size will be used when arranging the children.

protected override Size MeasureOverride(Size availableSize)
{
  foreach (UIElement child in Children)
  {
    child.Measure(new Size(availableSize.Width, availableSize.Height)); 
  }

  return base.MeasureOverride(availableSize);
 }

Finally, we must override the Arrange method. Here, we will position each child in the panel. In our case, we position items either horizontally or vertically. In the horizontal case, we arrange the children (left to right) until the right edge of the panel is reached; then, we move to the next line and continue laying out the children (left to right).

protected override Size ArrangeOverride(Size finalSize)
{
  Point point = new Point(0,0);
  int i = 0;

  if (Orientation == Orientation.Horizontal)
  {
    double largestHeight = 0.0;

    foreach (UIElement child in Children)
    {
      child.Arrange(new Rect(point, new Point(point.X + 
        child.DesiredSize.Width, point.Y + child.DesiredSize.Height)));

      if (child.DesiredSize.Height > largestHeight)
         largestHeight = child.DesiredSize.Height;

      point.X = point.X + child.DesiredSize.Width;

      if ((i + 1) < Children.Count)
      {
        if ((point.X + Children[i + 1].DesiredSize.Width) > finalSize.Width)
        {
           point.X = 0;
           point.Y = point.Y + largestHeight;
           largestHeight = 0.0;
         }
       }
       i++;
     }
    }
    else
    {
       double largestWidth = 0.0;

       foreach (UIElement child in Children)
       {
         child.Arrange(new Rect(point, new Point(point.X + 
           child.DesiredSize.Width, point.Y + child.DesiredSize.Height)));

         if (child.DesiredSize.Width > largestWidth)
           largestWidth = child.DesiredSize.Width;

          point.Y = point.Y + child.DesiredSize.Height;

          if ((i + 1) < Children.Count)
          {
            if ((point.Y + Children[i + 1].DesiredSize.Height) > finalSize.Height)
            {
              point.Y = 0;
              point.X = point.X + largestWidth;
              largestWidth = 0.0;
             }
           }

           i++;
          }
        }

    return base.ArrangeOverride(finalSize);
   }
 }
}

Points of interest

Note, the WrapPanel provided here functions mostly like the WPF WrapPanel. I noticed some minor differences, but have not had time to fix. Feel free to send along your suggested changes.