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

Creating a WPF DockPanel using XAML

, 17 Mar 2010
Rate this:
Please Sign up or sign in to vote.
Beginners tutorial on how to create a DockPanel using XAML

Introduction

In this article, we discuss the DockPanel element. Per MSDN, a DockPanel, "Defines an area where you can arrange child elements either horizontally or vertically, relative to each other". In other words, the DockPanel is a layout panel which provides a way to dock elements to the top, bottom, right, left or center of a panel. To dock an element in the center of a panel, it must be the last child of that panel and the property LastChildFill must be set to true. This makes sure that the last child element of the panel will fit whatever space is left. So let's look at some code then:   

<Window x:Class="WpfDockPanelExample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Sundeepan's DockPanel Example">
    
    <DockPanel LastChildFill="True">
        <TextBlock DockPanel.Dock="Left" 
                   VerticalAlignment="Center"
                   Background="Bisque"
                   Foreground="DarkGoldenrod"
                   FontFamily="Veranda"
                   FontSize="20">
            I am the left!</TextBlock>
        <TextBlock DockPanel.Dock="Right" 
                   VerticalAlignment="Center"
                   Background="DarkGoldenrod"
                   Foreground="Bisque"
                   FontFamily="Veranda"
                   FontSize="20"
                   TextAlignment="Center">
           I am the right!</TextBlock>
        <TextBlock DockPanel.Dock="Top" 
                   Background="OliveDrab"
                   Foreground="Cornsilk"
                   FontFamily="Veranda"
                   FontSize="20"
                   TextAlignment="Center">
            w00h00, look at me, im on top of the world!!!!</TextBlock>
        <TextBlock DockPanel.Dock="Bottom" 
                   Background="Cornsilk"
                   Foreground="OliveDrab"
                   FontFamily="Veranda"
                   FontSize="20"
                   TextAlignment="Center">
            aww shucks, I am on the bottom now..in the pits!!!!</TextBlock>
        
        <Button Height="40" Width="200" Click="Button_Click" Background="LightBlue">
            I am the fill!("Press me!")
        </Button>            

    </DockPanel>               

</Window> 

As you can see that the Button placed as the final element in the DockPanel appears in the center of the panel, see the screen shot above or run the attached solution.  

The Order in Which the TextBlocks are Declared is Instrumental! 

If the top and bottom TextBlock declarations are changed and declared before the left and right TextBlocks, it will totally change the look. Look at the screen shot below and the code: 

<DockPanel LastChildFill="True">
    <TextBlock DockPanel.Dock="Top" 
               Background="OliveDrab"
               Foreground="Cornsilk"
               FontFamily="Veranda"
               FontSize="20"
               TextAlignment="Center">
        w00h00, look at me, im on top of the world!!!!</TextBlock>
    <TextBlock DockPanel.Dock="Bottom" 
               Background="Cornsilk"
               Foreground="OliveDrab"
               FontFamily="Veranda"
               FontSize="20"
               TextAlignment="Center">
        aww shucks, I am on the bottom now..in the pits!!!!</TextBlock>
    <TextBlock DockPanel.Dock="Left" 
               VerticalAlignment="Center"
               Background="Bisque"
               Foreground="DarkGoldenrod"
               FontFamily="Veranda"
               FontSize="20">
        I am the left!</TextBlock>
    <TextBlock DockPanel.Dock="Right" 
               VerticalAlignment="Center"
               Background="DarkGoldenrod"
               Foreground="Bisque"
               FontFamily="Veranda"
               FontSize="20"
               TextAlignment="Center">
       I am the right!</TextBlock>

In Closing

As illustrated, the DockPanel can be used in many ways to format the look of an application. For instance, the left column can be used for a menu or a site map, the top for tabs, the bottom for a footer and the center to display the applications meat and potatoes (content).

History

  • 17th March, 2010: Initial post

License

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

Share

About the Author

Sundeepan Sen
Systems Engineer
United States United States
Sundeepan Sen has been involved with technology for as long as he can remember. He got his start with the internet as a sophomore in high school in 1995 at the age of 15 and hasn't stopped since. His first encounter with the Internet was on a 2400 baud modem on a VAX/VMS shell account. The first program he wrote is in assembly for a game called "Core War" it can be found here:
 
http://para.inria.fr/~doligez/corewar/post/JUMP.txt
 
He likes all things technology and loves to learn anything that comes his way.
 
Sundeepan is also artistically gifted with music, graphics, drawing and poetry.
 
He is a Network Consultant providing services with the latest Microsoft technologies.

Comments and Discussions

 
QuestionScreen shots PinmemberWray Smallwood12-Dec-12 5:49 
Wish I could see the screen shots. They are black with an !
GeneralMy vote of 5 Pinmemberhari111r2-Dec-12 17:16 

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 | Mobile
Web01 | 2.8.140826.1 | Last Updated 17 Mar 2010
Article Copyright 2010 by Sundeepan Sen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid