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

• WPF Layout System: An Introduction
• WPF Layout: Size, Width and Height
• WPF Layout: Margins
• WPF Layout: Horizontal and Vertical Alignment
• WPF Layout: Content Alignments
• WPF Layout: Dealing with Percentage Size in WPF
• WPF Layout: Panels
• WPF Layout: Canvas
• WPF Layout: DockPanel
• WPF Layout: Grid
• WPF Layout: StackPanel
• WPF Layout: WrapPanel
• WPF Layout: Border
• WPF Layout: VirtualizingStackPanel 

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.

<StackPanel Background="LightGray" >
   <Button Name="Rect1" Background="LightBlue"
      Width="150" Height="50"
      HorizontalAlignment="Left"
      Content="Left Aligned" />

   <Button Name="Rect2" Background="LightGreen"
      Width="150" Height="50"
      HorizontalAlignment="Center"
      Content="Center Aligned" />

   <Button Name="Rect3" Background="LightCyan"
      Width="150" Height="50"
      HorizontalAlignment="Right"
      Content="Right Aligned" />

   <Button Name="Rect4" Background="LightPink"
      Height="50"
      HorizontalAlignment="Stretch"
      Content="Stretch Aligned" />
</StackPanel>

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.

private void DynamicallyHorizontalAlignment()
{
   Button btn1 = new Button();
   btn1.Width = 150;
   btn1.Height = 50;

   btn1.Background = new SolidColorBrush(Colors.LightBlue);
   btn1.Content = "Left Aligned";
   btn1.HorizontalAlignment = HorizontalAlignment.Left;

   StackPanel1.Children.Add(btn1);

   Button btn2 = new Button();
   btn2.Width = 150;
   btn2.Height = 50;
   btn2.Background = new SolidColorBrush(Colors.LightGreen);
   btn2.Content = "Center Aligned";
   btn2.HorizontalAlignment = HorizontalAlignment.Center;
   StackPanel1.Children.Add(btn2);

   Button btn3 = new Button();
   btn3.Width = 150;
   btn3.Height = 50;
   btn3.Background = new SolidColorBrush(Colors.LightCyan);
   btn3.Content = "Right Aligned";
   btn3.HorizontalAlignment = HorizontalAlignment.Right;
   StackPanel1.Children.Add(btn3);

   Button btn4 = new Button();
   btn4.Height = 50;
   btn4.Background = new SolidColorBrush(Colors.LightPink);
   btn4.Content = "Stretch Aligned";
   btn4.HorizontalAlignment = HorizontalAlignment.Stretch ;
   StackPanel1.Children.Add(btn4);

}

Listing 2

The VerticalAlignment property is a type of HorizontalAlignment enumeration and represents how a child element is positioned within a parent element vertically.

The VerticalAlignment enumeration has the four properties Top, Center, Bottom and Stretch. The Top, Center and Bottom properties set a child element to top, center or bottom of the parent element. The Stretch property stretches a child element to fill the parent element's allocated layout space vertically.

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

The code listed in Listing 3 places four Button elements on a Grid element and set the VerticalAlignment property to Top, Center, Bottom and Stretch.

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="100" />
      <ColumnDefinition Width="100" />
      <ColumnDefinition Width="100" />
      <ColumnDefinition Width="100" />
   </Grid.ColumnDefinitions>

   <Button Name="Button1" Background="LightBlue"
      Height="30" Width="100"
      VerticalAlignment="Top"
      Content="Left Aligned" />

   <Button Name="Button2" Background="LightGreen"
      Height="30" Width="100" Grid.Column="1"
      VerticalAlignment="Center"
      Content="Center Aligned" />

   <Button Name="Button3" Background="LightCyan"
      VerticalAlignment="Bottom"
      Height="30" Width="100" Grid.Column="2"
      HorizontalAlignment="Left"
      Content="Right Aligned" />

   <Button Name="Button4" Background="LightPink" Content="Stretch ligned"
      Width="100" Grid.Column="3"
      HorizontalAlignment="Stretch" />

</Grid>

Listing 3

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


                                             Figure 2

The code listed in Listing 4 creates a Grid and adds four Button controls and sets their VerticalAlignment property to Top, Center, Bottom and Stretch dynamically. The output looks as in exactly Figure 2.

private void DynamicallyVerticalAlignment()
{
   Button btn1 = new Button();
   btn1.Width = 100;
   btn1.Height = 30;
   btn1.Background = new SolidColorBrush(Colors.LightBlue);
   btn1.Content = "Top Aligned";
   btn1.VerticalAlignment = VerticalAlignment.Top;
   Grid1.Children.Add(btn1);

   Button btn2 = new Button();
   btn2.Width = 100;
   btn2.Height = 30;
   btn2.Background = new SolidColorBrush(Colors.LightGreen);
   btn2.Content = "Center Aligned";
   btn2.VerticalAlignment = VerticalAlignment.Center;
   Grid1.Children.Add(btn2);

   Button btn3 = new Button();
   btn3.Width = 100;
   btn3.Height = 30;
   btn3.Background = new SolidColorBrush(Colors.LightCyan);
   btn3.Content = "Bottom Aligned";
   btn3.VerticalAlignment = VerticalAlignment.Bottom;
   Grid1.Children.Add(btn3);

   Button btn4 = new Button();
   btn4.Width = 100;
   btn4.Background = new SolidColorBrush(Colors.LightPink);
   btn4.Content = "Stretch Aligned";
   btn4.VerticalAlignment = VerticalAlignment.Stretch;
   Grid1.Children.Add(btn4);

}

Listing 4

Summary

In this article, I discussed the vertical and horizontal alignment of WPF elements. The next article of this series explains the content alignment of WPF elements.