Channels ▼
RSS

Tools

Developing a Silverlight UI for Windows Phone 7


Understanding the Code-Behind File for App.xaml and the Splash Screen

If you have some experience with Silverlight and C#, you will be familiar with App.xaml and its code-behind file, App.xaml.cs. The C# code adds some phone-specific initialization code. The App class provides easy access to the root frame with the public RootFrame property:


public PhoneApplicationFrame RootFrame { get; private set; }

PhoneApplicationFrame is MicrosoftPhone.Controls.PhoneApplicationFrame. App.xaml.cs uses the Microsoft.Phone.Controls and Microsoft.Phone.Shell namespaces. The App class constructor calls the IntializePhoneApplication method, which adds phone-specific initialization code that displays a splash screen. This code snippet shows the code for this method with the classic Silverlight initialization and the new phone-specific line:


public App()
{
// Global handler for uncaught exceptions.
// Note that exceptions thrown by ApplicationBarItem.Click
// will not get caught here.
UnhandledException += Application_UnhandledException;
// Standard Silverlight initialization
InitializeComponent();
// Phone-specific initialization
InitializePhoneApplication();
}

The following lines show the code for the InitializePhoneApplication and CompleteInitializePhoneApplication methods. The InitializePhoneApplication method creates the new frame and keeps the splash screen visible until the application is ready to render. The CompleteInitializePhoneApplication method sets the new frame as RootVisual because it is attached as the event handler for RootFrame.Navigated. Don't make changes to these methods.


private bool phoneApplicationInitialized = false;
// Do not add any additional code to this method
private void InitializePhoneApplication()
{
if (phoneApplicationInitialized)
return;
// Create the frame but don't set it as RootVisual yet;
// this allows the splash screen to remain active until the
// application is ready to render.
RootFrame = new PhoneApplicationFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;
// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;
// Ensure we don't initialize again
phoneApplicationInitialized = true;
}
// Do not add any additional code to this method
private void CompleteInitializePhoneApplication(object sender,
NavigationEventArgs e)
{
// Set the root visual to allow the application to render
if (RootVisual != RootFrame)
RootVisual = RootFrame;
// Remove this handler since it is no longer needed
RootFrame.Navigated -= CompleteInitializePhoneApplication;
}

While the application is loading, the emulator and the device will show a splash screen. This splash screen is a 480x800 pixel resolution bitmap, SplashScreenImage.jpg, with a 24-bit color depth and included in the project. You can replace this JPEG bitmap with your desired splash screen but you have to make sure that you use the same name, set its Build Action to Content and Copy to Output Directory to Do Not Copy. Figures 5 and 6 show the default splash screen and a customized version.

[Click image to view at full size]
Figure 5: The default bitmap SplashScreenImage.jpg with a 480 x 800 pixel resolution.

The splash screen bitmap must use the 24-bit color JPEG format to work properly. If you use a PNG file instead of a JPEG file, the splash screen won't be displayed. Remember that the user can rotate the device before designing the customized splash screen.

[Click image to view at full size]
Figure 6: A customized SplashScreenImage.jpg with a 480 x 800 pixel resolution.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video