Styling a Play/Pause button for Silverlight video


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.


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.


5 comments so far

  1. […] Making a Play/Pause Button in Silverlight (Corey Schuman) […]

  2. Mark Mazurik on

    Its “bear with me” and not “bare with me”. The latter is an invitation to undress…

  3. timheuer on

    corey have you seen

  4. cschuman on

    Thanks for the link Tim, the project looks great.

  5. […] Smith again with Synchronizing the width of elements in an ItemsControl Corey Shumann shows how to Make a Play / Pause button in Silverlight The guys over at First Floor Software have released Silverlight Spy The latest release of […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: