Disabled Images in WPF

Andrew Smith [Infragistics] / Sunday, March 30, 2008

I think most developers and end users have come to expect that when a menu item or button is disabled that the image and text within that item are displayed as grayed out. This provides a visual indication that the item is not available for use. I can understand why the Image element would not do this by default but I was surprised to find that there wasn't even an option to have it do this for you. If you have an Image within a Button or MenuItem and you disable that element, the Image element within will be disabled but the image it renders will appear no differently than when it was enabled. That is why we created the AutoDisabledImage class. This class derives from Image and provides support for automatically1 rendering an image as disabled when the element is disabled. You use this element in the same way you would an Image element - just set the Source property to the image that you want to display. When the element is disabled, it will handle converting the image to a gray scale version.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:igWindows="http://infragistics.com/Windows"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel>
<igWindows:AutoDisabledImage  Source="http://ko.infragistics.com/App_Themes/Default/images/logo.gif"
Stretch="None" />
<igWindows:AutoDisabledImage IsEnabled="false" 
Source="http://ko.infragistics.com/App_Themes/Default/images/logo.gif"
Stretch="None" />
  </StackPanel>
</Page>

Example using the AutoDisabledImage

Notes
1.  The current implementation only works with a BitmapSource derived ImageSource. If you use a DrawingImage, the Image will continue to appear as it did when it was enabled.