Silverlight On Mobile : Windows Phone 7 Splash Screen and Customization

After talking about 3D capabilities on Windows Phone 7 using Silverlight in last article, Now I am moving ahead with small but equally important part of development. I am going to talk in short about Splash Screen of your application and how you can customize it depending on your business scenario.

Whenever you start with new project of Windows Phone 7, By default you will get on default splash screen as JPEG format titled as “SplashScreenImage”.This is a 10KB file,Default size of this Image is 480x800 and it is always recommended to keep the same even while you customize it.It loads once your application starts.If you have not seen it before, Here how it looks like :

Now we will see how we can make it more useful and good looking. In Ideal Scenario, This will be either your company logo or some product logo with some picture and text. (Loading.. Image and Progress Bar? Hold on…I am leaving that experiment to you).

Here today I am assuming a Application based on Indian Film Industry (Bollywood), You can take any case studay for your trial. The way we are going to this is important that content.So our job is make default splash screen look more nice like this :

So lets start !

Step 1 : Choose Editor to edit SplashScreenImage

This is initial important and easy step. All you have to do is just right click on SplashScreenImage and select “Open With…”, You will get Default dialog box where you will find list of editors, If you find that Editor you looking for is not there then you can add it as well,I added Expression Design 4 like this :

Step 2 : Edit in Microsoft Expression Design 4

Once you open Image in Expression Design 4 then you can edit it like this :

Remember one thing, Image has to be in JPEG format which is by default and also size aspect should be maintained 480x800 for ideal results.The advantage of Expression Design 4 is that it allows you to add effects and export image in whatever format you like.

I understand the above Image of Model is stunning ! ..So how about make it more jazzy by adding some more effects?

Step 3 : Adding Effects using Expression Design 4

Check the Effects Tab on right hand side and start applying some effects like this :

After applying effects you can see the change in Plain Image and Image with Effects like this :

Before :After :

Step 4: Export Image as JPEG and save as “SplashScreenImage”

After adding effects as per your requirement and choice,Next step is to save our work in Expression Designer 4 and hit back to Visual Studio. Export option you can find in Context Menu as well as in File Menu. Make sure while saving Image that Format and Size are as per predefined standards.

Step 5 : Execute and Enjoy your Splash Screen !

While doing this POC, My friend saw this stuff I am doing and he asked me how one can add some Text over it and apply effects to that as well instead of just Raw Image or Image effects. Well the solution for this problem is same ! Follow same steps and take help of Expression Design 4, So something similar like this :

Again Export this Image so finally it will look like this :

So, Your Splash Screen is Ready !.. I am seriously looking ahead for some exciting splash screens from you people since I am not expert Designer. So buzz me back with your designs.I will surely post it here with giving you full credits and it will be great collection as well.

Though my splash screen is Jazzy ! I Hope you understand the real life application of it and the business value it carries, Remember ! Splash Screen is your first impression of application. So be careful about it and do it very seriously.

On more serious note. While making splash screen jazzy like this, Make sure it does not becomes a Heavy Image and trouble for your end users and customers.

Note that I am using Microsoft Expression Design 4 because I find it simple, However you can do this using other editors and put some transparent layer of PNG image on this and do layer as well. You need to figure out smart and better way,I just shown the way to do it !

In coming post we will now focus into other areas related to UI and then we will go to controls and navigation then followed by Data and Line of Business applications. So expect lot of stuff here and keep visiting for more !

Vikram.