Layout Containers

Every XAML rendering is based on; one or more layout objects that define the overall layout of the elements. In the XAML code, the root element can specify the layout object.

In the example shown above, the Canvas layout object was used. The Canvas layout lets you position individual elements freely by specifying the Canvas.Top and Canvas.Left attributes. It's very much like what you are used to in Windows Forms, and provides the greatest amount of flexibility.

The other layout objects are:

• The StackPanel layout object arranges elements in a vertical or horizontal stack. A vertical stack can be thought of as a table with one column and as many rows as needed, and a horizontal stack as a table with one row and as many columns as needed.
• The DockPanel layout object lets you dock elements to the top, bottom, left, and/or right of the layout area. Additional content can be displayed in the central area between the docked items.
• The Grid layout object lets you define a grid of cells, much like an HTML table, with layout elements placed in the various cells.
• The WrapPanel layout object arranges UI elements in the same way that text is arranged in a word processor: left to right in order, and upon reaching the right margin starting a new line, continuing left-to-right then top-to-bottom.

As you have seen in previous examples, a layout element can be the root element in the XAML file when you are testing in XamlPad. In real applications, the root element will be either <Page>, for web-based applications, or <Window>, for desktop applications.

The five available layout containers are pretty powerful on their own, but you can greatly increase your layout flexibility in two ways. One is to define your own layout class, based on the Panel class, and override the ArrangeOverride and MeasureOverride methods. These two methods are responsible for positioning a layout object's child UI elements, and you can write the overrides to get just the effect you want.

Figure 3. Using nested layout containers.

The second way to increase layout flexibility is by nesting layout containers. You could, for example, use a Canvas container as the outermost, or parent, container, and then position a Grid somewhere on the Canvas.

Let's look at an example. The layout shown in Figure 3 uses a StackPanel as the parent container, in the default vertical orientation. The top three items in the StackPanel are a TextBlock, a Button, and another TextBlock. The next item is a Grid with 4 rows and 3 columns. The XAML code is shown following the figure.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 WindowTitle="Nesting UI Containers">
<Border Background="LightBlue" BorderBrush="Black" BorderThickness="2"
  Padding="5">
<StackPanel Background="White" HorizontalAlignment="Center" VerticalAlignment="Top">
<TextBlock Margin="5,0,5,0" FontSize="24" HorizontalAlignment="Center">
An Example of Nested Layout Objects</TextBlock>
<Button HorizontalAlignment="Stretch" Margin="20">Button 1</Button>
<TextBlock Margin="5,5,5,15" FontSize="14" HorizontalAlignment="Center">
This is text in a TextBlock element</TextBlock>
<Grid VerticalAlignment="Top" HorizontalAlignment="Center" ShowGridLines="True"
  Width="350" Height="150">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>

<TextBlock FontSize="20" HorizontalAlignment="Center" FontWeight="Bold" 
Grid.ColumnSpan="3" Grid.Row="0">This is a Grid layout object</TextBlock>
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Grid.Row="1" Grid.Column="0">123456</TextBlock>
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Grid.Row="1" Grid.Column="1">123456</TextBlock>
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Grid.Row="1" Grid.Column="2">123456</TextBlock>
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Grid.Row="2" Grid.Column="0">123456</TextBlock>
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Grid.Row="2" Grid.Column="1">123456</TextBlock>
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Grid.Row="2" Grid.Column="2">123456</TextBlock>
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Grid.Row="3" Grid.Column="0">123456</TextBlock>
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Grid.Row="3" Grid.Column="1">123456</TextBlock>
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Grid.Row="3" Grid.Column="2">123456</TextBlock>
</Grid>
</StackPanel> 
</Border> 
</Page>

WPF provides a set of 2D graphics objects, called shapes, that let you add graphics to your layouts. There are five shapes, all of which are based on the Shape class. They are part of the System.Windows.Shapes namespace. The functions of the Ellipse, Line, Polygon, and Rectangle classes should be clear from their names. The Path class is used to draw a series of connected lines and curves, and the Polyline class is used to draw a series of connected straight lines.

All of these 2D graphics classes have several features in common:

• A Stroke property that describes how the shape's outline is rendered.
• A StrokeThickness property that determines the thickness of the outline.
• A Fill property that describes how the interior of the shape is painted.

Figure 4. An example of using the 2-D graphics objects.

The following code shows a simple example of using the Rectangle and Line objects in XAML. It also illustrates the ability to control the opacity of drawn elements. Because the line is drawn first, it would normally be hidden behind the rectangle, but by setting the rectangle's Opacity property we can make it partially transparent, permitting the line to show through. Figure 4 shows the output.

<Canvas 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Line 
  Stroke="green" 
  StrokeThickness="10"
  StrokeStartLineCap="Round"
  StrokeEndLineCap="Round"
  X1="10" 
  Y1="50" 
  X2="350" 
  Y2="50"/>
<Rectangle 

  Stroke="Blue" 
  StrokeThickness="4" 
  Canvas.Top = "20" 
  Canvas.Left="30" 
  Height="160" 
  Width="300"
  Opacity=".6" >
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,.5">
      <LinearGradientBrush.GradientStops>
        <GradientStop Color="Yellow" Offset="0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1" />
    </LinearGradientBrush.GradientStops>
  </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
</Canvas>

Summary

This article introduced you to XAML, the declarative markup language for defining WPF user interfaces in WinFX applications. In the next article, we'll take a look at using WPF in Visual Studio.