Making WPF Applications
Up to this point, this book has dealt only with Windows Forms applications. The programs have
displayed forms and used Windows Forms controls such as
Buttons, TextBoxes, and Labels.
In .NET 3.0, Microsoft released Windows Presentation Foundation (WPF). WPF uses a whole
new set of controls, a new presentation system, and a whole new approach to user interface
programming. New features provide support for property animation (making property values
vary over time), simpler multimedia control, easier graphical transformations (for example, to
rotate or scale controls), and much more.
WPF uses a whole new set of controls, some of which correspond to Windows Forms controls
and some of which are completely new. For example, WPF has
Label, TextBox, Button, and
CheckBox controls that serve similar purposes to their Windows Forms counterparts. It also
has
Grid, Expander, Ellipse, Rectangle, and DocumentViewer controls that don’t have
Windows Forms counterparts.
In this lesson, you learn a little bit about WPF. You learn some of its advantages and
disadvantages. You also build some simple WPF programs to get a firsthand glimpse of
some of the differences between WPF and Windows Forms.
Note that although there’s room in this book to give you an idea about some of the things that
WPF can do, WPF is much too big a topic to cover in one or two lessons. For more detailed
information, see a book about WPF such as my Wrox book WPF Programmer’s Reference
(Wiley, 2010).
In addition to Visual Studio, Expression Blend is another tool you can use
to build WPF applications. It includes some tools that Visual Studio lacks,
such as the ability to record property animations. For more information, see
www.microsoft.com/expression.
40
596906c40.indd 449 4/7/10 12:35:18 PM
450
LESSON 40 Making WPF aPPlications
WEIGHING WPF’S BENEFITS AND WEAKNESSES
Although WPF and Windows Forms controls provide many of the same features (buttons, labels,
textboxes, and so on), they also have many large differences. One of the biggest architectural differ-
ences is in the way they render their content.
Windows Forms controls use Graphics Device Interface (GDI) functions to display their output.
Though these functions are effective, they are also very old. They were first developed when com-
puter hardware was much less powerful than it is today, so they don’t take full advantage of modern
graphics processors.
In contrast, WPF controls use the DirectX Application Programming Interface (API) to render their
content. DirectX is a collection of high-performance multimedia APIs that provide much better access
to graphics hardware than GDI does. That gives WPF controls a lot of benefits practically for free.
For example, DirectX includes a 3D drawing library that makes drawing three-dimensional scenes
in a WPF application a lot easier than it is in a Windows Forms application. DirectX also provides
transformations that can translate, rotate, scale, and skew a drawing. WPF controls inherit that
capability to make it easy to do things like display a button or textbox that is rotated or scaled.
The following list summarizes the biggest benefits WPF gets due to its use of DirectX:
High-performance graphics
— WPF controls take better advantage of graphics hardware
than Windows Forms controls.
Transformations
— You can easily translate, rotate, scale, and skew WPF controls.
Multimedia support
— Multimedia WPF controls such as MediaPlayer make it very easy to
play media such as audio and video.
3D drawing
— 3D drawing support makes it relatively easy to draw three-dimensional scenes.
In addition to these benefits, WPF controls provide some other advantages:
Property animations
— WPF provides classes that let you animate a control’s property as it
changes from one value to another. For example, when the mouse moves over it, a button
could grow to twice its normal size.
Retained-mode graphics
— A Windows Forms application needs to redraw any drawings that
it should display whenever it receives a
Paint event. WPF provides objects that represent
drawing components and they redraw themselves automatically whenever necessary.
More uniform content model
— Many Windows Forms controls can hold only text or an
image. WPF controls can hold just about anything (with some exceptions). For example, a
WPF button can hold a grid that contains images, labels, textboxes, and even video.
Styles
— Styles let you define a package of property values that you can then apply to many
controls, giving them a consistent appearance and allowing you to make changes easily.
Templates
— Templates let you determine what controls make up other controls. For example,
you can make a button use an ellipse instead of a rectangle to draw itself.
596906c40.indd 450 4/7/10 12:35:18 PM
Building WPF Applications
451
Data templates
— Data templates let you bind data to control properties in ways that are not
possible in Windows Forms controls. For example, you can make a listbox display several
pieces of text and a picture for each of the items it contains.
Scalable controls
— A program can scale WPF controls to any degree without distorting them.
For example, you can zoom in on a curve or a string as much as you want and the result will
still appear smooth, not pixelated as it would if you zoomed in on a bitmapped image.
Although WPF has many advantages, it also has some disadvantages, the biggest of which is its com-
plexity. To really get the most out of it, you need to learn about its controls, pens, brushes, styles, tem-
plates, data templates, flow documents, resources, property triggers, event triggers, animations, themes,
printing, data binding, commanding, transformations, page navigation, and many other topics. WPF
has some amazing capabilities but taking advantage of them can be challenging.
The good news is that building simple programs is relatively easy. Most of what you’ve already
learned in this book still applies, and as the following section explains, you can use it fairly easily
to build basic WPF applications.
BUILDING WPF APPLICATIONS
Building a simple WPF application in Visual Studio is a lot like building a Windows Forms application.
To start a new WPF application, open the File menu, expand the New submenu, and select Project.
On the New Project dialog, expand the Visual C# category, open the Windows subcategory, and select
WPF Application. Enter a name for the new project, select a directory to hold it, and click OK.
So far this is almost exactly like building a Windows Forms application. When the new project
appears, however, the main object you see is a
Window not a Form.
Figure 40-1 shows Visual Studio displaying a new project. Much of this should look familiar. The
Toolbox is still on the left, the Solution Explorer is on the upper right, and the Properties window is
on the lower right.
The main editing area displays tabs much as a Windows Forms project does. The tab labeled
MainWindow.xaml.cs is a C# code window much like those that contain event handlers for a
Form.
The designer window shown in Figure 40-1 allows you to edit the WPF controls on the
Window.
You can use the Toolbox to place WPF controls on the
Window much as you place Windows Forms
controls on a
Form. Select a control (or the Window) and then use the Properties window to set the
selected object’s properties.
To make an event handler for a control, select the control in the designer. Then click the Events
button on the Properties window and double-click the event just as you would in a Windows Forms
application. Visual Studio creates an empty event handler in the MainWindow.xaml.cs file and
opens it in the code editor.
The event handlers and other code that sits behind the user interface is called
code-behind.
596906c40.indd 451 4/7/10 12:35:18 PM
452
LESSON 40 Making WPF aPPlications
FIGURE 401
The area below the main designer is a XAML code editor. eXtensible Application Markup Language
(XAML) is a language that defines the user interface for WPF applications. XAML (pronounced
zammel) is a user interface definition language used by WPF to define the controls that make up an
application. As you use the design surface to modify the application, Visual Studio builds a corre-
sponding XAML file. Conversely if you modify the XAML code (and don’t make any mistakes), the
design surface updates to show the changes you made.
You don’t need to understand XAML to build simple interfaces, but it’s helpful when you want to
do something more advanced.
XAML is a form of eXtensible Markup Language (XML), a flexible text-based
language used to hold hierarchical data. You can find a brief overview of XML
at
www.w3schools.com/XML/xml_whatis.asp or en.wikipedia.org/wiki/XML.
I built the program shown in Figure 40-2 by placing several Image controls on the Window and set-
ting a few properties.
FIGURE 402
596906c40.indd 452 4/7/10 12:35:19 PM
Building WPF Applications
453
After adding the controls to the Window, I set the Window’s Title property to “Critters.” I then set
the properties for the
Image controls shown in Table 40-1.
TABLE 401
PROPERTY VALUE
Name
A name, such as butterflyImage
Image
The picture the control should display
Width
100
Height
100
Stretch
Uniform
Notice that these are not the same properties that you would set for a Windows Forms application.
In Windows Forms you would probably use
PictureBox controls, and set their Image, ScaleMode,
and
Size properties.
When you are editing a WPF application, the Properties window handles a
control’s name specially. Instead of treating
Name as just another property, the
window displays the name above the other properties and the Properties and
Events buttons. It’s not obvious when you look at the Properties window but if
you click the control’s name, you can change it.
At the top of the Properties window in Figure 40-1, you can see the control’s
type Grid and just to the right the faint text <no name>. In this case, that means
the control doesn’t have any name.
After creating the basic interface, I added a MouseDown event handler to each of the Images. The
following code shows the code-behind for the frog image. This looks more or less like a normal
C# event handler.
private void frogImage_MouseDown(object sender, MouseButtonEventArgs e)
{
MessageBox.Show(“Frog”);
}
The following code shows the XAML code that Visual Studio produced to define the user interface.
I didn’t type this; Visual Studio built it to represent the controls that I placed on the Window. The
definitions for the
Image controls are all very similar so only the first is shown here.
<Window x:Class=”Critters.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”Critters” Height=”164” Width=”569”>
596906c40.indd 453 4/7/10 12:35:19 PM
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.