Building a Play-Pause control for a Hulu inspired SilverLight video player

The following example is the Part 1 in a series of tutorials demonstrating how to build a Hulu inspired video player in Silverlight 3. This tutorial shows how to create a play-pause button control utilizing the ToggleButton control.

1- Place a ToggleButton on the stage
2- Right click and select “Edit Template / Edit a copy”
3- Name your control
4- Delete everything in the component – FocusVisualElement, DisabledVisualElement, contentPresenter and the Background. Do not delete the top level Grid.
5- In the states panel add designs for the Normal, MouseOver and Pressed states.
6- Add the Pause icon to the Unchecked CheckStates and the Play icon to the Checked CheckState.
7- Add a MediaElement control and set it’s source.
8- On your custom control add the code to pause and play the video on the Checked and UnChecked events.

View all parts of the tutorial
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

You can play and pause the video

XAML code

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:HuluSilverLight"
	x:Class="HuluSilverLight.MainPage"
	Width="640" Height="276" mc:Ignorable="d">
	<Grid x:Name="LayoutRoot" Margin="0,0,0,201">
		<MediaElement x:Name="mp" Margin="0,-42,0,-240" Source="IronMan.wmv" />
		<local:hulu_player Height="32" Margin="0,0,0,-199" VerticalAlignment="Bottom"/>
	</Grid>
</UserControl>

C# code

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public hulu_player()
		{
			InitializeComponent();
		}

		private void pauseVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Pause();
		}

		private void playVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Play();
		}

	}
}