Introduction

Windows Presentation Foundation (WPF) is a means for the programmer to create Windows applications possessing rich user interfaces and graphics which the classic .NET Windows applications lack. The initial version of WPF was released as a part of .NET 3.0 and it was really like a preview of WPF itself. The actual version of WPF was released as a part of .NET Framework 3.5. Fig 1.0 shows the high-level architecture of WPF.

Figure 1.0

1. Declarative Programming

WPF application paves the way for the developers to define the thick client UI in a declarative way, which was never supported by the traditional .NET windows forms. Tasks like defining a template for a control, creating a control hierarchy and similar work would be much easier if it is done in a declarative fashion. In WPF declarative programming was made possible with the introduction of Extensible Application Markup Language (XAML). It can be compared to the HTML part in a web user interface.

Below is the sample XAML code in a WPF Window.

  <Window x:Class="WpfSamples.WrapPanel"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="WrapPanel" Height="300" Width="300">
      <Grid Height="44">
      </Grid>
  </Window>

The UI declaration can be implemented within the Window XAML tags in order to design a WPF window.

2. Independent of Screen Resolution

This is a neat feature of WPF. What I mean by independency of screen resolution is, the WPF user interface will look better even on a screen with low resolution. It uses DirectX components where as the Windows Forms applications make use of the User 32 components of a machine. WPF framework has the Media Integration Layer (MIL) in order to talk to the DirectX components. The direct components impose a vector based graphics on the WPF user interface. The below screen shot will show you the difference between the Windows forms UI and WPF UI at lower resolutions of the screen.

See the character 'W' in the image at lower resolution, Windows Forms display looks a bit distorted and the vector based WPF looks elegant.

3. Control inside a Control

WPF allows you to provide not only the text but it also allows you to define a control as a content of another basic control like a Button. This feature is truly astonishing fact for the developers and this lets the world know, what the power of WPF is when it comes to user interfaces. You can have a TextBox inside a Button for example as shown in Fig 1.1.

The XAML for the WPF window in Fig 1.1 is:

  <Button Margin="90,88,75,124" Name="ButtonWithTextBox">
       <TextBox Width="75">Enter Text</TextBox>
  </Button>

4. Control Templates

What if the user wants to change the shape of a button, this will definitely sound weird for .NET developers. Now it can be done in WPF by defining the control template. For example you can declare a Button on your WPF window and can change its shape to elliptical. Fig 1.2 shows how the button is displayed in an elliptical shape.

The corresponding XAML code looks like:

  <Button x:Name="EllipticalButton" Margin="30,12,45,0" Content="Elliptical Button">
     <Button.Template>
         <ControlTemplate TargetType="{x:Type Button}">
              <Grid>
                  <Ellipse Width="100" Height="40" Fill="Yellow"/>
  <ContentPresenter HorizontalAlignment="Center"         VerticalAlignment="Center"/>
              </Grid>
         </ControlTemplate>
     </Button.Template>
  </Button>

5. Control Transforms

WPF contains a handful of 2D transforms which will enable you to change the size, position, rotation angle and also allows skewing. Control transforms can be performed in two ways LayoutTransform and RenderTransform.

• Layout Transform - Transform is applied before the control is laid out on the form
• RenderTransform - Transform is applied after the control is laid on the form

There are 5 kinds of transforms available

1. Rotate Transform - It will rotate the controls to a specified angle
2. Scale Transform - It enlarges or shrinks the controls in x and y axis
3. Skew Transform - It slants the control
4. Translate Transform - It moves the control based on x and y values
5. Matrix Transform - It combines all the above transforms

Fig 1.4 shows how to Rotate, Scale and Skew transforms are combined together.

Fig 1.3

The corresponding XAML code looks like:

  <Button Width="70" Height="50">
      <Button.RenderTransform>
           <TransformGroup>
                <RotateTransform Angle="45"/>
                <ScaleTransform ScaleX="5" ScaleY="1"/>
                <SkewTransform AngleX="20"/>
           </TransformGroup>
      </Button.RenderTransform>
      Transformed
  </Button>

6. Availability of Different Layouts

