Click here to Skip to main content
13,401,500 members (51,679 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked
Posted 24 Jan 2012

Making WPF Images ICommand Aware

, 24 Jan 2012
Rate this:
Please Sign up or sign in to vote.
Here's a quick post to show how to make images (and any other framework element) react to an ICommand when clicked.

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 =

    new FrameworkPropertyMetadata(OnCommandChanged));

    public static readonly DependencyProperty CommandParameterProperty =

    public static readonly DependencyProperty IsEnabledProperty =

    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)

            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:






    Title="MainWindow" Height="350" Width="525">





            local:ClickCommand.Command="{Binding ImageClickCommand}"/>

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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) NoProblem Software Ltd
United Kingdom United Kingdom
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionLiked it, but... Pin
Calvin1128-Jan-12 14:08
memberCalvin1128-Jan-12 14:08 
AnswerRe: Liked it, but... Pin
SteveAdey7-Feb-12 5:22
memberSteveAdey7-Feb-12 5:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180218.2 | Last Updated 24 Jan 2012
Article Copyright 2012 by SteveAdey
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid