All about Splash Screens in WP7 – Creating animated Splash Screen

published on: 3/11/2011 | Views: N/A | Tags: Animation

by WindowsPhoneGeek

In this article I am going to talk about Splash Screen in Windows Phone 7. Generally when developing a WP7 application you can :

• Use an Image as a Splash Screen
• Use animated Splash Screen
• Use no Splash Screen

By default  when starting a Windows Phone 7 application takes a little time to show the app form. That is why it is a good practice to show your own custom splash screen.

Use a static Image as Splash Screen

By default when creating a Windows Phone 7 application project it generate a default SplashScreenImage.jpg image:

In order to add a custom splash screen to you WP7 Application the easiest way is just to replace the existing image with a new one. You can just follow the steps:

1). Add an Image file to your project and name it SplashScreenImage.jpg (NOTE: The name is important!)

2). The Image size  have to be width : 480px,  Height 800px : (480 x 800).

3) Set the Image Build Action  to Content

 

NOTE:  In order to see the splash screen on the emulator your graphics cards need to be WDDM 1.1 or higher.

 

Creating an animated Splash Screen

To begin with at first I need to mention that you can use a BackgroundWorker to Sleep the thread for the time you want. Basically the BackgroundWorker is class enables you to run an operation on a separate background thread while leaving the UI thread available. In WP7's rendering thread, this becomes useful in case you want a responsive user interface. You can listen for events that report the progress of your operation and signal when your operation is completed. To start the background operation, call the RunWorkerAsync method.

NOTE: You must be careful not to manipulate any user-interface objects in your DoWork event handler. Instead, communicate to the user interface through the ProgressChanged and RunWorkerCompleted events.

NOTE: For more information you can take a look at the MSDN Documentation of the BackgroundWorker class.

Now lets start with the real implementation of the animated splash screen. You can follow the steps:

1.) Create a Windows Phone 7 application project

2.) Add new UserControl to the project called AnimatedSplashScreen.xaml

3.) Include the following namespaces in MainPage.xaml.cs:

using System.Threading;
using System.Windows.Controls.Primitives;

3.). Add the following code into MainPage.xaml.cs:

Note that in order to show the splash screen we will add a Popup that will appear as soon as the MainPage is loaded. We will  run the BackgroundWorker in the constructor as well. When RunWorkerCompleted  the popup will be closed, so the MainPage will become visible. So here is how our Splash Screen functionality works

• At  first a Popup appears with the Splash Screen into it
• Then We launched a background thread that does some work (Thread.Sleep(5000); ).
• When the RunWorkerCompleted , our popup that's covering the home screen is closed (myPopup.IsOpen = false).
• You will then see your MainPage.xaml screen.

public partial class MainPage : PhoneApplicationPage
{
    BackgroundWorker backroungWorker;
    Popup myPopup;
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        myPopup = new Popup() { IsOpen = true, Child = new AnimatedSplashScreen() };
        backroungWorker = new BackgroundWorker();
        RunBackgroundWorker();

    }

    private void RunBackgroundWorker()
    {
        backroungWorker.DoWork += ((s, args) =>
        {
            Thread.Sleep(5000); 
        });

        backroungWorker.RunWorkerCompleted += ((s, args) =>
        {
            this.Dispatcher.BeginInvoke(() =>
            {
                this.myPopup.IsOpen = false;
            }
        );
        });
        backroungWorker.RunWorkerAsync();
    }
}

4.) Go back to AnimatedSplashScreen.xaml.

Here we will add some more element to our splash screen : TextBlock, Image and a PerformanceProgressBar.

<StackPanel x:Name="LayoutRoot" Background="Black" Height="800" Width="480">
<TextBlock Text="WindowsPhoneGeek Sample Splash Screen" x:Name="text" Foreground="Green" FontSize="65" TextWrapping="Wrap" Margin="0,20,0,0"/>
<Image Source="logo.png" x:Name="logoImage" Stretch="None" Margin="0,0,0,50">
    <Image.Projection>
        <PlaneProjection/>
    </Image.Projection>
</Image>
<toolkit:PerformanceProgressBar IsIndeterminate="True" Foreground="Green"/>
</StackPanel>

NOTE: Form more information about the PerformanceProgressBar from the Silverlight for WP7 Toolkit take a look at our in depth article:WP7 PerformanceProgressBar in depth.

NOTE: Do not forget to set any Background, Height and Width to the LayoutRoot or the UserControl otherwise your control will be transparent and the main page will be visible!

The next step is add a more complex animation with Perspective. We will animate the Image element using some kind of flipping animation that is why we will need to add  PlaneProjection to the Image element. In order to have a  flipping effect around the X axis all we need t o do is just to change the rotation angel to 360 and make sure that CernerofRotationX and CenterofRotationY are set to 0.5 (this is the default value you do not need to change anything).  We will also animate the Foreground color of the TextBlock.

Here is how the animation should looks like:

<UserControl.Resources>
    <Storyboard x:Key="flippingAnimation" >
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="logoImage">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="360"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="text">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="White"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="Green"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

An finally we have to start the animation in the constructor of our UserControl:

public AnimatedSplashScreen()
{
    InitializeComponent();
    Storyboard flippingAnimation = this.Resources["flippingAnimation"] as Storyboard;
    flippingAnimation.Begin();
}

5.) Build and run the project. The final result should be:

 

Use no Splash Screen

If you do not want your app to have any splash screen just remove the file SplashScreenImage.jpg from your project.

What not to do when implementing Splash Screen

You are probably asking yourself why do not we simply create a new Page and set it as a startup page in the WMAppManifest.xml? Well, splash screen is never on the backstack so the user can never return to it.  That is why using s start up page for splash screen is definitely not the best approach (you will  need to handle the Navigation on your own).

For things like the splash screen or other transient UI, the Silverlight Popup control is a great solution for showing content that (partially) covers the screen without doing a full navigation.

NOTE: Peter Torr has a really cool post where he explains the concept of "Places" in WP7: Introducing the concept of "Places". According to this Places concept, Transient UI like Splash Screen, Login Window, etc. are not Windows Phone Pages!

NOTE: You can also use the Codinf4Fun ProgressOverlay control : WP7 ProgressOverlay control in depth: features and customization

That was all about the Splash Screens in Windows Phone 7 in depth.  You can find the full source code here:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'All about Splash Screens in WP7 – Creating animated Splash Screen'

Title Your Name

Comment