WPF Layout: Horizontal and Vertical Alignment

Proper layout and positioning are a vital part of interactive, high-performance and user-friendly Windows applications. This series of articles explain 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.

Table of Contents

Introduction

In the previous article, WPF Layout: Margins, I explained how to manage the paddings of elements. This article focuses on the vertical and horizontal alignment of elements.

Alignment

The FrameworkElement has two alignment properties: HorizontalAlignment and VerticalAlignment. The HorizontalAlignment property is a type of HorizontalAlignment enumeration and represents how a child element is positioned within a parent element horizontally.

The HorizontalAlignment enumeration has the four properties Left, Center, Right and Stretch. The Left, Center and Right properties sets a child element to left, center and right of the parent element. The Stretch property stretches a child element to fill the parent element's allocated layout space.

Note: If the Width property is set to an element, Stretch alignment does not have any affect.

The code listed in Listing 8 places four Button elements on a StackPanel and sets the HorizontalAlignment property to Left, Center, Right and Stretch.

Listing 1

Listing 1 generates output as in Figure 1. Now no matter how much you resize or move the window, the buttons will be aligned the same way.


Figure 1

The code listed in Listing 2 creates a StackPanel and adds four Button controls and sets their HorizontalAlignment property to Left, Center, Right and Stretch dynamically. The output looks as in exactly Figure 1.