How to create animated splash screen using Custom application startup class In WPF

Application speaks your business. The application works fine – check, it does not crash when you pop some popcorns – check, it does show correct results and data – check, it cannot get anymore faster than this – check, does not keep showing “loading, please wait” message for next 100 years – check. Phew, finally your application is all good to go. But are we not forgetting something?

Presentation or the visuals plays an equally important role in success of any business solution / application. Condition – it is not some high end, supa dupa background processing application. :D. This presentation part can be different for each and every solutions coded out there. They may have glassy sprites and rich menus, some might be theme based. Some impress well using javascript or animation and so on. One of the Titanic times solution for desktop application to improve presentation quality is start-up splash screen.

Application splash screen can be very handy even to execute some important checks, initial loads or perform some start-up routine while the user is getting amazed by some “Avatar” animated splash screen window getting rendered on screen. Lately I started getting in touch with WPF (Dub Pee Eff, as I pronounce) for few RNDs and some side kick development fun. I decided to create a beautiful splash screen for this demo application I was trying my hands on using WPF.

Now you would poke me, saying “Hey Mr Smart, I won’t buy that. F.Y.I Microsoft does have built-in support for adding splash screen in WPF okay? Now end this wasted write up and Google it up”.

Well, I did already. Built-in splash screen support in WPF is actually making an image appear as splash screen when your application starts. You can do that by adding an image to your WPF project and from properties change its build action from resource or whatever to SplashScreen.  Yeah now you are surprised right? No it is not over yet, let me amaze you more. It do not support animated images or motion images like GIFs, you cannot add any animation to or over that image, cannot control anything related to that splash screen image via any XAML or code behinds and also cannot do this fun thing from Blend. Aye, stop pulling your hairs, where there is a Will (not smith), there is a way.

There are many work arounds to overcome the above limitation. I got myself stuck with one, where we can use a custom application start-up class and do the splash screen loading first and then start the normal loading of the application as it does in traditional way. This would give us limitless control on what we can do as splash screen on front and what we desire on the back. Now I goggled again and I came across a good but incomplete article which explained the way to do this.

I tried to create a demo as directed by the author and tried to run it. It did executed successfully. But as soon as I tried to add some splashy animation (storyboard), and some background work the application starts fumbling. The article was incomplete, as I say because it did not served the goal “completely”. Anyways, let us get hands dirty.

Fire – “devenv” (my style) >> Create a new “WPF Application” (I named it – CustomStartupSplashScreenDemo). Now as we all are familiar from the times of Windows forms application. There is a static Main method in every desktop application (includes console). There is always one and only one static Main method in an application and that is the main startup entry point of that application. A WPF application is not an exception. You won’t find a static entry point in a WPF application, because .NET creates it for you in your application. Navigate to folder – obj > x86 > Debug > TempPE > “App.g.cs”.

Now the first and foremost thing you need to change to create your custom splash screen is to take control of your main method. To do so, right click on the App.xaml and click on properties.

You will notice that “Build Action” is set to “ApplicationDefinition”. This setting actually commands .NET compiler to create that static main in your application. Change the “Build Action” of App.xaml to “Page”.

Next step would be adding a new class to your application “ApplicationStartup.cs”. Then add a static Main method to this class

[STAThreadAttribute()]

public static void Main()

{

}

The splash screen window will run on different thread so let us create an interface to talk to and fro with the SplashScreen window. Create an interface “ICustomSplashScreen” and define two method into that:

void AppLoadingPercentCompleted(int currentPercentage);

void AppLoadingCompleted();

you can add more methods to the interface as per your requirement.

Now add a new WPF window item to your project, which you would like to make your splash screen. Design it well adding proper storyboards, introductory text and flashy animation as you do for any normal WPF window. Splash screen name – “DemoSplashScreen”. I changes some UI setting to make it look more like a traditional splash screen – ShowInTaskbar (false), ResizeMode (NoResize), WindowStartupLocation (CenterScreen), WindowStyle (None) etc.  Implement “ICustomSplashScreen” to this above created window and add your custom logic to do crazy thing you wish too.

Below code show the content of “ApplicationStartup.cs”

In main method we have started a new thread that runs the application splash screen window by setting the manual reset event and calling dispatcher thread to run. Once we set the reset event we start the application passing the instance of DemoSplashScreen window so that we can control the same from the application App.xaml.cs to do background work while application is showing splash screen and close the same when required work is completed.

Below code show the content of “App.xaml.cs”

Following code is mostly self-explanatory. The only special thing we do here is to call appSplashScreen.AppLoadingCompleted() when the work is done. Then we call begin invoke on dispatcher before it stops, to start our application’s main window. There are few other ways to do so, but I prefer the simple one.

This code is from DemoSplashScreen.xaml.cs

Here the code I would talk about is Dispatcher.InvokeShudown which will terminate the splash screen window and its thread and return the control to the dispatcher thread where our App has started running. Also not forgot to mention the Dispatcher.Invoke to method where we can take to controls on the UI thread of DemoSplashScreen window in thread safe way.

Hope you find this demo useful in your future projects. Sample hosted on GitHub



Comments

  1. Thanks!