LearnNowOnline

Blog

The WPF Layout System - Visual C#

Excerpt by Robert Green and Ken Getz | December 20, 2013

Layout in WPF is flow-based, but it also includes automatic resizing and repositioning of controls if the user changes screen resolution or resizes the window containing controls or adds or removes controls at runtime. As you will see in this chapter, this provides resolution and size independent user interfaces. A window can contain one element, or control. That element will almost always be a container. A container contains controls and, optionally, other containers. All container controls derive from the System.Windows.Controls.Panel class. 

Layout in WPF is a recursive process. The .NET Framework runtime makes two passes before drawing elements. In the Measure pass, the runtime queries each element to determine the element's size and location. In the Arrange pass, the runtime determines the actual size and position for each element. Elements may or may not be sized and located where they requested, depending on the number of elements, the screen resolution, the size of the window, etc. Layout is not only a recursive process, but it is also an iterative process.

The entire layout process occurs each time the user resizes the window or your code adds or removes elements. You should keep this in mind as you design user interfaces. How does the layout system determine how to size each element? Each element on a window is surrounded by a bounding box, as shown in Figure 1. This represents the space allocated to the element, and therefore represents the maximum size of the element.

Figure 1 Each element on a window is surrounded by a bounding box.

The layout system determines the actual size of an element by taking into account the following:

•  The available screen space.
• The size of any constraints, such as maximum or minimum height or width.
•  Layout-specific properties, such as alignment, margins, padding, etc.
•  The behavior of the parent container.

As needed, the layout system can shrink, grow, or move elements on a window.

Alignment, Margins, and Padding

All elements have four properties that are important to understand, as these play a key role in determining the position of elements in a window. These properties are HorizontalAlignment, VerticalAlignment, Margin, and Padding. Alignment refers to how child elements should be positioned within a parent element's allocated layout space. The HorizontalAlignment property determines how an element is positioned horizontally within a container. The possible values for this property are Left, Right, Center, and Stretch, as shown in Figure 2. If this property is set to Stretch, which is the default, the control will expand to its maximum available width.

 Figure 2  The HorizontalAlignment property determines how an element is positioned horizontally within a container.

The VerticalAlignment property determines how an element is positioned vertically within a container. The possible values for this property are Top, Bottom, Center, and Stretch, as shown in Figure 3. If this property is set to Stretch, which is the default, the control will expand to its maximum available height.

Figure 3. The VerticalAlignment property determines how an element is positioned vertically within a container.

The Margin property determines the distance between an element and its child or peers. This property consists of four parts: the left margin, the top margin, the right margin, and the bottom margin. The following XAML sets the margin for an element following this pattern:

<Button Margin="0,10,0,10"...

The previous code specifies that there should be no additional space on the left and right, but there should be a ten pixel space on the top and bottom. If you want the same margin on all four sides, you only need to specify one value. The following XAML sets the margin to ten on all sides:

<Button Margin="10"...

The Padding property is similar to the Margin property, however it is only available for certain controls, including Border, Button, and TextBlock. The property adds space between the edge of a control and its content. Figure 4 shows the use of the Margin and Padding properties, along with horizontal alignment, to control the layout of elements.

Figure 4. You can use the Margin and Padding properties, along with horizontal alignment, to control the layout of elements.

Containers

As mentioned earlier, each window can contain a single element. This element will typically be a container control. This chapter covers the following containers:

• StackPanel: Stacks elements horizontally or vertically.
• WrapPanel: Places elements in rows and columns that wrap as needed.
• DockPanel: Aligns elements along an edge.
• Grid: Places elements in rows and columns.
• Canvas: Places elements according to coordinates.

This post is an excerpt from the online courseware Windows Presentation Foundation Using Visual C# 2010 course written by expert Ken Getz and Robert Green.