Layouts are used in separating the controls on the UI logically and also enable you to present them neat on the window. WPF provides you a wide and powerful set of layout controls. Some of the main layouts in WPF are:

Stack Panel:

A stack panel lays the child controls inside them either horizontally or vertically based on the specified Orientation. It is very much useful for managing small scale aspects of the layout.

Wrap Panel:

A Wrap panel lays the child controls from left to right and as the name suggests it goes to the new line once it fills up the container width.

Dock Panel:

A Dock panel docks the child control either to Top, Bottom, Right or to Left based on the Dock type specified. This provides you with the docking functionality which you get in Windows Forms Applications.

Grid:

A Grid layout allows you to create a table like structure on the WPF window, it has rows and columns. It enables the user to place the controls in the desired cell of the grid layout.

Canvas:

A Canvas layout allows you to place the controls as you desire. It allows you to take complete control of the layout process.

7. 2D, 3D Graphics, animations and media

This is a vast topic in WPF, in my opinion these features make WPF a much more unique technology which mixes both controls and graphics to be tightly coupled. I will be touching some key features under this topic.

a. 2D Graphics

What I mean by 2D graphics is even the basic controls like Button in WPF can be ingrained with x & y axis based graphics(i.e., 2 dimensional graphics). Look at Fig 1.5 which shows how easy is to add a 2D graphics to a button.

[graphics6.jpg]
Fig 1.5

  <Button HorizontalAlignment="Center" VerticalAlignment="Center">
       <Grid>
           <Grid.ColumnDefinitions>
                      <ColumnDefinition />
                      <ColumnDefinition />
                      <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                      <RowDefinition />
                      <RowDefinition />
                      <RowDefinition />
            </Grid.RowDefinitions>
  <Ellipse Grid.Column="0" Grid.Row="0" Fill="Blue" Width="10" Height="10" />
            <Ellipse Grid.Column="2" Grid.Row="0" Fill="Blue" Width="10" Height="10" />
            <Ellipse Grid.Column="0" Grid.Row="2" Fill="Blue" Width="10" Height="10" />
            <Ellipse Grid.Column="2" Grid.Row="2" Fill="Blue" Width="10" Height="10" />
            <Ellipse Grid.ColumnSpan="3" Grid.RowSpan="3" Stroke="LightGreen"
  StrokeThickness="3" />
            TextBlock Grid.Column="1" Grid.Row="1" VerticalAlignment="Center"
  Text="Click!" />
       </Grid>
  </Button>

Another astonishing fact in the 2D graphics section is the Gradient Brushes. A gradient brush in WPF gives you a provision to do a color transition from one point to another gradually based on the GradientStop value provided by you.

There are two types of Gradient Brushes:

• Linear Gradient brush - It does the color transition in a linear manner.
• Radial Gradient brush - It does the color transition in a radial manner.

Fig 1.6 shows the WPF window using gradient brushes

[gradient7.jpg]
Fig 1.6

The corresponding XAML code is:

  <!--Linear Gradient Brush-->
  <Rectangle HorizontalAlignment="Left" Width="93" Margin="23,41,0,49">
              <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                      <GradientStop Color="Black" Offset="0" />
                      <GradientStop Color="White" Offset="1" />
                  </LinearGradientBrush>
              </Rectangle.Fill>
  </Rectangle>
  <!--Radial Gradient Brush-->
  <Ellipse Width="84" HorizontalAlignment="Right" Margin="0,22,22,33">
              <Ellipse.Fill>
                  <RadialGradientBrush Center="0.45,0.5" RadiusX="0.3" RadiusY="0.5" GradientOrigin="0.25,0.4">
                      <GradientStop Color="White" Offset="0.1" />
                      <GradientStop Color="Black" Offset="1" />
                  </RadialGradientBrush>
              </Ellipse.Fill>
  </Ellipse>

b. 3D Graphics

The ViewPort3D element in WPF bridges the gap between 2D and 3D. Let me list down the things required to give a 3D view normally.

1. An Object - to be displayed in 3D view
2. One or more light sources - to light the object, so its visible
3. Camera - To provide the point of view.

