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.

Styles

XAML allows you to create reusable styles in a similar manner to those applied using cascading style sheets (CSS) for HTML. Styles are defined within shared resources, which can appear in the same XAML document or in a separate file that can be utilised by many XAML documents. Once created, the styles can be applied to numerous controls. Updating a style automatically changes the appearance of all of the controls that use it.

In the code below we have three styles defined within the page's resources. The first applies a gradient fill to all textboxes and adds a margin. This replaces the margin attributes of the individual textboxes. The second style adds vertical alignment and a margin to the textblocks. The final style has a key so only applies to items that reference the key directly. It makes the text of textblocks bold.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <Style TargetType="TextBox">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0 0" EndPoint="1 5">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Yellow" Offset="3"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style x:Key="Required" TargetType="TextBlock"
               BasedOn="{StaticResource {x:Type TextBlock}}">
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </Page.Resources>

    <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" Style="{StaticResource Required}"/>
        <TextBlock Grid.Row="1" Text="Surname" Style="{StaticResource Required}"/>
        <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" 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 follows:

XAML Form with Styles

You can see that the XAML for even a simple form can be quite verbose. Some developers are happy working with large XAML documents. Others prefer to use the designers provided by Visual Studio to build their user interfaces, as they hide some of the complexity.

Triggers

XAML can perform quite complex tasks without the need to resort to code-behind created in languages such as C# or Visual Basic. One of the interesting aspects of XAML is the availability of triggers. These allow automatic actions in response to events or property value changes.

The following code modifies the style for the textboxes. The style now includes a property trigger. When the IsFocused property is set to True, the border and margin properties are adjusted. This means that if you click or tab into a textbox, its appearance changes.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <Style TargetType="TextBox">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0 0" EndPoint="1 5">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Yellow" Offset="3"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="BorderThickness" Value="2" />
                    <Setter Property="Margin" Value="4" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
            <Style x:Key="Required" TargetType="TextBlock"
                   BasedOn="{StaticResource {x:Type TextBlock}}">
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </Page.Resources>

    <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" Style="{StaticResource Required}"/>
        <TextBlock Grid.Row="1" Text="Surname" Style="{StaticResource Required}"/>
        <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" Margin="5">
            <RadioButton Content="Male" Foreground="Blue" Margin="0 0 10 0"/>
            <RadioButton Content="Female" Foreground="DeepPink"/>
        </StackPanel>
    </Grid>
</Page>

The following image shows what happens when you focus the first textbox.

XAML Property Trigger

30 January 2013