Click here to Skip to main content
Click here to Skip to main content

WPF Layouts - A Visual Quick Start

, 5 Mar 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

    <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
    <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).

    <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.

    <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.

    <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 # cells square of
      1 1 1
      2-4 4 2
      5-9 9 3
      10-16 16 4
      17-25 25 5
      ... ... ...
  • Grid - Defines static columns and rows; like HTML tables.

    <!-- 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)

Share

About the Author

Josh Fischer
Software Developer (Senior)
United States United States
CodeProject MVP 2010
CodeProject prize winner - Best C# article of December 2009


Comments and Discussions

 
QuestionHow to "Anchor" [modified] PinmemberCélio9-May-13 2:07 
QuestionMy vote 5 [modified] PinmemberNitin Sawant30-Oct-12 1:58 
GeneralMy vote of 5 PinmemberMember 83548614-Nov-11 9:39 
GeneralMy vote of 5 PinmemberDavidFine1320-Oct-10 4:54 
GeneralRe: My vote of 5 PinmvpJosh Fischer26-Oct-10 7:15 
GeneralMy vote of 5 PinmemberMember 3940519-Sep-10 20:42 
GeneralRe: My vote of 5 PinmvpJosh Fischer27-Sep-10 5:06 
GeneralGood stuff PinmemberDmitri Nesteruk12-Nov-08 8:29 
GeneralRe: Good stuff PinmemberCarl Lambrecht17-Nov-08 9:28 
GeneralRe: Good stuff PinmvpJosh Fischer26-Jul-10 4:37 
I'm glad it helped you!
Josh Fischer

GeneralRe: Good stuff PinmvpJosh Fischer26-Jul-10 4:38 
GeneralJust What I Need Pinmembermark_w_12-Nov-08 6:19 
GeneralRe: Just What I Need PinmvpJosh Fischer26-Jul-10 4:36 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 5 Mar 2009
Article Copyright 2008 by Josh Fischer
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid