Skip navigation

So two post ago I gave a brief overview of my 4C series. Unfortunately, after promising to deliver this first entry in the series, I realized that I’m assuming knowledge of WPF development in general. But fear not my fellow coders! Because we are starting at the same place that every Windows programming tutorial before starts: with a simple hello. Indeed, you can consider this a crash course in WPF development itself for new comers, although I would recommend further training before you go full-bore into WPF development (for the patient ones among you, I will be writing a proper series on general WPF development later).

But before we get to the good stuff we’ve got to get our development environment ready. Here’s what you need:

  1. Windows XP SP2, Server 2003 SP1, or Vista
  2. .Net Framework 3.0 RTM (pre-installed on Vista)
  3. Windows Vista SDK (provides a quick local reference of the .Net 3.0 APIs and support for compiling .Net 3.0 apps)
  4. (optional) Visual Studio 2005 Professional or better. (I’d highly recommend downloading the trial if you don’t have a copy. Express won’t support integrated WPF development)
  5. (optional) Visual Studio Extensions for WPF and WCF November CTP (provides additional support for WPF development within the Visual Studio 2005 IDE and integrates the Windows Vista SDK into the MSDN Library if installed)
  6. Of course for a really cutting edge experience, you can download the latest "Orcas" CTP which provides the most integrated .Net 3.0 developer experience available today.

Although, Visual Studio 2005 and the VS Extensions are marked as optional, it is out of this series’ scope to provide instruction on building WPF applications from the command line. I would feel bad about this except there is a free three month trial available for those following along (just click the link). Anyway, I’m going to take a quick break while you get everything set up for what comes next.

All done? Great! One more quick note, for the first version of this tutorial, I will only be providing code samples in C# and XAML. If I get enough requests, I will take the time to convert it to VB.Net as well. So on to the good stuff.

The first step is simple: create a new project in Visual Studio. If this is your first time using the extensions for WPF, you will see a new set of options for .Net 3.0 projects

The new project dialog after installing .Net 3.0 support.

Select the Windows Application (WPF) template and fill out the rest of the dialog as shown (you can select whatever location suits you best). After you hit okay, the base template for a WPF application will be created. You should see the following in your solution explorer:

The default WPF Windows app includes references to the most common WPF libraries that an app might need. It also contains two XAML files and their "code-behinds". The first XAML file and its code-behind defines a custom subclass of System.Windows.Application. The Application class provides all of the global application-level plumbing (just like the Winforms Application before it).

In addition to the Application definition, the project template includes a definition for a sublcass of System.Windows.Window in a XAML file (Window1.xaml) and its corresponding code-behind.

As I mentioned before, XAML is an XML-based markup language that is used by .Net Framework 3.0 to declare and instantiate CLR objects. WPF uses XAML to define UI, while Windows Workflow uses XAML to define…well workflows (or so I am told, I haven’t worked much with it as of now). In order to expose as much UI capability as possible with as much simplicity as possible, a new framework was needed that gives easy access to everything from basic graphic primitives (normally accessed by GDI/GDI+ calls) through media playback (normally requiring DirectX or WindowsMedia knowledge) and including the controls we all know and love from Windows Forms (well most of them that is).

For a developer who has not had prior exposure to a Markup/Code-behind model (similar to what ASP.Net uses), WPF applications that use XAML may be a bit disconcerting at first. But it may be easier to come to terms with it if one were to compare it to a partial class. The XAML defines certain parts of the class (the UI in most cases) and is eventually compiled behind the scenes, while the C# defines the logic that listens for events on the UI and responds accordingly (MVC at its finest).

Again this is very similar to the programming model for ASP.Net. The UI (web page) is defined declaratively using an XML-based language. While the logic resides in a code-behind that listens for events on the UI and responds accordingly. The similarities don’t end there, but that’s for another entry.

I guess at this point, there’s only so much that can be conveyed without a code sample. So here it is the XAML and code-behind that define the App class for HelloWorld.

    1 <Application x:Class="WPFTutorial.HelloWorld.App
    2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation
    3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml
    4     StartupUri="Window1.xaml"> 
    5     <Application.Resources> 
    6  
    7     </< span>Application.Resources> 
    8 </< span>Application>

