Proper layout and positioning are a vital part of interactive, high-performance and user-friendly Windows applications. In a series of articles, I will discuss the layout process in WPF. The series starts with an understanding of the WPF layout process. The next part of this series will cover the basics of layout and positioning such as size, margin, padding and alignment of elements. Later in this series, I will cover various panels and related parent controls available in WPF.
Introduction
The layout process in WPF includes the selection of a suitable container parent element, initial placement and positioning, setting margins, paddings and alignments of parent and child elements. A parent container element usually is the contents of a Window or a Page depending on the type of WPF application. Once a parent container element is placed inside a Window or Page element, this parent container element than becomes the host of the child container elements and other control elements.
Figure 1 is an example of a typical Window with a title, a border and minimize, maximize and close buttons. The blue area of the user interface is a parent container element that usually is a panel. The Orange and the Green areas are the child elements that are placed on the parent container panel.
![]()
Figure 1
The sub-system that is responsible for the layout and positioning in WPF is called the Layout System. The layout system is not only responsible for designing user interfaces at design-time but also manages the rendering of elements at runtime. The layout system also manages the event processing of elements.
Control vs. Element
WPF has two common ways to represent UI objects such as a Button, using a class or an element. The C# class name represents a UI object in a code-behind file at run-time and the XAML element represents a UI element in XAML file at design-time. The run-time representation of a UI object in C# is often called a control and the design-time representation of a UI object in XAML is often called an element.
Layout Slot and Layout Clip
In WPF, each element is defined within a rectangle that represents the boundaries of an element. This rectangle is called the layout slot. The actual size of this rectangle is calculated by the layout system at runtime after calculations based on the screen size, parent properties and element properties such as border, width, height, margin and padding. After calculating the layout properties of the element, the final visible region of an element is called the layout clip.
For example, Figure 2 and Figure 3 show the layout slot and layout click of an element.
![]()
Figure 2
![]()
Figure 3
Get Layout Information
If you look at Figure 4, there is a Button and a TextBlock control placed on a Window. You may not notice the layout area of the TextBlock but if you look at Figure 5, the actual layout area of the TextBlock is the Blue area.
![]()
Figure 4
![]()
Figure 5
The LayoutInformation class is used to get information about the layout of a Window or Page in WPF.
The LayoutInformation class has two static methods, GetLayoutClip and GetLayoutSlot. The GetLayoutClip method returns a Geometry that represents the visible region of an element. The GetLayoutSlot method returns the entire bounding rectangle of an element.
The code snippet in Listing 1 calls the GetLayoutClip and GetLayoutSlot methods to get the layout clip and layout slot of a TextBlock element.
- Geometry clipGeometry = LayoutInformation.GetLayoutClip(textBlock1);
-
- Rect layoutRectangle = LayoutInformation.GetLayoutSlot(textBlock1); textBlock1.Text = "Layout: " + layoutRectangle.ToString();
Listing 1
Summary
In this article, I discussed the basic understanding of the WPF layout system. I discussed the layout clip and the layout slot. In the next article of this series, I will discuss size in the layout system including the width and height of WPF elements.