Making WPF Images ICommand Aware

• Download code

Here’s a quick post to show how to make images (and any other framework element) react to an ICommand when clicked.

I used to get this question quite a lot from developers using WPF for the first time. They’d get the bit about a button being able to run commands when pressed, but when it came to images, etc., they quickly found that there was no support for it. Of course, you could go down the route of replacing the ContentTemplate for a button and achieving the same thing.

But, as you’ll know (or find out), there’s more than one way to skin a cat in WPF. Anyway, I thought I’d share another way and then you can choose to use it or another way, at least you have the options.

I simply created a new WPF application and then added the following classes:

public static class ClickCommand
{
    public static readonly DependencyProperty CommandProperty =

    DependencyProperty.RegisterAttached("Command",
    typeof(ICommand),
    typeof(ClickCommand),
    new FrameworkPropertyMetadata(OnCommandChanged));

    public static readonly DependencyProperty CommandParameterProperty =
    DependencyProperty.RegisterAttached(
    "CommandParameter",
    typeof(object),
    typeof(ClickCommand));

    public static readonly DependencyProperty IsEnabledProperty =
    DependencyProperty.RegisterAttached(
    "IsEnabled",
    typeof(bool),
    typeof(ClickCommand));

    public static void SetCommand(DependencyObject element, ICommand value)
    {
        element.SetValue(CommandProperty, value);
    }

    public static ICommand GetCommand(DependencyObject element)
    {
        return (ICommand)element.GetValue(CommandProperty);
    }

    public static void SetCommandParameter(DependencyObject element, object value)
    {
        element.SetValue(CommandParameterProperty, value);
    }

    public static object GetCommandParameter(DependencyObject element)
    {
        return element.GetValue(CommandParameterProperty);
    }

    public static void SetIsEnabled(DependencyObject element, bool value)
    {
        element.SetValue(IsEnabledProperty, value);
    }

    public static bool GetIsEnabled(DependencyObject element)
    {
        return (bool)element.GetValue(IsEnabledProperty);
    }

    private static void OnCommandChanged
    (DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        var frameworkElement = obj as FrameworkElement;
        frameworkElement.PreviewMouseLeftButtonUp -= PreviewMouseLeftButtonUp;
        frameworkElement.PreviewMouseLeftButtonUp += PreviewMouseLeftButtonUp;

        var command = GetCommand(frameworkElement);

        SetIsEnabled(frameworkElement, command.CanExecute(null));

        command.CanExecuteChanged += (s, e) =>
        {
            SetIsEnabled(frameworkElement, command.CanExecute(null));
        };
    }

    private static void PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        var obj = sender as DependencyObject;

        var command = GetCommand(obj);

        if (command != null)
        {
            command.Execute(GetCommandParameter(obj));

            e.Handled = false;
        }
    }
}

This class effectively defines some dependency properties for the Command, Command Parameter and Is Enabled. When the Command property changes, it attaches to the mouse click events and when triggered, simply executes the command with any CommandParameter that was attached.

The XAML looks like this:

<Window
    x:Class="WpfApplication5.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication5"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Image
            Source="/WpfApplication5;component/the-angry-programmer.png"
            Width="200"
            Height="200"
            Cursor="Hand"
            local:ClickCommand.Command="{Binding ImageClickCommand}"/>
    </Grid>
</Window>

As you can see, the Command dependency property is set to a binding of the DataContext’s ImageClickCommand. This is the command that will be run when the image is clicked on.

For a demonstration of it in action, please download the code from here.