第 52 页

you may inadvertently move a control from its desired position, particularly if you’re not

using either of the snap layout methods or if you have many controls that are being aligned with

each other.

fiGure 17-10

adding and Positioning Controls .

345

Fortunately, Visual Studio 2010 provides a solution in

the form of the Lock Controls command, available

in the Format menu. When controls are locked, you can

select them to change their properties, but you cannot

use the mouse to move or resize them, or the form itself.

The location of the controls can still be changed via the

Properties grid.

Figure 17-11 shows how small padlock icons are displayed

on controls that are selected while the Lock Controls feature

is active.

fiGure 17-11

You can also lock controls on an individual basis by setting the Locked property

of the control to True in the Properties window.

setting control Properties

You set the properties on controls using the Properties window, just as you would for a form’s

settings. In addition to simple text value properties, Visual Studio 2010 has a number of property

editor types, which aid you in setting the values efficiently by restricting them to a particular subset

appropriate to the type of property.

Many advanced properties have a set of subordinate properties that can be individually accessed by

expanding the entry in the Properties window. Figure 17-12 (left) displays the Properties window for

a Label, with the Font property expanded to show the individual properties available.

fiGure 17-12

Many properties also provide extended editors, as is the case for Font properties. In Figure 17-12

(right), the extended editor button in the Font property has been selected, causing the Font dialog

to appear.

346 .

chaPter 17 WindoWS FormS ApplicATionS

Some of these extended editors invoke full-blown wizards, such as the Data Connection property

on some data-bound components, whereas others have custom-built inline property editors. An

example of this is the Dock property, for which you can choose a visual representation of how you

want the property docked to the containing component or form.

service-based components

As mentioned earlier in this chapter, two

kinds of components can be added to a Windows

Form — those with visual aspects to them and those

without. Service-based components such as timers and

dialogs, or extender controls such as tooltip and error

provider components, can all be used to enhance your

application.

Rather than place these components on the form,

when you double-click one in the Toolbox, or drag

and drop it onto the design surface, Visual Studio

2010 creates a tray area below the Design view of the

form and puts the new instance of the component type

there, as shown in Figure 17-13.

To edit the properties of one of these controls, locate its entry in the tray area and open the

Properties window.

fiGure 17-13

In the same way that you can create your own custom visual controls by

inheriting from System.Windows.Forms.Control, you can create non-visual

service components by inheriting from System.ComponentModel.Component. In

fact System.ComponentModel.Component is the base class for System.Windows.

Forms.Control.

smart tag tasks

Smart tag technology was introduced in Microsoft Office. It provides inline shortcuts to

a small selection of actions you can perform on a particular element. In Microsoft Word, this

might be a word or phrase, and in Microsoft Excel it could be a spreadsheet cell. Visual Studio

2010 supports the concept of design-time smart tags for a number of the controls available to you as

a developer.

Whenever a selected control has a smart tag available, a small right-pointing arrow is displayed on

the top-right corner of the control itself. Clicking this smart tag indicator opens up a Tasks menu

associated with that particular control.

Figure 17-14 shows the tasks for a newly added DataGridView control. The various actions that

can be taken usually mirror properties available to you in the Properties window (such as the

Container Controls .

347

Multiline option for a TextBox control),

but sometimes they provide quick access

to more advanced settings for

the component.

The Edit Columns and Add

Column commands shown in Figure 17-14

are not listed in the DataGridView’s

Properties list, and the Data Source and

Enable settings directly correlate to individual

properties (for example, Enable Adding

is equivalent to the AllowUserToAddRows

property).

container controls

Several controls, known as container controls, are designed specifically to help you with

your form’s layout and appearance. Rather than have their own appearance, they hold other

controls within their bounds. Once a container houses a set of controls, you no longer need to

move the child controls individually, but instead just move the container. Using a combination

of Dock and Anchor values, you can have whole sections of your form’s layout automatically

redesign themselves at run time in response to the resizing of the form and the container controls

that hold them.

Panel and splitcontainer

The Panel control is used to group components that are associated with each other. When placed

on a form, it can be sized and positioned anywhere within the form’s design surface. Because it’s

a container control, clicking within its boundaries selects anything inside it. In order to move it,

Visual Studio 2010 places a move icon at the top-left corner of the control. Clicking and dragging

this icon enables you to reposition the Panel.

The SplitContainer control (shown in Figure 17-15)

automatically creates two Panel controls when added to a

form (or another container control). It divides the space into

two sections, each of which you can control individually.

At run time, users can resize the two spaces by dragging the

splitter bar that divides them. SplitContainers can be either

vertical (as in Figure 17-15) or horizontal, and they can be

contained with other SplitContainer controls to form

a complex layout that can then be easily customized by the

end user without your needing to write any code.

fiGure 17-14

fiGure 17-15

348 . chaPter 17 WindoWS FormS ApplicATionS

Sometimes it ’ s hard to select the actual container control when it contains other

components, such as in the case of the SplitContainer housing the two Panel

controls. To gain direct access to the SplitContainer control itself, you can either

locate it in the drop - down list in the Properties window, or right - click one of the

Panel controls and choose the Select command that corresponds to the

SplitContainer. This context menu contains a Select command for every

container control in the hierarchy of containers, right up to the form itself.

flowlayoutPanel

The FlowLayoutPanel control enables you to create form designs with a behavior similar to web

browsers. Rather than explicitly position each control within this particular container control,

Visual Studio simply sets each component you add to the next available space. By default, the

