A Simple Buffering Progress Indicator for Silverlight
A customer of mine is creating a cool video sharing site with Silverlight and wanted to see some code for a simple buffering progress indicator to show the user that the video is loading. This is actually pretty easy with Silverlight so I thought that I'd show my solution. In the solution, I name the ScaleTransform of the green rectangle and as the buffering increases from 0 to 1, I increase its ScaleX value from 0 to 1.
XAML:
<Canvasxmlns="https://schemas.microsoft.com/client/2007"xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"Width="640" Height="480"Background="White"x:Name="Page"><MediaElement Source="https://www.charette.com/alexander/Hippo%20and%20Rhino.wmv" x:Name="Media" Width="640" Height="480"/><Canvas x:Name="Buffering" Width="150.4" Height="18.262" Canvas.Left="243.6" Canvas.Top="232.81"> <Rectangle Width="150.4" Height="19.063" Fill="#FFFFFFFF" Stroke="#FF000000" Canvas.Top="-0.001"/> <Rectangle RenderTransformOrigin="0,0" Width="148" Height="16.933" Canvas.Left="1.25" Canvas.Top="1.073" Stroke="#FF4EBE05"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform x:Name="BufferingProgress" ScaleX="0.5" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,0.228" StartPoint="0.5,0.939"> <GradientStop Color="#FF4EBE05" Offset="0.303"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Width="78.667" Height="17.862" Text="Loading...." TextWrapping="Wrap" Canvas.Left="36.933" Canvas.Top="0.667" FontFamily="Trebuchet MS"/></Canvas></Canvas>
JavaScript code:
VideoLoading.Page.prototype ={ handleLoad: function(control, userContext, rootElement) { this.control = control; HandleBuffering(rootElement); } }
function HandleBuffering(rootElement)
{
var media = rootElement.findName("Media");
media.addEventListener("bufferingProgressChanged", OnBufferProgressChanged);
}
function OnBufferProgressChanged(sender, eventArgs)
{
var progress = sender.findName("BufferingProgress");
progress.ScaleX = sender.bufferingProgress;
var buffering = sender.findName("Buffering");
if (sender.bufferingProgress == 1.0 || sender.bufferingProgress == 0.0)
{
buffering.Visibility = "Collapsed";
}
else
{
buffering.Visibility = "Visible";
}
}