Understanding WPF Layout Panels: Easy Examples of Grid, StackPanel, WrapPanel, DockPanel, Canvas & UniformGrid

If you are just starting out with WPF, layouts are something you must understand very clearly, because they control how every control such as button, textbox, etc. appears on the screen.

⭐ What Are Layout Panels?

Think of layout panels like containers or boxes that help you arrange your UI elements.

Just like when you pack a suitcase, you organize things in different sections — WPF uses layout panels to organize controls properly.

They decide:

where controls appear, how they resize, how they adapt when the window grows or shrinks.

📌 Let’s Learn Panels One by One (with real examples)

🟦 1. StackPanel — arrange controls in a line

StackPanel arranges items one after another, either top to bottom or left to right. Let me show you a simple example.

✔ Example: Vertical StackPanel

<StackPanel Orientation="Vertical">

    <Button Content="Save" Width="100"/>

    <Button Content="Edit" Width="100"/>

    <Button Content="Delete" Width="100"/>

</StackPanel>

All three buttons appear one below the other. It’s perfect for menus, tool sections, and small forms.

🟥 2. WrapPanel — wraps items like text in a paragraph

When items don’t fit in one row, WrapPanel moves the next item to the next line. Imagine displaying product images in an e-commerce app - WrapPanel is perfect. 

✔ Example:

<WrapPanel>

    <Button Content="Item 1"/>

    <Button Content="Item 2"/>

    <Button Content="Item 3"/>

    <Button Content="Item 4"/>

    <Button Content="Item 5"/>

</WrapPanel>

When the window becomes smaller, items automatically wrap to the next line.

🟩 3. DockPanel — dock controls to any side

DockPanel lets you place controls at the top, bottom, left, right, or center.

Think of a typical application layout:

• Menu at the top
• Status bar at the bottom
• Navigation on the left
• Main content in the center

✔ Example:

<DockPanel>

    <Menu DockPanel.Dock="Top">

        <MenuItem Header="File"/>

    </Menu>

    <StatusBar DockPanel.Dock="Bottom">

        <TextBlock Text="Ready"/>

    </StatusBar>

    <StackPanel DockPanel.Dock="Left" Width="150">

        <Button Content="Home"/>

        <Button Content="Settings"/>

    </StackPanel>

    <Grid>

        <TextBlock Text="Main Content Area"/>

    </Grid>

</DockPanel>

🟨 4. Canvas — absolute positioning

Canvas allows fixed positions like:

‘place this button exactly 50 pixels from the top and 40 pixels from the left’.

This is rarely used for full applications, but useful for:

• drawing
• custom diagrams
• games
• drag-drop surfaces

✔ Example:

<Canvas>

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

</Canvas>

🟪 5. Grid — the most powerful layout panel

Think of Grid like an Excel sheet — rows and columns. Grid is the backbone of modern WPF UI.

You can build any complex UI using Grid:

• Forms
• Dashboards
• Login screens
• Entire application layouts

✔ Example: Login Form in Grid

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto"/>

        <RowDefinition Height="Auto"/>

        <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="Auto"/>

        <ColumnDefinition Width="*"/>

    </Grid.ColumnDefinitions>

    <TextBlock Text="Username:" Grid.Row="0" Grid.Column="0"/>

    <TextBox Grid.Row="0" Grid.Column="1" Width="200"/>

    <TextBlock Text="Password:" Grid.Row="1" Grid.Column="0"/>

    <PasswordBox Grid.Row="1" Grid.Column="1" Width="200"/>

    <Button Content="Login" Grid.Row="2" Grid.ColumnSpan="2" Width="100"/>

</Grid>

🟧 6. UniformGrid — all cells are equal size

UniformGrid is like Grid, but with one big difference: All rows and columns are automatically the same size. You don’t need to manually set row heights or column widths. Just tell it how many rows and columns you want, and WPF arranges everything evenly.

This panel is perfect when you want a clean, balanced layout such as:

• number pads
• image galleries
• product display grids
• dashboards
• icon menus

✔ Practical Example: Number Pad

<UniformGrid Rows="4" Columns="3">

    <Button Content="1"/>

    <Button Content="2"/>

    <Button Content="3"/>

    <Button Content="4"/>

    <Button Content="5"/>

    <Button Content="6"/>

    <Button Content="7"/>

    <Button Content="8"/>

    <Button Content="9"/>

    <Button Content="*"/>

    <Button Content="0"/>

    <Button Content="#"/>

</UniformGrid>

Here, every button automatically gets an equal amount of space — no need to adjust sizes manually.

✔ Example: Product Icons

<UniformGrid Rows="2" Columns="3">

    <Border Background="LightBlue" Margin="5"/>

    <Border Background="LightGray" Margin="5"/>

    <Border Background="LightPink" Margin="5"/>

    <Border Background="LightGreen" Margin="5"/>

    <Border Background="Wheat" Margin="5"/>

    <Border Background="Lavender" Margin="5"/>

</UniformGrid>

This creates a clean, even layout — perfect for dashboards or quick-action icons.

⭐ Why Layout Panels Are Important

As a beginner, many students ask: ‘Why can’t we just place everything manually using margins?’

Here’s the problem:

If you resize the window, manually-placed controls break immediately.

Layout panels help you design clean, responsive, and professional UIs in WPF.

This is why companies always use layout panels — never fixed positioning.

So to summarize: 

1. StackPanel Arrange items in a single line (vertical or horizontal).
2. WrapPanel Wrap items to the next line when space is filled.
3. DockPanel Dock controls to Top, Bottom, Left, Right, or Center.
4. Canvas         Absolutely position elements (exact X/Y placement).
5. Grid                 Best for complex layouts with rows and columns (like Excel).
6. UniformGrid All cells are equal-sized, perfect for icon grids & keypads.