Introdución
En esta entrada pretendo demostrar como crear una pantalla de espera para la aplicación a la cual estamos accediendo.
En este caso demostraré esta funcionalidad con un control especial para tal efecto.
Contexto
Lo primero que debemos hacer es tener en cuenta los siguientes conceptos:
- ProgressBar (en inglés).
- BackgroundWorker (en inglés).
Utilizando el código
Primero, crearemos un proyecto Windows Phone y lo llamaremos: EjemploSplash.
Eliminaremos todo el código dentro la grilla (Grid) llamada LayoutRoot.
Procedemos a agregar una imagen a la grilla utilizando código XAML, la imagen de ejemplo es esta:
Escribiremos las siguientes líneas de código en XAML dentro del archivo MainPage.xaml:
<Image Stretch="Fill" Source="/EjemploSplash;component/smoked.jpg" />
Presionamos F5 y se mostrará el emulador con la imagen ajustada a la pantalla completa 
WOW!
Muy bien, ahora nos enfocaremos en tres pasos básicos para lograr el efecto deseado. El primer paso es mostrar un indicador que demuestra la ocupación de la aplicación cuando se realiza una acción.
Por lo tanto eliminamos el archivo SplashScreenImage.jpg y creamos un nuevo archivo de tipo UserContro que lo llamaremos SplashScreen.xaml.
El código contenido en el archivo se detalla a continuación:
<UserControl x:Class="EjemploSplash.SplashScreen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}">
<Grid x:Name="panelSplashScreen">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Agregamos un control ProgressBar.-->
<ProgressBar HorizontalAlignment="Left" Margin="47,692,0,89"
Name="progressBar1" Width="383" IsIndeterminate="True" />
</Grid>
</UserControl>
También debemos trabajar un poco en el código C# agregando las siguientes líneas de código:
using System;
using System.Windows.Controls;
using System.Windows.Media;
using Microsoft.Phone.Controls;
using System.Windows;
namespace EjemploSplash
{
public partial class SplashScreen : UserControl
{
public SplashScreen()
{
InitializeComponent();
// Cambiar el color de fondo utilizando el mismo que el tema del telefono (claro u oscuro).
this.panelSplashScreen.Background =
new SolidColorBrush((Color)new PhoneApplicationPage().Resources["PhoneBackgroundColor"]);
// Ajustar el código al ancho actual de la pantalla
this.progressBar1.Width = this.panelSplashScreen.Width =
Application.Current.Host.Content.ActualWidth;
}
}
}
Con este archivo finalizamos nuestra interface de espera que verán nuestros usuarios.
El segundo paso, consiste en utilizar una clase, bajo mi punto de vista es lo más importante, que se llama BackgroundWorker y básicamente permite realizar tareas en segundo plano.
¿Dónde realizaríamos esa tarea? – En el archivo App.xaml.cs, donde si observamos atentamente encontraremos el evento Application_Launching donde ingresaremos las siguientes líneas de código:
private void Application_Launching(object sender, LaunchingEventArgs e)
{
// Crear un popup, donde mostraremos el ProgressBar
Popup popup = new Popup();
// Crear un objeto del tipo SplashScreen.
SplashScreen splash = new SplashScreen();
popup.Child = splash;
popup.IsOpen = true;
// Crear un objeto de tipo BackgroundWorker y sus eventos.
BackgroundWorker bw = new BackgroundWorker();
bw.DoWork += (s, a) =>
{
//Este evento ocurre mientras la tarea está en ejecución.
Thread.Sleep(4000); //A little dummy delay for show the effect
};
bw.RunWorkerCompleted += (s, a) =>
{
//Este evento ocurre cuando la ejecución de una tarea ha terminado.
popup.IsOpen = false;
};
// Llamar a una función Async, que produce un retraso del progressBar.
// Luego, la imagen se mostrará
bw.RunWorkerAsync();
}
El tercer y último paso es ejecutar la aplicación presionando F5. Cuando la aplicación sea cargada veremos esta interfaz:
Y cuando finalice la ejecución en segundo plano veremos la aplicación (que contiene una simple imagen, en este caso):
Puntos de interés
Esta es una manera fácil y rápida de realizar pantalla de espera, pero existen muchas otras maneras. Pero en este caso he mostrado la más antigua de todas.
Christian Amado 