WPF

Introduction To WPF

WPF stands for 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.

The core of WPF is a resolution-independent and vector-based rendering engine that is built to take advantage of modern graphics hardware. WPF extends the core with a comprehensive set of application-development features that include Extensible Application Markup Language (XAML), controls, data binding, layout, 2-D and 3-D graphics, animation, styles, templates, documents, media, text, and typography. WPF is included in the Microsoft .NET Framework, so you can build applications that incorporate other elements of the .NET Framework class library.

Architecture of WPF

Go to File menu choose new project and then WPF Application-as shown in below picture.

 
Extensible Application Markup Language (XAML)

XAML is an XML based language that is used as a foundation for the WPF. It allows forms to be created using a syntax very similar to ASP.NET and HTML. For example, a button in html:

<input type="button" value="Click Me" id="myButton" />
 and In WPF

<Button Name="myButton">Click Me<Button>

Birth Of WPF

Microsoft has developed numerous graphical interface toolkits like C++ Win32 API, VB6, MFC, etc. to build desktop applications. These technologies are capable of designing a good GUI interface for the Windows Applications. But these lacks in some additional and advanced features, such as, 2D & 3D Rendering support, Multimedia Support, Animation Support, etc. which are essential now a days. So Microsoft has introduced WPF(Windows Presentation Foundation) API in .NET3.0 framework for the first time. It is released in the year 2007.

.NET 3.0 is officially shipped for the first time with Windows Vista OS. But Windows XP and 2003 versions can also use .NET 3.0. Visual Studio 2005 is the first gateway to program .NET 3.0 applications. So to develop WPF application you need Visual Studio 2005 or later.

What's New:

.NET 2.0 supports 3D and Multimedia features, but the programmer has to use a number of unrelated APIs. For supporting 3D graphics he has to use DirectX APIs, to use multimedia he has to use Windows Media Player API, etc. So the programmer has to know all the different technologies to build a richer GUI. But it is very difficult to master all the different technologies and integrate them.

So WPF merged all the unrelated APIs into a single unified object model. So if you want to use 3D graphics or multimedia for your application you do not use to need use different APIs. WPF provides all the functionality you need to develop richer GUI applications.

Introducing XAML(An Integral Part Of WPF)

WPF provides us the capability to design windows applications like an ASP.NET application using markup language. Microsoft called this as XAML(Extended Application Markup Language). XAML provides a separation of coding from designing. So you can develop your application using the toolbox and properties window like the general windows application or in a different form like web applications using markup language.

XAML is capable to provide all the simple UI elements (such as labels, textboxes, etc.) to complex functionality (animation, graphics rendering and multimedia support). If you want to animate a button with a picture on it you only need a few line of XAML code. WPF elements can also be customized using styles and templates, minimizing your efforts. There are also a lot of tools to generate XAML code for you. You have to just define the UI in a drag and drop manner. You can also apply rendering effects and animations to these UI using a simple IDE. Then the IDE will give you the XAML code to be used in your application.

WPF Advantages:

1. Broad Integration: Prior to WPF, it was very difficult to use 3D, Video, Speech, and rich document viewing in addition to normal 2D Graphics and controls would have to learn several independent technologies. WPF covers all these with consisting programming model as well as tight integration when each type of media gets composited and rendered.

2. Resolution Independence: WPF applications are device independent i.e., smart client applications. Like normal applications it won’t get decrease the size as the resolution gets increase. This is possible because WPF emphasis on vector graphics.

3. Hardware Acceleration: WPF is built on top of Direct 3D, content in a WPF application whether 2D or 3D, Graphics or text is converted to 3D triangles, textures and other Direct 3D objects and then rendered by hardware. WPF applications can get the benefit of hardware acceleration for smoother graphics and all round better performance.

4. Declerative Programming: WPF takes the declarative programming to the next level with the introduction of Extensible Application Markup Language(XAML), pronounced as “Zammel”.
XAML is like HTML in web used for creating the interface, resulting graphical designers are empowered to contribute directly to the look and feel of applications.

5. Rich Composition and Customization: WPF controls are extremely compostable.
Eg: we can create combo box with animated buttons.

The WPF Designer

The IDE for WPF development is similar to that of Windows Development with some extra elements. To start WPF design window create a new WPF project in C# or VB.NET. It will show you the WPF designer. We will learn how to develop an WPF application in the next chapter. 
 

1.WPF ToolBox: The menu bar is situated under the title bar of the window. The menu bar has menus like File, Edit, View, Properties, Build, Debug, Tools etc. You can work with the different menu items as in case of Windows application development
2.The Tool Bar: The tool bar is situated below menu bar. The tool bar has options to save project, copy and paste, build, run,etc.

3.The Toolbox: By default the tool box will appear in the left pane. You can make it auto hide, floating or docking as per your choice. It has all the controls to work with. It contains the common controls like Button, Label, TextBox, etc. These controls work in a similar manner as that of Window Application.

4.The Solution Explorer: The solution Explorer is situated at the upper right corner of the IDE. It displays the classes, forms, modules, properties and preferences used by our application in a tree view. It makes the application development easy by displaying all the related items at one place. You can also make it floating, docking, or auto hide as per you choice.

