All Blog Posts

WP7 Insights #2: Creating a Splash Screen in WP7

This article is the second in a series which discusses some of the things that I learned while developing my first Windows Phone 7 application.

One thing I wanted to do in my WP7 app was to provide a nice splash screen that displayed for a couple of seconds before the main page displayed. I noticed that the application includes the image SplashScreenImage.jpg which I changed to be what I wanted, but this image did not display consistently. I found some helpful links about this issue that I used to craft my solution. Here they are: I modeled my solution after Allen Newton's with some minor tweaks. Here are my steps.
  • In my initial page, MainPage.xaml, I added a StackPanel which contains an Image tag to my SplashScreenImage.jpg.  Notice the visibility is set to "Visible"
<StackPanel Name="spSplashScreen" Visibility="Visible"> <Image x:Name="imageSplashScreen" Source="/MyApp;component/SplashScreenImage.jpg" Stretch="Fill" /> </StackPanel>

  • The remainder of my content on the page is included in a Pivot Control, called pivotMain. Its visibility is set to "Collapsed".
  • I included a DispatcherTimer control to set a specific time span to display the splash image.  I initialize this in the Loaded event of the page.  The timer is set with an interval of 3 seconds.
System.Windows.Threading.DispatcherTimer _splashTimer;   public MainPage() { InitializeComponent(); _splashTimer = new System.Windows.Threading.DispatcherTimer(); this.Loaded += new RoutedEventHandler(MainPage_Loaded); }   private void MainPage_Loaded(object sender, RoutedEventArgs e) { if (_splashTimer != null) { _splashTimer.Interval = new TimeSpan(0, 0, 3); _splashTimer.Tick += new EventHandler(_splashTimer_Tick); _splashTimer.Start(); } else { if (pivotMain.SelectedIndex == 0) { appbarMain.IsVisible = true; } } }

  • The code to handle the Tick event will hide the Splash image and display the Pivot control.  Notice that the I am setting the DispatcherTimer object = null so we don't launch the splash page again.
void _splashTimer_Tick(object sender, EventArgs e) { _splashTimer.Stop(); _splashTimer.Tick -= new EventHandler(_splashTimer_Tick); _splashTimer = null; spSplashScreen.Visibility = Visibility.Collapsed; pivotMain.Visibility = Visibility.Visible; }  

That's it!  For me this technique worked well with my Pivot app.  I hope that you find it helpful as well. Enjoy!