Click here to Skip to main content
15,860,972 members
Articles / Desktop Programming / WPF

WPF Layouts - A Visual Quick Start

Rate me:
Please Sign up or sign in to vote.
4.90/5 (62 votes)
5 Mar 2009CPOL3 min read 173.2K   102   15
A beginner's guide to the default control layout mechanisms in WPF

WPF Visual Quick Start Articles by Josh Fischer

Introduction

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.

Background

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.

    XML
    <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>
      </StackPanel>
      <Label Background="LightBlue">Blue 1</Label>
      <Label Background="Yellow">Yellow 1</Label>
      <Label Background="Orange">Orange 1</Label>
    </StackPanel>
    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.
  • WrapPanel - Arranges items in a line until the border is hit, then wraps to the next line.

    Vertical orientation

    Horizontal orientation
    XML
    <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>
    
    <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>
    </WrapPanel>
    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.
  • DockPanel - Places controls in five different regions: top, bottom, left, right, or center (fill).

    XML
    <DockPanel>
      <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>
    </DockPanel>
    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).
  • Canvas - Explicitly position controls based on coordinates.

    XML
    <Canvas>
      <!-- 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>
    </Canvas>
    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.
  • UniformGrid - Maintains a series of grid cells of equal size.

    XML
    <UniformGrid>
      <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>
    </UniformGrid>
    Note:
    • Items are stretched to fit the cell.
    • The total number of cells increases by square integers.
      # items# cellssquare of
      111
      2-442
      5-993
      10-16164
      17-25255
      .........
  • Grid - Defines static columns and rows; like HTML tables.

    XML
    <!-- First screenshot -->
    <Grid>
      <!-- Using default column and row configurations -->
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
    
      <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>
    </Grid>
    
    <!-- 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>
    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).

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.

History

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

License

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


Written By
Architect
United States United States
Expert in C#, .NET, WinUI/WPF, Azure, and SQL Server.
I started working with .NET and C# professionally in 2003 and never looked back. I have been an integral part of a dozen complete software lifecycles, been a driving force behind two successful startups, and have led development teams.

Comments and Discussions

 
GeneralMy vote of 5 Pin
bhscrooge30-Jan-21 17:47
bhscrooge30-Jan-21 17:47 
QuestionThe code does't generate the layout as shown. Pin
Kenneth Giese14-Mar-20 8:12
Kenneth Giese14-Mar-20 8:12 
QuestionHow to "Anchor" Pin
Célio9-May-13 1:07
Célio9-May-13 1:07 
QuestionMy vote 5 Pin
Nitin S30-Oct-12 0:58
professionalNitin S30-Oct-12 0:58 
GeneralMy vote of 5 Pin
MySmity2124-Nov-11 8:39
MySmity2124-Nov-11 8:39 
GeneralMy vote of 5 Pin
DavidFine1320-Oct-10 3:54
DavidFine1320-Oct-10 3:54 
GeneralRe: My vote of 5 Pin
Josh Fischer26-Oct-10 6:15
Josh Fischer26-Oct-10 6:15 
GeneralMy vote of 5 Pin
Member 3940519-Sep-10 19:42
Member 3940519-Sep-10 19:42 
GeneralRe: My vote of 5 Pin
Josh Fischer27-Sep-10 4:06
Josh Fischer27-Sep-10 4:06 
GeneralGood stuff Pin
Dmitri Nеstеruk12-Nov-08 7:29
Dmitri Nеstеruk12-Nov-08 7:29 
GeneralRe: Good stuff Pin
cjlambre17-Nov-08 8:28
cjlambre17-Nov-08 8:28 
GeneralRe: Good stuff Pin
Josh Fischer26-Jul-10 3:37
Josh Fischer26-Jul-10 3:37 
GeneralRe: Good stuff Pin
Josh Fischer26-Jul-10 3:38
Josh Fischer26-Jul-10 3:38 
GeneralJust What I Need Pin
mark_w_12-Nov-08 5:19
mark_w_12-Nov-08 5:19 
GeneralRe: Just What I Need Pin
Josh Fischer26-Jul-10 3:36
Josh Fischer26-Jul-10 3: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.