Idea behind implementation

To create SplashScreen with ProgressBar idea is to put a popup visible till start page is ready.

• Open user control in popup
• Cut Splash Screen image with dimension 800×460 from the popup
• Make visible popup till start page of the application is not ready

Create User Control

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

• Image Control to display Image
• TextBlock to display text
• ProgressBar to display progress status.

I am putting above controls in Grid with proper margin to display them vertically. XAML of UserControl is as 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 name of UserControl as debugmodeSplashScreen

Opening UserControl in Popup

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

Create Splash Screen Image from Popup

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

• Take screen shot of popup in emulator
• Paste screen shot in paint
• By pressing Ctrl+W set width and height of the image as 480×800 Pixels.
• Save image with the name SplashScreenImage.jpg
• 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 call to service and download data in back ground thread. Once data is downloaded make 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.

Follow @debug_mode

If you find my posts useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of my blog http://www.facebook.com/DebugMode.Net If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.