fignewtron was here

Tim Heuer posted a nice intro video about setting up a splash screen in Windows Phone 7 applications here.  There is another how-to on customizing a WP7 Splash Screen from Page Brooks here.  Tim made a minor suggestion in the video to enhance the splash experience.

NOTE: There is a splash image that you must create when using the April CTP phone tools.  It goes at the root of the project and it should be named SplashScreenImage.jpg.  It must be marked as Content in Properties/Build Action. 

Here's the issue.  When you run an application in the phone emulator from Visual Studio, it seems like it takes no time at all to show the splash and then transition to the first page in your app.  In fact, it's so fast that it doesn't look like a useful user experience.  Fast loading applications are the goal.  But if you want to increase the time manually for the splash, and therefore show off branding work for the app, there isn't an easy mechanism to do so.  Unless you use an obvious trick.

So I wrote a little test application to show my splash branding image over a greater period of time.  The basic idea is to navigate to a page that only shows my application SplashScreenImage.jpg.  There are a couple of nuances to be aware of.  When an application starts up the SplashScreenImage.jpg is displayed with a simple "page flip" animation.  Once the application loads, the first page will appear.  So I wanted to reuse the same image file for the first page because it would flow seamlessly from the default image.  There is an opportunity to add custom animations on your custom SplashPage.xaml.  So for a geeky example, you could run a spinner animation or do something like the Star Wars opening crawl.

Here are my setup steps:

    1. Add a new page to the application and give it an obvious name like SplashPage.xaml.
    2. Change the default start page of the application to SplashPage.xaml.
    3. In SplashPage.xaml, add an Image control as the child of the LayoutRoot Grid.
    3. Set the Source of the Image to "/{namespace};component/SplashScreenImage.jpg", where you replace the text "{namespace}" with the correct namespace of the project.
    4. In the code behind, Splash.xaml.cs, use a DispatcherTimer to wait for a specific TimeSpan.
    5. When the timer completes, navigate to MainPage.xaml or another starting page for the application.
    6. Manage what happens when navigating back to the SplashPage.xaml for back button clicks.

Here is the XAML for SplashPage.xaml:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Image
        x:Name="imageSplashScreen"
        Source="/{namespace};component/SplashScreenImage.jpg"
        Stretch="Fill" />
</Grid>

Here is the code for SplashPage.xaml.cs:

public partial class SplashPage : PhoneApplicationPage
{
    public SplashPage()
    {
        InitializeComponent();
        _splashTimer = new System.Windows.Threading.DispatcherTimer();
        this.Loaded += new RoutedEventHandler(SplashPage_Loaded);
    }
    System.Windows.Threading.DispatcherTimer _splashTimer;

    void SplashPage_Loaded(object sender, RoutedEventArgs e)
    {
        if (_splashTimer != null)
        {
            _splashTimer.Interval = new TimeSpan(0, 0, 2);
            _splashTimer.Tick += new EventHandler(_splashTimer_Tick);
            _splashTimer.Start();
        }
    }

    void _splashTimer_Tick(object sender, EventArgs e)
    {
        _splashTimer.Stop();
        _splashTimer.Tick -= new EventHandler(_splashTimer_Tick);
        _splashTimer = null;
        NavigationService.Navigate(new Uri("/{namespace};component/MainPage.xaml", UriKind.Relative));
    }
}

Prevent users navigating back to SplashPage.xaml using the following code in MainPage.xaml.cs:

     protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
    {
        e.Cancel = true;
    }