Magic transparent color glass using Interactions and OpacityMask

This is continuation of my previous post and this requires some knowledge about OpacityMask and the new Interactions mechanism introduced by the Blend team.

Prerequisites
Writing custom TriggerAction using Interaction to enhance MVVM
Understanding OpacityMask and its usage

What is this transparent color glass
Simply a Glass which shows a black and white image in color.The application here contains a black and white image along with a elliptical glass on it.We can see the same image in color through the glass and the glass is moving with mouse.

Basic idea of creating transparent glass
Of course there are 2 images one is color and another is black and white image of the same.In the application basically there are 3 layers inside a Canvas.One layer is again a Canvas and rest are Images.Bindings are used to make sure that all are in same size.

The canvas is at bottom ,with an ellipse inside.The second layer is the black and white image.At the top we have placed the actual color image and its opacity mask is set to make it viewable only through an elliptical portion.
The parent canvas is enabled with FollowMouseAction.It is a trigger action which enables the elements in Canvas to follow the mouse.The FollowMouseAction is bound to the MouseMove trigger.Hence it updates it’s position on mouse move.
We have to create a VisualBrush of the Canvas which is at the bottom layer to apply as OpacityMask of top layer image.Keep this as Resource.Set Stretch property of VisualBrush to None.Then set the OpacityMask of the top image to this resource.

Yes its done.Now run the project and see the glass in action.
Below are the step by step instructions to create this application.Later I will be writing about how to create color glass using Expression Blend 3

Steps

1. Create a WPF application.
2. Add 2 photos into application.One is the original which is in color and another is ,black and white version of the same.
3. Add a Canvas to the Grid in Window and name it as ‘rootcanvas’ .Set its Height and Width.
4. Add another Canvas in to rootcanvas and name it as ‘childcanvas’.Bind it’s Width and height to ActualHeight and ActualWidth of rootcanvas 
5. Set the background property of childcanvas to any color with alpha value of 00.Eg :#00ffffff
6. In the child canvas add an Ellipse named ‘ellipse’.Set it’s color to Red.Set Height and Width.
7. Add 2 images into parentcanvas.Bind Width and Height in to ActualWidth and ActualHeight of rootcanvas.
8. Set black and white photo to the first image(middle layer)and color photo to the top most layer.
9. Create a Visual brush of childcanvas and store as Resource named ‘CanvasVisualBrush’.Set its stretch to None.
10. Apply ‘CanvasVisualBrush’ as OpacityMask of Image which is in top layer.(which has the color photo)
11. Add Reference to the dll MyActionsLibrary.(See my previous post to get MyActionsLibrary dll)
12. Add FollowMouseBehavior into the parentcanvas.Set it’s Event to MouseMove.
13. Set the Element property of FollowMouseAction to ‘ellipse’.
14. Run and enjoy.

Try these steps your self.In the worst case (If you can’t do it by yourself) see the sample here.Let me know if you got struck somewhere in steps.