Paul Yanez

This is part 3 in our series of building a Hulu inspired video player. In this tutorial we will be building a progress bar.

We will take the design of our progress bar and set it’s width equal to the position of the video’s current position. To make this dynamic and without needing to write any code we will use the concept of Binding.

You can view a video on Databinding here
1- Place a rectangle on the stage
2- Set the rectangle’s HorizontalAlignment to Left
2- Set the rectangle’s color to white and its alpha to 20%
3- Bind the width property of the rectangle to the Position.TotalSeconds of the mediaElement

In design view
Select the rectangle
Click the yellow box next to the width property.
Select ‘Databinding’
Select the ‘Element Property’ tab
In the “Scene Elements’ list, select the mediaElement control
In the properties list select ‘Position / TotalSeconds’

The end result in XAML is: Width=”{Binding Position.TotalSeconds, ElementName=mp, Mode=OneWay}”

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

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="http://www.paulyanez.com/interactive/blog/HD/darkknight.wmv" />
		<local:hulu_player Height="32" Margin="0,0,0,-199" VerticalAlignment="Bottom"/>
                <Rectangle x:Name="progressBar" Fill="#3EFFFFFF" Height="30" HorizontalAlignment="Left" Margin="46,0,0,-198" VerticalAlignment="Bottom" RenderTransformOrigin="0,0.5" Width="{Binding Position.TotalSeconds, ElementName=mp, Mode=OneWay}">
			<Rectangle.RenderTransform>
				<TransformGroup>
					<ScaleTransform ScaleX="2.5"/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Rectangle.RenderTransform>
		</Rectangle>
	</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();
		}

	}
}