Reader Level:
ARTICLE

XAML Layout using the Panel Class

Posted by Doug Cook Articles | XAML April 12, 2007
This article describes how to use the DockPanel element to achieve standard layouts in XAML. While there are a number of interface elements that can be used to position controls in your application, DockPanel provides one of the easiest mechanisms for defining scalable layouts.
  • 0
  • 0
  • 10531

Overview

Avalon provides a number of options to achieve complex layouts. The framework supports an integrated set of components as part of a single, flexible layout model that has been optimized for content presentation.   

The most useful layout elements in XAML are those derived from the Panel class: Canvas, DockPanel, Grid, StackPanel, VirtualizingStackPanel, and WrapPanel.  Of these elements, DockPanel, StackPanel, and Grid are arguably the most useful in terms of developing fluid application layouts in Avalon.

Element Name

Description

DockPanel

Defines an area within which you can arrange child elements either horizontally or vertically, relative to each other.

StackPanel

Arranges child elements into a single line that can be oriented horizontally or vertically.

 

Grid

Defines a flexible grid area consisting of columns and rows. Child elements of a Grid can be positioned precisely using the Margin property.

  
   Element names and descriptions taken from Microsoft's WinFX SDK

However, it is also possible to override the default behavior of any of these elements to create other custom components derived from the Panel class.


DockPanel

Below is an example screen layout accomplished using DockPanel. Coupled with the Grid element, this component provides an easy mechanism for managing content on the screen.  Using this component, controls may be "docked" to a specific side of a screen or aligned in relation to other screen elements.

<!-- Window.xaml -->

<Window x:Class="WindowsApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WindowsApplication1" Width="550" Height="400">

          <Grid>

                   <DockPanel>

                             <Border Height="75" Background="Red" DockPanel.Dock="Top">

                                      <TextBlock>Dock = "Top"</TextBlock>

                             </Border>

                             <Border Height="75" Background="Blue" DockPanel.Dock="Bottom">

                                      <TextBlock>Dock = "Bottom"</TextBlock>

                             </Border>

                             <Border Width="150" Background="Green" DockPanel.Dock="Left">

                                      <TextBlock>Dock = "Left"</TextBlock>

                             </Border>

                             <Border Background="White">

                                      <TextBlock>This content will "Fill" the remaining space</TextBlock>

                             </Border>

                   </DockPanel>

          </Grid>

 

</Window>

When compiled, the above example results in the following layout:

screen.gif 

Using this approach, developers gain scalability, an additional benefit of Avalon's layout model.  Any layout created using the DockPanel element will be enlarged or constrained depending on the parent window's dimensions.

StackPanel

The StackPanel element is used to either "stack" components on top of each other or align them sequentially.  Child elements of a StackPanel are displayed as block elements as opposed to being layered on top of each other with incrementing z-indexes.  By default, a StackPanel's orientation is vertical.

 

Below is an example layout using StackPanel.

 

<Window x:Class="WindowsApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WindowsApplication1" Width="550" Height="400">

          <StackPanel Margin="90">

 

                   <TextBlock Background="Red" Padding="20">Position 1</TextBlock>

 

                   <TextBlock Background="Yellow" Padding="20">Position 2</TextBlock>

 

                   <TextBlock Background="Blue" Padding="20">Position 3</TextBlock>

 

                   <TextBlock Background="Green" Padding="20">Position 4</TextBlock>

 

          </StackPanel> 

</Window>

 

Compiling this sample results in the following display:

 

stack1.gif 

 

Setting the StackPanel's orientation to horizontal, allows elements to be positioned horizontally:

 

<Window x:Class="WindowsApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WindowsApplication1" Width="550" Height="400">

          <StackPanel Margin="90" Orientation="Horizontal">

 

                   <TextBlock Background="Red" Padding="20">Position 1</TextBlock>

 

                   <TextBlock Background="Yellow" Padding="20">Position 2</TextBlock>

 

                   <TextBlock Background="Blue" Padding="20">Position 3</TextBlock>

 

                   <TextBlock Background="Green" Padding="20">Position 4</TextBlock>

 

          </StackPanel> 

</Window>                               

 

This sample results in the following display:

 stack2.gif

COMMENT USING

Trending up