(untagged)

Creating a WPF DockPanel using XAML

Sundeepan Sen

0.00/5 (No votes)

17 Mar 2010

Beginners tutorial on how to create a DockPanel using XAML

Download example - 25.45 KB

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

17^th March, 2010: Initial post

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here