DOT NET TRICKS: Creating Animated Splash screen in Windows Phone 7

Creating a beautiful splash screen is always great to see for any application. Windows Phone 7 being no exception to it, you want to give the user great look and feel while loading the application using your Splash Screens. In this article, I am going to spend some time by talking about some of the probable options that you have to create your own Splash Screen for your windows phone 7 application.

What is Splash Screen?

Splash screen is the first screen that comes as an introduction to the application before the application gets on executing. During the application loads up into memory there are lot of things happen in background. The process is created in memory, memory blocks are allocated, Virtualized File System gets initialized etc. During these phase of loading the application, the application hung up and the user sees the black screen. If this wait becomes too long, the user gets frustrated and might stop using the application as well. The Mobile Marketplace also puts a threshold of 10 seconds in which your application must load, otherwise your application will be rejected from App Store. During this phase, if you show some nice little splash screen to the user without hampering the normal loading of the application, the user will feel much more comfortable with your application.

In this post I will demonstrate how you can create / use splash screen for your windows Phone 7 application and the different approaches available to you for this.

Basically there are two options available before you which will allow you to show your customized splash screen :

1. Using static splash screen image :

The visual studio template for Windows Phone 7 provides an image in the solution which represents a default splash screen for every application as shown in the figure.

The splashScreenImage is by default made Build Action to Content, to ensure that the deployment puts the image with it. If you want to modify the image you can easily open it and change the image of your wish. But remember, the name of the image should be splashscreenimage.jpg (remember naming is essential) and the BuildAction should be made as content.

Now there are strict measurement rules for that image that you use, its 480 x 800.

2. Using trick for animated splash:

Hey, as you can see it is not actually a comprehensive splash screen for your application, and yes, the boring splashscreenimage does not animate, so you should be thinking how to make more responsive splash screen for your application.Here is an easy tip for you to make your splash screen animate. Lets create it step by step :

Create a new UserControl and name it CustomSplashScreen.xaml
Change the DesignHeight and DesignWidth to 800 and 480 respectively to ensure you eat up the whole screen of your windows Phone 7 application.

Write your own XAML that you want to show up to the user in splash screen. Ideally, I like to design my splash screen in 3 section. The Topmost part will show some texture or an image, the middle part shows the Messages, and the bottom part will show a progress bar as in the image below :

The XAML will look like :

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="600" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Image Source="/SplashSample;component/Spimage.jpg"
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Stretch="UniformToFill" />
    <TextBlock Text="{Binding LoadingMessage}" 
                Grid.Row="1" HorizontalAlignment="Center"/>
    <ProgressBar IsIndeterminate="True" Grid.Row="2" VerticalAlignment="Top" />
</Grid>

Once your popup is ready, open it from your main screen.

The steps should be very simple to follow. You need to use Popup control which could be opened over a Page and show up the actual Splash Screen. Lets take the help of Async CTP that is just released to make it much more simple :

// Constructor
public MainPage()
{
    InitializeComponent();

    Utils.ShowPopup();

    // Do your Data loading
    this.StartLoadingData();
}

public async void StartLoadingData()
{
    Utils.UpdateMessage("Loading Modules");
    await TaskEx.Delay(2000);

    Utils.UpdateMessage("Connecting DataBase");
    await TaskEx.Delay(2000);

    Utils.UpdateMessage("Creating UserProfile");
    await TaskEx.Delay(2000);

    Utils.HidePopup();
}

If you do not know about new Async CTP release, you can try out my article on that. Otherwise, if you do not want to use the release, you can use a new Thread to load the Data and use Dispatcher to update the messages.

My Utils looks like :

public class Utils
{
    public static CustomSplashScreen SplashPopup { get; set; }
    public static Popup CurrentPopup { get; set; }
    public static void ShowPopup()
    {
        Utils.SplashPopup = Utils.SplashPopup ?? new CustomSplashScreen();

        if (Utils.CurrentPopup == null)
        {
            Utils.CurrentPopup = new Popup();
            Utils.CurrentPopup.Child = Utils.SplashPopup;
        }

        Utils.CurrentPopup.IsOpen = true;

    }

    public static void HidePopup()
    {
        if (Utils.CurrentPopup != null)
            Utils.CurrentPopup.IsOpen = false;
    }

    public static void UpdateMessage(string message)
    {
        if (Utils.SplashPopup != null)
        {
            Utils.SplashPopup.UpdateMessage(message);
        }
    }
}

The code looks very simple. I am just creating a new object of Popup and use my UserControl that I have created as its child. And finally show up the popup. I must admit, I borrowed the concept from Alex, but with Async CTP, I tried to make more effective.

I hope this post will help you creating your popup. I have been using Async CTP in the sample to make it simplier.

Download Sample Application - 539KB

Thank you for reading.