image 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.


Width="640" Height="480"
<MediaElement Source="" 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">
     <ScaleTransform x:Name="BufferingProgress" ScaleX="0.5" ScaleY="1"/>
     <SkewTransform AngleX="0" AngleY="0"/>
     <RotateTransform Angle="0"/>
     <TranslateTransform X="0" Y="0"/>
    <LinearGradientBrush EndPoint="0.5,0.228" StartPoint="0.5,0.939">
     <GradientStop Color="#FF4EBE05" Offset="0.303"/>
     <GradientStop Color="#FFFFFFFF" Offset="1"/>
  <TextBlock Width="78.667" Height="17.862" Text="Loading...." TextWrapping="Wrap" Canvas.Left="36.933" Canvas.Top="0.667" FontFamily="Trebuchet MS"/>

JavaScript code:

 VideoLoading.Page.prototype =
handleLoad: function(control, userContext, rootElement)
  this.control = control;

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";       
        buffering.Visibility = "Visible";