WPF Layout System: An Introduction

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.

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.