This tutorial is all about gradients and how to make some sweet effects with them. I'm going to create the above button with some shapes and gradients.
Ok so lets start, in your project, create a new button. Right click the button and point to Edit Control Parts (templates) and then select Create Empty. This will take you to template mode and remove all the elements it had.
Start with creating a rectangle that fits the full size of your template. To ensure your button resizes well, make sure your height and width are set to "auto" and your alignments are both set to "fill".
Apply rounded edges to your rectangle by changing the RadiusX and RadiusY properties (I used 10px for each).
Apply gradients to your Fill brush and your stroke brush.
To get the background effect I wanted with my gradient, I made the fill go from a dark blue to a light blue, and then the stroke from a darker blue to a much lighter gray. This gives the button an interesting contrast and helps gives the fill colours a little more pop.
Next we will create the lines
This is a nifty little trick that could have a whole lot of uses.
Create a new rectangle the same size as the last (copy and paste it). This line effect is actually made with a gradient. First step is to set up your gradient stops. All 3 stops need to be black, and the first stop at 0% alpha channel, second stop at 100% alpha channel and the third at 0% alpha again. Place all your stops quite close to one end (you will need to play with the spacing a little to get the effect you want).
Quick tip: When creating a gradient from one colour to transparent, its always a good idea to make sure the stops are the same colour, or you might find some funny results.
Now for the magic, expand the area below your gradient slider and change the SpreadMethod to Repeat. Also check out the MappingMode options, RelativeToBoundingBox will make the gradient stretch when resizing where as absolute will repeat the gradient at the same size.
For the final touch, grab your gradient tool, and dragging the arrow head, move it very close to the arrow tail, you should see the effect appearing in front of your eyes!
Cool huh!
Ok, so next up, we want to create the glow. This is another rectangle the same size as the rest. The gradient I have applied is a little bit different again. It's a simple 2 stop gradient from bright aqua to transparent, but instead of the standard linear gradient, we will use the radial gradient.
Now just select your gradient tool, and edit your gradient size and location to sit well outside the boundaries of your button.
Now I add the content presenter with a white to gray gradient. A very light gradient can make all the difference to giving some text (or any object for that matter) just a little bit of depth.
Last but not least, the button shine. I have used the pen tool to create my shine (if your not great with the pen tool, another rectangle would still look great), I plotted out the points I wanted and then added a white to transparent gradient and pulled the opacity of the entire object back to around 25%.
Tip for the shine: play with different shapes and styles of your shine, they can be any shape and if done well, can take your graphic to a new level.
Ok so now we have a great looking button.
Let's make it animated!
If you haven't used the visual state manager before, this might get a little confusing, learn more about it here.
All our states are set up and ready to go, we just have to fill in the blanks. So first step is to get the Base state set up to show exactly how our button will look when it's not being interacted with. The only change I have made is setting the "Glow" rectangle to 0% opacity.
Now select the MouseOver state, and simply bring the "Glow" rectangle back up to around 80%.
For my pressed state I have simply changed the colour of my "Glow" to a very light blue.
Set your timer next to the heading CommonStates to about 0.2s and your button is ready to go.
Tip for pressed state: Setting pressed states animation time to 0s make the user actually feel like they have clicked the button properly. To do this, click the plus/arrow symbol next to "Pressed" and select the * to pressed state, you will then be able to edit that value without effecting the other timers.
And there you have it! Some ways gradients can make your applications look great!
Thanks for reading
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
