WPF Layouts - Microsoft Developer Network

Understanding WPF Layouts

Layouts in Windows Presentation Foundation (WPF) are fundamental to arranging user interface elements within your application's window. WPF employs a flexible and powerful layout system that allows for adaptive and responsive designs. This system is primarily based on the concept of elements negotiating their size and position with their parent containers.

Unlike traditional Win32 or ASP.NET Web Forms, WPF's layout system is not fixed. Elements can grow, shrink, and reposition themselves based on available space, content, and specific layout panel properties. This makes it ideal for creating applications that adapt to different screen resolutions and user preferences.

Key Layout Panels

WPF provides several built-in layout panels, each with distinct characteristics:

StackPanel

Arranges child elements in a single line, either horizontally or vertically.


<StackPanel Orientation="Vertical">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
</StackPanel>

Grid

Defines a flexible table-like layout structure using rows and columns. It's highly versatile for complex arrangements.


<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Header" Grid.Row="0" Grid.Column="0"/>
    <TextBlock Text="Content" Grid.Row="1" Grid.Column="1"/>
</Grid>

DockPanel

Allows child elements to "dock" to specific edges (Top, Bottom, Left, Right) of the panel. The last element fills the remaining space.


<DockPanel>
    <Menu DockPanel.Dock="Top" />
    <StatusBar DockPanel.Dock="Bottom" />
    <ContentControl />
</DockPanel>

Canvas

Provides a free-form canvas where elements can be positioned using absolute coordinates (Left, Top). Less common for adaptive layouts.


<Canvas>
    <Button Content="Button" Canvas.Left="50" Canvas.Top="50"/>
</Canvas>

WrapPanel

Arranges child elements in a line, wrapping to the next line when the available space is filled. Useful for toolbars or tag clouds.


<WrapPanel Orientation="Horizontal">
    <Button Content="Tag 1"/>
    <Button Content="Tag 2"/>
    <Button Content="Another Tag"/>
</WrapPanel>

The Layout Process

WPF's layout system involves two main passes: Measure and Arrange.

Measure Pass: Each element is measured by its parent. The parent asks its children to measure themselves, providing constraints on their size. Children then determine their desired size based on these constraints and their own content.
Arrange Pass: The parent then arranges its children based on the sizes determined in the Measure pass and the panel's specific layout logic. The parent provides a final bounding box for each child, and the children position and size themselves accordingly within that box.

This two-pass system ensures that elements can be sized and positioned dynamically. Understanding how properties like Width, Height, Margin, Padding, and panel-specific properties (e.g., Grid.Row, DockPanel.Dock) interact during these passes is crucial for effective UI design.

Best Practices

Prefer Grid for complex layouts due to its flexibility.
Use StackPanel and WrapPanel for simpler linear or wrapped arrangements.
Leverage * (star) sizing in Grid for proportional distribution of space.
Utilize Margin for spacing between elements and Padding for space within an element's border.
Avoid Canvas for general layouts unless absolute positioning is strictly required.