--- title: "Alignment, Margins, and Padding Overview" description: Learn about HorizontalAlignment, Margin, Padding, and VerticalAlignment, which control child element position in Windows Presentation Foundation applications. ms.topic: overview ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" - "cpp" helpviewer_keywords: - "margins [WPF]" - "padding [WPF]" - "aligning [WPF]" ms.assetid: 9c6a2009-9b86-4e40-8605-0a2664dc3973 --- # Alignment, Margins, and Padding Overview The class exposes several properties that are used to precisely position child elements. This topic discusses four of the most important properties: , , , and . The effects of these properties are important to understand, because they provide the basis for controlling the position of elements in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] applications. ## Introduction to Element Positioning There are numerous ways to position elements using [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. However, achieving ideal layout goes beyond simply choosing the right element. Fine control of positioning requires an understanding of the , , , and properties. The following illustration shows a layout scenario that utilizes several positioning properties. ![WPF Positioning Properties Sample](./media/layout-margins-padding-alignment-graphic1.PNG "layout_margins_padding_alignment_graphic1") At first glance, the 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 element encapsulates a parent , with a value of 15 device independent pixels. This accounts for the narrow band that surrounds the child . Child elements of the are used to illustrate each of the various positioning properties that are detailed in this topic. Three elements are used to demonstrate both the and properties. [!code-csharp[MPALayoutSampleIntro#1](~/samples/snippets/csharp/VS_Snippets_Wpf/MPALayoutSampleIntro/CSharp/MPA_Layout_Sample_Intro.cs#1)] [!code-vb[MPALayoutSampleIntro#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MPALayoutSampleIntro/VisualBasic/MPALayoutIntro.vb#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](./media/layout-margins-padding-alignment-graphic2.PNG "layout_margins_padding_alignment_graphic2") ## Understanding Alignment Properties The and 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 can specify four different horizontal alignments: , , or , or to to fill available space. Similar values are available for vertical positioning. > [!NOTE] > Explicitly-set and properties on an element take precedence over the property value. Attempting to set , , and a value of `Stretch` results in the `Stretch` request being ignored. ### HorizontalAlignment Property The property declares the horizontal alignment characteristics to apply to child elements. The following table shows each of the possible values of the property. |Member|Description| |------------|-----------------| ||Child elements are aligned to the left of the parent element's allocated layout space.| ||Child elements are aligned to the center of the parent element's allocated layout space.| ||Child elements are aligned to the right of the parent element's allocated layout space.| | (Default)|Child elements are stretched to fill the parent element's allocated layout space. Explicit and values take precedence.| The following example shows how to apply the property to elements. Each attribute value is shown, to better illustrate the various rendering behaviors. [!code-csharp[MPALayoutHorizontalAlignment#2](~/samples/snippets/csharp/VS_Snippets_Wpf/MPALayoutHorizontalAlignment/CSharp/MPA_Layout_HorizontalAlignment.cs#2)] [!code-vb[MPALayoutHorizontalAlignment#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MPALayoutHorizontalAlignment/VisualBasic/MPA_Layout_HorizontalAlignment.vb#2)] The preceding code yields a layout similar to the following image. The positioning effects of each value are visible in the illustration. ![HorizontalAlignment Sample](./media/layout-horizontal-alignment-graphic.PNG "layout_horizontal_alignment_graphic") ### VerticalAlignment Property The property describes the vertical alignment characteristics to apply to child elements. The following table shows each of the possible values for the property. |Member|Description| |------------|-----------------| ||Child elements are aligned to the top of the parent element's allocated layout space.| ||Child elements are aligned to the center of the parent element's allocated layout space.| ||Child elements are aligned to the bottom of the parent element's allocated layout space.| | (Default)|Child elements are stretched to fill the parent element's allocated layout space. Explicit and values take precedence.| The following example shows how to apply the property to elements. Each attribute value is shown, to better illustrate the various rendering behaviors. For purposes of this sample, a element with visible gridlines is used as the parent, to better illustrate the layout behavior of each property value. [!code-csharp[MPALayoutVerticalAlignment#2](~/samples/snippets/csharp/VS_Snippets_Wpf/MPALayoutVerticalAlignment/CSharp/MPA_Layout_VerticalAlignment.cs#2)] [!code-vb[MPALayoutVerticalAlignment#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MPALayoutVerticalAlignment/VisualBasic/MPA_Layout_VerticalAlignment.vb#2)] [!code-xaml[MPALayoutVerticalAlignment#2](~/samples/snippets/xaml/VS_Snippets_Wpf/MPALayoutVerticalAlignment/XAML/default.xaml#2)] The preceding code yields a layout similar to the following image. The positioning effects of each value are visible in the illustration. ![VerticalAlignment property sample](./media/layout-vertical-alignment-graphic.PNG "layout_vertical_alignment_graphic") ## Understanding Margin Properties The property describes the distance between an element and its child or peers. values can be uniform, by using syntax like `Margin="20"`. With this syntax, a uniform of 20 device independent pixels would be applied to the element. 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 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 and . The following example shows how to apply uniform margins around a group of elements. The elements are spaced evenly with a ten-pixel margin buffer in each direction. [!code-cpp[MarginPaddingAlignmentSample#1](~/samples/snippets/cpp/VS_Snippets_Wpf/MarginPaddingAlignmentSample/CPP/Margin_Padding_Alignment_Sample.cpp#1)] [!code-csharp[MarginPaddingAlignmentSample#1](~/samples/snippets/csharp/VS_Snippets_Wpf/MarginPaddingAlignmentSample/CSharp/Margin_Padding_Alignment_Sample.cs#1)] [!code-vb[MarginPaddingAlignmentSample#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MarginPaddingAlignmentSample/VisualBasic/MarginPaddingAlignment.vb#1)] [!code-xaml[MarginPaddingAlignmentSample#1](~/samples/snippets/xaml/VS_Snippets_Wpf/MarginPaddingAlignmentSample/XAML/default.xaml#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-cpp[MarginPaddingAlignmentSample#2](~/samples/snippets/cpp/VS_Snippets_Wpf/MarginPaddingAlignmentSample/CPP/Margin_Padding_Alignment_Sample.cpp#2)] [!code-csharp[MarginPaddingAlignmentSample#2](~/samples/snippets/csharp/VS_Snippets_Wpf/MarginPaddingAlignmentSample/CSharp/Margin_Padding_Alignment_Sample.cs#2)] [!code-vb[MarginPaddingAlignmentSample#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MarginPaddingAlignmentSample/VisualBasic/MarginPaddingAlignment.vb#2)] [!code-xaml[MarginPaddingAlignmentSample#2](~/samples/snippets/xaml/VS_Snippets_Wpf/MarginPaddingAlignmentSample/XAML/default.xaml#2)] ## Understanding the Padding Property Padding is similar to in most respects. The Padding property is exposed on only on a few classes, primarily as a convenience: , , , and are samples of classes that expose a Padding property. The property enlarges the effective size of a child element by the specified value. The following example shows how to apply to a parent element. [!code-cpp[MarginPaddingAlignmentSample#3](~/samples/snippets/cpp/VS_Snippets_Wpf/MarginPaddingAlignmentSample/CPP/Margin_Padding_Alignment_Sample.cpp#3)] [!code-csharp[MarginPaddingAlignmentSample#3](~/samples/snippets/csharp/VS_Snippets_Wpf/MarginPaddingAlignmentSample/CSharp/Margin_Padding_Alignment_Sample.cs#3)] [!code-vb[MarginPaddingAlignmentSample#3](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MarginPaddingAlignmentSample/VisualBasic/MarginPaddingAlignment.vb#3)] [!code-xaml[MarginPaddingAlignmentSample#3](~/samples/snippets/xaml/VS_Snippets_Wpf/MarginPaddingAlignmentSample/XAML/default.xaml#3)] ## Using Alignment, Margins, and Padding in an Application , , , and provide the positioning control necessary to create a complex [!INCLUDE[TLA#tla_ui](../../../includes/tlasharptla-ui-md.md)]. 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 element as a child of the in the first sample. is applied to the parent element. The is used to partition space between three child elements. elements are again used to show the various effects of and . elements are added to each to better define the various properties applied to the elements in each column. [!code-cpp[MarginPaddingAlignmentSample#4](~/samples/snippets/cpp/VS_Snippets_Wpf/MarginPaddingAlignmentSample/CPP/Margin_Padding_Alignment_Sample.cpp#4)] [!code-csharp[MarginPaddingAlignmentSample#4](~/samples/snippets/csharp/VS_Snippets_Wpf/MarginPaddingAlignmentSample/CSharp/Margin_Padding_Alignment_Sample.cs#4)] [!code-vb[MarginPaddingAlignmentSample#4](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MarginPaddingAlignmentSample/VisualBasic/MarginPaddingAlignment.vb#4)] [!code-xaml[MarginPaddingAlignmentSample#4](~/samples/snippets/xaml/VS_Snippets_Wpf/MarginPaddingAlignmentSample/XAML/default.xaml#4)] When compiled, the preceding application yields a [!INCLUDE[TLA2#tla_ui](../../../includes/tla2sharptla-ui-md.md)] 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 elements. ![Several positioning properties in one application](./media/layout-margins-padding-aligment-graphic3.PNG "layout_margins_padding_aligment_graphic3") ## What's Next Positioning properties defined by the class enable fine control of element placement within [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] applications. You now have several techniques you can use to better position elements using [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. Additional resources are available that explain [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] layout in greater detail. The [Panels Overview](../controls/panels-overview.md) topic contains more detail about the various elements. The topic [Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md) introduces advanced techniques that use layout elements to position components and bind their actions to data sources. ## See also - - - - - [Panels Overview](../controls/panels-overview.md) - [Layout](layout.md) - [WPF Layout Gallery Sample](https://github.com/microsoft/WPF-Samples/tree/master/Getting%20Started/ControlsAndLayout)