Styling a Play/Pause button for Silverlight video

Posted by Corey on September 5, 2008 at 3:03 am.

image

You have created a video player, and you want to change a button make a standard Play/Pause button.  (Much like YouTube or iTunes).  If you are  a designer, you probably already know how, however, if you are like the rest of us developers this can be a little frustrating.  So, after taking a billion screenshots putting this post together, I thought it would be easier to do a screencast instead.  This is my first screencast, so bear with me.

Overview

Basically this tutorial shows you how to style a ToggleButton and how to update the Visual States of a control in Blend.  For reference, here are the basic steps needed to create the play/pause button:

  1. Open Expression Blend,
  2. Place a ToggleButton on the Artboard,
  3. Create a copy of the template,
  4. Remove all the unnecessary objects from the Objects and Timeline panel,
  5. Draw a Play head and Pause icons,
  6. and Update the opacity of the icons for the States.


Related posts:

  1. Create a video player in Silverlight 2 – Part 1
  2. Create a video player in Silverlight 2 – Part 2
  3. Animations in Blend
  4. Why won’t media play in Silverlight 2?
  5. How to dynamically create animations from C# in Silverlight
Uncategorized

8 Responses to “Styling a Play/Pause button for Silverlight video”