IN THIS CHAPTER

Taking a first look at WPF and what it can do for you

Working with XAML

Building your first WPF application

Comparing XAML to C#

WPF, or Windows Presentation Foundation, is a graphical system for rendering user interfaces. It provides great flexibility in how you can lay out and interact with your applications. With Common Language Runtime (CLR) at its core, you can use C# or any other CLR language to communicate with user-interface elements and develop application logic. The advantages of WPF for your application are its rich data binding and visualization support and its design flexibility and styling.

WPF enables you to create an application that is more usable to your audience. It gives you the power to design an application that would previously take extremely long development cycles and a calculus genius to implement. Now you can implement difficult things like graphics and animations in as few as three lines of code! This chapter introduces you to key WPF concepts as well as common application patterns used in the software industry today.

You don’t have to type the source code for this chapter manually. In fact, using the downloadable source is a lot easier. You can find the source for this chapter in the CSAIO4D2EBK05CH01 folder of the downloadable source. See the Introduction for details on how to find these source files.

Understanding What WPF Can Do

WPF's graphics capabilities make it the perfect choice for data visualization. Take, for instance, the standard drop-down list (or combo box). Its current use is to enable the user to choose a single item from a list of items. For this example, suppose you want the user to select a car model for purchase.

The standard way of displaying this choice is to display a drop-down list of car model names from which users can choose. There is a fundamental usability problem with this common solution: Users are given only a single piece of information from which to base their decision — the text that is used to represent the item in the list.

For the power user (or car fanatic), this may not be an issue, but other users need more than just a model name to make an educated decision on the car they want to purchase. This is where WPF and its data visualization capabilities come into play.

You can provide a template to define how each item in the drop-down list is rendered. The template can contain any visual element, such as images, labels, text boxes, tooltips, drop shadows, and more!

Figure 1-1 shows a typical display of a combo box. This control has limitations: It can relay to the user only a single piece of information, the text used to represent the car model (yes, you could add graphics to the combo box using low-level programming techniques beyond the ken of mere mortals, but most people wouldn’t want to). It’s possible for you to display images of the car models in a separate control based on the selection in the list, but this still mandates users to make their selection before seeing exactly what it is they are choosing. In contrast, WPF has the flexibility to display many pieces of information in each combo box item, like a one-stop shop for all the information the user will need to make their decision. (See Figure 1-2 for a WPF combo box.)

Figure 1-2 shows a sample combo box in WPF. The way the combo box item is rendered is defined using a data template. (Chapter 3 of this minibook covers data templates.) Each item in this combo box is rendered to provide the user with a visual cue along with multiple data fields. Displaying all this information enables users to make an educated decision about the choice they are making.

Introducing XAML

WPF enables you to build user interfaces declaratively. Extensible Application Markup Language (XAML; pronounced zammel) forms the foundation of WPF. XAML is similar to HTML in the sense that interface elements are defined using a tag-based syntax.

XAML is XML-based, and as such, it must be well formed, meaning all opening tags require closing tags, and all elements and attributes contained in the document must validate strictly against the specified schemas.

By default, when creating a WPF application in Visual Studio 2010 and above, the following schemas are represented in generated XAML files:

• http://schemas.microsoft.com/winfx/2006/xaml/presentation: This schema represents the default Windows Presentation Framework namespace.
• http://schemas.microsoft.com/winfx/2006/xaml: This schema represents a set of classes that map to CLR objects.

Most CLR objects can be expressed as XAML elements (with the exception of abstract base classes and some other nonabstract base classes used strictly for inheritance purposes in the CLR). XAML elements are mapped to classes; attributes are mapped to properties or events.

At runtime when a XAML element is processed, the default constructor for its underlying class is called, and the object is instantiated; its properties and events are set based on the attribute values specified in XAML. The next section reviews more XAML basics and gets you started on the path of WPF application development.

Diving In! Creating Your First WPF Application

Now it's time to get comfortable, so stop for a moment, go grab a caffeinated beverage, sit in a comfortable chair, pull up to your computer, and get ready to go! To create your first project, follow these steps:

1. Open Visual Studio.

2. Click Create a New Project.

   You see the list of available projects.

3. Select C#, Windows, and Desktop in the filter list.

   Visual Studio presents a list of Windows Desktop project types.

4. Highlight WPF App (.NET Framework) and click Next.

   You see the Configure Your New Project page of the wizard, shown in Figure 1-3.

5. Type MyFirstWPFApplication in the Project Name field, select Place Solution and Project in the Same Directory, and then click Create.

   Visual Studio creates a new WPF project for you and displays both the designer and the Code Editor with a default application defined. The WPF Application template creates two XAML files along with their respective code-behind files: App.xaml (App.xaml.cs) and MainWindow.xaml (MainWindow.xaml.cs), as shown in Figure 1-4. At this point, you can start adding code to the example application.

App.xaml represents the entry point of the application. This is where application-wide (globally scoped) resources and the startup window are defined (see Listing 1-1).

The resources are contained in a keyed collection of reusable objects. Resources can be created and retrieved using both XAML and C#. Resources can be anything — data templates, arrays of strings, or brushes used to color the background of text boxes. Resources are also scoped, meaning that they can be available to the entire Application (global), to the Window, to the User Control, or even to only a specific control.

LISTING 1-1 App.xaml

<Application x:Class="MyFirstWPFApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyFirstWPFApplication"
StartupUri="MainWindow.xaml">
<Application.Resources>

</Application.Resources>
</Application>

Listing 1-1 displays the XAML that was generated by the WPF App (.NET Framework) template in Visual Studio. Note that the WPF namespaces are defined. The namespace that represents the CLR objects will be distinguished in the XAML file with the x prefix.

The StartupUri value defines the window that will be displayed before the application is executed. In this case, the MainWindow.xaml window will be displayed.

The x:Class attribute defines the C# code-behind file of this XAML file. If you open App.xaml.cs, you see that its class name is App and it inherits from the Application class (which is the root element of the XAML file).

C# uses namespaces to organize and locate classes. To create objects from a specific namespace, you use the “using” syntax at the top of your class definitions. Similar to C#, XAML also requires you to declare which namespaces are used in the document. Namespaces are typically defined as an attribute within the root element of the document; the root element is the first XML tag in the XAML document. XAML uses XML syntax to define a namespace — “xmlns” means “XML namespace,” and it's typically followed by a colon (:) and then an alias. This alias is the shorthand reference to the namespace throughout the XAML document; it's what you use to instantiate an object from a class in that namespace.

For instance, if you want to add the namespace MyTemplates.DataTemplates from the assembly MyTemplates.dll, you could define the namespace as

xmlns:myDTs="clr-namespace:MyTemplates.DataTemplates;assembly=MyTemplates.dll"

You are then able to instantiate an object from the MyTemplates.DataTemplates namespace as follows:

<myDTs:myClass></myDTs:myClass>

Whatever XAML Can Do, C# Can Do Better!

Anything that you can implement using XAML can be implemented in C#. This is not true in reverse; not everything you can do in C# can be done in XAML. C# is the obvious choice for performing business logic tasks with procedural code that can't be expressed in XAML. In the following steps, you create an identical WPF application to the one you created in the preceding section, this time using C# to implement its functionality:

1. Choose File⇒  Close Solution to close the current solution if necessary.

2. Click Create a New Project.

   You see the list of available projects.

3. Select C#, Windows, and Desktop in the filter list.

   Visual Studio presents a list of Windows Desktop project types.

4. Highlight WPF App (.NET Framework) and click Next.

   You see the Configure Your New Project page of the wizard, shown in Figure 1-3.

5. Type MyFirstCodeOnlyWPFApplication in the Project Name field, select Place Solution and Project in the Same Directory and then click Create.

   Visual Studio creates the Solution and Project structure.

6. Open App.xaml.cs.
7. Override the OnStartup method to include the creation of the Purpose application resource by adding the following code to the App class:

   protected override void OnStartup(StartupEventArgs e)
{
// Create and add the Purpose application resource
string purpose = "Hello WPF World, in C#";
this.Resources.Add("Purpose", purpose);
base.OnStartup(e);
}

8. Open MainWindow.xaml and give the Grid element a name by adding the following attribute shown in bold:

   <Grid x:Name="gridLayout">
</Grid>

9. Open MainWindow.xaml.cs, and in the default constructor, after the InitializeComponents method call, add the following code shown in bold:

   public MainWindow()
{
InitializeComponent();

// Define grid column and row
this.gridLayout.ColumnDefinitions.Add(new ColumnDefinition());
this.gridLayout.RowDefinitions.Add(new RowDefinition());

// Obtain label content from the application resource, Purpose
string purpose = this.TryFindResource("Purpose") as string;
Label lblPurpose = new Label();
lblPurpose.Content = purpose;
lblPurpose.FontSize = 25;

// Add label to the grid
this.gridLayout.Children.Add(lblPurpose);

// Assign attached property values
Grid.SetColumn(lblPurpose, 0);
Grid.SetRow(lblPurpose, 0);
}

Run the application and observe that the resulting product is similar to that obtained in the section “Diving In! Creating Your First WPF Application,” earlier in this chapter.