The ViewPort3D element in WPF accepts the above three items in order to project a 3D view in a WPF window. Fig 1.7 provides a sample 3D screen.

[sample8.jpg]
Fig 1.7

  <Viewport3D>
              <Viewport3D.Camera>
                  <PerspectiveCamera Position="-4,1,10" LookDirection="4,-1,-10"
  UpDirection="0,1,0" FieldOfView="45" />
              </Viewport3D.Camera>
              <ModelVisual3D>
                  <ModelVisual3D.Content>
                      <Model3DGroup>
                          <DirectionalLight Direction="0,0,-1" />
                          <GeometryModel3D>
                              <GeometryModel3D.Geometry>
                                  <MeshGeometry3D Positions="0,1,0 1,-1,1 -1,-1,1 1,-1,-1 -1,-1,-1"
  Normals="0,1,0 -1,0,1 1,0,1 -1,0,-1 1,0,-1"
  TriangleIndices="0,2,1 0,3,1 0,3,4 0,2,4" />
                              </GeometryModel3D.Geometry>
                              <GeometryModel3D.Material>
                                  <DiffuseMaterial Brush="Red" />
                              </GeometryModel3D.Material>
                              <GeometryModel3D.BackMaterial>
                                  <DiffuseMaterial Brush="Green" />
                              </GeometryModel3D.BackMaterial>
                          </GeometryModel3D>
                      </Model3DGroup>
                  </ModelVisual3D.Content>
              </ModelVisual3D>
  </Viewport3D>

c. Animation & Media support

The animation support of WPF gives liveliness to the application. Animation components in WPF lie in the namespace System.Windows.Media.Animation. Animations can be started by the method BeginAnimation. There are different types of animations available in WPF but for our demo purpose we will make use of DoubleAnimation.

  DoubleAnimation animate = new DoubleAnimation();
  animate.To = 300;
  animate.Duration = new Duration(TimeSpan.FromSeconds(5));
  animate.RepeatBehavior = RepeatBehavior.Forever;
  myEllipse.BeginAnimation(Ellipse.WidthProperty, animate);

The above code does an animation on the ellipses with property and the time span for animating is 5 seconds.

WPF can incorporate video and audio into the user interface. The easiest way to implement an audio or video in a WPF window is to make use of the media element. Only the source file path has to be provided to the media element as shown in the below XAML code.

  <MediaElement Source="C:\sample.wmv" />

8. Styles & Resources

In WPF any object could be a resource which can be later used by the elements on the Window. For example a string can be a resource; a solid brush can be a resource; a style can be a resource and so on. If the application is going to be used globally then localization is also possible by providing a Culture for the resource. A resource can be accessed through its x:Key attribute.

In the example below XAML defines a local resource:

  <Window x:Class="WpfSamples.Article"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Article" Height="199" Width="362" Loaded="Window_Loaded"
          xmlns:s="clr-namespace:System;assembly=mscorlib">
      <Window.Resources>
          <SolidColorBrush x:Key="myBrush" Color="LightGreen" />
          <s:String x:Key="text">Hello!</s:String>
      </Window.Resources>
      <Grid>
          <TextBlock FontSize="36" Width="100" Height="50" Text="{StaticResource text}" Background="{StaticResource myBrush}"></TextBlock>
      </Grid>
  </Window>

A style is defining properties for the controls. The best thing with WPF is, it opens the way for having a common style for controls and making use of it. Defining a common style for controls was a challenge with traditional Windows application which has been made easy with WPF styles. Below XAML defines a local style.

The above XAML codes are defined at the window level, so the elements in other WPF windows cannot make use of it. If you want to make the resource and style available to the whole application, then it can be moved to App.Xaml file.

  <Application x:Class="WpfSamples.App"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:s="clr-namespace:System;assembly=mscorlib"
      StartupUri="StackPanel.xaml">
      <Application.Resources>
          <SolidColorBrush x:Key="myBrush" Color="LightGreen" />
          <s:String x:Key="Text">Hello!</s:String>
          <Style TargetType="{x:Type TextBlock}">
              <Setter Property="Background" Value="Green"></Setter>
          </Style>
      </Application.Resources>
  </Application>

