The Layout System in Silverlight

The term layout describes the process of sizing and positioning objects in your Silverlight-based application. To position visual objects, you must put them in a Panel or other container object. The parent Panel has defined layout behavior that determines how the members of a Panel element's Children collection are drawn onscreen. This is an intensive process, and the larger the Children collection, the greater the number of calculations made. Complexity can also be introduced based upon the layout behavior defined by the Panel element that owns the collection. A relatively simple layout such as Canvas can yield excellent performance when a more complex Panel such as Grid is not required.

Each time a child UIElement changes its position, it has the potential to trigger a new pass by the layout system. It's important to understand the events that can invoke the layout system, because unnecessary invocation can lead to poor application performance.

At its simplest, layout is a recursive system that leads to an element being sized, positioned, and drawn onscreen. The layout system completes two passes for each member of the Children collection, first a Measure pass and then an Arrange pass. The Measure pass is where the desired size of each child element is determined. The Arrange pass is where each child element's size and position is finalized.

Note: When referring to the layout of an element, it is more precise to refer to the layout of that element's bounding box. For more information, see Element Bounding Boxes later in this topic.

To override the default Panel layout behavior, each type of Panel provides its own MeasureOverride and ArrangeOverride methods in order to achieve its own specific layout behavior. This is the series of events that occurs whenever the layout system is invoked:

Each child UIElement is measured.
Sizing properties defined on FrameworkElement are evaluated, such as Width, Height, and Margin.
Panel-specific logic is applied, such as stacking Orientation.
Content is arranged after all children have been measured.
The Children collection is drawn to the screen.
The process is invoked again if additional Children are added to the collection, layout properties on the Children such as Width and Height change, or the UpdateLayout method is called.