Silverlight 2 - Creating a Play/Pause button using a ControlTemplate

Thursday, June 19, 2008

.NET Blend c# RIA Silverlight Visual Studio Xaml

A Button is one of the most common elements used in an interactive application. In Silverlight 2, it is possible to specify nearly any control’s appearance by using a ControlTemplate. The control’s template can be defined within the control’s <ControlTemplate/> inner property, or it can be built as a resource at the page or application level. We can reference these resources in the control's Style or ControlTemplate property (ControlTemplate can be a child of a Style, making it possible to add additional Setters to that Style).

In this sample, we'll create a Play/Pause button that can be used in a media player. We'll end up with a ControlTemplate in the App.xaml that can be reused for several media controls (i.e. Stop, Forward, Backward, etc.) by setting their Template property.

Creating a simple ControlTemplate

Using Blend, I can generate some of markup to get started. First, create a Button control in Blend within the Silverlight Object structure:

boring button

To create an empty ControlTemplate for this button, right-click the button in the Object Viewer, and create an blank template:

blend create empty template

This will modify the Button Xaml to reference the new resource,

and will generate the following in the App.xaml resources, based on the Button control's pre-defined TemplateVisualStates:

</vsm:VisualStateManager.VisualStateGroups>

</Grid>

</ControlTemplate>

We can see Button's pre-defined visual states by looking up the class' custom attributes (http://msdn.microsoft.com/en-us/library/system.windows.controls.button(VS.95).aspx):

[TemplateVisualStateAttribute(Name = "Unfocused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "MouseOver", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Pressed", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Focused", GroupName = "FocusStates")][TemplateVisualStateAttribute(Name = "Disabled", GroupName = "CommonStates")][TemplateVisualStateAttribute(Name = "Normal", GroupName = "CommonStates")]public class Button : ButtonBase

We can either modify the Xaml by hand or use the States Viewer in the June release of Blend, either way, we'll need to add Storyboards for any desired visual state:

I'll first create the base template style, which is a circular button without the play or pause icons. The updated template Xaml looks like this:

</ControlTemplate>

Now I want to add a MouseOver state, so I'll change the following VisualState to create a glow effect on the button:

<vsm:VisualState x:Name="MouseOver">
      <Storyboard>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Fade" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                  <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF98BFFB"/>
            </ColorAnimationUsingKeyFrames>
      </Storyboard>

</vsm:VisualState>

Now my button is glowing nicely on mouseover, and I haven't had to write any C# yet!

Adding Button Content (Play and Pause icons)

The play and pause icons will need to exist within the control’s Content in order for us to access them in the code-behind. There is currently no support for accessing items within the ControlTemplate, but something tells me this will be supported in the future. One downside to separating the icons from the ControlTemplate is that we cannot include visual states for the icons… There are worse things in life. The positive side is that we can specify where content shows up in the template by adding a ContentPresenter to the template:

We could add another element below the ContentPresenter, allowing for the possibility of a gradient over the top of our icons, which can be edited in the visual states.

To add the play and pause icons, we'll simply add Xaml to be a child-node of the Button:

</Button>

All of this templating work sets us up nicely to write some simple logic for the Button's Click handler:

private void PlayPauseButton_Click(object sender, RoutedEventArgs e)
{
      if (VideoPlayer.CurrentState == MediaElementState.Playing)
      {
            VideoPlayer.Pause();
            PauseIcon.Visibility = Visibility.Collapsed;
            PlayIcon.Visibility = Visibility.Visible;
      }
      else
      {
            VideoPlayer.Pause();
            PlayIcon.Visibility = Visibility.Collapsed;
            PauseIcon.Visibility = Visibility.Visible;
      }

}

This answers a few questions I had about the power of control templates—thanks!

Jordan - Wednesday, September 3, 2008 3:04:33 PM

Hi,
I created a ControlTemplate with an image for a button succesfully. But I want to know how to create a button which contains both icon and text.
Thanks Annegret

Annegret - Wednesday, October 15, 2008 11:33:53 AM

private void PlayPauseButton_Click(object sender, RoutedEventArgs e)
{
if (VideoPlayer.CurrentState == MediaElementState.Playing)
{
VideoPlayer.Pause();
PauseIcon.Visibility = Visibility.Collapsed;
PlayIcon.Visibility = Visibility.Visible;
}
else
{
VideoPlayer.Pause();// VideoPlayer.Play()???
PlayIcon.Visibility = Visibility.Collapsed;
PauseIcon.Visibility = Visibility.Visible;
}

}

serg - Thursday, January 22, 2009 1:56:39 PM

Ahaa, its good dialogue concerning this post here at this
weblog, I have read all that, so now me also commenting here.

Babb - Saturday, March 23, 2013 5:01:54 AM

Creating a simple ControlTemplate

Adding Button Content (Play and Pause icons)

4 Comments