Understanding Layout Panels in XAML
Layout panels are the container elements in XAML responsible for measuring and arranging their child elements. Every panel (StackPanel, Grid, WrapPanel, DockPanel, Canvas) inherits from Panel and implements its own MeasureOverride and ArrangeOverride logic, which determines how much space children request and where they are finally positioned. Choosing the right panel is the single biggest factor in whether a XAML layout is simple, responsive, and maintainable.
Cricket analogy: Just as a fielding captain chooses a field placement scheme — attacking slips for a new ball, or a spread field for containment — a XAML developer picks StackPanel, Grid, or Canvas based on what arrangement the screen actually needs.
StackPanel and WrapPanel
StackPanel arranges children in a single line — either Orientation="Vertical" (default) or Orientation="Horizontal" — giving each child its desired size along the stack axis and unlimited space along the cross axis. Because it doesn't constrain height in vertical mode, a StackPanel is ideal for simple forms and toolbars but can cause children to be clipped if content overflows the visible area.
Cricket analogy: A StackPanel with Orientation="Vertical" is like a batting order card pinned to the pavilion wall — batsmen are listed one under the next in a fixed sequence, and if the list runs long it simply runs off the bottom of the card.
WrapPanel behaves like StackPanel until it runs out of room along the primary axis, at which point it wraps remaining children onto a new line, similar to how text wraps in a paragraph. This makes it well suited for tag clouds, photo thumbnail galleries, and toolbars whose button count varies at runtime.
Cricket analogy: WrapPanel behaves like a scoreboard showing partnership run totals that wraps to a second row once the first row of overs is full, keeping every figure visible instead of running off the board.
Grid: Rows, Columns, and Star Sizing
Grid divides its available space into a matrix defined by RowDefinitions and ColumnDefinitions, each sized as Auto (fits content), a fixed pixel value, or Star (a proportional share of remaining space, e.g., "2*"). Children are placed into cells using the attached properties Grid.Row and Grid.Column, and can span multiple cells with Grid.RowSpan and Grid.ColumnSpan, making Grid the most flexible and most commonly used panel for real application layouts.
Cricket analogy: A Grid is like a scorecard table with fixed columns for runs, balls, and fours, plus a star-sized column for the batsman's name that stretches to fill remaining width, exactly like Grid's Star sizing.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Dashboard" Grid.Row="0" Grid.ColumnSpan="2" FontSize="20"/>
<StackPanel Grid.Row="1" Grid.Column="0" Background="#F2F2F2"/>
<ContentControl Grid.Row="1" Grid.Column="1"/>
<Button Content="Save" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right"/>
</Grid>DockPanel and Canvas
DockPanel docks each child to an edge of the remaining space using the attached property DockPanel.Dock (Left, Top, Right, Bottom), consuming that edge's space before laying out subsequent children, with the LastChildFill property (default true) making the final child fill whatever space is left. Canvas, by contrast, is the only panel that does not perform relative layout at all — children are positioned with absolute Canvas.Left/Canvas.Top coordinates, so it neither resizes nor reflows its content when the container changes size.
Cricket analogy: DockPanel.Dock is like assigning fielders to fixed zones — slip, gully, deep midwicket — before the remaining fielders fill whatever ground is left, just as LastChildFill lets the final child claim the leftover space.
LastChildFill on DockPanel defaults to true, so the last child you declare automatically fills whatever space the docked siblings leave behind — remove it or set it false if you want the final child sized to its own content instead.
Canvas performs no automatic layout: children keep their exact Canvas.Left/Canvas.Top coordinates even when the window is resized, so it's a poor choice for any UI that needs to adapt to different screen sizes — reserve it for fixed-size diagrams, drawing surfaces, or absolute-position overlays.
- Every panel implements MeasureOverride/ArrangeOverride to control how children are sized and positioned.
- StackPanel lays children out along one axis with unconstrained space on that axis.
- WrapPanel behaves like StackPanel but flows overflow content onto new lines.
- Grid uses RowDefinitions/ColumnDefinitions with Auto, fixed, and Star sizing, plus RowSpan/ColumnSpan for spanning cells.
- DockPanel docks children to edges via DockPanel.Dock, with LastChildFill controlling the final child's behavior.
- Canvas is the only panel using absolute positioning and performs no reflow when resized.
- Picking the right panel is the biggest factor in building simple, responsive XAML layouts.
Practice what you learned
1. Which panel automatically wraps overflow children onto a new line?
2. In a Grid, what does ColumnDefinition Width="2*" mean?
3. Which attached property controls which edge a child docks to in a DockPanel?
4. What happens to Canvas children when the containing window is resized?
5. What does LastChildFill="true" do on a DockPanel?
Was this page helpful?
You May Also Like
Content Controls in XAML
How ContentControl and its subclasses (Button, Label, Border, ScrollViewer) hold a single logical child via the Content property, and how ContentPresenter and ContentTemplate render it.
ItemsControl and Templates
How ItemsControl and its subclasses (ListBox, ComboBox, ListView) render a collection via ItemsSource, ItemTemplate, and ItemsPanelTemplate.
Visual States in XAML
How VisualStateManager, VisualStateGroups, and VisualState define named, animated appearance changes for a control, and how GoToState transitions between them.
Related Reading
Related Study Notes in Microsoft Technologies
Browse all study notesWindows 10 / UWP Development Study Notes
.NET · 30 topics
Microsoft TechnologiesWindows Batch Scripting Study Notes
Batch · 30 topics
Microsoft TechnologiesMFC (Microsoft Foundation Classes) Study Notes
C++ · 30 topics
Microsoft TechnologiesSilverlight Study Notes
.NET · 30 topics
Microsoft TechnologiesWPF (Windows Presentation Foundation) Study Notes
.NET · 30 topics
Microsoft TechnologiesMVVM Design Pattern Study Notes
.NET · 30 topics