Splash Screen using ProgressBar on Windows Phone

Introduction

On this brief tutorial I want to demonstrate How you can change the splash screen of a Windows Phone Application that you are accessing to. In this case I would like to demonstrate this functionality with a special purpose control.

Using the code

The first thing that you should do is download the control (or buy it, if you still did not) from here.

First, you create a Windows Phone project (Windows Phone Application) and name it: EjemploSplash.

When we created the example we have in the following way:

Remove the entire contents of the grid (Grid) named LayoutRoot.

We proceed to add a picture to the grid by using the XAML code, an image previously added to the project by using Solution Explorer. The image of the example is:

Write the following line in the XAML code in the MainPage.xaml file:

<Image Stretch="Fill"  Source="/EjemploSplash;component/smoked.jpg" /> 

We pressed F5 and our emulator shows us the image filling the screen WOW!

Now we are focused into three basic steps to achieve the desired effect. The first one which is to show an arrow indicating that there is a "delay" when performing any action.

The first step is to delete the SplashScreenImage.jpg file and create a new file of type UserControl by calling it SplashScreen.xaml.

The code contained in the file is as follows below: 

<UserControl x:Class="EjemploSplash.SplashScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    >
 
    <Grid x:Name="panelSplashScreen">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
 
        <!-- Add the ProgressBar control.-->
        <ProgressBar HorizontalAlignment="Left" Margin="47,692,0,89" 
           Name="progressBar1" Width="383" IsIndeterminate="True"  />
    </Grid>
</UserControl>

We must also work in the C# code and could place something like this:

using System;
using System.Windows.Controls;
using System.Windows.Media;
using Microsoft.Phone.Controls;
using System.Windows;
 
namespace EjemploSplash
{
    public partial class SplashScreen : UserControl
    {
        public SplashScreen()
        {
            InitializeComponent();
 
            // Change the background code using the same that the phone's theme (light or dark).
            this.panelSplashScreen.Background = 
              new SolidColorBrush((Color)new PhoneApplicationPage().Resources["PhoneBackgroundColor"]);
 
            // Adjust the code to the width of the actual screen
            this.progressBar1.Width = this.panelSplashScreen.Width = 
              Application.Current.Host.Content.ActualWidth;
        }
    }
}

With this file we have finished our interface to the famous stage of the loading emulation.

The second step is to use a class, which for me is very important, is called BackgroundWorker and basically allows you to perform tasks in the background.

Where we do this task in the background? In the App.xaml.cs file, if we carefully review we will find the event Application_Launching where we'll enter the following code:

private void Application_Launching(object sender, LaunchingEventArgs e)
{
    // Create a popup, where we'll show the ProgressBar
    Popup popup = new Popup();
    // Create an object of type SplashScreen.
    SplashScreen splash = new SplashScreen();
    popup.Child = splash;
    popup.IsOpen = true;
    // Create an object of type BackgroundWorker and its events.
    BackgroundWorker bw = new BackgroundWorker();
    bw.DoWork += (s, a) =>
    {
        //This event occurs while the task is executing.
        Thread.Sleep(4000); //A little dummy delay for show the effect
    };
    bw.RunWorkerCompleted += (s, a) =>
    {
        //This event occurs when the execution of the task has terminated.
        popup.IsOpen = false;
    };
    // Call to the Async Function, that produce the delay of the progress bar.
    // After that the pictured "Smoked by Windows Phone shown"
    bw.RunWorkerAsync(); 
}

The third and final step is to run the test application by pressing F5. When the application is being loaded we will have this user interface:

And when you are finished running the task in the background we see this interface (corresponding to the test application):

I hope this little tutorial can be very important to show the user a process being carried out either on the phone or any development project useful them.

Points of Interest

This is an interesting way to do splash screen, there are many ways to do it. But I try to demonstrate the easiest way to apply splash screen and BackgroundWorker.

Hope it helps.

History

• 08/Jul/2012 - Article submitted.