As promised I'm going to show you how to animate custom controls using Opacity masks, if you are unfamiliar with Opacity masks, please check my previous blog entry: Working with Opacity masks
In this tutorial we'll create a custom button, animate it for mouse events and then still keep it flexible to them it
The Problem
Custom controls are notorious, especially when it comes to applying themes, it is very simple to create a custom button and animate it but it all falls apart when you try to keep it flexible to apply your themes, for example you can create a button apply animations on mouse enter and pressed states but then you can't keep your colour for external binding.
Solution:
Instead of applying animation to the colour itself you can apply animation to the opacity masks and keep the theme alive for external colour binding, here is how we'll go about it using Expression Blend .
I am sorry for the audio but its pretty simple to follow.
Silverlight Streaming (http://silverlight.live.com) is not working so please download the video
Note: At 2:20 I copied and pasted another Rectangle on back of the the main rectangle and coloured it black to avoid the transparency of opacity mask, it is a good practice in order to avoid making the button (or control in general) transparent, don't forget to experiment the background by using gradient brushes published before (Tip: With this Opacity Mask try the Large set of gradients for good effect).
Download