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>

Read more: Synergist

Posted via email from .NET Info