CodeProject: WrapPanel for Silverlight 2.0. Free source code and programming help

Report Article

Discuss

Send to a friend

10 votes for this Article.

Popularity: 4.05 Rating: 4.05 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download WrapPanel - 891.61 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.

The completed code is available here: Download WrapPanel.zip - 891.61 KB

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 the MSDN article: http://msdn2.microsoft.com/en-us/library/ms745058.aspx

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 it's 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 arrange 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 here we position items either horizontally or vertically. In the horizontal case, we arrange the children (left to right) until the right edge of panel is reached then we move to the next line and continuing 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 changed.

License

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

About the Author

lneir

I work in the Bay Area developing software using .NET/C#, WPF, and Silverlight.

Occupation:	Software Developer (Senior)
Company:	Pinnacle Systems/Avid
Location:	United States

Other popular Silverlight articles:

Legion: Build your own virtual super computer with Silverlight
Legion is a grid computing framework that uses the Silverlight CLR to execute user definable tasks. It provides grid-wide thread-safe operations for web clients. Client performance metrics, such as bandwidth and processor speed, may be used to tailor jobs. Also includes a WPF Manager application.
Silverlight 1.1 Fun and Games
Silverlight 1.1 Fun and Games
Silverlight Animations in a Practical Business Application
An article on building a practical business application using Silverlight animations
Silverlight Alien Sokoban
A fun Silverlight implementation of the game Sokoban. Contrasting Silverlight 1.1 and WPF, while showcasing some new features of C# 3.0, Expression Design, Expression Blend, and Visual Studio 2008.
Beginning Silverlight 1.1 Part 1
Describing basic Silverlight principles

Article Top

You must Sign In to use this message board.

Msgs 1 to 8 of 8 (Total in Forum: 8) (Refresh)

FirstPrevNext

Subject

Author

Date

modified to behave as animating panel

Member 2854683

19:22 3 Jul '08

Re: modified to behave as animating panel

lneir

8:33 4 Jul '08

Thanks!

Seth Webster

17:23 13 Jun '08

Wrappanel inside another panel

Member 3802118

8:33 22 May '08

Re: Wrappanel inside another panel

vRud

11:01 7 Jun '08

Re: Wrappanel inside another panel

chris rothery

3:32 14 Aug '08

Thanks for the wrapPanel, just what I was looking for. Thanks also vRud for your amendment.

I've made a couple of tweaks to it as my maxWidth was remaining infinite (i.e. no parents had fixed width) and also the full width was being claimed meaning that I couldn't center my panel contents horizontally. I did have an issue with all of the rows being assumed to be the same height but I changed my app rather than sorting this out. Shouldn't be to difficult to fix though, keeping a running total of height so far as ArrangeOverride does.

Here's my alteration:


protected override Size MeasureOverride(Size availableSize)
        {
            foreach (UIElement child in Children)
            {
                child.Measure(new Size(availableSize.Width, availableSize.Height));
            }
            // find a limiting width            
            double maxWidth = double.MaxValue;
            FrameworkElement parent = this.Parent as FrameworkElement;
            while (parent != null)
            {
                if (!Double.IsNaN(parent.Width))
                {
                    if (parent.Width < maxWidth)
                    {
                        maxWidth = parent.Width;
                    }
                }
                parent = parent.Parent as FrameworkElement;
            }

            if (maxWidth == double.MaxValue && !double.IsInfinity(availableSize.Width))
            {
                maxWidth = availableSize.Width;
            }

            // start laying out -          
            int rowNum = 1;
            double remainingWidth = maxWidth;

           // keep track of smallest remaining width on change of row as that will tell us how 
            // wide to report the panel contents are
            double minRemainingWidth = maxWidth;
            foreach (UIElement child in Children)
            {
                if (remainingWidth - child.DesiredSize.Width < 0)
                {
                    if (remainingWidth < minRemainingWidth)
                    {
                        minRemainingWidth = remainingWidth;
                    }
                    rowNum += 1; 
                    remainingWidth = maxWidth;                    
                }
                remainingWidth -= child.DesiredSize.Width;
            }

            // check the rem width on this last line
            if (remainingWidth < minRemainingWidth)
            {
                minRemainingWidth = remainingWidth;
            }

            maxWidth -= minRemainingWidth;

            if (this.Children == null || this.Children.Count == 0)
            {
                return new Size(maxWidth, 10);
            }

            return new Size(maxWidth, rowNum * this.Children[0].DesiredSize.Height);
        }

Enjoy!

Chris

Doesn't work inside ScrollViewer

raulgspan

16:45 27 Mar '08

Re: Doesn't work inside ScrollViewer

lneir

17:05 27 Mar '08

Last Visit: Saturday, September 6, 2008 1:15 PM Last Update:Saturday, September 6, 2008 1:15 PM

General News Question Answer Joke Rant Admin