Permalink
Fetching contributors…
Cannot retrieve contributors at this time
156 lines (115 sloc) 18.2 KB
title ms.custom ms.date ms.prod ms.reviewer ms.suite ms.technology ms.tgt_pltfrm ms.topic helpviewer_keywords ms.assetid caps.latest.revision author ms.author manager
Alignment, Margins, and Padding Overview
03/30/2017
.net-framework
dotnet-wpf
article
margins
FrameworkElement class
classes, FrameworkElement
padding
aligning
9c6a2009-9b86-4e40-8605-0a2664dc3973
22
dotnet-bot
dotnetcontent
wpickett

Alignment, Margins, and Padding Overview

The xref:System.Windows.FrameworkElement class exposes several properties that are used to precisely position child elements. This topic discusses four of the most important properties: xref:System.Windows.FrameworkElement.HorizontalAlignment%2A, xref:System.Windows.FrameworkElement.Margin%2A, xref:System.Windows.Controls.Border.Padding%2A, and xref:System.Windows.FrameworkElement.VerticalAlignment%2A. The effects of these properties are important to understand, because they provide the basis for controlling the position of elements in [!INCLUDETLA#tla_winclient] applications.

Introduction to Element Positioning

There are numerous ways to position elements using [!INCLUDETLA2#tla_winclient]. However, achieving ideal layout goes beyond simply choosing the right xref:System.Windows.Controls.Panel element. Fine control of positioning requires an understanding of the xref:System.Windows.FrameworkElement.HorizontalAlignment%2A, xref:System.Windows.FrameworkElement.Margin%2A, xref:System.Windows.Controls.Border.Padding%2A, and xref:System.Windows.FrameworkElement.VerticalAlignment%2A properties.

The following illustration shows a layout scenario that utilizes several positioning properties.

WPF Positioning Properties Sample

At first glance, the xref:System.Windows.Controls.Button elements in this illustration may appear to be placed randomly. However, their positions are actually precisely controlled by using a combination of margins, alignments, and padding.

The following example describes how to create the layout in the preceding illustration. A xref:System.Windows.Controls.Border element encapsulates a parent xref:System.Windows.Controls.StackPanel, with a xref:System.Windows.Controls.Border.Padding%2A value of 15 device independent pixels. This accounts for the narrow xref:System.Windows.Media.Brushes.LightBlue%2A band that surrounds the child xref:System.Windows.Controls.StackPanel. Child elements of the xref:System.Windows.Controls.StackPanel are used to illustrate each of the various positioning properties that are detailed in this topic. Three xref:System.Windows.Controls.Button elements are used to demonstrate both the xref:System.Windows.FrameworkElement.Margin%2A and xref:System.Windows.FrameworkElement.HorizontalAlignment%2A properties.

[!code-csharpMPALayoutSampleIntro#1] [!code-vbMPALayoutSampleIntro#1]

The following diagram provides a close-up view of the various positioning properties that are used in the preceding sample. Subsequent sections in this topic describe in greater detail how to use each positioning property.

Positioning Properties with Screen Call-outs

Understanding Alignment Properties

The xref:System.Windows.FrameworkElement.HorizontalAlignment%2A and xref:System.Windows.FrameworkElement.VerticalAlignment%2A properties describe how a child element should be positioned within a parent element's allocated layout space. By using these properties together, you can position child elements precisely. For example, child elements of a xref:System.Windows.Controls.DockPanel can specify four different horizontal alignments: xref:System.Windows.HorizontalAlignment.Left, xref:System.Windows.HorizontalAlignment.Right, or xref:System.Windows.HorizontalAlignment.Center, or to xref:System.Windows.HorizontalAlignment.Stretch to fill available space. Similar values are available for vertical positioning.

[!NOTE] Explicitly-set xref:System.Windows.FrameworkElement.Height%2A and xref:System.Windows.FrameworkElement.Width%2A properties on an element take precedence over the xref:System.Windows.HorizontalAlignment.Stretch property value. Attempting to set xref:System.Windows.FrameworkElement.Height%2A, xref:System.Windows.FrameworkElement.Width%2A, and a xref:System.Windows.FrameworkElement.HorizontalAlignment%2A value of Stretch results in the Stretch request being ignored.

HorizontalAlignment Property

The xref:System.Windows.FrameworkElement.HorizontalAlignment%2A property declares the horizontal alignment characteristics to apply to child elements. The following table shows each of the possible values of the xref:System.Windows.FrameworkElement.HorizontalAlignment%2A property.

Member Description
xref:System.Windows.HorizontalAlignment.Left Child elements are aligned to the left of the parent element's allocated layout space.
xref:System.Windows.HorizontalAlignment.Center Child elements are aligned to the center of the parent element's allocated layout space.
xref:System.Windows.HorizontalAlignment.Right Child elements are aligned to the right of the parent element's allocated layout space.
xref:System.Windows.HorizontalAlignment.Stretch (Default) Child elements are stretched to fill the parent element's allocated layout space. Explicit xref:System.Windows.FrameworkElement.Width%2A and xref:System.Windows.FrameworkElement.Height%2A values take precedence.

The following example shows how to apply the xref:System.Windows.FrameworkElement.HorizontalAlignment%2A property to xref:System.Windows.Controls.Button elements. Each attribute value is shown, to better illustrate the various rendering behaviors.

[!code-csharpMPALayoutHorizontalAlignment#2] [!code-vbMPALayoutHorizontalAlignment#2]

The preceding code yields a layout similar to the following image. The positioning effects of each xref:System.Windows.FrameworkElement.HorizontalAlignment%2A value are visible in the illustration.

HorizontalAlignment Sample

VerticalAlignment Property

The xref:System.Windows.FrameworkElement.VerticalAlignment%2A property describes the vertical alignment characteristics to apply to child elements. The following table shows each of the possible values for the xref:System.Windows.FrameworkElement.VerticalAlignment%2A property.

Member Description
xref:System.Windows.VerticalAlignment.Top Child elements are aligned to the top of the parent element's allocated layout space.
xref:System.Windows.VerticalAlignment.Center Child elements are aligned to the center of the parent element's allocated layout space.
xref:System.Windows.VerticalAlignment.Bottom Child elements are aligned to the bottom of the parent element's allocated layout space.
xref:System.Windows.VerticalAlignment.Stretch (Default) Child elements are stretched to fill the parent element's allocated layout space. Explicit xref:System.Windows.FrameworkElement.Width%2A and xref:System.Windows.FrameworkElement.Height%2A values take precedence.

The following example shows how to apply the xref:System.Windows.FrameworkElement.VerticalAlignment%2A property to xref:System.Windows.Controls.Button elements. Each attribute value is shown, to better illustrate the various rendering behaviors. For purposes of this sample, a xref:System.Windows.Controls.Grid element with visible gridlines is used as the parent, to better illustrate the layout behavior of each property value.

[!code-csharpMPALayoutVerticalAlignment#2] [!code-vbMPALayoutVerticalAlignment#2] [!code-xamlMPALayoutVerticalAlignment#2]

The preceding code yields a layout similar to the following image. The positioning effects of each xref:System.Windows.FrameworkElement.VerticalAlignment%2A value are visible in the illustration.

VerticalAlignment property sample

Understanding Margin Properties

The xref:System.Windows.FrameworkElement.Margin%2A property describes the distance between an element and its child or peers. xref:System.Windows.FrameworkElement.Margin%2A values can be uniform, by using syntax like Margin="20". With this syntax, a uniform xref:System.Windows.FrameworkElement.Margin%2A of 20 device independent pixels would be applied to the element. xref:System.Windows.FrameworkElement.Margin%2A values can also take the form of four distinct values, each value describing a distinct margin to apply to the left, top, right, and bottom (in that order), like Margin="0,10,5,25". Proper use of the xref:System.Windows.FrameworkElement.Margin%2A property enables very fine control of an element's rendering position and the rendering position of its neighbor elements and children.

[!NOTE] A non-zero margin applies space outside the element's xref:System.Windows.FrameworkElement.ActualWidth%2A and xref:System.Windows.FrameworkElement.ActualHeight%2A.

The following example shows how to apply uniform margins around a group of xref:System.Windows.Controls.Button elements. The xref:System.Windows.Controls.Button elements are spaced evenly with a ten-pixel margin buffer in each direction.

[!code-cppMarginPaddingAlignmentSample#1] [!code-csharpMarginPaddingAlignmentSample#1] [!code-vbMarginPaddingAlignmentSample#1] [!code-xamlMarginPaddingAlignmentSample#1]

In many instances, a uniform margin is not appropriate. In these cases, non-uniform spacing can be applied. The following example shows how to apply non-uniform margin spacing to child elements. Margins are described in this order: left, top, right, bottom.

[!code-cppMarginPaddingAlignmentSample#2] [!code-csharpMarginPaddingAlignmentSample#2] [!code-vbMarginPaddingAlignmentSample#2] [!code-xamlMarginPaddingAlignmentSample#2]

Understanding the Padding Property

Padding is similar to xref:System.Windows.FrameworkElement.Margin%2A in most respects. The Padding property is exposed on only on a few classes, primarily as a convenience: xref:System.Windows.Documents.Block, xref:System.Windows.Controls.Border, xref:System.Windows.Controls.Control, and xref:System.Windows.Controls.TextBlock are samples of classes that expose a Padding property. The xref:System.Windows.Controls.Border.Padding%2A property enlarges the effective size of a child element by the specified xref:System.Windows.Thickness value.

The following example shows how to apply xref:System.Windows.Controls.Border.Padding%2A to a parent xref:System.Windows.Controls.Border element.

[!code-cppMarginPaddingAlignmentSample#3] [!code-csharpMarginPaddingAlignmentSample#3] [!code-vbMarginPaddingAlignmentSample#3] [!code-xamlMarginPaddingAlignmentSample#3]

Using Alignment, Margins, and Padding in an Application

xref:System.Windows.FrameworkElement.HorizontalAlignment%2A, xref:System.Windows.FrameworkElement.Margin%2A, xref:System.Windows.Controls.Border.Padding%2A, and xref:System.Windows.FrameworkElement.VerticalAlignment%2A provide the positioning control necessary to create a complex [!INCLUDETLA#tla_ui]. You can use the effects of each property to change child-element positioning, enabling flexibility in creating dynamic applications and user experiences.

The following example demonstrates each of the concepts that are detailed in this topic. Building on the infrastructure found in the first sample in this topic, this example adds a xref:System.Windows.Controls.Grid element as a child of the xref:System.Windows.Controls.Border in the first sample. xref:System.Windows.Controls.Border.Padding%2A is applied to the parent xref:System.Windows.Controls.Border element. The xref:System.Windows.Controls.Grid is used to partition space between three child xref:System.Windows.Controls.StackPanel elements. xref:System.Windows.Controls.Button elements are again used to show the various effects of xref:System.Windows.FrameworkElement.Margin%2A and xref:System.Windows.FrameworkElement.HorizontalAlignment%2A. xref:System.Windows.Controls.TextBlock elements are added to each xref:System.Windows.Controls.ColumnDefinition to better define the various properties applied to the xref:System.Windows.Controls.Button elements in each column.

[!code-cppMarginPaddingAlignmentSample#4] [!code-csharpMarginPaddingAlignmentSample#4] [!code-vbMarginPaddingAlignmentSample#4] [!code-xamlMarginPaddingAlignmentSample#4]

When compiled, the preceding application yields a [!INCLUDETLA2#tla_ui] that looks like the following illustration. The effects of the various property values are evident in the spacing between elements, and significant property values for elements in each column are shown within xref:System.Windows.Controls.TextBlock elements.

Several positioning properties in one application

What's Next

Positioning properties defined by the xref:System.Windows.FrameworkElement class enable fine control of element placement within [!INCLUDETLA2#tla_winclient] applications. You now have several techniques you can use to better position elements using [!INCLUDETLA2#tla_winclient].

Additional resources are available that explain [!INCLUDETLA2#tla_winclient] layout in greater detail. The Panels Overview topic contains more detail about the various xref:System.Windows.Controls.Panel elements. The topic Walkthrough: My first WPF desktop application introduces advanced techniques that use layout elements to position components and bind their actions to data sources.

See Also

xref:System.Windows.FrameworkElement
xref:System.Windows.FrameworkElement.HorizontalAlignment%2A
xref:System.Windows.FrameworkElement.VerticalAlignment%2A
xref:System.Windows.FrameworkElement.Margin%2A
Panels Overview
Layout
WPF Layout Gallery Sample