Introduction for WPF

Windows Presentation Foundation :

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 allow 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 their behavior when required.

Difference b/w Windows Forms and WPF Application :

Features of WPF :

WPF comes with lots of advantages. Let me introduce a few of its features:

• Device Independent Pixel (DPI)
  

  WPF introduces Device Independent DPI Settings for the applications built with it. For a window, it is very
  important to calculate how many Dots Per inch(DPI) the screen could draw. This is generally dependent on the
  hardware device and operating system in which the application runs and also how the DPI settings is applied on
  the Device. Any user can easily customize these settings and hence make the application look horrible. Windows
  forms application uses pixel based approach so with changing DPI settings, each control will change its size and
  look.

  WPF addresses this issue and makes it independent of DPI settings of the computer. Let's look at
  how it is possible:

  
  

  Let's say you have drawn a box, just like the one in the figure, which is 1 inch long in 96 dpi
  screen. Now if you see the same application in 120 dpi settings, the box will appear smaller. This is because
  the things that we see on the screen are totally dependent on dpi settings.

  In case of WPF, this is
  modified to density based approach. That means when the density of pixel is modified, the elements will adjust
  them accordingly and hence the pixel of WPF application is Device Independent Pixel. As you can see in the
  figure, the size of the control remains the same in case of WPF application and it takes more pixels in
  case of 120 DPI application to adjust the size properly.

  
  

• Redefine Styles and Control Templates

  In addition to graphics and animation
  capabilities, WPF also comes with a huge flexibility to define the styles and ControlTemplates.
  Style based technique as you might come across with CSS is a set of definitions which defines how the controls
  will look like when it is rendered on the screen. In case of traditional windows applications, styles are tightly
  coupled with each control, so that you need to define color, style, etc. for each individual control to make it
  look different. In case of WPF, Styles are completely separated from the UIElement. Once you define
  a style, you can change the look and feel of any control by just putting the style on the element.

  Most of
  the UIElements that we generally deal with are actually made using more than one individual elements.
  WPF introduces a new concept of Templates, which you might use to redefine the whole control itself.
  Say for instance, you have a CheckBox, which has a Rectangle in it and a
  ContentPresenter (one where the caption of the TextBox appears). Thus you can redefine
  your checkbox and put a ToggleButton inside it, so that the check will appear on the
  ToggleButton rather than on the Rectangle. This is very interesting. We will look into
  more detail on Styles and ControlTemplates in later section of the article.





What is XAML?





According to the definition, XAML is an XML based declarative markup language for specifying and setting the
characteristics of classes. In other words, XAML is a language used by WPF, Silverlight or any other application
which can declare classes by itself. So, you can declare a variable, define the properties of any class and
directly use it in your application. The XAML parser will automatically parse and create the actual object
while it renders the application.

XAML is generally used to define layout of UI, its elements and
objects for static and visual aspect. We cannot define flow of a program using XAML. So even though there are
large capabilities of XAML, it is actually not a programming language, rather it is used to design UI of the
application. Thus XAML employs other programming languages like C#, VB.NET, etc. to define the logic in code
behind.

ExpressionBuilder is the best tool to generate XAML.




WPF Architecture









For every new technology, it is very essential to have a clear idea about its architecture. So before beginning
your application, you must grab a few concepts. If you would not like to know WPF in detail, please skip this
section. As mentioned earlier, WPF is actually a set of assemblies that build up the entire framework. These
assemblies can be categorized as:

• Managed Layer
• UnManaged Layer


• Core API

Managed Layer: Managed layer of WPF is built using a number of
assemblies. These assemblies build up the WPF framework, communicate with lower level unmanaged API to render its
content. The few assemblies that comprise the WPF framework are:

1. PresentationFramework.
   dll: Creates the top level elements like layout panels, controls, windows, styles, etc.


2. PresentationCore.dll: It holds base types such as UIElement,
   Visual from which all shapes and controls are Derived in PresentationFramework.dll.


3. WindowsBase.dll: They hold even more basic elements which are capable of being used
   outside the WPF environment like Dispatcher object, Dependency Objects. I will discuss
   each of them later.

Unmanaged Layer (milcore.dll): The unmanaged layer
of WPF is called milcore or Media Integration Library Core. It basically translates the WPF higher level objects
like layout panels, buttons, animation, etc. into textures that Direct3D expects. It is the main
rendering engine of WPF.

WindowsCodecs.dll: This is another low level API which
is used for imaging support in WPF applications. WindowsCodecs.dll comprises a number of codecs which
encode / decode images into vector graphics that would be rendered into WPF screen.

Direct3D: It is the low level API in which the graphics of WPF is rendered.

User32: It is the primary core API which every program uses. It actually manages memory and process separation.

GDI & Device Drivers: GDI and Device Drivers are specific to the operating system which is also used from the application to access low level APIs.


Building Your First WPF Application :




Now the time has come to build your first WPF Application.
To do this, let's open Visual Studio 2008 / 2010. For this example, I used Visual Studio 2008. Create a new
Project. You will see a new window. The XAML will look like:


*******************************************************




<
Window x:Class
="FirstWindowsApplication.Window1"  

 xmlns
="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"




   xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
 

 x:Name="Window1"  

 Title="Window1" Height="300" Width="300">  

  <Grid>   

 </Grid> 

</Window>

*******************************************************

Here the blank window is produced. Height / Width represents the Size of the
 Window. Title determines the text which is displayed in the TitleBar of the 
window. Every control in XAML could be named with x:Name attribute. This will
 be used to reference the Window object in your XAML. x:Class attribute 
represents the class which should be associated with current Window.
 As I already told you, that XAML is not self sufficient, so to define 
logic you need a class in C# or VB.NET. 
  
Grid is the primary layout for WPF application. Grid can take multiple
 Child elements. So let us put some controls into the grid. 
*******************************************************
<Grid>   
 <Grid.RowDefinitions>  
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Enter Name :" Grid.Row="0" Grid.Column="0" />
<TextBox x:Name="txtName" Grid.Row="0" Grid.Column="1" MinWidth="50"/>
<Button Content="Click Me" Grid.Row="0" Grid.Column="2" Click="Button_Click"/>
</Grid>
*******************************************************

You can see that I have defined RowDefination and ColumnDefination.
 This allows you to divide the grid into cells so that you can place your
 control exactly where you want to. For each RowDefination and ColumnDefination,
 you can use Height and Width of it. You can see I have used 50, Auto, 
and * as width. Auto represents the size which we would define for the control
 during control definition. *  indicates the rest of the space which it can 
take. Thus, you can see  the button is spread the rest of the area of the 
column it finds. 
  
Now in the Behind, I put a Messagebox to show the content of TextBox.
********************************************************************
private void Button_Click(object sender, RoutedEventArgs e) 
 {  
    MessageBox.Show(string.Format("Hi {0}", this.txtName.Text)); 
 }
********************************************************************