Wednesday, 29 February 2012

Introduction to WPF(Windows Presentation Foundation) in .NET

Windows Presentation Foundation (WPF) is a next-generation presentation system for building Windows client applications with visually stunning user experiences. With WPF, you can create a wide range of both standalone and browser-hosted applications.
 It is part of the .NET framework 3.0 and higher.
WPF combines application UIs, 2D graphics, 3D graphics, documents and multimedia into one single framework.
As the name says all, WPF is actually a new framework introduced with .NET framework 3.0 which actually puts forward a new set of classes and assemblies which allows us to write programs more efficiently and flexibly. It uses Direct3D rendering which employs graphics cards to render the output on the screen. Thus the drawing in the form will be smooth and also there is a chance to utilize the hardware capabilities installed in your machine.  In case of traditional GDI forms application,  it is not possible to use advanced graphics capabilities and hence Windows Forms application will always be inefficient in comparison to WPF.  Another important thing that I must address in this regard, GDI Windows forms application uses Operating system controls to build its application. Thus it is basically very hard to customize them in your own application. WPF controls are actually drawn over the screen, and hence you can customize controls totally and modify its behavior when required.
Separation of Appearance and Behavior
WPF separates the appearance of an user interface from its behavior. The appearance is generally specified in the Extensible Application Markup Language (XAML), the behavior is implemented in a managed programming language like C# or Visual Basic. The two parts are tied together by databinding, events and commands. The separation of appearance and behavior brings the following benefits:
  • Appearance and behaviour are loosely coupled
  • Designers and developers can work on separate models.
  • Graphical design tools can work on simple XML documents instead of parsing code.
Rich composition
Controls in WPF are extremely composable. You can define almost any type of controls as content of another. Although these flexibility sounds horrible to designers, its a very powerful feature if you use it appropriate. Put an image into a button to create an image button, or put a list of videos into a combobox to choose a video file.
    <StackPanel Orientation="Horizontal">
      <Image Source="speaker.png" Stretch="Uniform"/>
      <TextBlock Text="Play Sound" />
Highly customizable
Because of the strict separation of appearance and behavior you can easily change the look of a control. The concept ofstyles let you skin controls almost like CSS in HTML. Templates let you replace the entire appearance of a control.
The following example shows an default WPF button and a customized button.

Resolution independence
All measures in WPF are logical units - not pixels. A logical unit is a 1/96 of an inch. If you increase the resolution of your screen, the user interface stays the same size - it just gets crispier. Since WPF builds on a vector based rendering engine it's incredibly easy to build scaleable user interfaces.

What is XAML ?
XAML is an XML-based markup language that is used to implement an application's appearance declaratively. It is typically used to create windows, dialog boxes, pages, and user controls, and to fill them with controls, shapes, and graphics.
The following example uses XAML to implement the appearance of a window that contains a single button.
ExpressionBuilder is the best tool to generate XAML. 
Advantages of XAML
All you can do in XAML can also be done in code. XAML ist just another way to create and initialize objects. You can use WPF without using XAML. It's up to you if you want to declare it in XAML or write it in code. Declare your UI in XAML has some advantages:
  • XAML code is short and clear to read
  • Separation of designer code and logic
  • Graphical design tools like Expression Blend require XAML as source.
  • The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer.
      Width="250" Height="100">

    <!-- Add button -->
    <Button Name="button">Click Me</Button>

Then the output of the above code is like the below figure.

XAML vs. Code

As an example we build a simple StackPanel with a textblock and a button in XAML and compare it to the same code in C#.
    <TextBlock Margin="20">Welcome to XAML</TextBlock>
    <Button Margin="10" HorizontalAlignment="Right">OK</Button>
The same expressed in VB.NET code will look like this:
   ' Create the StackPanel
        Dim stackPanel As New StackPanel()
        Me.Content = stackPanel

        ' Create the TextBlock
        Dim textBlock As New TextBlock()
        textBlock.Margin = New Thickness(10)
        textBlock.Text = "Welcome to the World of XAML"

        ' Create the Button
        Dim button As New Button()
        button.Margin = New Thickness(20)
        button.Content = "OK"
As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.

No comments:

Post a Comment