9. Databinding in WPF

So, what is the advantage that the WPF data binding has over the ASP.NET and Windows Forms, there are many. Out of which I will discuss some key features in here. First you don't have to bother about the synchronization of data between the data source and the UI element. The data binding framework of WPF will take care of the synchronization where as in ASP.NET or Windows application you need to bother about submitting the changes done in the UI data to the datasource.

All you have to do is specify the target UI element property as a dependency property as shown in the below XAML.

  <TextBlock Text='{Binding Path=Age}' />

So, from now on the property Age and Text property of the TextBlock will be in Sync. One of the splendid features in WPF is that it supports a wide variety of data sources like XML, ADO.NET classes, LINQ queries, types of IEnumerable and even other UI elements.

  <Slider x:Name='sizeSlider'
          Orientation='Vertical'
          Minimum='10'
          Maximum='80'
          Value='25' />
  <TextBlock Text='Sample Text - abcde'
             Margin='5,0'
             FontSize=
  '{Binding ElementName=sizeSlider, Path= Value}'/>

In the above XAML, binding is done between the slider value and the font size of the TextBlock. The end result will be when the slider value is increased or decreased; the font size of the text block also gets increased or decreased with clean look and feel. This is awesome isn't it?

10. DataGrid availability

Although the release of WPF was a really exciting thing for the developers, the non availability of the datagrid disappointed many including myself. Because of the strict need for a datagrid in WPF, the developers were forced to use the third party WPF grid controls. But you don't have to worry about it anymore because Microsoft has released a WPF Tool Kit which can be downloaded and integrated to the Visual Studio IDE. You can download the WPF toolkit binaries from here.

Now I will give you a little walk through on the WPF DataGrid with a sample. The key features of WPF DataGrid are listed below:

• A. AutoGenerate Columns

By only specifying the ItemSource for the DataGrid, WPF can auto generate the columns based on the DataType of the binding record like, TextBox column, CheckBox Column, etc.

• B.Row Details

If you want not to display all the columns and display those only on a particular cell click or some similar action can be done in WPF. You have to define a template called RowDetailsTemplate and there are options available like RowDetailsVisibilityMode and VisibleWhenSelected.

• C. Data Validation

WPF datagrid supports validation at both the cell level and at the row level. Cell level validation is achieved by the use of IDataErrorInfo on any binding. In .NET 3.5 SP1 a feature called BindingGroup is available which allows the developers to specify the RowValidation rules and RowValidationErrorTemplate in order to present the error message to the users in a nice way.

• D. Cell or Row selection

WPF Datagrid gives a provision to select a particular cell or a particular row. If the property SelectionMode is set to the Cell then the cell selection is enabled else if it is set to Row then row selection is enabled. Also SelectionUnit can be single or extended which specifies whether single row or multi row selection is enabled.

• E. Styling

WPF datagrid provides a great support for styling. The Background and AlternatingRowBackground allow the users to set alternating row colors to enhance readability. Gridlines can be customized using GridLinesVisibility, HorizontalGridLinesBrush, and VerticalGridLinesBrush. Cells and rows can also be assigned styles using CellStyle and RowStyle.

  <dg:DataGrid Name="dataGrid1" ItemsSource="{StaticResource UserData}">
    	<dg:DataGrid.Columns>
                  <dg:DataGridTextColumn Header="ID" 
                                             Binding="{Binding ID}" 
                                             IsReadOnly="True"/>
                  <dg:DataGridTextColumn Header="First Name" 
                                             Binding="{Binding FirstName}" />
                  <dg:DataGridTextColumn Header="Last Name" MinWidth="200" 
                                             Binding="{Binding LastName}"
                                             CanUserSort="False" />
         </dg:DataGrid.Columns>
  </dg:DataGrid>

Conclusion

Hope this article provides a good look at the top features of WPF. Though Windows Presentation foundation is vast area to discuss, I have tried my best to provide as much key information as possible. WPF 4.0 is to be released soon as part of the .NET framework 4.0. It should be have more features and new controls as well.