5.The Property Window: The property window is situated below the Solution Explorer. The property window shows what properties the selected object has. You can set the different properties of the objects selected. You can also set these properties by coding manually. But it is easier to set the property by using the Property Window. The property window plays a vital role while developing WPF application. We can set the different 3D effects and other properties of control using this property window without knowing the XAML. The Property Window in WPF has some extra properties for each control than that of Windows application. You can make it floating, docking, or auto hide as per you choice

6.The WPF Form Designer: The WPF form designer has the same setting as that of Window Form Designer, but with some differences. The WPF designer contains a Zoom Tool to zoom the whole window so that you can develop your application more easily. You can place controls on the form by drag and drop method and resize it. It will display the distances from the window wall while resizing a control. It also provides to define grids in the window.

7.The XAML Editor: By default the XAML editor is displayed in split view below the WPD designer. You can choose your view to only Design or XAML according to your choice. In XAML editor you can define the XAML code to generate controls or set their properties.In split view it is easy to work as you can see how the different XAML tags affect the design. You can also take your XAML editor above the designer by clicking on the double arrow button present in the middle of designer and XAML editor headings below the designer.

Programming With WPF

The fundamental of  WPF programming is very  familiar to the Windows and web Application. You can  instantiate classes, set properties, call methods, and handle events, all using your favorite .NET Framework programming language, such as C# or Visual Basic. WPF exists as a subset of .NET Framework types that are for the most part located in the System.Windows namespace.
WPF includes additional programming constructs that enhance properties and events: Dependency Properties and Routed Events

Markup and Code-Behind

WPF offers additional programming enhancements for Windows client application development. One obvious enhancement is the ability to develop an application using both markup and code-behind, an experience that ASP.NET developers should be familiar with. Development and maintenance costs are reduced because appearance-specific markup is not tightly coupled with behavior-specific code. 

Development is more efficient because designers can implement an application's appearance simultaneously with developers who are implementing the application's behavior.
Multiple design tools can be used to implement and share XAML markup, to target the requirements of the application development contributors.

Globalization and localization for WPF applications is greatly simplified

Markup

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.

Code-Behind

The main behavior of an application is to implement the functionality that responds to user interactions, including handling events (for example, clicking a menu, tool bar, or button) and calling business logic and data access logic in response. In WPF, this behavior is generally implemented in code that is associated with markup. This type of code is known as code-behind.

To understand Code behind i have taken example for Button click event to show the message box. For this just double click on Button you will go to the code behind of button and write the code as follows for button click event. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
          
            MessageBox.Show("Welcome to WPF Programming!");
        }
    }
}

 Applications of WPF

WPF has comprehensive features for creating user experiences with rich content. To package this content and deliver it to users as "applications," WPF provides types and services that are collectively known as the application model. The application model supports the development of both standalone and browser-hosted applications.

Standalone Applications

    For standalone applications, you can use the Window class to create windows and dialog boxes that are accessed from menu bars and tool bars.
Additionally, you can use the following WPF dialog boxes: MessageBox, OpenFileDialog, SaveFileDialog, and PrintDialog.
Like in below image-

Browser-Hosted Applications

For browser-hosted applications, known as XAML browser applications (XBAPs), you can create pages (Page) and page functions (PageFunction<T>) that you can navigate between using hyperlinks (Hyperlink classes).
For Browser-Hosted Application we will discuss later.

Now we are starting with Standalone Application.

Controls in Windows WPF-
 

The built-in WPF controls are listed here.

Buttons: Button and RepeatButton.
Dialog Boxes: OpenFileDialog, PrintDialog, and SaveFileDialog.
Digital Ink: InkCanvas and InkPresenter. 
Documents:DocumentViewer,FlowDocumentPageViewer,FlowDocumentReader,FlowDocumentScrollViewer and StickyNoteControl. 
Input: TextBox, RichTextBox, and PasswordBox. 
Layout: Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView, GridSplitter, GroupBox, Panel, ResizeGrip, Separator, ScrollBar, ScrollViewer, StackPanel, Thumb, Viewbox, VirtualizingStackPanel, Window, and WrapPanel.
Media: Image, MediaElement, and SoundPlayerAction.
Menus: ContextMenu, Menu, and ToolBar.
Navigation: Frame, Hyperlink, Page, NavigationWindow, and TabControl.
Selection: CheckBox, ComboBox, ListBox, TreeView, RadioButton, and Slider.
User Information: AccessText, Label, Popup, ProgressBar, StatusBar, TextBlock, and ToolTip.

 Some Important WPF Classes and Namespaces

Before working with WPF you need to know some common classes and interfaces and their uses. So in this chapter you will get a clear understanding of different classes and interfaces and there uses.  Before knowing the classes and namespaces you need to know, what are the base assemblies that provide different classes ad interfaces for a WPF application. WPF has three base assemblies. These are as below,

