wpf - Grey out image on button when element is disabled (simple and beautiful way) -

i want grey out images (on buttons) when buttons disabled. when have text (no images) on button, text greyed out (with images button content not grey out). there simple , beautiful way that?

this xaml file:

<window x:class="wpfapplication2.mainwindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         title="mainwindow" height="350" width="525">     <grid>         <grid.rowdefinitions>                 <rowdefinition height="auto" />                 <rowdefinition height="*"/>         </grid.rowdefinitions>         <toolbartray verticalalignment="top" background="{dynamicresource {x:static systemcolors.controlbrushkey}}" islocked="true" grid.row="0">             <toolbar background="{dynamicresource {x:static systemcolors.controlbrushkey}}" band="1" bandindex="1">                 <button command="{binding button1}" renderoptions.bitmapscalingmode="nearestneighbor">                     <button.content>                         <image source="open.ico"></image>                     </button.content>                 </button>                 <button command="{binding button2}" renderoptions.bitmapscalingmode="nearestneighbor">                     <button.content>                         <image source="open.ico"></image>                     </button.content>                 </button>             </toolbar>         </toolbartray>     </grid> </window> 

and code behind file:

public partial class mainwindow : window {     private relaycommand _button1;     private relaycommand _button2;      public mainwindow()     {         initializecomponent();         datacontext = this;     }      public icommand button1     {                 {             if (_button1 == null)             {                 _button1 = new relaycommand(button1e, button1c);             }             return _button1;         }     }      public icommand button2     {                 {             if (_button2 == null)             {                 _button2 = new relaycommand(button2e, button2c);             }             return _button2;         }     }      public void button1e(object parameter)     {         trace.writeline("button 1");     }      public bool button1c(object parameter)     {         return true;     }      public void button2e(object parameter)     {         trace.writeline("button 2");     }      public bool button2c(object parameter)     {         return false;     } } 

as thomas lebrun says in post how gray icon of menuitem ? best way @ moment create little class, autogreyableimage, allow have image turn in gray automatically when control deactivated.

here how can use it:

<menuitem header="edit">     <menuitem x:name="mipaste"               header="paste">         <menuitem.icon>             <local:autogreyableimage source="pack://application:,,,/images/paste.png"                                                    />         </menuitem.icon>     </menuitem> </menuitem>   

and here implementation:

/// <summary> /// class used have image able gray when control not enabled. /// author: thomas lebrun (http://blogs.developpeur.org/tom) /// </summary> public class autogreyableimage : image {     /// <summary>     /// initializes new instance of <see cref="autogreyableimage"/> class.     /// </summary>     static autogreyableimage()     {         // override metadata of isenabled property.         isenabledproperty.overridemetadata(typeof(autogreyableimage), new frameworkpropertymetadata(true, new propertychangedcallback(onautogreyscaleimageisenabledpropertychanged)));     }     /// <summary>     /// called when [auto grey scale image enabled property changed].     /// </summary>     /// <param name="source">the source.</param>     /// <param name="args">the <see cref="system.windows.dependencypropertychangedeventargs"/> instance containing event data.</param>     private static void onautogreyscaleimageisenabledpropertychanged(dependencyobject source, dependencypropertychangedeventargs args)     {         var autogreyscaleimg = source autogreyableimage;         var isenable = convert.toboolean(args.newvalue);         if (autogreyscaleimg != null)         {             if (!isenable)             {                 // source bitmap                 var bitmapimage = new bitmapimage(new uri(autogreyscaleimg.source.tostring()));                 // convert gray                 autogreyscaleimg.source = new formatconvertedbitmap(bitmapimage, pixelformats.gray32float, null, 0);                 // create opacity mask greyscale image formatconvertedbitmap not keep transparency info                 autogreyscaleimg.opacitymask = new imagebrush(bitmapimage);             }             else             {                 // set source property original value.                 autogreyscaleimg.source = ((formatconvertedbitmap) autogreyscaleimg.source).source;                 // reset opcity mask                 autogreyscaleimg.opacitymask = null;             }         }     } }   

here result:

sources