Silverlight : Build a Download and Playback Progress Bar

10/9/2010 4:41:09 PM

One thing every media content downloader needs is a bar that shows both download progress and playback position. Thankfully, Silverlight fully supports the concept of custom controls. Listing 1 shows the XAML, and Listing 2 shows the code-behind for this control.

Listing 1. PlayDownloadProgressControl.xaml

<UserControl x:Class="VideoPlayer.PlayDownloadProgressControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Line x:Name="DownloadProgress" X1="0" Y1="0"
              X2="0" Y2="0" Stroke="DarkGray"
              Canvas.Left="0" Canvas.Top="2" StrokeThickness="3"/>
        <Line x:Name="PlaybackProgress" X1="0" Y1="0"
              X2="0" Y2="0" Stroke="DarkGreen"
              Canvas.Left="0" Canvas.Top="2" StrokeThickness="3"/>
    </Canvas>
</UserControl>

Listing 2. PlayDownloadProgressControl.xaml.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;

namespace VideoPlayer
{
    public partial class PlayDownloadProgressControl : UserControl
    {
        public PlayDownloadProgressControl()
        {
            InitializeComponent();
        }
        public void UpdatePlaybackProgress(double playbackPercent)
        {

            PlaybackProgress.X2 = PlaybackProgress.X1 +
              (playbackPercent * LayoutRoot.ActualWidth / 100.0);
        }

        public void UpdateDownloadProgress(double downloadPercent)
        {
            DownloadProgress.X2 = DownloadProgress.X1 +
             (downloadPercent * LayoutRoot.ActualWidth / 100.0);
        }
    }
}

To incorporate this into video player app, add the following bolded lines to the MainPage.xaml file from Listing 1:

...
<MediaElement Grid.Row="0"
    x:Name="videoPlayer"
    Stretch="Fill"
        DownloadProgressChanged="videoPlayer_DownloadProgressChanged"
>
</MediaElement>
<local:PlayDownloadProgressControl x:Name="progressBar"
						Height="4" Grid.Row="0"
						VerticalAlignment="Bottom"/>
<StackPanel Grid.Row="1">
...

The DownloadProgressChanged event notifies you when a new chunk has been downloaded so you can update the progress:

private void videoPlayer_DownloadProgressChanged(object sender,
                                                 RoutedEventArgs e)
{
    progressBar.UpdateDownloadProgress(
                     100.0 * videoPlayer.DownloadProgress);
}