Windows Phone | SplashScreen personalizada con barra de progreso (ProgressBar)

Escenario

Como ya comenté en mi anterior artículo sobre cómo establecer la SplashScreen en una App de Windows Phone, ésta no deja de ser una imagen que debemos personalizar que indica al usuario que la aplicación se está abriendo pero, ¿qué ocurre si nuestra aplicación carga demasiados datos al inicio y necesitamos establecer una SplashScreen personalizada para poder indicar al usuario que la carga está en proceso?

Solución

Lo que vamos a hacer es aprovechar el control Popup de Silverlight para mostrarlo sobre la vista principal de la aplicación mientras se realiza la carga de los datos necesarios. Este Popup contendrá como “background” la imagen de la SplashScreen y, además, un texto de carga y la barra de progreso (ProgressBar) que serán los que indiquen al usuario que se está realizando la carga de datos.

Paso 1

Crear un Control de Usuario que llamaremos ExtendedSplashScreenControl al que le quitaremos las dimensiones predefinidas de diseño

Quitar:

   1: d:DesignHeight="480" d:DesignWidth="480"

Al Grid principal del Control de Usuario le pondremos como Imagen de fondo la SplashScreen de la aplicación y, dentro del Grid, añadimos un TextBlock y la Barra de progreso de forma que quede así:

   1: <UserControl x:Class="ExtendedSplashScreen.Controls.ExtendedSplashScreenControl"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:     mc:Ignorable="d"

   7:     FontFamily="{StaticResource PhoneFontFamilyNormal}"

   8:     FontSize="{StaticResource PhoneFontSizeNormal}"

   9:     Foreground="{StaticResource PhoneForegroundBrush}">

  10:     

  11:     <Grid x:Name="LayoutRoot" Width="480" Height="800">

  12:         <Grid.Background>

  13:             <ImageBrush Stretch="Fill" ImageSource="/SplashScreenImage.jpg"/>

  14:         </Grid.Background>

  15:         <Image Name="image1" 

  16:                    Stretch="Fill" 

  17:                    Source="SplashScreenImage.jpg" />

  18:         <StackPanel VerticalAlignment="Center" Margin="0,280,0,0">

  19:             <ProgressBar Name="progressBar1" BorderThickness="0" Margin="0,0,0,10" Background="#19FFFFFF" IsIndeterminate="True"/>

  20:  

  21:             <TextBlock HorizontalAlignment="Center" 

  22:                        Name="textBlock1" Text="Cargando datos..." 

  23:                        Foreground="Black" 

  24:                        FontSize="22" />

  25:         </StackPanel>

  26:     </Grid>

  27: </UserControl>

Paso 2

En el constructor de la vista principal MainPage.xaml.cs vamos a añadir la apertura del Control de usuario que acabamos de crear. Esto lo podemos hacer instanciando el Popup en una propiedad de la vista principal, asociándole el Control de usuario e indicando que se encuentra abierto.

   1: this.popup = new Popup(); 

   2: this.popup.Child = new ExtendedSplashScreenControl(); 

   3: this.popup.IsOpen = true; 

   4:  

   5: //Start Loading Data here

   6: ...

Paso 3

El proceso de carga de datos debería ser una tarea asíncrona por medio del uso de async/await en Windows Phone 8 o mediante BackgroundWorker o Manejadores de eventos en Windows Phone 7. En este caso, el ejemplo lo realizaré con async/await, por lo que creo un método asíncrono que tenga un tiempo de retardo de 5000 ms para que podamos apreciar el efecto y, tras este tiempo, simplemente se modifica la propiedad IsOpen del Popup a false para que se cierre.

   1: private async void LoadAsyncData()

   2: {

   3:     await Task.Delay(5000);

   4:     this.popup.IsOpen = false;

   5: }

Resultado

A tener en cuenta

Es necesario que tengáis en cuenta que el ejemplo lo he hecho para la resolución de 480×800, con lo que habrá que hacer modificaciones para que funcione con todas las resoluciones, pero para eso habrá otro artículo ;o)

Descarga de código

Si quieres descargar el código de ejemplo, puedes hacerlo desde este enlace