1. WindowsBase.dll: This assembly defines the core types that constitute the infrastructure WPF API.
2. PresentationCore.dll: As the name specifies this assembly specifies different types for WPF GUI layer.
3. PresentationFoundation.dll: It defines the WPF control types, animation, multimedia and data binding support. It also specifies some other functionality.
4. The above three namespaces are managed namespaces. Besides these three namespaces WPF also uses an unmanaged library, i.e. milcore.dll. This library is responsible to work with DirectX layer. It acts as a bridge between the managed WPF assemblies and the DirectX layer.

Some WPF Classes:

All these three assemblies provides a number of new namespaces and hundreds of new .NET types(classes, interfaces, structures, enumerations and delegates) to work with WPF. The following class diagram and the class’s functionality.

• DispatcherObject: It is an abstract base class for classes that are bound to one thread. Classes that are derived from DispatcherObject have an associated Dispatcher object that can be used to switch the threads.
• Application: In every WPF application, one instance of Application class is created. This class implements a singleton pattern for access to the window of application, resources and properties. See the below image.
   

• DependencyObject:  It is the base class for all the classes that supports Dependency property.
• Visual: It is the base class for all the visual elements of WPF. This class includes features for transformation.
• UIElement:  It is the abstract base class for all WPF elements that need basic presentation feature. This class provides evens such as mouse move, drag and drop, click, etc.
• FrameworkElement:  It is derived from base class UIElements and implements the default behaviour of the methods defined by the base class.
• Shape: Shape is the base class for all the shape elements such as, line, rectangle, ellipse, polygon.
• Control: It is derived from FrameworkElement and is the base class for all the user-interactive elements.
• Panel:  As the name suggest it is the abstract base class for all the panels and is derived from FrameworkElement. Panel class has a Children property for all the UI-Element that is inside a panel and defines methods for arranging the child controls. Panel defines different classes to define the behaviour of child controls such as, WrapPanel, StackPanel, Grid and Canvas.
• ContentControl: - It is the base class for all the controls that have a single content such as, Buttons, Labels, CheckBox, RadioButton, etc.

You can also find the class hierarchy of your application using Object Browser in VS 2008. To view Object Browser go to view menu and select Object Browser. Object Browser also contains all the namespaces and its classes. See the below image for WPF class hierarchy. It is the class hierarchy of a simple WPF application that we have created earlier. Using Object Browser you can find all the methods, properties and events of a particular class by selecting that class.
 

Some WPF Namespaces:

• System. Windows:- It is the core namespace of WPF. You will find all the base classes such as, Application, DependencyObject , DependencyProperty and FrameworkElement here.
• System. Windows. Controls:- This namespaces contains all the controls of WPF. You will also find classes to work with complex controls such as PopUp, ScrollBar, StatusBar, TabPanel, etc. as well as all the basic controls.
• System. Windows. Data:- This namespace is used by WPF for Data Binding.
• System. Windows. Input:- This namespace provides several classes for command handling, keyboard input, etc.
• System. Windows. Markup:- This namespace helper classes for XAML markup code.
• System. Windows. Media:- This namespace is responsible to work with images, audio, and multimedia.
• System. Windows. Shapes:- This namespace provides core classes for UI such as Line, Rectangle, Ellipse, etc.
• System. Windows. Threading:- This namespace provides classes to work with multiple threads.
• System. Windows. Navigation:- This namespace provides classes for navigation between WPF pages particularly when working with Web Applications. 

Difference Between  WPF And SilverLight:

1. WPF is based off of the desktop CLR which is the full version of the CLR.
2. Silverlight is based on a much smaller and more compact CLR which provides a great experience but does not have the full breadth
   of CLR features. It also has a much smaller version of the BCL
3. WPF you can create Windows App, Navigation app and XBAP (IE based) applicationWith Silverlight you can create only XAP (Browser based application.).
4. WPF supports 3 types of routed events (direct, bubbling, and tunneling). Silverlight supports direct and bubbling only.
5. Silveright doesn’t support MultiBinding.
6. Silverlight supports the XmlDataProvider but not the ObjectDataProvider. WPF supports both.

Advantage of WPF:

1. Broad Integration: Prior to WPF, it was very difficult to use 3D, Video, Speech, and rich document viewing in addition to normal 2D Graphics and controls would have to learn several independent technologies. WPF covers all these with consisting programming model as well as tight integration when each type of media gets composited and rendered.
2. Resolution Independence: WPF applications are device independent i.e., smart client applications. Like normal applications it won’t get decrease the size as the resolution gets increase. This is possible because WPF emphasis on vector graphics.
3. Hardware Acceleration: WPF is built on top of Direct 3D, content in a WPF application whether 2D or 3D, Graphics or text is converted to 3D triangles, textures and other Direct 3D objects and then rendered by hardware. WPF applications can get the benefit of hardware acceleration for smoother graphics and all round better performance.
4. Declerative Programming: WPF takes the declarative programming to the next level with the introduction of Extensible Application Markup Language(XAML), pronounced as “Zammel”.
   XAML is like HTML in web used for creating the interface, resulting graphical designers are empowered to contribute directly to the look and feel of applications.
5. Rich Composition and Customization: WPF controls are extremely compostable.
   Eg: we can create combo box with animated buttons.