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.
- 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.
- I created a new class DownloadProgressTimeline derived from Timeline so that I could add a DownloadProgress Dependency Property and a new default control template.
- I used template binding to connect the SMFPlayer.DownloadProgress property to the DownloadProgressTimeline.DownloadProgress
- I used template binding to connect the SMFPlayer.Foreground color to the color of the download progress
- 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.