Image that is grayed when disabled, for use in buttons, etc.

Download GrayImage.zip - 61.83 KB

Introduction

A well known WPF misfeature is that images of disabled (toolbar or other) buttons, or menuitems, are not displayed in grayscale. There are three well known ways around:

• Set the image's Opacity with a trigger.
• Set the image's Effect.
• Use a custom image class.

All three approaches have been used before. Here I give an implementation of the third way.

Using the code

<Button>
  <my:AutoGrayImage Source2="/GrayImage;component/Images/Tulips.png" />
</Button>  

In the XAML, just replace your Image with AutoGrayImage, and set Source2 instead of the Source property. Here is how the result looks:

The Code

You should also add the following class to your project:

public class AutoGrayImage : Image
{
    public AutoGrayImage()
    {
        IsEnabledChanged += new
      DependencyPropertyChangedEventHandler(AutoGrayImage_IsEnabledChanged);
    }

    void AutoGrayImage_IsEnabledChanged(object sender,
                            DependencyPropertyChangedEventArgs e)
    {
        Source = IsEnabled?Source2:GrayedImage;
    }
    FormatConvertedBitmap GrayedImage = null;

    public static readonly DependencyProperty Source2Property =
                 DependencyProperty.Register("Source2", typeof(BitmapSource),
                        typeof(AutoGrayImage), new PropertyMetadata(null,
                        OnSource2Changed));
    /// <summary>
    /// Sets the image to be grayed, or not.
    /// </summary>
    public BitmapSource Source2
    {
        get { return (BitmapSource)GetValue(Source2Property); }
        set { SetValue(Source2Property, value); }
    }
    static void OnSource2Changed(DependencyObject sender,
                                  DependencyPropertyChangedEventArgs e)
    {
        AutoGrayImage s = sender as AutoGrayImage;
        if (s.Source2 == null)
        {
            s.GrayedImage = null;
        }
        else
        {
            s.GrayedImage = new FormatConvertedBitmap(s.Source2,
                                PixelFormats.Gray8, null, 0);
            s.OpacityMask = new ImageBrush(s.Source2);
        }
        s.AutoGrayImage_IsEnabledChanged(s, new
                             DependencyPropertyChangedEventArgs());
    }
}

I admit that introducing another Source property, i.e., Source2, is not entirely clean. However, it seemed to be the option with the best (cleanliness / lines of code written) ratio.