Geeks With Blogs
Imran Shaik Silverlight Quintessential Rambling

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.


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 ( 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 Source code (ThemedButton.Zip 34KB)

Posted on Friday, October 24, 2008 11:55 AM Silverlight | Back to top

Comments on this post: Tutorial: Animating Custom Controls for themes using Opacity Masks

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Imran Shaik | Powered by: