Click here to Skip to main content
14,389,876 members

WPF Layouts - A Visual Quick Start

Rate this:
4.90 (59 votes)
Please Sign up or sign in to vote.
4.90 (59 votes)
5 Mar 2009CPOL
A beginner's guide to the default control layout mechanisms in WPF

WPF Visual Quick Start Articles by Josh Fischer


Switching from WinForms UI development to WPF can be intimidating. The question I kept asking myself is, "Where do I start?" Hopefully, this article will help you quickly develop a good starting point for WPF as it did for me. The examples are written in XAML, as it can be easily copied and pasted into the Visual Studio (or any other) designer. My goal is to show how the layouts work with screenshots and XAML, instead of using text descriptions.


Layouts are the mechanism that WPF uses to define how visual items will be displayed on the screen for standard 2D applications. This concept is not new, and if you have used any of the Panel controls in WinForms (FlowLayoutPanel, TableLayoutPanel, etc.), you will not have any trouble understanding the basic layouts in WPF. In their simplest form, the layout classes are nothing more than containers for the other controls in your application and handle the positioning of those controls for you.

The Layouts

  • StackPanel - Arranges controls in a line, either horizontally or vertically.

    Image 1

    <StackPanel Orientation="Vertical"> <!-- Vertical is the default -->
      <Label Background="Red">Red 1</Label>
      <Label Background="LightGreen">Green 1</Label>
      <StackPanel Orientation="Horizontal">
        <Label Background="Red">Red 2</Label>
        <Label Background="LightGreen">Green 2</Label>
        <Label Background="LightBlue">Blue 2</Label>
        <Label Background="Yellow">Yellow 2</Label>
        <Label Background="Orange">Orange 2</Label>
      <Label Background="LightBlue">Blue 1</Label>
      <Label Background="Yellow">Yellow 1</Label>
      <Label Background="Orange">Orange 1</Label>
    • 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.
  • WrapPanel - Arranges items in a line until the border is hit, then wraps to the next line.

    Image 2

    Vertical orientation

    Image 3

    Horizontal orientation
    <WrapPanel Orientation="Vertical">
      <Label Height="125" Background="Red">Red 1</Label>
      <Label Height="100" Background="LightGreen">Green 1</Label>
      <Label Height="125" Background="LightBlue">Blue 1</Label>
      <Label Height="50" Background="Yellow">Yellow 1</Label>
      <Label Height="150" Background="Orange">Orange 1</Label>
      <Label Height="100" Background="Red">Red 2</Label>
      <Label Height="150" Background="LightGreen">Green 2</Label>
      <Label Height="75" Background="LightBlue">Blue 2</Label>
      <Label Height="50" Background="Yellow">Yellow 2</Label>
      <Label Height="175" Background="Orange">Orange 2</Label>
    <WrapPanel Orientation="Horizontal"> <!-- Horizontal is the default -->
      <Label Width="125" Background="Red">Red 1</Label>
      <Label Width="100" Background="LightGreen">Green 1</Label>
      <Label Width="125" Background="LightBlue">Blue 1</Label>
      <Label Width="50" Background="Yellow">Yellow 1</Label>
      <Label Width="150" Background="Orange">Orange 1</Label>
      <Label Width="100" Background="Red">Red 2</Label>
      <Label Width="150" Background="LightGreen">Green 2</Label>
      <Label Width="75" Background="LightBlue">Blue 2</Label>
      <Label Width="50" Background="Yellow">Yellow 2</Label>
      <Label Width="175" Background="Orange">Orange 2</Label>
    • 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.
  • DockPanel - Places controls in five different regions: top, bottom, left, right, or center (fill).

    Image 4

      <Label DockPanel.Dock="Top" Height="100" Background="Red">Red 1</Label>
      <Label DockPanel.Dock="Left" Background="LightGreen">Green 1</Label>
      <Label DockPanel.Dock="Right" Background="LightBlue">Blue 1</Label>
      <Label DockPanel.Dock="Bottom" Background="LightBlue">Blue 2</Label>
      <Label DockPanel.Dock="Bottom" Height="50" Background="Yellow">Yellow 1</Label>
      <Label Width="100" Background="Orange">
    			Orange 1</Label>   <!-- default is to fill -->
      <Label Background="LightGreen">Green 2</Label>
    • 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).
  • Canvas - Explicitly position controls based on coordinates.

    Image 5

      <!-- default coordinates 0,0 from top left; like WinForms -->
      <Label Background="Red">Red 1</Label>
      <Label Canvas.Right="50" Background="LightGreen" >Green 1</Label>
      <Label Canvas.Top="100" Canvas.Left="100" Background="LightBlue" >Blue 1</Label>
      <Label Canvas.Bottom="166" Canvas.Right="237" Background="LightBlue" >
    						Blue 2</Label>
      <Label Canvas.Right="300" Canvas.Top="250" Background="Yellow" >Yellow 1</Label>
      <Label Canvas.Right="50" Canvas.Bottom="50" Background="Orange" >Orange 1</Label>
    • 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.
  • UniformGrid - Maintains a series of grid cells of equal size.

    Image 6Image 7

    Image 8Image 9

      <Label Background="Red">Red 1</Label>
      <Label Background="LightGreen">Green 1</Label>
      <Label Background="LightBlue">Blue 1</Label>
      <Label Background="Yellow">Yellow 1</Label>
      <Label Background="Orange">Orange 1</Label>
      <Label Background="Red">Red 2</Label>
      <Label Background="LightGreen">Green 2</Label>
      <Label Background="Yellow">Yellow 2</Label>
      <Label Background="Orange">Orange 2</Label>
    • Items are stretched to fit the cell.
    • The total number of cells increases by square integers.
      # items# cellssquare of
  • Grid - Defines static columns and rows; like HTML tables.

    Image 10Image 11

    <!-- First screenshot -->
      <!-- Using default column and row configurations -->
        <ColumnDefinition />
        <ColumnDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
      <Label Grid.Column="0" Grid.Row="0" Background="Red">Red 1</Label>
      <Label Grid.Column="1" Grid.Row="0" Background="LightGreen">Green 1</Label>
      <Label Grid.Column="0" Grid.Row="1" Background="LightBlue">Blue 1</Label>
      <Label Grid.Column="1" Grid.Row="1" Background="Yellow">Yellow 1</Label>
      <Label Grid.Column="0" Grid.Row="2" Background="Orange">Orange 1</Label>
    <!-- 2nd screenshot uses ColumnSpan and RowSpan -->
    <Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" 
           Background="Red">Red 1</Label>
    <Label Grid.Column="0" Grid.Row="1" Grid.RowSpan="3" 
           Background="LightGreen">Green 1</Label>
    • 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).

Points of Interest

Please note this article is intended as a -visual- quick start for beginners. For a more in depth discussion, please see Sacha Barber's excellent article, or refer to the MSDN documentation.


  • 11/12/2008: Initial version
  • 11/21/2008: Fixed formatting errors made by CodeProject editors
  • 3/3/2009: Added related article index


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Josh Fischer
United States United States
CodeProject MVP 2010
CodeProject prize winner - Best C# article of December 2009

Comments and Discussions

QuestionHow to "Anchor" Pin
Célio9-May-13 2:07
MemberCélio9-May-13 2:07 
QuestionMy vote 5 Pin
Nitin Sawant30-Oct-12 1:58
professionalNitin Sawant30-Oct-12 1:58 
GeneralMy vote of 5 Pin
MySmity2124-Nov-11 9:39
MemberMySmity2124-Nov-11 9:39 
GeneralMy vote of 5 Pin
DavidFine1320-Oct-10 4:54
MemberDavidFine1320-Oct-10 4:54 
to the point
GeneralRe: My vote of 5 Pin
Josh Fischer26-Oct-10 7:15
professionalJosh Fischer26-Oct-10 7:15 
GeneralMy vote of 5 Pin
Member 3940519-Sep-10 20:42
MemberMember 3940519-Sep-10 20:42 
GeneralRe: My vote of 5 Pin
Josh Fischer27-Sep-10 5:06
professionalJosh Fischer27-Sep-10 5:06 
GeneralGood stuff Pin
Dmitri Nеstеruk12-Nov-08 8:29
MemberDmitri Nеstеruk12-Nov-08 8:29 
GeneralRe: Good stuff Pin
cjlambre17-Nov-08 9:28
Membercjlambre17-Nov-08 9:28 
GeneralRe: Good stuff Pin
Josh Fischer26-Jul-10 4:37
professionalJosh Fischer26-Jul-10 4:37 
GeneralRe: Good stuff Pin
Josh Fischer26-Jul-10 4:38
professionalJosh Fischer26-Jul-10 4:38 
GeneralJust What I Need Pin
mark_w_12-Nov-08 6:19
Membermark_w_12-Nov-08 6:19 
GeneralRe: Just What I Need Pin
Josh Fischer26-Jul-10 4:36
professionalJosh Fischer26-Jul-10 4:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 12 Nov 2008


100 bookmarked