Custom splash screen for windows store app

Visual Studio 2012 provides various templates for developing windows store app (WinRT apps) such as Blank App, Grid App & Split App. All of these templates allows displaying a splash screen which is nothing but a static image. Sometimes that will not be the ideal solution so why not design a custom splash screen which shows some progress. So this is how it looks


Now lets look at the mechanics of this can be done. First create an windows store app by using any of the default templates. Add a new "Blank Page" to you application. Add a grid (with darkgray background) and progressring as shown below :

In this sample I would like to initialize some data before actually displaying main page and also would like to show user what's being done during initialization such as:

Connecting to database ....
Populating data ....
Initialisation Completed.

So I have used DispatcherTimer. look at the code below:-

 public sealed partial class LoadingSplashScreen : Page
    {
        internal bool dismissed = false; // Variable to track splash screen dismissal status.
        private SplashScreen splash;
        internal Frame rootFrame;

        public LoadingSplashScreen(SplashScreen splashscreen, bool loadState)
        {
            this.InitializeComponent();
            lblProgress.Text = "Loading ....";
            if (splash != null)
            {
                // Register an event handler to be executed when the splash screen has been dismissed.
                splash.Dismissed += new TypedEventHandler(DismissedEventHandler);
            }
            rootFrame = new Frame();
        }

        // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
        void DismissedEventHandler(SplashScreen sender, object e)
        {
            dismissed = true;

            // Navigate away from the app's extended splash screen after completing setup operations here...
            // This sample navigates away from the extended splash screen when the "Learn More" button is clicked.
        }

        DispatcherTimer dispatcherTimer;
        int timesTicked = 1;

        public void DispatcherTimerSetup()
        {
            dispatcherTimer = new DispatcherTimer();
            dispatcherTimer.Tick += dispatcherTimer_Tick;
            dispatcherTimer.Interval = new TimeSpan(0, 0, 1);
            dispatcherTimer.Start();
            //IsEnabled should now be true after calling start
            lblProgress.Text = "Connecting to database ....";
        }

        void dispatcherTimer_Tick(object sender, object e)
        {
            DateTimeOffset time = DateTimeOffset.Now;
            timesTicked++;
            if (timesTicked == 2)
            {
                lblProgress.Text = "Populating data ....";
            }

            if (timesTicked == 4)
            {
                lblProgress.Text = "Initialisation Completed";
                dispatcherTimer.Stop();                               
                rootFrame.Navigate(typeof(ItemsPage), "AllGroups");
                // Place the frame in the current Window 
                Window.Current.Content = rootFrame;
            }
        }

        void LoadingSplashScreen_Loaded(object sender, RoutedEventArgs e)
        {
            DispatcherTimerSetup();
        }

        /// 

        /// Invoked when this page is about to be displayed in a Frame.
        /// 
        /// Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {

        }
    }

So far we have designed and coded custom splash screen. Now here are the steps that will show this custom splash screen

1. create a new image with the color filled with darkgray and save it to assets folder as "splashscreen2.png"

2. using "Package.appxmanifest" assign splash screen properties as

background : darkGray
image : assests\splashscreen2.png

3. Edit code-behind for App.xaml as follows:

 protected override async void OnLaunched(LaunchActivatedEventArgs args)
        {
            Frame rootFrame = Window.Current.Content as Frame; 
if (args.PreviousExecutionState != ApplicationExecutionState.Running)
            {
                bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
                LoadingSplashScreen loadingSplashScreen = new LoadingSplashScreen(args.SplashScreen, loadState);
                Window.Current.Content = loadingSplashScreen;
            }

            // Ensure the current window is active
            Window.Current.Activate();
        }

All done.
Technology is just a tool. In terms of getting the kids working together and motivating them, the teacher is the most important. - Bill Gates

Continue Reading