Styling a Play/Pause button for Silverlight video

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.


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 http://codeplex.com/sl2videoplayer?

  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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: