Gettings started with XAML layout: the DockPanel

When new programming APIs come available, there's usually a lot to learn. The Windows Presentation Foundation (WPF, aka Avalon) is no exception here, and after downloading Vista Beta 2, I wanted to see how I could get started with WPF and XAML. This is the first Vista beta release I could get WPF and XAMLPad to work properly, previous betas required too much tweaking and I didn't have that time then.

Now, the WPF documentation (part of the Windows SDK) is currently preliminary, and although the reference portion seems to be good already, there is very little high-level, introductory material for example about layout. Or, at least I haven't been able to find it yet.

When I started with XAML, I wanted to buidl those similar-looking applications as I did with Win32. You know, a treeview on the left, a status bar at the bottom and a listview on the left.

To get this done, a DockPanel is what you need. Here's a simple piece of code that also demonstrates using colors and adding images to your application:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="DockPanel Sample">
  <DockPanel LastChildFill="True">
    <Border Height="40" Background="Gray" BorderThickness="0" DockPanel.Dock="Top">
      <TextBlock Foreground="White">Dock = "Top"</TextBlock>
    </Border>
    <Border Height="50" Background="Gray" BorderThickness="0" DockPanel.Dock="Bottom">
      <TextBlock Foreground="White">Dock = "Bottom"</TextBlock>
    </Border>
    <Border Width="200" Background="LimeGreen" BorderThickness="0" DockPanel.Dock="Left">
      <TextBlock Foreground="White">Dock = "Left"</TextBlock>
    </Border>
    <Border Background="Black" BorderThickness="0">
      <TextBlock Foreground="White">

<Image Width="100" Source="C:\Users\Public\Pictures\Sample Pictures\Forest flowers.jpg"/>
<Image Width="100" Source="C:\Users\Public\Pictures\Sample Pictures\Garden.jpg"/>
<Image Width="100" Source="C:\Users\Public\Pictures\Sample Pictures\Waterfall.jpg"/>
<Image Width="100" Source="C:\Users\Public\Pictures\Sample Pictures\Toco Toucan.jpg"/>

      </TextBlock>	
    </Border>
  </DockPanel>
</Page>

Here's the result of using this code in XAMLPad:

Here, the DockPanel tag holds the area for the so-called "Borders" inside the DockPanel element. Each Border can have a width and height, or both. For example, to get space for a menu bar, you could add a border with the height of 40 pixels.

Of course, you also need to specify where you want to dock that border. This is done with the DockPanel.Dock property, valid values are Top, Left, Bottom and Right.

Finally, to get some content inside the panels, you can put a TextBlock component and some text into it. Of course, you can also nest TextBlocks and Images, as is done with the black border element at the middle of the screen.

Hope this gets you going with XAML!