Alignment and Margins

Once a panel has decided how much space a child is allocated during the Arrange pass, four properties determine exactly how that child occupies its slot: HorizontalAlignment, VerticalAlignment, Margin, and Padding. HorizontalAlignment and VerticalAlignment (both defined on FrameworkElement) control whether an element stretches to fill its allocated space or aligns to one side or center and shrinks to its natural size, while Margin adds space outside an element's own border, pushing it away from siblings and container edges, and Padding (defined on Control and a few other classes like Border) adds space inside an element's border, between the border and its content. Understanding the distinction between 'outside spacing' (Margin) and 'inside spacing' (Padding) is essential for building visually consistent UIs and avoiding the common bug of confusing which property to adjust when spacing looks wrong.

HorizontalAlignment and VerticalAlignment each accept one of four values: Left/Top, Center, Right/Bottom, or Stretch, with Stretch being the default for most FrameworkElements when placed inside panels like Grid or DockPanel. When an alignment is set to Stretch, the element expands to fill the entire width or height of its allocated slot; when set to any of the other three values, the element instead shrinks to its own DesiredSize and positions itself at the specified edge or center of the slot, leaving the remaining space in that slot empty. This is why explicitly setting a fixed Width on an element whose HorizontalAlignment is Stretch effectively cancels the stretching — the element behaves as though it were set to Center by default in that dimension, because a fixed size takes priority over stretching to fill available space.

Margin is defined on FrameworkElement, meaning virtually every visual WPF element has it, and it always represents space outside that element's own bounds — it pushes the element away from its siblings and its parent's edges, and is one of the mechanisms (along with alignment) that a panel's Arrange pass accounts for when computing an element's final position. Padding, by contrast, is defined on Control (and separately on a few container-like elements such as Border), and represents space inside the element, between its outer border and the content it hosts; a Button's Padding, for example, is the gap between the button's visible border and its Content, which is why increasing a Button's Padding makes the button visually larger without changing anything about its position relative to neighboring controls. Both Margin and Padding accept either a single uniform Thickness value or four distinct values in the order left, top, right, bottom.

A common source of layout confusion is the interaction between explicit Width/Height and Stretch alignment: when both are present, the explicit size always wins, and Stretch has no visible effect in that dimension. Another frequent conflict arises when a MinWidth or MaxWidth constrains an element that also has HorizontalAlignment="Stretch" — the element still stretches, but only up to the Max bound or no smaller than the Min bound, meaning the final rendered size can differ from the raw available space in the panel. Margin values can also be negative in WPF, which is occasionally used deliberately to make an element intentionally overlap its neighbors (for example, overlapping badge icons), though negative margins are a relatively advanced technique and should be used sparingly since they can make layouts fragile when content or font sizes change.