WPF tutorials for beginners

What Is WPF?

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. 

Tools To Develop WPF Application

 To develop an application in WPF you need to know one of the .NET languages(C# or VB.NET). You need to know how the different controls work and how to use them. Because development of WPF application has the same process as that of general Windows application, but with many new features and XAML support. We will discuss later about all the new features and XAML in detail.

To develop an application in WPF first you need .NET framework 3.0 or later. Then you need an IDE to design and develop. You can use the most popular .NET IDE Visual Studio 2005/2008 or the latest VS2010 Beta which has a WYSIWYG environment. Visual Studio has all the necessary tools to develop WPF application. It has a WPF designer and also a XAML editor. You can work in only with the designer or the XAML or work simultaneously with XAML using the split view. You can download the express editions of Visual Studio 2008 or the 90 days trial version of Visual Studio 2008 professional from the below link,
Visual Studio Products



The direct link to download the 90 days trial version of Visual Studio 2008 professional is here,MS VS2008 Trial

You can download Express Edition of only one language or the complete ISO. Express Editions are free and are meant for learning purpose. So you may not avail some of the advanced features as compared to Visual Studio 2008 Professional. But Express Editions are great for learning purpose.

There are also a lot of tools available to design the GUI for you and generating XAML code. One the popular GUI development tool for WPF is Microsoft Expression Blend. You can download the latest Microsoft Expression products from here, MS Expression Products
Here is the Expression Blend IDE,


Microsoft Expression Blend has an interactive easy to use IDE to design WPF GUI in a fashion similar to that of Adobe Photoshop. You can design your GUI in the Expression Blend IDE and give different animations and effects to it. Then the IDE will generate the XAML file for your GUI which can be then imported to Visual Studio 2005/2008. Microsoft Expression Blend has a number of samples, templates and tutorials to help you in designing your GUI.

We will discuss later about a useful tool of .NET framework 3.0 SDK, i.e.” XamlPad.exe”. This is shipped with .NET framework 3.0 SDK. XamlPad give you a real time demonstration of how XAML tags actually generating the GUI elements. Once you get familiar with XAML, we will explore the features of this tool as it requires knowledge of XAML tags.

Checkouts For Your Needs

So at last you need the following tools to develop a WPF application,

1.The .NET Framework 3.0 or later.

2.Windows XP, Windows Server 2003, Windows Vista or Windows 7 as OS.

3.Visual Studio 2005/2008 Professional or Express Edition (or VS 2010 Beta).

4.Microsoft Expression Blend 3(Optional).

5.Last but not the least knowledge of any one of the .NET languages, i.e. C# or VB.NET.

 

Installation and Configuration of Visual Studio

 

Installing Microsoft Visual Studio

Visual Studio Express:-

1>> First download the Visual Studio Express edition.
If you have downloaded the ISO image, then first burn it to a blank DVD. You will get Visual C# Express 2008, Visual VC++ Express 2008, Visual Basic Express 2008 and Visual Web Developer Express in the complete ISO image file.

If you choose to download only one language then it will start the installation automatically after installation complete. It will be a web-install then. It is better to download the ISO file and make a DVD of it. It will be useful in future.

2>> Then insert the DVD into your DVD Drive. It will start the setup program automatically. If you are using Windows Vista or later then allow the setup program to run.

3>> You will get the following screen. Choose your language to install and click on it. After copying the files the installation will run automatically. Read the license agreement and accept it. Then click Next to start the installation.

Visual Studio 2008 Professional:-

1>> First download the ISO file and burn it to a blank DVD. Then insert that DVD into your DVD drive. It will start the setup program automatically. Allow the Setup.exe file to run if you are using Windows Vista or later.


2>> The Setup window will provide you three options,

Install Visual Studio 2008:- It will install the features of Visual Studio 2008.

Install Product Documentation:- It will install the MSDN library which includes the help files.

Check For Service Releases:- It will check for the new service releases for your product on the web.

As you can see in the picture the Product Documentation and the Service Releases options are not active. Once you install the Visual Studio 2008, then you can install the documentation and check for new releases.


3>> Click on Install Visual Studio 2008. The setup screen will appear after copying files.



As you can see in the pictures the Next button will be active after setup initializes the components. Then click Next to continue.

4>> Then in the next screen accept the license agreement and give your user name and click Next.



5>> In the next screen it will ask you to choose the type of install. It has three options,



Default Install:- It will install the minimal required features.

Full Install:- It will install all the features of the product.

Custom Install:- You can specify what to install in custom installation.

Select your desired choice. If you don’t have much disk space, it will be better to go for custom installation.

The custom installation screen will look like the below image.



Choose your desired options and set the installation path. You can see the disk cost also. Then click on install.
You can go to the previous steps at any point of time. But once installation starts you can’t modify in the middle.

6>> After clicking install the installation will start. Your computer may restart several times depending on the installed components.



You can abort the installation by clicking on cancel button. You will get the confirmation screen after the installation will finish.



7>> Click on the finish button to finish the installation. It may ask you to restart your system.
After installation will finish, the setup program will return to the fist screen. Now you can install the product documentation.

8>> Now you can start Visual Studio 2008 by going to "Start-->All Programs-->Microsoft Visual Studio 2008-->Microsoft Visual Studio 2008". It will ask you to choose your environment settings.



9>> Choose your desired setting according to your choice and click on Start Visual Studio. You can change the environment settings at any time from the Tools menu. Environment settings will set the IDE to best suite your needs for a specific type of development. It does not mean that by choosing Visual C# setting you can’t develop VB applications. You can work in any language in any environment.

The Visual Studio IDE will start after a few seconds. Below is the Visual Studio IDE.

The WPF Designer

The IDE for WPF development is similar to that of Windows Development with some extra elements. To start WPD 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.

Different Elements of IDE:-

1.The Menu Bar:-

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.

Your First WPF Application

Welcome To WPF Application Development

--> First in the Visual Studio IDE choose to create a new application. It will give you the following window.



--> In this window in the Project Type pane choose your desired language and in the Template pane choose "WPF Application". Then give your application a name and click n the OK button. It will take you to the WPF Designer window.

--> First add a button from the toolbox to your window. Set its name property to "btnClick" and caption property to "Click Me". I have set its background color property and boarder properties. You can also set other properties.

--> Then change the form’s title property to "Welcome To WPF". You can set the form’s boarder, background, opacity and other properties.

--> To get your work quicker copy and paste the following XAML file to your XAML editor. Only copy the code inside the Grid element. The Window element will be generated by default. You can refer to the XAML document.

<Window x:Class="Welcome.Window1"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Welcome To WPF" Height="300" Width="300">
  <Grid>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="0*" />
            <ColumnDefinition Width="274*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Button Margin="72,103,64,118" Name="btnClick" Grid.Column="2" Click="btnClick_Click" ForceCursor="True" 
RenderTransformOrigin="23,34" Background="LimeGreen" BorderBrush="Chartreuse" OpacityMask="CadetBlue">
            <Button.BitmapEffectInput>
                <BitmapEffectInput />
           </Button.BitmapEffectInput>
            <Button.BitmapEffect>
               <DropShadowBitmapEffect Color="Chartreuse" />
            </Button.BitmapEffect> Click Me</Button>
    </Grid>
</Window>

--> Now your design is ready and you can now code it. This application will just show a message on the message box when the "Click Me" button is pressed. So now double click on the button to show up the code editor. In the click event handler of the button add the following code.

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 Welcome
{
    /// 

    /// Interaction logic for Window1.xaml
    /// 
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void btnClick_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Welcome To World Of WPF");
        }
   }
}

--> Now your first application is ready. Save it and click on the select "build" from the build menu. Then run your application by selecting "Start Debugging" from the debug menu. You can also press F5 key to run your application or click on the play button in the tool bar.

The window you just created will appear with a button. You can see that the button starts glowing when you put the mouse on it. Now click on the button. It will give you a message box showing a message as in the below figure.



To close the application first click on the OK button of the message box and then press the close button of the window. It is just a simple application to show you how WPF differ from Window Applications.  

 

Some Important Classes and Namespaces

Some Important WPF Classes and Namespaces:-

In the previous chapters you got a clear understanding of WPF, XAML and WPF Designer. You have also developed a simple application. You may notice that the application development in WPF has the same process as that of Window Application development. But behind the sense it has a lot of differences. Here we are actually designing the interface by writing XAL like code known as XAML. We will learn about XAML and how to work with detail in the next chapters onwards.

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.

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. For detailed list you can refer .NET 3.5 SDK documentation. Now have a look at 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:-

Now have a look at some important namespaces of the WPF.

•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.

Introduction to XAML

Introduction to XAML:-

Extensible Application Markup Language(XAML) is a new XML based code that allows you to define the different functionality of a .NET type through markup mainly in WPF. As XAML is a XML based technique we have all the advantages and disadvantages of XML. Some of the advantage and drawbacks of XAML are,

--> XAML is self describing.
--> XAML files represent each element as a type name such as button, window, etc.
--> XAML is case sensitive like XML.

One of the major advantages of XAML is that it improves the collaboration between designers and developers. Microsoft describes XAML as “toolable” that means XAML can be manipulated using software tools.
This helps the separation of the GUI design from implementation. Products like Microsoft’s Expression can be used to design the GUI and generate the XAML code. Then this code can be imported to a development environment like Visual Studio by the developers.

How it works:-

In XAML most of the interfaces have representations and each property is represented by an XML element and/or attribute.

XAML file contains all the information about the window and its components itself.

Each element in XAML is organised in a hierarchical manner making it easy for the programmer to add or delete codes easily at any time.

XAML in terms of its relationship to CLR objects and types, WPF defines types that represent controls and other UI elements and the XAML simply maps to that types.
Below is a simple code to create a button in XAML.

<!- -Define Button in XAML- - >
<Button Name="btnClick" 
Height="40" 
Width="100" 
Content="Click Me"/> 

It can be programmatically done like,

Button btnClick=new Button();
btnClick.Height=40;
btnClick.Width=100;
btnClick.Content="Click Me";