#760 – Horizontal and Vertical Alignment Basics

The general idea of the HorizontalAlignment and VerticalAlignment properties, for objects that inherit from FrameworkElement, is to indicate how the element is positioned within the space that the parent panel provides, after accounting for any margins.

Different values for HorizontalAlignment and VerticalAlignment only lead to different layout if the parent panel provides more room than the child element requires, in the corresponding dimension.

In the grid shown below:

• Labels in the 1st row have HorizontalAlignment set to Left
• Labels in 2nd row have HorizontalAlignment set to Center
• Labels in 3rd row have HorizontalAlignment set to Stretch
• 1st column width is set to Auto–make wide enough for largest item
• 2nd column width takes up remaining space

Things to note:

• Labels in 2nd column have more room, so horizontal alignment results in different behavior
• 1st column sizes to fit 2nd row, so horizontal alignment doesn’t always apply