UPF Layout Containers

The Ultraviolet Presentation Foundation defines a number of interface elements which serve as layout containers. These containers can contain other elements as children, and are responsible for arranging those elements on the screen. This article provides an overview of the behavior of each of UPF's built-in layout containers.

Canvas

The Canvas container has the simplest behavior of all of the built-in layout containers. It defines four attached properties: Canvas.Left, Canvas.Right, Canvas.Top, and Canvas.Bottom. When set on a child element, these properties define the distance in device-independent coordinates (1/96th of an inch) between the corresponding edge of the canvas and the corresponding edge of the child element. For example, setting the Canvas.Bottom property of a child to 100 means that that child's bottom edge will be positioned so that it is 100 dips away from the bottom edge of the canvas.

If two opposing properties are both specified on a child, then that child will be stretched across the intervening space.

Grid

The Grid container defines a set of rows and columns which collectively form a grid of cells. Each of the grid's children can be placed inside of a particular cell by setting the values of the Grid.Row and Grid.Column attached properties. The Grid class also defines two additional attached properties called Grid.RowSpan and Grid.ColumnSpan which allow a child to span across multiple cells.

Rows and columns must specify a width and a height, respectively, and they can be set to one of three kinds of value:

• They can simply be given a specific value in device-independent pixels by specifying an integer value.
• They can be told to automatically size to their content by specifying a size of Auto.
• They can be told to fill all remaining space which is not used by other rows or columns by specifying a size of *.

StackPanel

The StackPanel container stacks its children directly on top of each other, expanding downwards as necessary. This behavior can be changed so that children are stacked side-by-side, and the container expands to the right, by setting the Orientation property of the StackPanel to Horizontal.

WrapPanel

The WrapPanel container works similarly to StackPanel, except that when the WrapPanel runs out of available space, it will "wrap" back up to the top of the screen (or the left of the screen, if the panel is in the Horizontal orientation).

DockPanel

The DockPanel container allows its children to be docked to its edges using the DockPanel.Dock attached property. This property is typed as an enumeration, also called Dock, with the following values: Left, Top, Right, and Bottom, each corresponding to the associated edge of the dock panel.

The dock panel itself has a property called LastChildFill which, if set to true, will cause the panel's final child to stretch to fill all remaining space.