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.

XAML:

 <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
x:Name="Page">
<MediaElement Source="http://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";       
    }
}