WPF provides a set of specialized panel elements for arranging UI content. The choice of panel determines how child controls are measured, arranged, and rendered.

Grid Panel

Functions similarly to an HTML table, allowing explicit definition of rows and columns.

Example: Basic Grid Definition

<Grid x:Name="gridMain">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

Rows and columns can also be added programmatically:

// Add a new column definition in code-behind
this.gridMain.ColumnDefinitions.Add(new ColumnDefinition());

Row and column sizes can be specified as absolute pixel values, proportional (star) values, or auto-sizing.

Example: Mixed Size Definitions

<Grid.RowDefinitions>
    <RowDefinition Height="25"/> <!-- Fixed 25 pixels -->
    <RowDefinition Height="4*"/> <!-- Proportional weight of 4 -->
    <RowDefinition Height="*"/> <!-- Proportional weight of 1 -->
</Grid.RowDefinitions>

Key Properties for Child Controls:

• Grid.Row / Grid.Column: Zero-based index position (defaults to 0 if omitted).
• Grid.RowSpan / Grid.ColumnSpan: Number of rows or columns a control occupies.
• Width="Auto" and MinWidth can control width behavior.

Example: Complex Grid Layout

<Grid x:Name="gridMain">
    <Grid.RowDefinitions>
        <RowDefinition Height="25"/>
        <RowDefinition Height="4"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="4"/>
        <RowDefinition Height="25"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MinWidth="120"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="4"/>
        <ColumnDefinition Width="80"/>
    </Grid.ColumnDefinitions>

    <TextBlock Text="Select Department" VerticalAlignment="Center"/>
    <ComboBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4"/>
    <TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="Black"/>
    <Button Grid.Column="2" Grid.Row="4" Content="Clear"/>
    <Button Grid.Column="4" Grid.Row="4" Content="Submit"/>
</Grid>

StackPanel

Arranges child elements sequentially in a single line, either horizontally or vertically. By default, orientation is vertical. Removing a child causes subsequnet elements to shift postiion.

Example: Vertical Stack with Controls

<GroupBox Header="Select the Most Handsome Person" BorderBrush="black" Margin="5">
    <StackPanel Margin="5">
        <CheckBox Content="A. John Doe"/>
        <CheckBox Content="B. Jane Smith"/>
        <CheckBox Content="C. Alex Johnson"/>
        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
            <Button Content="Confirm"/>
        </StackPanel>
    </StackPanel>
</GroupBox>

Note: CheckBox and Button content is set via the Content property. The GroupBox title is set via Header.

Canvas

Provides absolute positioning using coordinates. Ideal for static layouts requiring precise placement. Child controls use attached properties Canvas.Left and Canvas.Top for positioning.

DockPanel

Docks child elements to the specified edges (Top, Bottom, Left, Right). The last child fills the remaining space unless LastChildFill is set to False.

Example: Docking Elements

<DockPanel>
    <TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Black"/>
    <TextBox DockPanel.Dock="Left" Width="100" BorderBrush="Black"/>
    <TextBox BorderBrush="Black"/>
</DockPanel>

In this example, the three TextBox controls fill the entire panel area.

WrapPanel

Positions child elements sequentially from left to right, wrapping to the next line when the edge of the container is reached. Similar to a flow layout.

Example: Wrapping Buttons

<WrapPanel>
    <Button Width="50" Height="50" Content="OK"/>
    <Button Width="50" Height="50" Content="OK"/>
    <Button Width="50" Height="50" Content="OK"/>
    <Button Width="50" Height="50" Content="OK"/>
    <Button Width="50" Height="50" Content="OK"/>
    <Button Width="50" Height="50" Content="OK"/>
    <Button Width="50" Height="50" Content="OK"/>
</WrapPanel>