Click here to Skip to main content
Click here to Skip to main content

Splash Screen using ProgressBar on Windows Phone

By , 9 Jul 2012
Rate this:
Please Sign up or sign in to vote.

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 Wink 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.

License

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

About the Author

Christian Amado
Software Developer
Paraguay Paraguay
Christian Amado is a professional software engineer, pro developer and trainer with over 12 years of experience building application for Windows Desktop and the Web. Located in Asuncion, Paraguay, He is well involved in many Microsoft's technologies including XAML, C#, WCF, ADO.NET and ASP.NET.
 
Christian is quick to embrace new development technologies and has won some awards in programming competitions organized by communities. He has been the only paraguayan who participated in the beta program of Windows Phone 8, and is a member of the Microsoft User Group Paraguay. He is also involved in the Microsoft Student Partner program helping nominees students and is the Group Leader in the only Windows Phone Developers Group in Paraguay.
 
He holds a several Microsoft certifications including Microsoft Certified Professional Developer (MCPD), Microsoft Certified IT Professional, Microsoft Certified Technology Specialist and Microsoft Office Specialist.
Follow on   Twitter

Comments and Discussions

 
QuestionWhere is the control / source ? PinmemberWrangly6-Jan-14 20:51 
SuggestionHeight suggestion PinmemberJoe Angry28-Jun-13 23:49 
GeneralMy vote of 5 PinmemberDulce Barrios5-Sep-12 16:26 

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
Web01 | 2.8.140415.2 | Last Updated 9 Jul 2012
Article Copyright 2012 by Christian Amado
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid