WPF provides several panel controls to define the layout of user interface elements, including StackPanel to arrange elements vertically or horizontally, WrapPanel to wrap elements to multiple lines, DockPanel to pin elements to specific edges, Grid to arrange elements in rows and columns, Canvas to manually position elements, and UniformGrid to arrange elements in equally sized cells in a grid. These panels allow positioning elements, stretching them to available space, and nesting layouts to create complex user interface designs.

2.  Powerful and flexible array of tools for
controlling the layout of the user interface.
 Automate resizing, scaling, and adaptation to
localization
 WPF provides a set of panels to arrange the
elements they contain

3. Panel type Usage
StackPanel Lays children out in a vertical or horizontal stack; extremely
simple, useful for managing small-scale
aspects of layout.
WrapPanel Lays children out from left to right, moving onto a new line each
time it fills the available width.
DockPanel Allocates an entire edge of the panel area to each child; useful for
defining the rough layout of simple
applications at a coarse scale.
Grid Arranges children within a grid; useful for aligning items without
resorting to fixed sizes and positions.
The most powerful of the built-in panels.
Canvas Performs no layout logic—puts children where you tell it to;
allows you to take complete control of
the layout process.
UniformGrid Arranges children in a grid where every cell is the same size.

4. Arranges controls in a line, either horizontally or
vertically
 Note:
 Items are stretched to fit their contents (text) and
to fit the window.
 By default, items will not fill all the available space
(whitespace in screenshot).
 Layouts can be nested within one another.

5. <StackPanel Orientation="Horizontal">
<Button>Button1</Button>
<Button>Button2</Button>
<StackPanel Orientation="Vertical">
<Button>Button3</Button>
<Button>Button4</Button>
</StackPanel>
</StackPanel>

6. Arranges items in a line until the border is hit,
then wraps to the next line
 Note:
 Items are stretched to fit their contents (text).
 If an item cannot fit entirely in the allotted space,
the entire control is moved to the next line.

7. <WrapPanel Background="Beige">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
<Button>Four</Button>
<Button>Five</Button>
<Button>Six</Button>
<Button>Seven</Button>
<Button>Eight</Button>
</WrapPanel>

8. Places controls in five different regions: top, bottom, left,
right, or center (fill).
 Note:
 Child elements tell the parent DockPanel where they
should be placed (DockPanel.Dock="Top").
 You can place more than one control in a region (Yellow 1
and Blue 2).
 If you do not specify a region, then the item will be set to
fill (default behavior).
 Items are stretched to fit their contents (text) and to fit the
region they are in.
 The size of any non-fill region is dictated by its contents
(Red 1 has a height specified so it is larger).

9. <DockPanel>
<Button DockPanel.Dock="Top">Top</Button>
<Button DockPanel.Dock="Bottom">Bottom</Button>
<Button DockPanel.Dock="Left">Left</Button>
<Button DockPanel.Dock="Right">Right</Button>
<Button>Fill</Button></DockPanel>

10.  Explicitly position controls based on
coordinates
 Note:
 Child elements tell the parent Canvas where they
should be placed (Canvas.Right="50").
 When no dimensions are specified, the labels are
stretched to fit their contents (text).
 Controls can be placed relative to any side of the
window (Blue 1 vs. Blue 2).
 Top overrides Bottom and Left overrides Right.

11. <Canvas Background="Yellow" Width="150" Height="100">
<TextBlock Canvas.Left="10" Canvas.Top="20">Hello</TextBlock>
<TextBlock Canvas.Right="10" Canvas.Bottom="20">world!</TextBlock>
</Canvas>

13.  Maintains a series of grid cells of equal size
 Note:
 Items are stretched to fit the cell.
 The total number of cells increases by square
integers

14. <UniformGridTextBlock.TextAlignment="Center">
<TextBlockText="X" />
<TextBlockText="O"/>
<TextBlockText="X"/>
<TextBlockText="X"/>
<TextBlockText="X"/>
<TextBlockText="O"/>
<TextBlockText="O"/>
<TextBlockText="O"/>
<TextBlockText="X"/>
</UniformGrid>

15.  Defines static columns and rows; like HTML
tables
 Note:
 Child elements tell the parent grid what cell they
should be in.
 Items are stretched to fill the cell.
 Each row or column can be given a specific size
(Height/Width).
 Cell contents can be told to span multiple rows
(RowSpan) or columns (ColumnSpan).

16.  Fixed: Fixed size of logical units (1/96 inch)
 new GridLength(100,GridUnitType.Pixel)
 Auto:Takes as much space as needed by the
contained control
 GridLength.Auto
 Star (*):Takes as much space as available
 new GridLength(1,GridUnitType.Star)

17. <Grid>
<Grid.RowDefinitions>
<RowDefinition /><RowDefinition /> <RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition /><ColumnDefinition /><ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">A</Button>
<Button Grid.Row="0" Grid.Column="2">C</Button>
<Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2">D</Button>
<Button Grid.Row="1" Grid.Column="1">E</Button>
<Button Grid.Row="1" Grid.Column="2">F</Button>
<Button Grid.Row="2" Grid.Column="1">H</Button>
<Button Grid.Row="2" Grid.Column="2">I</Button>
</Grid>