Sharker Khaleed Mahmud Silverlight Tips & Tricks

October 3, 2010

91. Custom preloader in Silverlight

Filed under: Silverlight — Tags: , — Sharker Khaleed Mahmud | shamrat231 @ 11:21 PM

[tweetmeme source=”shamrat231” only_single=false]

Lets start this entry by first congratulating newly awarded (and re-awarded) Silverlight MVPs.  Congratulation to all of them…!!!

Ok, now back to today’s entry. You can see the live example here [live demo] (Put on your headphone : )

The SOURCE CODE(.zip) is at the end of the page for download.

The first thing about creating a preloader is that you should be using a separate xaml file which can be pointed from Silverlight  object tag. For now, look at the code below,

Right click on you .web and add a Silverlight 1.0 Jscript Page. A sample xaml page with Canvas should get created along with a js file.

With the help of js function, we can actually manipulate the xaml file. Before I get to that, lets open blend and design a sample preloader.  The idea is very simple. There will be a text, where it will show the downloaded progress and…a bar which will show the progress.  It is more flexible if you do the design in MainPage.xaml and then relocate the code in your customPreloader.xaml. I have taken the design idea of the bar from here

CustomPreloader.xaml

<Grid Background=”#444444″ xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“>
  <Border Background=”#272727″ Width=”300″ CornerRadius=”5″ Height=”77″>
    <Canvas Margin=”10″>
      <TextBlock Text=”SILVERLIGHTIPS.NET” Foreground=”#cbcbcb” Height=”15″/>
      <Border BorderBrush=”#1b1814″ Margin=”238,0,0,0″ Height=”15″ Width=”40″>
        <TextBlock x:Name=”bartext” Text=”0%” Foreground=”#cbcbcb” HorizontalAlignment=”Right”/>
      </Border>
      <Border BorderBrush=”#1b1814″ BorderThickness=”1″ Background=”#434544″ Width=”280″ Height=”30″ Margin=”0,20″ CornerRadius=”2″>
        <Border x:Name=”bar” Width=”0″  HorizontalAlignment=”Left”>
          <Border.Background>
            <LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
              <GradientStop Color=”#FF1FA0FB” Offset=”0″/>
              <GradientStop Color=”#FF168CDB” Offset=”1″/>
              <GradientStop Color=”#FF1295ED” Offset=”0.465″/>
              <GradientStop Color=”#FF0F89DC” Offset=”0.865″/>
              <GradientStop Color=”#FF0D9BFA” Offset=”0.165″/>
            </LinearGradientBrush>
          </Border.Background>
        </Border>
      </Border>
    </Canvas>
  </Border>
</Grid>

 

Now lets add some bulky data. For demonstration purpose, I will add a random mp3 file.

MainPage.xaml

   <Grid x:Name=”LayoutRoot” Background=”#444444″>

        <MediaElement Source=”The_Breaking_Of_The_Fellowship.mp3″ AutoPlay=”True” />

    </Grid>

Compile the project. Your .xap file size should increase. My speed is not that great …so this size is good enough for test purpose.

Now lets get back to the js file. We want to write a function where we can manipulate the width of the bar and text in xaml. This can be done by writing the function assigned in the silverlight object tag as shown below.

customPreloader.js

function SourceDownloadProgressChanged(s, e) {
    var bartext = s.findname(“bartext”);
    var bar = s.findname(“bar”);
    if (bartext != null || bar != null) {
        var value = Math.round(e.progress * 100)
        bartext.Text = value + “%”;
        var newWidth = 2.8 * value;
        bar.Width = Math.round(newWidth)
    }
}

Notice that the xaml “bar” parent has border width 280. So if we divided the width in 100 region each part will be 2.8. So in js our bar.Width is being calculated as bar.Width = Math.round(2.8 * value) where values is the current percentage downloaded. The important thing to remember is to point the reference of the js file in your page.

Finally when it is published, make sure to add the xaml file.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Advertisements

10 Comments »

  1. […] Custom Preloader in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Windows Client Developer Roundup 044 for 10/4/2010 - Pete Brown's 10rem.net — October 4, 2010 @ 6:30 AM

  2. cool.

    Comment by Jone — October 9, 2010 @ 9:41 PM

  3. Hi,

    This is not working in Silverlight 3. I have followed all the step as the mention above, However I didn’t get any error in my project in result panel. Not working 😦

    Comment by vijay — October 26, 2010 @ 6:03 AM

  4. wow you guess looked like you had so much fun! XD? I loved this song and now you made it a 100 times better! I m glad you won! ^_^ Wonderful video!
    chl03c0urage0us64

    Comment by DicopireIdord — December 25, 2010 @ 7:44 AM

    • well its Chritmas time…i guess worpress people gave it with the theme i used 🙂 U can easily give this effect on your site. My guess is that its a simple jscript added to the page which does the snow flake scenario all over the site….

      Comment by Sharker Khaleed Mahmud | shamrat231 — December 25, 2010 @ 3:43 PM

  5. I WANT TO A SOURCE CODE Custom preloader in Silverlight

    Comment by gaoyuan — January 13, 2011 @ 12:47 AM

  6. Hi,
    I get a js error but the loader is well loading.
    Here is the error : ‘window.Preloader.Web’ is null or not an object

    Tried on your demo and mine. Same effect.

    Comment by scott — January 26, 2011 @ 8:36 AM

  7. hi,

    thanks for the nice tip, I have one question. can I use animation in the preloaded xaml file? I tried but it ended up in an parse error?

    thanks in advance

    Comment by Viral Panchal — June 14, 2011 @ 10:49 AM


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: