Building a Download Progress Bar for your Hulu inspired SilverLight video player

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

We will take the design of our download progress bar and set it’s width equal to the position of the video’s DownloadProgress property. To make this auto-update we will hook into the ‘DownloadProgressChanged’ event.

1- Place a rectangle on the stage, on a layer below the progress bar
2- Set the rectangle’s HorizontalAlignment to Left
2- Set the rectangle’s color to white and its alpha to 20%
3- On the DownloadProgressChanged event of the mediaElement we will execute code

The end result in code is: loadProgressBar.Width = mp.DownloadProgress * bar.ActualWidth;

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" DownloadProgressChanged="downloadProgressHandler"/>
		<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 MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void downloadProgressHandler(object sender, System.Windows.RoutedEventArgs e)
		{
			loadProgressBar.Width = mp.DownloadProgress * bar.ActualWidth;
		}
	}
}