Blue Theme Orange Theme Green Theme Red Theme
Home | Forums | Videos | Advertise | Certifications | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Jump to
Skip Navigation Links
Search :       Advanced Search �

Author Rank :
Page Views :
Downloads : 0
Rating :
 Rate it
Level :
Become a Sponsor

The Silverlight application uses standard loading animation by default.  Below is the standard loading animation.


The main reason of showing this kind of splash/ loading screen is, the Silverlight runs on client side. In order to run the application, resources need to be downloaded in client side and during the download end user should see some kind of loading indicator. In this article we will go step by step to implement custom splash screen. 

1. Create Silverlight Application project.



Once the new project is loaded add below line of code in "MainPage.xaml". The reason behind adding this code is, when you run application the Splash screen will appear and once download is completed the application will open up and "Welcome to Custom Splash Screen demo..." message will be displayed on screen.

<TextBlock Text="Welcome to Custom Splash Screen demo..."></TextBlock>

2. Add Splash screen

Right click on "CustomSplashScreen.Web" project, select "Add > New Item…" . From the "Add New Item" dialog box select "Silverlight Jscript Page". Give the file name "Splash.xaml". And click on "Add" button.


When you add "Splash.xaml" file automatically "Splash.js" file will be added.


3. ASPX file changes

Add below code inside "Object" element in CustomSplashScreenTestPage.aspx file.

<param name="SplashScreenSource" value="Splash.xaml" />
<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

And add Splash.js file reference in the same file.

<script type="text/javascript" src="Splash.js"></script>

4. Splash xaml changes

Add this code in Splash.xaml.

<Canvas Canvas.Left="572" Canvas.Top="331" Height="23" Width="320" Background="#FFFFFFFF">
    <Rectangle x:Name="ProgressBar"
           Width="23" Height="1"
           Canvas.Left="2" Canvas.Top="23">
          <ScaleTransform x:Name="ProgressBarScale" ScaleX="1" ScaleY="0"/>
          <SkewTransform AngleX="0" AngleY="0"/>
          <RotateTransform Angle="270"/>
          <TranslateTransform X="0" Y="0"/>
        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
          <GradientStop Color="#FFFFFFFF" Offset="1"/>
          <GradientStop Color="#FFFFFFFF" Offset="0"/>
          <GradientStop Color="#FFFFFFFF" Offset="0"/>
          <GradientStop Color="#FF2AFF55" Offset="0.527"/>
    <TextBlock x:Name="LoadingStatus" Foreground="Black" Height="22" Canvas.Left="120" Text="Loading..." Canvas.Top="3"/>

5. Splash JavaScript change.

Removed all auto generated code from Splash.js and add below function.

function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("ProgressBarScale").ScaleY = eventArgs.progress * 300;
    sender.findName("LoadingStatus").Text = (Math.round(eventArgs.progress * 1000) / 10) + "%";

6. Run the application

Once all changes are completed run the application. You will experience new Splash screen.


If you run this application in your local development environment you may not see the splash screen as the size of application is very small. You may add some resources in order in Silverlight project to increase xap file size to experience custom Splash Screen.

 [Top] Rate this article
 About the author
 Post a Feedback, Comment, or Question about this article

 � 2020  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.