Understanding WPF Commands

Lately Microsoft have been using some of the well known design patterns to ease and furnish work of a programmer who choose to bang keyboards using .NET.

One good example is WPF commands.

Microsoft at MSDN on Commanding:

Commanding is an input mechanism in Windows Presentation Foundation (WPF) which provides input handling at a more semantic level than device input.

It resembles and is inspired by the famous Command Design Pattern with Microsoft flavors added to it. This Routed command system as named by Microsoft is a modified version of the original command design pattern with routing capabilities. It is used to send command and / or behavioral notifications from UI controls. They are analogous to the Routed event system in WPF.

The routed command system in WPF has two types of commands:

• Routed Commands
• Routed UI Commands

It becomes clear from the name itself that the first is used to send and trigger normal command but the later is more related and associated with the user interface. One basic thing that is common to both is that they interface from ICommand which defines contracts for a command.

It has two methods CanExecute, Execute and an event handler CanExecuteChanged. CanExecute defines if the command can be executed or not and Execute defines the action for command behavior.

WPF provides some built in set of common Routed UI Commands out of the box which can be used:

• ApplicationCommands
• MediaCommands
• ComponentCommands
• NavigationCommands
• EditingCommands

These commands can be executed by any UI control that inherits from ICommandSource interface which attaches the capabilities on how to invoke a command to that UI element object.

Custom implementation can be done using CommandBinding class on custom UI controls. As soon as the command is triggered, it tries to find CommandTarget and bubbles up the visual tree to find the control that have command binding for that command and execute the same if CanExecute is true.

Here we demonstrate a simple example of ApplicationCommands - Cut, Copy and Paste commands using Menu control and two text box.

In this example when we type something in the text box one, cut and copy menu items gets enabled. You can either cut or copy text using those menu options and click on text two text box and click paste menu item.

Code for above sample:

<Window x:Class="WPFExamples.CommandGlance"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CommandGlance" Height="165" Width="265">
    <Grid>
        <Menu Margin="0,0,0,101">
            <MenuItem Header="Cut" Command="Cut"></MenuItem>
            <MenuItem Header="Copy" Command="Copy"></MenuItem>
            <MenuItem Header="Paste" Command="Paste"></MenuItem>
        </Menu>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="111,62,0,0" Name="txtBoxOne" VerticalAlignment="Top" Width="120" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="111,91,0,0" Name="txtBoxTwo" VerticalAlignment="Top" Width="120" />
        <Label Content="Demo Text One" Height="28" HorizontalAlignment="Left" Margin="12,60,0,0" Name="lblTextBoxOne" VerticalAlignment="Top" />
        <Label Content="Demo Text Two" Height="28" HorizontalAlignment="Left" Margin="12,89,0,0" Name="lblTextBoxTwo" VerticalAlignment="Top" />
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="12,31,0,0" Name="textBlockTitle" Text="WPF Command Example" VerticalAlignment="Top" />
    </Grid>
</Window>

This shows how easily WPF built-in commands can be used with out any efforts right in the XAML and no C# code. Here CanExecute returns true when text is highlighted and Execute will cut / copy the selected text to your clipboard.

Happy coding !!