第 55 页

improvements have been made in this editor since Visual Studio

2008, making writing XAML directly very quick and easy.

One neat feature with the XAML editor is the ability to easily

navigate to an event handler once it has been assigned to a control.

Simply right-click the event handler assignment in XAML and select

the Navigate to Event Handler item from the popup menu, as shown

in Figure 18-6.

fiGure 18-5

fiGure 18-6

362 .

chaPter 18 WindoWS preSenTATion FoundATion (WpF)

working with the wPf designer

Although it is important to familiarize yourself with writing XAML in the XAML editor, VS2010

also has a very good designer for WPF, comparable to the Windows Forms designer, and in some

respects even better. This section takes a look at some of the features of the WPF designer.

Figure 18-7 shows some of the snap lines,

guides, and glyphs that are added when you

select, move, and resize a control.

Note the glyph that appears on the left of

the window toward its bottom-left corner

fiGure 18-7

in the first image in Figure 18-7. Clicking

it allows you to easily switch between the window having a fixed width/height, and having it

automatically size to fit its contents. When you click the glyph, the glyph will change (indicating

what sizing mode it is in), and the SizeToContent property on the window is set accordingly.

Clicking the glyph again changes the window back to having a fixed width/height. This option

appears only on the root node.

If you are wondering why the size of the window doesn’t change in the designer

when you click the glyph for it to size to content, the Height and Width

properties of the window are replaced with “designer” height/width properties

that retain these values for use by the WPF designer so that the SizeToContent

property doesn’t interfere while designing the form. These properties are then

switched back to the standard Height and Width properties if you return to

fixed-size mode.

The second image in Figure 18-7 demonstrates the snap lines that appear when you move a control

around the form (or resize it). These snap lines are similar to those in the Windows Forms designer,

and help you align controls to a standard margin within their container control, or easily align a

control to other controls. Hold down ALT while you move a control if you don’t want these snap

lines to appear and your control to snap to them.

The third image in Figure 18-7 demonstrates the rulers that appear when you are resizing a control.

This feature allows you to easily see the new dimensions of a control as you resize it in order to help

you adjust it to a particular size.

You’ll note that the third image in Figure 18-7 also contains some anchor points (that is, the two

arrows pointing from the left and top of the button to the corresponding edges of its container grid).

These arrows indicate that the button has a margin applied to it, dictating the placement of the

button within its grid cell. Currently these arrows indicate that the button has a top and left margin

applied, effectively “anchoring” its top and left sides to the top and left of the grid containing it.

However, it is easy to swap the top anchor so that the button is anchored by its bottom edge, and

swap the left anchor so that the button is anchored by its right edge instead. Simply click the top

anchor arrow to have the button anchored by its bottom edge, and click the left anchor arrow to

have the button anchored by its right edge. The anchor arrows swap position, and you can simply

The WPf Designer and XaMl editor .

363

click them again to return them back to their original anchor points. You can also anchor both sides

(that is, left/right or top/bottom) of a control such that it stretches as the grid cell it is hosted within

is resized. For example, if the left side of the textbox is anchored to the grid cell you can also anchor

its right side by clicking the small circle to the right of the textbox. To remove the anchor from just

one side, click the anchor arrow on that side to remove it.

As previously mentioned, the most important control for laying out your form is the Grid control.

Take a look at the some of the special support that the WPF designer has for working with this

control. By default your MainWindow.xaml

file was created with a single grid element without any

rows or columns defined. Before you commence adding elements you might want to define some rows

and columns, which can be used to control the layout of the controls within the form. To do this, start

by selecting the grid by clicking in the blank area in the middle of the window, selecting the relevant

node from the Document Outline tool window, or placing the cursor within the corresponding grid

element in the XAML file itself (when in split view).

When the grid element is selected, a border appears

around the top and left edges of the grid, highlighting

both the actual area occupied by the grid and the relative

sizing of each of the rows and columns, as shown in

Figure 18-8. This figure currently shows a grid with two

rows and two columns.

You can add additional rows or columns by simply

clicking at a location within the border. Once added, the

row or column markers can be selected and dragged to get the correct sizing. You will notice when

you are initially placing the markers that there is no information about the size of the new row/column

displayed, which is unfortunate; however, these will appear once the marker has been created.

fiGure 18-8

When you move the cursor over the size display for a row

or column, three options appear across the top of the

grid, as shown in Figure 18-9.

These options allow you to easily specify that the size

