Overflow

Apply a negative margin to allow a control to overflow its container's boundaries, and consume white space between controls.

When composing controls using balanced whitespace, it is sometimes desirable to extend a control into the whitespace. For example, this can move a scroll bar adjacent to the window edge, or align items in a list with other elements of the container.

Structure

To preserve the benefits of balanced whitespace, avoid setting margins or padding on containers. Instead, set a negative margin on the control that should extend beyond the container's border.

Design

The user control allows the child to extend beyond its borders.

The control consumes the whitespace between itself and its neighbor.

XAML

The user control assigns a negative margin to the edge that should overlap. Knowing that the standard whitespace for this application is 12, the user control changes the positive 6 right margin to a negative 6 to align the list box scroll bar with the window's edge. Since there is a one-pixel border around the scrollbar, it makes it -7 to reach the edge.

<ListBox
    Margin="0,6,-7,6"
    FontSize="20"
    BorderThickness="0">
</ListBox>

The user control also assigns a zero right border to align the items in the list with other elements on the page. And it sets the border to 0 to hide the chrome. This allows the whitespace -- not a visible line -- to deliniate the controls. If the border were visible, the overflow would be obvious.