How to Create Splash Screen with Progress Bar in Windows Phone 7

Idea behind implementation

The idea is to put a popup till the start page is ready.

1. Open a user control in popup
2. Cut Splash Screen image with dimension 800x460 from the popup
3. Make visible popup till the start page of the application is not ready

Create User Control

First, you need to create a UserControl for the Splash Screen with a Progress Bar. In the UserControl, let us put the below three controls in a Grid.

1. Image Control to display Image
2. TextBlock to display text
3. ProgressBar to display progress status.

I am putting the above controls in a Grid with proper margins to display them vertically. The XAML of UserControl is below,

<Grid x:Name="LayoutRoot" Height="800" Width="640">
        <Image Source="waitsymbol.jpg"
               Margin="0,0,0,0"
               VerticalAlignment="Top"
               Height="650"
               HorizontalAlignment="Left"
               Width="400"
               Stretch="Fill"/>
        <TextBlock
            Text="loading...."
            HorizontalAlignment="Left"
            Style="{StaticResource PhoneTextTitle2Style}"
            Margin="185,656,0,97"
             />
        <ProgressBar x:Name="SpalshScreenProgressbar"
                     Width="380" 
                     HorizontalAlignment="Left"
                     IsIndeterminate="True"
                     Margin="49,707,0,74" />    
      </Grid>

I have given the name of the UserControl as debugmodeSplashScreen

Opening UserControl in Popup

The below function will open a user control in a popup. You need to call the below function inside the constructor of the application start page.



Create Splash Screen Image from Popup

Make sure you are calling the function OpenUserControlPopup in the constructor of the application start page and then while running in emulator

1. Take a screen shot of popup in emulator
2. Paste screen shot in paint
3. By pressing Ctrl+W set width and height of the image as 480x800 Pixels.
4. Save the image with the name SplashScreenImage.jpg
5. Right click on the project and add existing item. Select above saved image [from step 4] and add in the project.

Calling Service and Downloading data on background thread

You need to make a call to the service and download data in a background thread. Once data is downloaded, set the popup visibility to false. Create a function to load data and instantiate a background thread in that.



In Do work you need to make a call to WCF service.



Till application is calling service and downloading data usercontrol in popup will be visible. Putting all the codes together, code behind for the application start page would be as below,

using System;
using Microsoft.Phone.Controls;
using System.Windows.Controls.Primitives;
using System.ComponentModel;
using System.Threading;
using PhoneApp1.ServiceReference1;

namespace PhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {

        private BackgroundWorker backroungWorker;
        Popup popup;
        public MainPage()
        {
            InitializeComponent();
            OpenUserControlInPopup();

        }
        private void OpenUserControlInPopup()
        {
            this.popup = new Popup();
            this.popup.Child = new debugmodeSplashScreen();
            this.popup.IsOpen = true;
            LoadData();

        }

        private void LoadData()
        {

            backroungWorker = new BackgroundWorker();
            backroungWorker.DoWork +=
                       new DoWorkEventHandler(backroungWorker_DoWork);
            backroungWorker.RunWorkerCompleted +=
                new RunWorkerCompletedEventHandler(backroungWorker_RunWorkerCompleted);
            backroungWorker.RunWorkerAsync();
        }

        void backroungWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
        {
            this.Dispatcher.BeginInvoke(() =>
            {
                this.popup.IsOpen = false;

            }
            );
        }

        void backroungWorker_DoWork(object sender, DoWorkEventArgs e)
        {
            // call service here .
            Service1Client proxy = new Service1Client();
            proxy.GetDataCompleted +=
                 new EventHandler<GetDataCompletedEventArgs>(proxy_GetDataCompleted);
            proxy.GetDataAsync(9);
            Thread.Sleep(8000);
        }

        void proxy_GetDataCompleted(object sender, GetDataCompletedEventArgs e)
        {
           //Service result return
        }
    }
}

On running you should get splash screen with progress bar as below,



This is what all you need to do have a slash screen with progress bar in your application. I hope this post is useful. Thanks for reading.