CHOOSE
Home
What You Need
Articles
Books
Webcasts
Blogs & Forums
Components
Certification
Training Classes

WPF BASICS
Layout Panels
Event Handling
Commands
Data Binding I
Styles
Triggers

KAXAML
Kaxaml is a lightweight XAML editor that gives you a "split view" so you can see both your XAML and your rendered content.

WPF Basics - Layout Panels

In order to arrange controls, you need to use a layout panel. WPF ships with the following layout panels:
  • Canvas - for specific (X,Y) positioning
  • StackPanel - for stacking elements horizontally or vertically
  • WrapPanel - automatically handles wrapping elements to a new row as needed
  • DockPanel - for familiar docking functionality
  • Grid - for a row and column based layout
  • UniformGrid - a specialized form of Grid where all cells are the same size
Each one is described below, along with a screenshot. I've placed each panel within a groupbox (not shown in the XAML) in order to demonstrate the boundaries of the panel.

Canvas

The Canvas panel is used for absolute positioning by specifying pixels relative to the edges of the canvas, In the example below, notice the Canvas.Left and Canvas.Top attached properties on the Textboxes and the and Button. 
<Canvas Width="Auto" Height="Auto">
    <TextBox Width="159" Height="26" Text="Name" Canvas.Left="36" Canvas.Top="12"/>
    <TextBox Width="159" Height="26" Text="Password" Canvas.Left="36" Canvas.Top="53"/>
    <Button Width="159" Height="23" Content="Submit" Canvas.Left="36" Canvas.Top="101"/>
</Canvas>

StackPanel

The StackPanel, as the name implies, arranges content either horizontally or vertically. Vertical is the default, but this can be changed using the Orientation property. Content is automatically stretched based on the orientation (see screenshot below), and this can be controlled by changing the HorizontalAlignment or VerticalAlignment properties. 
<StackPanel Width="Auto" Height="Auto">
    <Button Content="Button"  />
    <Button Content="Button" HorizontalAlignment="Left" />
    <Button Content="Button" HorizontalAlignment="Center" />
    <Button Content="Button" HorizontalAlignment="Right" />
</StackPanel>
The StackPanel can also be oriented horizontally. 
<StackPanel Width="Auto" Height="Auto" Orientation="Horizontal">
    <Button Content="Button" />
    <Button Content="Button" VerticalAlignment="Top" />
    <Button Content="Button" VerticalAlignment="Center" />
    <Button Content="Button" VerticalAlignment="Bottom" />
</StackPanel>

WrapPanel

The WrapPanel is similar to the StackPanel in that it arranges item sequentially. The WrapPanel will wrap content based on the available space in the panel. Like the StackPanel, the Orientation property controls the primary direction of the layout. 
<WrapPanel Width="Auto" Height="Auto">
    <Button Content="Button"/><Button Content="Button"/>
    <Button Content="Button"/><Button Content="Button"/>
    <Button Content="Button"/><Button Content="Button"/>
    <Button Content="Button"/><Button Content="Button"/>
</WrapPanel>

DockPanel

The DockPanel is used to anchor elements to the edges of the container, and is a good choice to set up the overall structure of the application UI. Elements are docked using the DockPanel.Dock attached property. The order that elements are docked determines the layout. Here is an example that sets up a typical navigation system: a top menu, a bottom status bar, left and right navigational or informational panes, and a center area that fills the remaining space. 
<DockPanel HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="Auto">
    <!-- DOCKED ON BOTTOM TO FILL ENTIRE HORIZONTAL SPACE -->
    <StatusBar Width="Auto" Height="25" Background="#FF451B1B" DockPanel.Dock="Bottom">
        <TextBlock Width="Auto" Height="Auto" Foreground="#FFFEFEFE" Text="Bottom Content"/>
    </StatusBar>
    
    <!-- DOCKED ON TOP TO FILL ENTIRE HORIZONTAL SPACE -->
    <Menu Width="Auto" Height="25" DockPanel.Dock="Top">
        <MenuItem Header="Top Content"/>
    </Menu>
    
    <!-- DOCKED TO LEFT AND RIGHT TO SIMULATE NAVIGATION PANES -->
    <GroupBox DockPanel.Dock="Left" Width="100" Height="Auto" Header="Left Content"/>
    <GroupBox DockPanel.Dock="Right" Width="100" Height="Auto" Header="Right Content" />
    
    <!-- FINAL ELEMENT FILLS REMAINING SPACE -->
    <Canvas Width="Auto" Height="Auto">
        <TextBlock Width="Auto" Height="Auto" Text="Center Content" TextWrapping="Wrap" 
            Canvas.Left="85" Canvas.Top="51"/>
    </Canvas>
</DockPanel>

Grid

The Grid is used to create a table-style layout of rows and columns. If you've ever done any web programming, you'll understand the versatility of a table in organizing the layout. Columns and rows are defined using two property elements: Grid.ColumnDefinitions and Grid.RowDefinitions. The Grid supports column and row spanning, and either absolute, proportional, or auto sizing.

Child elements are assigned to rows and columns using the Grid.Row and Grid.Column attached properties. The following XAML uses a grid to arrange two labels, two textboxes, and a button. 

<Grid Width="Auto" Height="Auto">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="80" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    
    <TextBlock Grid.Row="0" Grid.Column="0" Text="Name:" />
    <TextBox Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" Height="25" />
    <TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" />
    <TextBox Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" Height="25" />
    <Button Grid.ColumnSpan="2" Grid.Row="2" HorizontalAlignment="Center" 
        VerticalAlignment="Center" Width="100" Height="25" Content="Submit" />
</Grid>

UniformGrid

The UniformGrid is a limited version of the grid where all rows and columns are the same size and where a cell can only hold one control (determined by the grid). Because it's unnecessary to declare each row and column, the UniformGrid contains two properties, Rows and Columns, for setting the number of rows and columns. Controls are added to the grid in the order that they are declared.

The UniformGrid is useful for simple scenarios, but for the most amount of control, you are better off using the Grid. 

<UniformGrid  Rows="5" Columns="1">
    <TextBlock Text="Name:" />
    <TextBox VerticalAlignment="Top" />
    <TextBlock Text="Password:" />
    <TextBox VerticalAlignment="Top" />
    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Content="Submit" />
</UniformGrid>
Copyright 2008 - www.WPFDude.com