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!

Related Links:


This entry was posted in Silverlight - Technical. Bookmark the permalink.

One Response to WP7 Insights #2: Creating a Splash Screen in WP7

  1. Foge says:

    This article achieved exactly what I watend it to achieve.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">