Download Progress Bar for Silverlight Media Framework Player

One of my customers has been using the Microsoft Silverlight Media Framework player for their Business-to-Business media sharing portal and wanted to add a download progress bar behind the scrub bar.  I was able to show them how to do this with a combination of template binding, re-templating the SMFPlayer and Timeline classes and subclassing the Timeline class.

  1. Since the Timeline bar is a custom control embedded in the SMFPlayer custom control, you need to modify the control template of both the SMFPlayer control and the Timeline control. 
  2. I created a new class DownloadProgressTimeline derived from Timeline so that I could add a DownloadProgress Dependency Property and a new default control template.
  3. I used template binding to connect the SMFPlayer.DownloadProgress property to the DownloadProgressTimeline.DownloadProgress
  4. I used template binding to connect the SMFPlayer.Foreground color to the color of the download progress
  5. I bound the DownloadProgress value (0.0-1.0) to the Scale Transform of the progress bar rectangle

The Download Progress bar in the DownloadProgressTimeline control template

Notice how the X scale of the rectangle is bound to the download progress (both are values from 0-1).

 <Rectangle x:Name="DownloadProgressBar" Grid.ColumnSpan="3" 
    Fill="{TemplateBinding Foreground}" Margin="0,6" 
    Stroke="{TemplateBinding BorderBrush}" Opacity="0.5" 
    RenderTransformOrigin="0,0" IsHitTestVisible="False">
    <Rectangle.RenderTransform>
        <CompositeTransform 
            ScaleX="{Binding DownloadProgress, RelativeSource={RelativeSource TemplatedParent}}"/>
    </Rectangle.RenderTransform>
</Rectangle>

The DownloadProgressTimeline in the SMFPlayer control template

This replaced the Timeline control:

 <dp:DownloadProgressTimeline x:Name="TimelineElement" 
    Cursor="Hand" Chapters="{TemplateBinding Chapters}" 
    EndPosition="{TemplateBinding EndPosition}" 
    HorizontalContentAlignment="Stretch" 
    IsLive="{TemplateBinding IsMediaLive}" 
    LivePosition="{TemplateBinding LivePosition}" Margin="0" 
    StartPosition="{TemplateBinding StartPosition}" 
    TimelineMarkers="{TemplateBinding TimelineMarkers}" 
    VerticalAlignment="Center" 
    DownloadProgress="{Binding DownloadProgress, RelativeSource={RelativeSource TemplatedParent}}"
    Foreground="{TemplateBinding Foreground}"/>

An image of the player with a download progress timeline

You can download the source code of a sample application here.