In this tutorial I’ll show you how to create a simple toggle button that has an on and off state using the Make in to a control feature in Expression Blend 3, the Visual State Manager, and some Animation Easing.
First we need to create the design of the control. You can use Expression Design or Blend for this or import your design from Photoshop. For this tutorial I will only use Expression Blend.
Design it up!
The first step is to create a rectangle that will be the base for your control. My rectangle is 89 x 41 pixels (I am creating quite a large toggle button for the example). Next add rounded corners to the rectangle by setting the Radius X and Y to about 20. I have also added a gradient to the fill parameter on the rectangle. I added another gradient to the thick stroke of the rectangle but reversed it to give it depth.
Next create the thumb, which is the part of the button that will show whether it’s on or off.
For this I will overlay a few objects to create the effect I want. First create a circle and make sure it fits nicely inside the rectangle’s rounded ends.
My base circle has a stroke of 2 pixels and gradients on both the fill and stroke. I have used green gradients to let the user know that this is the “on” position for the toggle switch. Copy and paste your first circle to create a second, remove the stroke, and resize the circle. Press and hold ALT + Shift while you resize the circle to maintain its centre point position.
Make the second circle sit inside the stroke of the first circle. Change the gradient type of the fill to “radial.” Set both stops to white, and then change the A channel (Alpha channel) to 0% on one of the stops. This creates a glowing effect on your button.
Tip: if your gradient is backwards and you want to swap the glow from the outside to the centre or vice versa, just swap the stops by dragging them to the other ends.
Last of all, create a shine with the pen tool. Zoom in to your circles and draw your shape, trying to stick to the edges as much as possible. If it’s not perfect, you can edit it later if you are worried people will notice.
Add a gradient of white to white on your shine, and set one of the stop’s alpha channels to 15%. Then bring the overall opacity of the object down until you are happy with the effect of your shine.
Make a control
So now we have our graphics for the toggle button; next we need to make it interactive. First grab your circles and shine, right click and select “Group Into > Canvas.” Call this canvas “thumb.”Select the toggle button graphics you just made, right click and select “Group Into > Canvas.” Call this canvas “Toggle button”. Right click it, and select Make Into Control.
A popup displays a list of objects. On the left side select “All” and then navigate to the “Toggle” button over on the right.
This creates your toggle button and adds in a content presenter for you. This is not needed as there will be no text for this button, so you can delete it.
Select your “States” tab in the top left corner of Blend (if you have a default workspace). You will see the Make a Control feature has kindly created some states already. The “Unchecked” and “Checked” state are our main focus.
Note: Our toggle button is green at the moment, which suggests it is set to the Checked state.
Select the Unchecked state and move your thumb canvas to the right side of the base rectangle. You don’t need to edit the Checked state because it will take its style from the base state which is already green.
Next select your green ellipse, and change its gradient stops to dark and light red.
Now you have a basic toggle button that works but isn’t very graceful. To fix this, change the transition duration of the CheckedStates to about 0.4s.
Make it smooth (animation easing)
Next select the easing functions button (
) to the left of the transition duration. In the drop down select “Circle InOut.”
Collapse the menu, and your toggle button glides from side to side with grace.
Other things to try:
1. Play with some of the other states provided for the toggle button control.
2. Try out some different EasingFunctions.
Note: A great feature of using states for a button like this is that it calculates the animation on the fly. If you used 2 animations (such as “GoTo Checked” and “GoTo Uncheck”) it would cause bugs when the user clicked the button fast. But try clicking this toggle button quickly, and watch how it works out the position and recalculates the animation for a smooth transition.
About the Author
Alex Knight
Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs a Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:AGKDesign.twitter | xamling.net