of the row/column should be fixed (#), a weighted

proportion (*), or determined by its contents (Auto).

fiGure 18-9

Weighted proportion is a similar concept to specifying a percentage of the space

available (compared to other columns). After fixed and auto-sized columns/rows

have been allocated space, columns/rows with weighted proportions will divide

up the remaining available space. This division will be equal, unless you prefix

the asterisk with a numeric multiplier. For example, say you have a grid with a

width of 1000 (pixels) and two columns. If both have * as their specified width,

they each will have a width of 500 pixels. However, if one has a width of *, and

the other has a width of 3* then the 1000 pixels will divided into 250 pixel

“chunks,” with one chunk allocated to the first column (thus having a width of

250 pixels), and three chunks will be allocated to the second column (thus having

a width of 750 pixels).

364 . chaPter 18 WindoWS preSenTATion FoundATion (WpF)

To delete a row or column, click the row or column and drag it outside of the grid area. It will be

removed and the controls in the surrounding cells will be updated accordingly.

When you create a control by dragging and dropping it on a grid cell, remember

to “ dock ” it to the left and top edges of the grid cell (by dragging it until it snaps

into that position). Otherwise a margin will be defi ned on the control to position

it within the grid cell, which is probably not the behavior you will want.

the Properties tool window

When you ’ ve placed a control on your form you don ’ t have to

return to the XAML editor to set its property values and assign

event handlers. Like Windows Forms, WPF has a Properties

window, although you will note that there are quite a few

differences in WPF ’ s implementation as shown in Figure 18 - 10.

The Properties window has had a huge makeover in terms of

functionality from Visual Studio 2008. The Visual Studio 2008

version was very limited in its capabilities, requiring developers to

modify the XAML directly in many cases. However, it has been

vastly improved in Visual Studio 2010, reducing the need for this.

The Properties tool window for Windows Forms development

allows you to select a control to set the properties for via a drop -

down control selector above the properties/events list. However,

you will note that this drop - down is missing in WPF ’ s Properties window. Instead you must select

the control on the designer, via the Document Outline tool window, or by placing the cursor within

the defi nition of a control in XAML view. A thumbnail preview of the selected control (and any

controls it contains) will be displayed in the top left - hand corner of the window, and the qualifi ed

type of the control will be displayed next to it.

fiGure 18 - 10

The Properties window can be used while working in both the XAML editor and

the designer. However, if you want to use it from the XAML editor the designer

must have been loaded (you may need to switch to designer view and back if you

have opened the fi le straight into the XAML editor), and if you have invalid

XAML you may fi nd you will need to fi x the errors fi rst.

The Name property for the control is not within the property list, but has a dedicated textbox above

the property list. Note that if the control doesn ’ t already have a name it will assign the value to

its Name property (rather than x:Name ). However, if the x:Name attribute is defi ned on the control

element and you update its name from the Properties window it will continue to use and update

that attribute.

The WPf Designer and XaMl editor .

365

Controls can have many properties or events, and navigating

through the properties/events lists in Windows Forms to find

the one you are after can be a chore. To make finding a specific

property easier for developers the WPF Properties window has a

search function that dynamically filters the properties list based on

what you type into the textbox. Your search string doesn’t need to

be the start of the property/event name, but retains the property/

event in the list if any part of its name contains the search string.

Unfortunately this search function doesn’t support camel case

searching.

The property list in the WPF designer (like for Windows Forms)

can be displayed in either a Categorized or Alphabetical order.

You’ll note that none of the properties that are objects (such as

Margin) can be expanded to show/edit their properties (which

they do for Windows Forms). However, if the list is displayed in

the Categorized order you will observe a new and unique feature

of WPF’s property window: category editors. For example, if you

select a Button control and browse down to the Text category you

will find that it has a special editor for the properties in the Text

category to make setting these values a better experience, as shown

in Figure 18-11.

Various attached properties available to a control also appear in

the property list, as shown in Figure 18-12.

You may have noticed that each property name has a small

icon to its right. This is a new feature in Visual Studio 2010

called property markers, which indicate what the source for that

property’s value is. Placing your mouse cursor over an icon will

show a tooltip describing what it means. The icon will change

based on where the value is to be sourced from. Figure 18-13

fiGure 18-11

fiGure 18-12

fiGure 18-13

demonstrates these various icons, which are described below:

.

A light gray icon indicates that the property has no value assigned to it and will use its

default value.

.

A black diamond icon indicates that the property has a local value assigned to it (that is, has

been given a specific value).

.

A yellow cylinder icon indicates that the property has a data binding expression assigned

to it (discussed later in this chapter).

.

A paintbrush (with green paint) icon indicates that the property has a resource assigned

to it.

.

A purple tree hierarchy icon indicates that the property is inheriting its value from another

control further up the hierarchy.

366 .

chaPter 18 WindoWS preSenTATion FoundATion (WpF)

Clicking a property marker icon displays a popup menu providing some

advanced options for assigning the value of that property, as shown in

Figure 18-14.

The Reset Value option simply returns the value of the property back

to its default value (by deleting the attribute that assigns the value in

the XAML).

fiGure 18-14

The Apply Data Binding option provides a popup editor

to select various binding options to create a data binding

expression for that value. WPF supports numerous binding

options, and these and this window are described further in

the next section.

The Apply Resource option enables you to select a resource

that you’ve created (or is defined by WPF) and assign it as

the value of the selected property. Resources are essentially

reusable objects and values, similar in concept to constants in

code. For example, Figure 18-15 shows the popup window that fiGure 18-15

appears when you select this option.

The resources are all the resources available to this property (that is, within scope and of the same

type), grouped by their resource dictionary. Note the icon in the top right-hand corner of the popup

window. Clicking this icon also groups the resources by which XAML file they originate from. This

option can be toggled on and off.

Figure 18-15 shows a resource of the same type as this property (BlueVioletBrushKey) that is

defined within the current XAML file (under the Local grouping). Because this is a property of type

SolidColorBrush, the window is displaying all the color brush resources predefined in WPF that you

could also choose from.

Returning to the other options in the menu shown in Figure 18-14, the Extract Value to

Resource option takes the value of that property and turns it into a resource. The resource is

created as a resource of the root node in the XAML file such that it can be reused throughout

the file by the unique key you give it. The value of the property is automatically updated to

use this resource. For example, using this option on the Background property of a control that