Click here to Skip to main content
Click here to Skip to main content
Go to top

A Simple Flexible Silverlight Splash Screen

, 15 Dec 2009
Rate this:
Please Sign up or sign in to vote.
This article shows a simple and flexible way of creating a Silverlight splash screen.

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

Solution Explorer

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.

Splash

MainPage

Points of Interest

Besides the navigation method introduced by Nipun Tomar, there are two things of interest.

  1. 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".
  2. 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dr. Song Li

United States United States
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberdelibey8-Nov-11 13:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 15 Dec 2009
Article Copyright 2009 by Dr. Song Li
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid