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}"/>

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

Comments

• Anonymous
  October 24, 2010
  Thanks for posting an example. Classic one on how to extend the SMF. Is there any book on SMF out there?

• Anonymous
  October 24, 2010
  Awesome example, Michael! Thanks for writing this.

• Anonymous
  October 26, 2010
  The comment has been removed

• Anonymous
  October 26, 2010
  The comment has been removed

• Anonymous
  September 30, 2011
  Hi, I'm have implemented the Download Progress bar in SMF player by using your Nice Article. I have a DOUBT with respect to the Download progress Implementation. After implementing, when I seek to the new position, I see the downloadProgress bar gets increased, by appending the scale x value to the old progress status along with new status value. More over the movie is not been downloaded by that time. How to rest the value when I make a seek to the new position ? Please help me. urgent Requirement. Thanks Praveen