Simple Color Animation in Blend for a Button State
This tutorial shows off a few concepts in Silverlight that Blend makes very simple to work with including: Custom Control creation, Color Animation, Resources and State Management. Although you can not animate between Brushes during different States, this tutorial demonstrates how to animate Colors to create a similar effect.
02 Draw a Rectangle on the Artboard
Select the Rectangle Tool (shortcut key M) and draw a rectangle.
03 Turn the Rectangle into a Button
Right-click the Rectangle and choose Make Into Control and select Button as the Control type, change the Name to “ColorTransitionStyle” and Hit OK.
04 Set the Background Color
Notice now that you have created the new Template “ColorTransitionStyle”, you are in Template Editor mode. You can tell by the BreadCrumb menu at the top of the ArtBoard showing “[Button] > (palette icon) > Template”. The Style is selected in the Objects Panel and the States Panel is selected above the Objects Panel. Select the Rectangle and change the Fill Brush on the Properties Panel to a bright color.
05 Save the Color for later
In the Brushes Section of the Properties Panel, find the Editor tab and click the small white square. On the popup menu, click Convert to New Resource and change the name to “OverColor” and Hit OK. You have now saved that Color as a Resource for us to use later.
06 Set the Background Color Again…
With the Rectangle selected and change the Fill Brush to a dull color. Notice that “Base” state is selected in the State Panel. This new dull color will act as the default Background for each State.
07 Set the Background Color for MouseOver
In the States Panel, select the MouseOver State. Notice the Recording Indicator that lights up to let you know any changes made here will be applied on MouseOver. Click the small white square on the Editor tab and this time select Local Resource > OverColor. Hit F5 to Run the Project and when you move your mouse over the button, the rectangle should change from the dull to bright color.
08 Animate the Transition
The default transition time for State change is 0 seconds, which caused the instant color change. To add transition time between States, change the Default Transition value from “0” to “1”. You can also change the easing of the animation from Linear to another easing type by selecting the small line graph on the Default Transition line. Now Hit F5 to Run the Project and you’ll see the color Animate over time based on the selected easing function.
- Defining different visual states for a control
- Creating reusable resources
- Styling tips for common Silverlight controls