Color Animation Using Expression Blend

In this post I will show you how you can create color animation using the expression blend. This is also my first time that I have created animation using the expression blend, before this I used to create the animation using the code behind file which is the C#. For your information this is also my first time color animation. So I want to share this with you , how to create the color animation using expression blend.
Let us start with our example I have a simple window Which consist of a border control and I want to change the background color and the border color of the border color to change. Here is the main window of my color animation.

Next I have to add the story board for my color animation. For this you can press F6 to switch between the Animation Workspace and the Design Workspace. Now when you press F6 you will see the Animation workspace and below is the animation workspace. You can add new story board, close and event delete the story board. In the below image you can see all the possible option for the story board creation to delete as well.

Next is I have move the playhead to a location in the timeline where you want a property change to occur. I have move the play head to the .500 where I want the back ground and the border of the border color to be changed. By placing the play head to the .500 I have set the back ground color to the gradient color and the border color to the white. And here the is the look of the border control at time .5000, you can see that I have set the background and the border of the border color.

I have set the repeat behavior of the story board to forever and auto reverse to false. When you press the play button of the story board it will run the you will see the color change form the original set color to the new gradient color. I have also created a busy control for myself and I have share with you, so that if you need it you can use it in your project. The main window contain two button one is for the simple animation and second one is for the busy bar which is useful when you perform work in the background and show this animation to show user that application is performing work in the background. Here is the output of my busy bar window.

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!