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.

Animation

Changes to property values need not be instantaneous, as in the previous example. Using WPF's animation features you can smoothly transition from one value to another. The next example shows this by modifying the existing property trigger. Now when the IsFocused property becomes true, the font size of the textbox is increased gradually over a period of half a second. When the property returns to False, the size is slower lowered to its original value.

<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 Offset="0" Color="White"/>
                  <GradientStop Offset="3" Color="Yellow"/>
               </LinearGradientBrush>
            </Setter.Value>
         </Setter>
         <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
               <Trigger.EnterActions>
                  <BeginStoryboard>
                     <Storyboard>
                        <DoubleAnimation Duration="00:00:00.5" From="12"
                                         Storyboard.TargetProperty="FontSize" To="30"/>
                     </Storyboard>
                  </BeginStoryboard>
               </Trigger.EnterActions>
               <Trigger.ExitActions>
                  <BeginStoryboard>
                     <Storyboard>
                        <DoubleAnimation Duration="00:00:00.5" From="30"
                                         Storyboard.TargetProperty="FontSize" To="12"/>
                     </Storyboard>
                  </BeginStoryboard>
               </Trigger.ExitActions>
            </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" BasedOn="{StaticResource {x:Type TextBlock}}"
             TargetType="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 Style="{StaticResource Required}" Text="Forename"/>
      <TextBlock Grid.Row="1" Style="{StaticResource Required}" 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" Margin="5" Orientation="Horizontal">
         <RadioButton Margin="0 0 10 0" Content="Male" Foreground="Blue"/>
         <RadioButton Content="Female" Foreground="DeepPink"/>
      </StackPanel>
   </Grid>
</Page>

Try pasting the code into Kaxaml and clicking into the textboxes to see the animation.

XAML Property Triggers

Transforms

Later in the tutorial we'll see how you can apply transforms to WPF controls. Transforms allow you to rotate, skew and scale controls in various ways. In the following XAML, I've applied a rotational transformation to the textbox style. This combines as expected with the animation that we added in the previous example.

<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 Offset="0" Color="White"/>
                  <GradientStop Offset="3" Color="Yellow"/>
               </LinearGradientBrush>
            </Setter.Value>
         </Setter>
         <Setter Property="RenderTransform">
            <Setter.Value>
               <RotateTransform Angle="5"/>
            </Setter.Value>
         </Setter>
         <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
               <Trigger.EnterActions>
                  <BeginStoryboard>
                     <Storyboard>
                        <DoubleAnimation Duration="00:00:00.5" From="12"
                           Storyboard.TargetProperty="FontSize" To="30"/>
                     </Storyboard>
                  </BeginStoryboard>
               </Trigger.EnterActions>
               <Trigger.ExitActions>
                  <BeginStoryboard>
                     <Storyboard>
                        <DoubleAnimation Duration="00:00:00.5" From="30"
                           Storyboard.TargetProperty="FontSize" To="12"/>
                     </Storyboard>
                  </BeginStoryboard>
               </Trigger.ExitActions>
            </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" BasedOn="{StaticResource {x:Type TextBlock}}"
             TargetType="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 Style="{StaticResource Required}" Text="Forename"/>
      <TextBlock Grid.Row="1" Style="{StaticResource Required}" 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"
         Margin="5"
         Orientation="Horizontal">
         <RadioButton Margin="0 0 10 0" Content="Male" Foreground="Blue"/>
         <RadioButton Content="Female" Foreground="DeepPink"/>
      </StackPanel>
   </Grid>
</Page>

The image below shows the rotated textboxes when the surname box is focussed.

XAML Transformations

30 January 2013