controls will fl ow left to right, and then top to bottom, but you can use the FlowDirection property

to reverse this order in any confi guration depending on the requirements of your application.

Figure 17 - 16 displays the same form with six button controls housed within a FlowLayoutPanel

container. The FlowLayoutPanel ’ s Dock property was set to fi ll the entire form ’ s design surface,

so as the form is resized, the container is also automatically sized. As the form gets wider and there

is available space, the controls begin to be realigned to fl ow left to right before descending down

the form.

fiGure 17-16

tablelayoutPanel

An alternative to the previously discussed container controls is the TableLayoutPanel container.

This control works much like a table in Microsoft Word or in a typical web browser, with each cell

acting as an individual container for a single control.

You cannot add multiple controls within a single cell directly. You can, however,

place another container control, such as a Panel, within the cell, and then place

the required components within that child container.

Docking and anchoring Controls .

349

Placing a control directly into a cell automatically positions the control to the top-left corner of the

table cell. You can use the Dock property to override this behavior and position it as required. This

property is discussed further later in this chapter.

The TableLayoutPanel container enables you to easily create a structured, formal layout in your

form with advanced features, such as the capability to automatically grow by adding more rows as

additional child controls are added.

Figure 17-17 shows a form with a TableLayoutPanel added to the design surface. The smart

tag tasks were then opened and the Edit Rows and Columns command executed. As a result,

the Column and Row Styles dialog is displayed so you can adjust the individual formatting

options for each column and row. The dialog displays several tips for designing table layouts in

your forms, including spanning multiple rows and columns and how to align controls within a

cell. You can change the way the cells are sized here as well as add or remove additional columns

and rows.

fiGure 17-17

dockinG and anchorinG controls

It’s not enough to design layouts that are nicely aligned according to the design-time dimensions.

At run time, a user will likely resize the form, and ideally the controls on your form will resize

automatically to fill the modified space. The control properties that have the most impact on this

are Dock and Anchor. Figure 17-18 shows how the controls on a Windows Form will properly resize

once you have set the correct Dock and Anchor property values.

350 .

chaPter 17 WindoWS FormS ApplicATionS

fiGure 17-18

The Dock property controls which borders of the control are bound to the container. For example,

in Figure 17-18 (left), the TreeView control Dock property has been set to Fill to fill the left panel

of a SplitContainer, effectively docking it to all four borders. Therefore, no matter how large or

small the left-hand side of the SplitContainer is made, the TreeView control will always resize itself

to fill the available space.

The Anchor property defines the edges of the container to which the control is bound. In Figure

17-18 (left), the two button controls have been anchored to the bottom-right of the form. When the

form is resized, as shown in 17-18 (right), the button controls maintain the same distance between

to the bottom-right of the form. Similarly, the TextBox control has been anchored to the left and

right, which means that it will auto-grow or auto-shrink as the form is resized.

suMMary

In this chapter you received a good understanding of how Visual Studio can help you to quickly

design the layout of Windows Forms applications. The various controls and their properties enable

you to quickly and easily create complex layouts that can respond to user interaction in a large

variety of ways. In later chapters you learn about the specifics of designing the user interfaces for

other application platforms, including Office Add-Ins, WPF, Web, and Silverlight applications.

18 18

Windows Presentation

foundation (WPf)

what’s in this chaPter?

.

Learning the basics of XAML

.

Creating a WPF application

.

Styling your WPF application

.

Hosting WPF content in a Windows Forms project

.

Hosting Windows Forms Content in a WPF project

.

Using the WPF Visualizer

When starting a new Windows client application in Visual Studio you have two major

technologies to choose from — a standard Windows Forms–based application, or a Windows

Presentation Foundation (WPF)–based application. Both are essentially a different API for

managing the presentation layer for your application. WPF is extremely powerful and flexible,

and was designed to overcome many of the shortcomings and limitations of Windows Forms.

In many ways you could consider WPF a successor to Windows Forms. However, WPF’s

power and flexibility comes with a price in the form of a rather steep learning curve because it

does things quite differently than Windows Forms.

This chapter guides you through the process of creating a basic WPF application in Visual

Studio 2010. It’s beyond the scope of this book to cover the WPF framework in any great

detail — it would take an entire book on its own to do so. Instead, what you will see is

an overview of Visual Studio 2010’s capabilities to help you rapidly build user interfaces

using XAML.

352 .

chaPter 18 WindoWS preSenTATion FoundATion (WpF)

what is wPf?

Windows Presentation Foundation is a presentation framework for Windows. But what makes

WPF unique, and why should you consider using it over Windows Forms? Whereas Windows

Forms uses the raster-based GDI/GDI+ as its rendering engine, WPF instead contains its own

vector-based rendering engine, so it essentially isn’t creating windows and controls in the standard

Windows manner and look. WPF has taken a radical departure from the way things are done

in Windows Forms. In Windows Forms you generally define the user interface using the visual

designer, and in doing so it automatically creates the code (in the language your project is targeting)

in a .designer file to define that user interface — so essentially your user interface is defined and

driven in C# or VB code. However, user interfaces in WPF are actually defined in an XML-based

markup language called Extensible Application Markup Language (generally referred to as XAML,

pronounced “zammel”) specifically designed for this purpose by Microsoft. XAML is the underlying

technology to WPF that gives it its power and flexibility, enabling the design of much richer user

experiences and more unique user interfaces than was possible in Windows Forms. Regardless