Introduction
This article introduces a simple yet flexible way of creating a splash screen for Silverlight applications.
Background
One of my projects is to migrate a Windows Forms application to Silverlight. The business owners want to include a splash screen in it. Searching the internet, I found an article, "Navigating and passing values between XAML pages in Silverlight 2", by Nipun Tomar, discussing how to navigate among XAML pages in Silverlight. Based on this navigation method, a splash screen can easily be implemented. The following is a step by step introduction to adding a simple yet flexible splash screen to Silverlight applications.
Create an Empty Silverlight Project
In Visual Studio 2008, follow the Microsoft instructions on how to "Create a New Silverlight Project" to create an empty Silverlight application, with a website to host the Silverlight application, and name the Silverlight project "SplashDemoApplication". By default, a solution is created, which is also named "SplashDemoApplication". In this solution, two projects are created by the wizard. One is the Silverlight project, and the other is the hosting website project called "SplashDemoApplicationWeb".
By default, the "SplashDemoApplicationWeb" project is set as the Start Up project for running in Debug mode by Visual Studio. In order to have a web page run the Silverlight application in Debug mode in the Visual Studio environment, we can right click on the file "SplashDemoApplicationTestPage.aspx" in the Solution Explorer and set it as the start page.
If we run the Silverlight application in Debug mode now, a web browser window will be launched, showing a blank screen, since we have not yet added anything to the Silverlight application.
Add the Splash Screen XAML page and the Content
Since this article is not intended to discuss how to program WPF and XAML, we will add only a new XAML file called "Splash.xaml" to the project beyond the default files created by Visual Studio, which will be the splash screen in our demonstration. The "MainPage.xaml" added by default in Visual Studio 2008 will be the main Silverlight application page for the demonstration purpose.
After adding "Splash.xaml" to the project, we will add a folder called "images" and put two pictures "NiagaraFalls.jpg" and "Dock.jpg" in the folder. Each picture will be embedded in one of the XAML pages.
Change the XAML Files to Include the Pictures
To make the XAML pages show something, we will add a picture in each of them. We will need to edit the two XAML files. We first add "NiagaraFalls.jpg" in the "Splash.xaml" file.
<UserControl x:Class="SplashDemoApplication.Splash"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Cursor="Wait">
<Grid x:Name="LayoutRoot" Background="White">
<Image Source="images/NiagaraFalls.jpg"
Width="750" />
</Grid>
</UserControl>
And then, add "Dock.jpg" and some text in "MainPage.xaml".
<UserControl x:Class="SplashDemoApplication.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Margin="10, 50, 10, 50">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="42"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Text="A Simplex Silverlight Splash Screen Demonstration"
HorizontalAlignment="Center"
FontFamily="Verdana" FontSize="25"
FontWeight="Bold" Foreground="Brown" />
<TextBlock Grid.Row="1"
Text="This is the main Silverlight user control
displayed after the splash screen"
HorizontalAlignment="Center"
FontFamily="Verdana" FontSize="20"
Foreground="Green" VerticalAlignment="Top" />
<Image Grid.Row="2"
Source="images/Dock.jpg"
HorizontalAlignment="Stretch" />
</Grid>
</UserControl>
Change the Code-Behind File of App.xaml
The starting point of the Silverlight application is the code-behind file of "App.axml". We will be modifying the default "App.xaml.cs" to let Silverlight load "Splash.axml" first and then switch to "MainPage.axml" after a short wait time, to achieve the splash effect.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SplashDemoApplication
{
public partial class App : Application
{
private Grid root;
public void Navigate(UserControl NewPage)
{
root.Children.Clear();
root.Children.Add(NewPage);
}
public App()
{
this.Startup += this.Application_Startup;
this.Exit += this.Application_Exit;
this.UnhandledException += this.Application_UnhandledException;
InitializeComponent();
}
private void Application_Startup(object sender, StartupEventArgs e)
{
root = new Grid();
root.Children.Add(new Splash());
this.RootVisual = root;
System.Threading.Thread Worker =
new System.Threading.Thread(
new System.Threading.ThreadStart(BackgroundWork));
Worker.Start();
}
private void BackgroundWork()
{
System.Threading.Thread.Sleep(2000);
Deployment.Current.Dispatcher.BeginInvoke(() => Navigate(new MainPage()));
}
}
}
In the above C# code, we added a private variable "root" of type "Grid", and a method "Navigate" in the "App" class. In the "Application_Startup" method, instead of directly adding the start up XAML page to the "RootVisual" like how Visual Studio created it for us by default, we first add it to the "root" Grid and then add the Grid to the "RootVisual". By doing this, we can navigate among different XAML pages simply by calling the "Navigate" method. Details about this navigation method can be found in "Navigating and passing values between XAML pages in Silverlight 2".
When the Silverlight application runs, "Splash.xaml" will be first loaded and shown in the browser. The application will then start a background thread to call the BackgroundWork method. In this demonstration project, I just let this thread sleep for a while and then call "Navigate" to load "MainPage.xaml" to achieve the splash screen effect.
Run the Application
Compile and run the application. We can see that the "Splash.xaml" page is first loaded and the application then switches to "MainPage.xaml" after the thread sleeping time. The splash effect is achieved.
Points of Interest
Besides the navigation method introduced by Nipun Tomar, there are two things of interest.
- Before the "
Application_Startup" method finishes, no visual component will be visible in Silverlight applications. We need to load "Splash.xaml" in "Application_Startup" in the application main thread and start a different thread to load "MainPage.xaml".
- In the thread to load "MainPage.xaml", I simply let it sleep to achieve the splash effect. In a real Silverlight application, we should take advantage of this time to do some real background work, such as initiating the WCF objects and loading some initial setup data, etc.
History
This is the first edition of this article.