App.Xaml

    1 using System; 
    2 using System.Windows; 
    3 using System.Data; 
    4 using System.Xml; 
    5 using System.Configuration; 
    6  
    7 namespace WPFTutorial.HelloWorld 
    8 { 
    9     /// 
   10     /// Interaction logic for App.xaml 
   11     /// 
   12  
   13     public partial class App : System.Windows.Application 
   14     { 
   15  
   16     } 
   17 }

App.Xaml.cs

So what did we do here? Let’s look line by line starting with App.Xaml. In line 1, we see the root element, Application. Each element within a XAML file tells the compiler to create an instance of the class that the element represents. The classes are matched to elements through special CLR namespace to XML Namespace mapping. This can be done either through a special assembly-level CLR Attribute (XmlnsDefinition), or directly within the XAML using the clr-namespace syntax. There is an entire article dedicated to namespace mapping in the Windows Vista SDK. But to get the jist of it, read on.

By convention, the default namespace of a WPF XAML file is set to http://schemas.microsoft.com/winfx/2006/xaml/presentation. (The name winfx is a carry-over from the beta days of .NET framework 3.0 when it was called winfx.) This is seen in line 2 of App.xaml. This XML namespace is mapped to the majority of the clr namespaces for WPF using the XmlnsDefinition attribute. Also by convention, the x prefix is set to http://schemas.microsoft.com/winfx/2006/xaml This namespace is mapped to clr namespaces that provide supplementary support to XAML itself (mostly markup extensions). For instance in line 1 we see the x:Class attribute being applied to the Application element. This attributes tells the XAML compiler that WPFTutorial.HelloWorld.App defines a class that extends Application and is what this Application element refers to. This is similar to the Codebehind attribute that you will find on an ASP.NET page or control.

The default Application isn’t too exciting. However, if you look at line 4 of app.xaml, you will see the StartupUri attribute with a value of Window1.xaml. This attribute maps directly to the StartupUri property of Application. This property tells the application what will be displayed first (similar to passing a Form to Application.Run in the WinForms world).

There is a lot more that can be done with your application’s Application. There are event handlers to hook into, properties to set, the whole nine yards. We’re not going to go into depth on that here. The point of showing it here was to give you, dear reader, knowledge of its existence. Its up to you to determine how best to use the tool in your arsenal.

On to the fun stuff! Here is the code for Window1:

    1 <Window x:Class="WPFTutorial.HelloWorld.Window1
    2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation
    3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml
    4     Title="WPFTutorial.HelloWorld" Height="600" Width="800
    5     > 
    6     <Grid> 
    7  
    8     </< span>Grid> 
    9 </< span>Window>

Window1.xaml

    1 using System; 
    2 using System.Collections.Generic; 
    3 using System.Text; 
    4 using System.Windows; 
    5 using System.Windows.Controls; 
    6 using System.Windows.Data; 
    7 using System.Windows.Documents; 
    8 using System.Windows.Input; 
    9 using System.Windows.Media; 
   10 using System.Windows.Media.Imaging; 
   11 using System.Windows.Shapes; 
   12  
   13  
   14 namespace WPFTutorial.HelloWorld 
   15 { 
   16     /// 
   17     /// Interaction logic for Window1.xaml 
   18     /// 
   19  
   20     public partial class Window1 : System.Windows.Window 
   21     { 
   22  
   23         public Window1() 
   24         { 
   25             InitializeComponent(); 
   26         } 
   27  
   28     } 
   29 }

Window1.xaml.cs

Again, the code doesn’t do much and if you ran this application, you’d get a blank window. The XAML for this window is quite simple, consisting of two elements the Window itself and its child, a Grid. A Window can only have one direct child. That child is usually a descendant of Panel. However it can be a Button, a TextBlock, or whatever you want it to be. For some developers, the Window is the only control they will customize by composition (I.E. adding other controls to the window).

Let’s wrap this overview of the window in classic fashion. We’ll add some text to our window to say hello. Open up Window1.xaml and within the Grid element add the following:

    7     <TextBlock 
    8       FontSize="50
    9       FontWeight="Bold
   10       VerticalAlignment="Center
   11       HorizontalAlignment="Center
   12       TextWrapping="Wrap"> 
   13       Hello World From WPF! 
   14     </< span>TextBlock>

We now have a window that greets us like so:

So that’s it! You’ve made your first custom WPF control. This actually turned more into a WPF first steps tutorial, but it was also necessary to help give a solid foundation into what a control is in WPF and how it can be customized.

Up next! The UserControl.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: