In the following video I will show how to Databind a progressbar’s width to the position of a video. The Databinding feature in Microsoft Expression Blend 3 allows this interaction without the need to write one of code.

You can view my article on Databinding here

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;
		}
	}
}