Click here to Skip to main content
Click here to Skip to main content

WrapPanel for Silverlight 2.0

, 6 Mar 2008
Rate this:
Please Sign up or sign in to vote.
A simple example of a custom panel using Silverlight 2.0.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

lneir
Software Developer (Senior) Skype
United States United States
I work in the Bay Area primarily developing software on the Windows platform using C++, .NET/C#, WPF, and Silverlight.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberlewax002-Feb-12 8:36 
GeneralGreat silverlight control PinmemberMichał Zalewski31-Oct-09 15:25 
GeneralSilverlightContrib Pinmemberrob_houweling26-Oct-08 0:11 
GeneralRe: SilverlightContrib Pinmemberlneir26-Oct-08 5:53 
QuestionCan I use this code? PinmemberMember 295213923-Sep-08 3:47 
AnswerRe: Can I use this code? Pinmemberlneir23-Sep-08 6:00 
Questionmodified to behave as animating panel PinmemberMember 28546833-Jul-08 18:22 
AnswerRe: modified to behave as animating panel Pinmemberlneir4-Jul-08 7:33 
AnswerRe: modified to behave as animating panel PinmemberRay Guan17-Nov-10 22:59 
GeneralThanks! PinmemberSeth Webster13-Jun-08 16:23 
GeneralWrappanel inside another panel PinmemberMember 380211822-May-08 7:33 
GeneralRe: Wrappanel inside another panel PinmembervRud7-Jun-08 10:01 
GeneralRe: Wrappanel inside another panel Pinmemberchris rothery14-Aug-08 2:32 
GeneralDoesn't work inside ScrollViewer Pinmemberraulgspan27-Mar-08 15:45 
GeneralRe: Doesn't work inside ScrollViewer Pinmemberlneir27-Mar-08 16:05 
QuestionRe: Doesn't work inside ScrollViewer PinmemberHarlequin66622-Sep-08 5:14 
AnswerRe: Doesn't work inside ScrollViewer PinmemberHarlequin66622-Sep-08 6:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 7 Mar 2008
Article Copyright 2008 by lneir
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid