Click here to Skip to main content
15,867,594 members
Articles / Programming Languages / C#
Article

WrapPanel for Silverlight 2.0

Rate me:
Please Sign up or sign in to vote.
4.57/5 (13 votes)
6 Mar 2008CPOL2 min read 114.1K   1K   27   17
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.

C#
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.

C#
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).

C#
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)


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

Comments and Discussions

 
GeneralMy vote of 5 Pin
lewax002-Feb-12 8:36
lewax002-Feb-12 8:36 
GeneralGreat silverlight control Pin
Michał Zalewski31-Oct-09 15:25
Michał Zalewski31-Oct-09 15:25 
GeneralSilverlightContrib Pin
rob_houweling26-Oct-08 0:11
rob_houweling26-Oct-08 0:11 
GeneralRe: SilverlightContrib Pin
lneir26-Oct-08 5:53
lneir26-Oct-08 5:53 
QuestionCan I use this code? Pin
Member 295213923-Sep-08 3:47
Member 295213923-Sep-08 3:47 
AnswerRe: Can I use this code? Pin
lneir23-Sep-08 6:00
lneir23-Sep-08 6:00 
Questionmodified to behave as animating panel Pin
Member 28546833-Jul-08 18:22
Member 28546833-Jul-08 18:22 
AnswerRe: modified to behave as animating panel Pin
lneir4-Jul-08 7:33
lneir4-Jul-08 7:33 
AnswerRe: modified to behave as animating panel Pin
Ray Guan17-Nov-10 22:59
Ray Guan17-Nov-10 22:59 
GeneralThanks! Pin
Seth Webster13-Jun-08 16:23
Seth Webster13-Jun-08 16:23 
GeneralWrappanel inside another panel Pin
duwkes22-May-08 7:33
duwkes22-May-08 7:33 
GeneralRe: Wrappanel inside another panel Pin
vRud7-Jun-08 10:01
vRud7-Jun-08 10:01 
GeneralRe: Wrappanel inside another panel Pin
chris rothery14-Aug-08 2:32
chris rothery14-Aug-08 2:32 
GeneralDoesn't work inside ScrollViewer Pin
raulgspan27-Mar-08 15:45
raulgspan27-Mar-08 15:45 
GeneralRe: Doesn't work inside ScrollViewer Pin
lneir27-Mar-08 16:05
lneir27-Mar-08 16:05 
QuestionRe: Doesn't work inside ScrollViewer Pin
Harlequin66622-Sep-08 5:14
Harlequin66622-Sep-08 5:14 
AnswerRe: Doesn't work inside ScrollViewer Pin
Harlequin66622-Sep-08 6:19
Harlequin66622-Sep-08 6:19 

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

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