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">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ProgressBarScale" ScaleX="1" ScaleY="0"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="270"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<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"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="LoadingStatus" Foreground="Black" Height="22" Canvas.Left="120" Text="Loading..." Canvas.Top="3"/>
</Canvas>
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.