BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

XAML

The second part of the Windows Presentation Foundation Fundamentals tutorial looks at the Extensible Application Markup Language (XAML), providing some samples of its use. This is the XML-based language that is used to create WPF user interfaces.

Hello World

It is traditional to create a "Hello World" program when you first encounter a new programming language. The code below is such a program.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>  
        <TextBlock>Hello, world!</TextBlock>
    </Grid>
</Page>

If you paste the above XAML into the Kaxaml editor, replacing the default code, you'll see that the preview area updates to show the following:

Hello world in WPF

Let's look at the various elements of the Hello World XAML. The first thing we see is the root node, which in this case is a Page element. We won't see much more of the Page element in future articles in this series, as we will be mainly using Window root nodes. A page is usually used in navigation-style WPF applications, whereas a window is used for standard windows and dialog boxes. In this example the Page tag is useful because of the behaviour of Kaxaml. If you change the "Page" text to "Window", you'll see that you need to press a key before Kaxaml will render.

The root node includes two XML namespaces. These act somewhat like using directives for C# namespaces. They specify where the document will look for controls and other elements that you add to the XAML. The two namespaces included are the default ones that provide standard WPF items. You can also reference your own namespaces with a similar syntax. Note that one of the namespaces has an alias, "x". When using items from this namespace you'll see that we need to include the x in the element definitions.

The Grid element defines a grid, which is a standard layout control in WPF. Grids define columns and rows that intersect to make cells. Controls can be added to these cells to give a pleasing visual organisation. In the Hello World example no columns or rows have been included so the grid has only one cell.

The last element in the example is a TextBlock. This holds a small amount of text that can include some formatting. I've defined the text between the opening and closing tags of the XML element in this case.

After the TextBlock there are some closing tags. These ensure that the XML is well formed. If it was not, the program would not work.

A Second Example

For another example consider the following XAML. I won't describe it in detail, as we'll see such code in future articles. The differences between this and the previous example are the addition of row and column definitions and the inclusion of some extra controls. Note the StackPanel element. This is another layout control. Rather than showing items in a grid, it stacks controls vertically or horizontally.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Forename"/>
        <TextBlock Grid.Row="1" Text="Surname"/>
        <TextBlock Grid.Row="2" Text="Age"/>
        <TextBlock Grid.Row="3" Text="Sex"/>
        <TextBox Grid.Column="1" Text="Bob"/>
        <TextBox Grid.Column="1" Grid.Row="1" Text="Smith"/>
        <TextBox Width="80" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left"
                 Text="40"/>
        <StackPanel Grid.Column="1" Grid.Row="3" Orientation="Horizontal">
            <RadioButton Content="Male"/>
            <RadioButton Content="Female"/>
        </StackPanel>
    </Grid>
</Page>

The above code defines a simple input form:

Simple XAML Form

Styling Properties

One of the reasons people like WPF is its ability to add styling to controls in ways that were difficult to achieve in Windows Forms. In the code below I've added some basic styling using the properties of various controls. The properties are set using XML attributes. I've added margins to the textboxes, vertical alignment to the text blocks and colours to the radio buttons.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Forename" VerticalAlignment="Center"/>
        <TextBlock Grid.Row="1" Text="Surname" VerticalAlignment="Center"/>
        <TextBlock Grid.Row="2" Text="Age" VerticalAlignment="Center"/>
        <TextBlock Grid.Row="3" Text="Sex" VerticalAlignment="Center"/>
        <TextBox Grid.Column="1" Text="Bob" Margin="5"/>
        <TextBox Grid.Column="1" Grid.Row="1" Text="Smith" Margin="5"/>
        <TextBox Width="80" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left"
                 Text="40" Margin="5"/>
        <StackPanel Grid.Column="1" Grid.Row="3" Orientation="Horizontal" Margin="5">
            <RadioButton Content="Male" Foreground="Blue" Margin="0 0 10 0"/>
            <RadioButton Content="Female" Foreground="DeepPink"/>
        </StackPanel>
    </Grid>
</Page>

The updated form appears as shown below:

XAML Styling with Property Attributes

30 January 2013