WPF Commanding

WPF Commanding: The Basics

Commanding in WPF is unlike your traditional events in Winforms. Commands were primarily designed to be used at the application level, but they have become one of the most popular features among developers when it comes to UI programming (we tend to use them more than they should be). Commands enable the developer to define a task once and “attach” it multiple times without having to go through the traditional means which would require duplicating the code or even calling it in more than one place (This is the magic). WPF intrinsically provides 5 commands that you can use out of the box.

  1. ApplicationCommands
  2. ComponentCommands
  3. EditingCommands
  4. MediaCommands
  5. NavigationCommands

I have explored them and have taken a liking to ApplicationCommands (In fact this is the one that most developers will use).

To use command do the following:

  1. Link  your custom/predefined  command to a control that you want to respond to the command and add a input gesture to the command
  2. Create a handler for the command and use the CommandBindings class to bind the handler to the control
  3. Add the binding to the control’s Commands collection

So let’s delve into some code to demonstrate WPF commanding.

Lets first look at the XAML:


<Window x:Class="Commanding.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="340" Width="509"

    xmlns:MyCommands="clr-namespace:Commanding">

    <Grid>

        <Border Padding="5" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Margin="10">

            <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top" Height="64">

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">

                    <Label>Type Your Name :</Label>

                    <TextBox Name="txtName" Width="200"></TextBox>

                    <Button Command="MyCommands:Commands.HelloCommand" Content="Say Hello" Padding="3"></Button>

                </StackPanel>

                <CheckBox Name="chkCanExecute" Content="Uncheck to suppress command execution" IsChecked="True"/>

            </StackPanel>

        </Border>

    </Grid>

</Window>

 

The key section in the xaml code is the name space called MyCommands and the Button Element. The namespace

xmlns:MyCommands=”clr-namespace:Commanding

 references the namespace in which the custom command is defined.

The Button Element’s Command property is associated with the custom command:

<Button Command=”MyCommands: CustomCommand.HelloCommand” Content=”Say Hello” Padding=”3″></Button>

Below you will see the HellowCommand Property from the CustomCommand class.


namespace Commanding
{

    public class CustomCommand

    {

        private static System.Windows.Input.RoutedUICommand helloCommand;

        static CustomCommand ()

        {

            // First: I created a gesture collections

            System.Windows.Input.InputGestureCollection gestureCollection

                = new System.Windows.Input.InputGestureCollection();

            //Second: I add the input (Key gesture) that I want to trigger this command)

            gestureCollection.Add(new System.Windows.Input.KeyGesture(System.Windows.Input.Key.H, System.Windows.Input.ModifierKeys.Control));

            //Third: Initialize my command

            helloCommand = new System.Windows.Input.RoutedUICommand("HelloCommand", "HelloCommand", typeof(Commands), gestureCollection);

        }

        public static System.Windows.Input.RoutedUICommand HelloCommand

        {

            get { return helloCommand; }

        }

    }

}

Below I Bind the property from the custom command, then assign a handler and add it to the Window’s CommandBindings. Notice that I didn’t bind it to the button control directly.

namespace Commanding

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : Window

    {

        public Window1()

        {

            InitializeComponent();

            CommandBinding binding = new CommandBinding();

            binding.Command = Commanding.Commands.HelloCommand;

            binding.Executed += new ExecutedRoutedEventHandler(binding_Executed);

            binding.CanExecute += new CanExecuteRoutedEventHandler(binding_CanExecute);

            this.CommandBindings.Add(binding);//Commenting out this line disables the button

        }

        void binding_CanExecute(object sender, CanExecuteRoutedEventArgs e)

        {

            e.CanExecute = (bool)chkCanExecute.IsChecked;

        }

        void binding_Executed(object sender, ExecutedRoutedEventArgs e)

        {

            MessageBox.Show(string.Format("Hello {0}, you have mastered commanding", txtName.Text));

        }

    }

}

Notice the binding_CanExecute method. This give you conditional execution. When you subscribe to this event, this method is called first to see if it ok to call your command. We use a check box to turn this on and off.

Next post we will look at Commanding and MVVM (Model View ViewModel). Here, you will see the power of Commanding. The code that is in the Window1 class violates a lot of GUI principles. With MVVM you will have a centralize place to (the ViewModel) where you can have reusable commands.

Advertisements

2 thoughts on “WPF Commanding

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