452 Part IV Working with Windows Applications

The order in which these commands appear tends to be the same across applications; for example, the Exit command is invariably the last command on the File menu. There might be other application-specific commands on the File menu as well.

An application often has an Edit menu containing commands such as Cut, Paste, Clear, and Find. There are usually some additional application-specific menus on the menu bar, but again, convention dictates that the final menu is the Help menu, which contains access to Help as well as “about” information, which contains copyright and licensing details for the application. In a well-designed application, most menus are predictable and help ensure that the application is easy to learn and use.

Tip Microsoft publishes a full set of guidelines for building intuitive user interfaces, including menu design, on the Microsoft Web site at http://msdn2.microsoft.com/en-us/library /Aa286531.aspx.

Menus and Menu Events

WPF provides the Menu control as a container for menu items. The Menu control provides a basic shell for defining a menu. Like most aspects of WPF, the Menu control is very flexible so that you can define a menu structure consisting of almost any type of WPF control. You are probably familiar with menus that contain text items that you can click to perform

a command. WPF menus can also contain buttons, text boxes, combo boxes, and so on. You can define menus by using the XAML pane in the Design View window, and you can also con-

struct menus at run time by using Microsoft Visual C# code. Laying out a menu is only half of the story. When a user clicks a command on a menu, the user expects something to happen! Your application acts on the commands by trapping menu events and executing code in much the same way as handling control events.

Creating a Menu

In the following exercise, you will use the XAML pane to create menus for the Middleshire Bell Ringers Association application. You will learn how to manipulate and create menus through code later in this chapter.

Create the application menu

1.Start Microsoft Visual Studio 2008 if it is not already running.

2.Open the BellRingers solution located in the \Microsoft Press\Visual CSharp Step by Step\Chapter 23\BellRingers folder in your Documents folder. This is a copy of the application that you built in Chapter 22.

3.Display Window1.xaml in the Design View window. (Double-click Window1.xaml in

Solution Explorer.)

4.From the Toolbox, drag a DockPanel control from the Controls section anywhere onto the form. In the Properties window, set the Width property of the DockControl to Auto, set the HorizontalAlignment property to Stretch, set the VerticalAlignment property to

Top, and set the Margin property to 0.

Note Setting the Margin property to 0 is the same as setting it to 0, 0, 0, 0.

The DockControl control should appear at the top of the form, occupying the full width of the form. (It will cover the First Name, Last Name, Tower, and Captain user interface

elements.)

The DockPanel control is a panel control that you can use for controlling the arrangement of other controls that you place on it, like the Grid and StackPanel controls that

you met in Chapter 22. You can add a menu directly to a form, but it is better practice to place it on a DockPanel because you can then more easily manipulate the menu and

its positioning on the form. For example, if you want to place the menu at the bottom or on one side, you can relocate the entire menu elsewhere on the form simply by moving the panel either at design time or at run time by executing code.

5.From the Toolbox, drag a Menu control from the Controls section onto the DockPanel control. In the Properties window, set the DockPanel.Dock property to Top, set the Width property to Auto, set the HorizontalAlignment property to Stretch, and set the

VerticalAlignment property to Top.

The Menu control appears as a gray bar across the top of the DockPanel. If you examine the code for the DockPanel and Menu controls in the XAML pane, they should look like this:

<DockPanel Height=”100” HorizontalAlignment=”Stretch” Margin=”0” Name=”dockPanel1” VerticalAlignment=”Top” Width=”Auto”>

<Menu Height=”22” Name=”menu1” Width=”Auto” DockPanel.Dock=”Top” VerticalAlignment=”Top”>

</DockPanel>

The HorizontalAlignment property does not appear in the XAML code because the value “Stretch” is the default value for this property.

Note Throughout this chapter, lines from the XAML pane are shown split and indented so that they fit on the printed page.

6.In the XAML pane, modify the definition of the Menu control and add the MenuItem elements as shown in bold type in the following code. Notice that MenuItem elements appear as children of the Menu control, so replace the closing tag delimiter (/>) of the Menu element with a regular tag delimiter (>), and place a separate closing </Menu> element at the end.

<Menu Height=”22” Name=”menu1” Width=”Auto” DockPanel.Dock=”Top” VerticalAlignment=”Top” HorizontalAlignment=”Stretch” >

<MenuItem Header=”_File” /> <MenuItem Header=”_Help” />

</Menu>

The Header attribute of the MenuItem element specifies the text that appears for the menu item. The underscore (_) in front of a letter provides fast access to that menu item when the user presses the Alt key and the letter following the underscore (in this case, Alt+F for File or Alt+H for Help). This is another common convention. At run time, when the user presses the Alt key, the F at the start of File appears underscored. Do not use the same access key more than once on any menu because you will confuse the user (and probably the application).

Note The Properties window for the Menu control displays a property called Items. If you

click this property and then click the ellipsis button that appears in this property, the Collection Editor appears. At the time of writing, the current release of Visual Studio 2008

(Beta 2) allows you to use this window to remove items from a menu, change the order of items on a menu, and set the properties of these items, but it does not allow you to add new items to a menu. Consequently, in this chapter you will use the XAML pane to define the structure of your menus.

7.On the Debug menu, click Start Without Debugging to build and run the application.

When the form appears, you should see the menu at the top of the window underneath the title bar. Press the Alt key; the menu should get the focus, and the “F” in “File” and the “H” in “Help” should both be underscored, like this:

If you click either menu item, nothing currently happens because you have not defined the child menus that each of these items will contain.

8.Close the form and return to Visual Studio 2008.

9.In the XAML pane, modify the definition of the _File menu item, and add the child menu items together with a closing </MenuItem> element as shown here in bold type:

<MenuItem Header=”_File” >

<MenuItem Header=”_New Member” Name=”newMember” /> <MenuItem Header=”_Save Member Details” Name=”saveMember” /> <Separator/>

<MenuItem Header=”E_xit” Name=”exit” /> </MenuItem>

This XAML code adds New Member, Save Member Details, and Exit as commands to the File menu. The <Separator/> element appears as a bar when the menu is displayed and is conventionally used to group related menu items.

10.Modify the definition of the _Help menu item, and add the child menu item as shown in bold type here:

<MenuItem Header=”_Help” >

<MenuItem Header=”_About Middleshire Bell Ringers” Name=”about” /> </MenuItem>

11.On the Debug menu, click Start Without Debugging to build and run the application.

When the form appears, click the File menu. You should see the child menu items, like this:

You can also click the Help menu to display the About Middleshire Bell Ringers child menu item.

12.Close the form, and return to Visual Studio 2008.

As a further touch, you can add icons to menu items. Many applications, including Visual Studio 2008, make use of icons in menus to provide an additional visual cue.

13.In Solution Explorer, right-click the BellRingers project, point to Add, and then click

Existing Item. In the Add Existing Item – BellRingers dialog box, move to the folder

Microsoft Press\Visual CSharp Step By Step\Chapter 23 under your Documents folder, in the File name box type “Ring.bmp” “Face.bmp” “Note.bmp” (including the quotation marks), and then click Add.

This action adds the three image files as resources to your application.