Introduction
Layout is the process of element placement, and how their size and position changes in response to user interactions (such as a window resize). WPF offers a bunch of layout panels that provide different ways to lay out elements. By combining those panels in various ways, complex and adaptive layouts can be created.
The layout process
Layout is a two-step process. First, the layout container asks each of its children for its desired size. In the second step, it uses whatever logic is applicable to determine at what position and what size each child element should be – and places each child in that rectangular area. A more detailed look at this process can be found in the Creating a custom panel recipe in Chapter 10, Custom Elements.
Each element indicates to its parent its requirements. The following diagram summarizes the most important properties related to these requirements:
Here's a quick breakdown of these important properties:
Width/Height: The width and height of the element in question. This is not typically set (Double.NaNbeing the default value), meaning the element can be as big as it needs to be. Nevertheless, it may be set if needed.Margin: A breathing space around the element. This is of typeThickness(a value type) that has four properties (Left,Top,Right, andBottom) that determine the amount of space around the element. It can be specified in XAML using four numbers (left, top, right, and bottom), two numbers (the first is left and right, the second is top and bottom), or a single number (same distance in all four directions).Padding: The same idea asMargin, but determines the space between the outer edge of the element and its content (if any). This is of typeThicknessas well, and is defined by theControlbase class and some other special elements, such asBorder.HorizontalAlignment/VerticalAlignment: Specifies how to align the element against its parent if extra space is available. Possible values areLeft,Center,Right, andStretchforHorizontalAlignment, andTop,Center,Bottom, andStretchforVerticalAlignment.HorizontalContentAlignment/VerticalContentAlignment(not shown in figure): Same idea asHorizontal/VecticalAlignment, but for theContentof the element (if any).LayoutTransform: Allows a transformation (of type deriving fromTransform) to be applied on the element before its layout requirements are communicated to its parent.FlowDirection: Can be used to switch the layout direction from the default (LeftToRight) toRightToLeft, suitable for right to left languages such as Hebrew and Arabic. This effectively turns every left to right and vice versa.
Coordinates systems in WPF
Every size or position in WPF is provided in units known as Device Independent Units (DIU). Contrary to other UI technologies, such as Windows Forms, these are not device units or pixels and they are not integers; rather, a WPF unit is 1/96 of an inch and always expressed as a double value.
This feature provides a more consistent way to present visuals. On a standard 96 DPI display device, 1 DIU = 1 pixel. With higher DPIs, for instance, a 96 unit line is still one inch long. It may require more pixels to paint because of the higher DPI, but the size is consistent. This helps in making WPF results consistent and predictable.
In XAML, it's possible to provide sizes in several formats. If just a number is provided, it's interpreted as a DIU value; however, some suffixes exist to change the unit of measurement: "in" for inch, "cm" for centimeters, and "pt" for points (1 point = 1/72 inch). If specified, a type converter (LengthConverter) converts the values to DIUs (for example, "2in" is turned into the value 192).
A consequence of using doubles rather than integers is that high precision is maintained if elements (or pure graphics) need to be transformed, for example, rotated or stretched.
In this chapter, we'll take a look at some of WPF's layout panels, including some layout related controls that are not technically panels, to get a better understanding of WPF's layout mechanism and user interface building approach.