Greyscale Bitmap Effect for WPF

Technorati Tags: WPF,Greyscale,BitmapEffect

[ please see the THIS post about single assembly effects ]

Whilst trawling the MSDN forums looking for a solution to a problem i was having (completely unrelated to bitmap effects – i’m easily distracted 😉 ) i came across many requests for methods of ‘greying’ out or desaturating images etc. There were a few suggestions about converting to a different bitmap format, but that SMELLS and there was a few other things i came across , including an incorrect implementation that grey scaled the image by averaging the 3 pixels.That will give a grey image, (after all , all three components are set to the same value) its not a true grey scale conversion. A real grey scale conversion requires that the conversion factors for each component is weighted according to how we percieve that colour. For example, we perceive many more shades of green than either red or blue, so the green component of an image should make up proportionally more of the final grey scale than the red and blue components.Anyway, after a little digging, I came across an example project in the SDK that was pretty close to what I required , so I set about butchering it. 3 hours later, the GreyscaleBitmapEffect is the result.This is a true bitmap effect, just like the DropShadow or the Blur or the Outer glow, and can be applied to any element, not just your bitmaps.This means you can now have a trigger on IsEnabled=false that makes your element go grey!Anyway, on to the usage. First download the DLL and the managed library at the end of this article.Next, you’ll need to regsvr32 the Com component, from the command line.copy the DLL into your project folder, go to the command line and type> regsvr32 GreyscaleBitmapEffectLib.dll

Once the component is registered , create a reference to the managed Dll by adding it to your .NET project.

Next, create a namespace in your XAML for referencing the new effect :

xmlns:Greyscale=”clr-namespace:Greyscale;assembly=GreyscaleBitmapEffect”

now you have the namespace defined you can add the bitmap effect straight into your code like so :

<Window x:Class="GreyscaleEffectTest.Window1"  

  xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation 

 xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 

Title="GreyscaleEffectTest" Height="400" Width="400"  

xmlns:Greyscale="clr-namespace:Greyscale;assembly=GreyscaleBitmapEffect">

<StackPanel>  

<Image Name="flower" Source="BOUQUET BIG_YELLOW.png">  

<Image.BitmapEffect>  

<Greyscale:GreyscaleBitmapEffect />

</Image.BitmapEffect>

</Image>

</StackPanel>

</Window>   

  

  

  

if all has gone to plan, the effect shows immediately in devstudios design window.

If you’re using blend, load up the project (after you’ve added the references) and go to the properties window.

After you’ve selected a visual element to add a bitmap effect to, click the expander under the appearance panel to access the bitmap effects

Click on the New button and you should then see the dialog which allows you to select the Greyscale effect from the assembly that your project references

select the GreyscaleBitmapeffect, and click ok

Depending on your items you should see the following sort of result

before :

After

For my next trick, I’ll be writing a HSLBitmalEffect, where the all three elements will be exposed as dependency properties, so you can animate the saturation from 1.0 to 0, giving the same sort of effect as the Windows Shutdown , where the screen fades out. You can almost do this with the GreyscaleBitmapEffect above by triggering the effect when your application loses focus, and greying the entire window. No animation but almost as effective. Watch this space for the HSL version coming shortly!

Enjoy!

Download the .NET Assembly

and

COM Component

Technorati Tags: WPF,Greyscale,Grayscale,disabled look