Windows Phone 8 : Page Navigation - Creating an Application Splash Screen

Windows Phone App projects have baked-in support for application splash screens. To create a splash screen it is simply a matter of placing a JPG image called SplashScreenImage.jpg, with the dimensions of 480 by 800 pixels, in the root directory of your project. Ensure that its Build Action is set to Content (see Figure 1).

FIGURE 1 Creating an application splash screen.

Using an image for a splash screen does not, however, prevent an application from being closed by the OS if the first page takes longer than 10 seconds to load. If your application’s first page takes longer than this to load, it is best to overlay the content with a loading indicator and perform the time consuming initialization on a background thread. After loading is complete, the indicator can be dismissed.

The ProductsView and ProductsViewModel classes, located in the Navigation directory of the WPUnleashed. Examples project in the downloadable sample code, demonstrate this principle (see Figure 2).

FIGURE 2 A custom loading screen.

The ProductsView page uses a StackPanel to present an indeterminate progress bar to the user while the viewmodel is loading, as shown in the following excerpt:

<StackPanel Grid.Row="1"
            Visibility="{Binding Loaded,
            Converter={StaticResource BooleanToVisibilityConverter},
            ConverterParameter=Collapsed}"
            Height="150" >
    <TextBlock Text="Loading..." Style="{StaticResource PhoneTextTitle2Style}"
            HorizontalAlignment="Center" Margin="20"/>
    <ProgressBar IsIndeterminate="True" />
</StackPanel>

The Visibility property of the StackPanel is assigned via a binding to the viewmodel’s Loaded property. To convert the boolean Loaded property to a Visibility type, a custom IValueConverter called BooleanToVisibilityConverter is used (see Listing 1). The class is located in the ValueConverters directory of the WPUnleashed project, in the downloadable sample code.

LISTING 1. BooleanToVisibility Class

public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        string paramValue = (string)parameter;

        if (value == null || (bool)value)
        {
            return paramValue == "Collapsed"
                ? Visibility.Collapsed : Visibility.Visible;
        }

        return paramValue == "Collapsed"
            ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        string paramValue = (string)parameter;
        if (value == null || (Visibility)value == Visibility.Visible)
        {
            return paramValue != "Collapsed";
        }

        return paramValue == "Collapsed";
    }
}

The ConverterParameter attribute determines what value to assign to the Visibility property if the binding value is true. If the Loaded property of the viewmodel is true, then the Visibility property will set to Visibility.Visible.

To hide the rest of the content during loading, the same technique is employed for the main content control.

<StackPanel Grid.Row="1" Margin="10"
                Visibility="{Binding Loaded,
                    Converter={StaticResource BooleanToVisibilityConverter},
                    ConverterParameter=Visible}">
    <ScrollViewer>
        <!-- Content omitted. -->
        <ScrollViewer>
</StackPanel>

Here the ConverterParameter attribute is set to Visible, so that its Visibility is set to Visible when the viewmodel’s Loaded property is true and Collapsed when it is false.