Commands in WPF

In addition to standard event handling, WPF offers a specialized type of handler called a Command. There’s some debate about how useful the Command is, compared to the ordinary event handler, but they do offer some nice features so they are worth a mention.

There are a number of commands that appear in many applications, and WPF’s Command classes provide ready-made versions of a number (144 to be exact) of them. Some of the most common Commands are those associated with text editing, such as copy, cut and paste. We’ll begin with a little application that illustrates how these actions can be handled using Commands.

Create a new project in Expression Blend or Visual Studio, and create a layout similar to that shown:

This layout is built on a DockPanel, with a Menu and its associated MenuItems docked to the top, a ToolbarTray and its Buttons docked to the left, and two TextBoxes docked to the bottom. The ugly gap between the two Textboxes is there for a reason, as we’ll see shortly.

The Edit menu contains the 3 edit commands: cut, copy and paste. Obviously we’d like each of these menu items to do the same thing as the corresponding button in the toolbar. We could just create an event handler for, say, the Copy button and then point the menu item at the same handler. However, WPF’s ApplicationCommands class contains these 3 (and quite a few other) commands ready-made. We’ll have a look at how you can use these commands out of the box first, before looking in a bit more depth at how they work, and how you can create your own command.

You can attach a Command to a UI object either by editing the XAML or the C# code. In XAML, you can edit the Button entries to look like this:

				<Button x:Name="cutButton" Content="Cut" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="75" Command="ApplicationCommands.Cut"/>
				<Button x:Name="copyButton" Content="Copy" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="75" Command="ApplicationCommands.Copy"/>
				<Button x:Name="pasteButton" Content="Paste" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="75" Command="ApplicationCommands.Paste"/>

You can add similar Command labels to the corresponding MenuItems in XAML as well.

In C#, you can insert a line such as this for cutButton:

cutButton.Command = ApplicationCommands.Cut;

If you run the program at this point (you should download and run the program if you aren’t building it yourself), you’ll discover that you can select text in either textbox and use either the toolbar buttons or the MenuItems to cut, copy and paste the text. You should also notice that if no text is selected in either textbox, the Cut and Copy Buttons and MenuItems are disabled. The Buttons and MenuItems are also able to tell which textbox to apply their operations to, as it is the textbox that had the keyboard focus before the Button or MenuItem was selected.

This semi-magical behaviour is due to the way a TextBox is designed. In order to understand why things Just Work with the cut, copy and paste buttons, and also how to deal with other Commands and even define your own, we need to delve a bit more deeply into what’s going on underneath. We’ll do that in the next post.

Code available here (ignore everything except the cut, copy and paste buttons and menu items for now).

Advertisements
Post a comment or leave a trackback: Trackback URL.

Trackbacks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: