Dans un précédent article sur le design des applications Windows 8 Store, je vous parlais d’améliorer l’ouverture de votre application en étendant le splashscreen. Cela vous permet de faire patienter l’utilisateur pendant que vos données sont en train de charger. Il est nécessaire que lorsque vous arrivez sur la page d’accueil de votre appli, toutes les données soient déjà présentes.

Pour commencer, il vous faut ajouter une page à votre application. Une page vide fait très bien l’affaire, nommez-la par exemple ExtendedSplash. Dans le code behind de App. xaml overrider la méthode OnLaunched () pour appeler votre nouvelle page.

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
        ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
        Window.Current.Content = extendedSplash;
    }
    Window.Current.Activate();
}

Pour avoir une transition douce entre le splashscreen et la page d’accueil, une solution peut être de lancer une animation sur votre extension. Dans cet exemple, je vais ajouter 2 animations. Une première animation va décaler le logo du splashscreen vers la droite, la deuxième va faire apparaitre progressivement une image “hero” sur la gauche. Cette image est la même que l’image “hero” utilisée sur la page d’accueil, de type Hub. Ces 2 animations sont créées avec Blend. Il vous faut créer un storyboard pour chaque animation, modifier les propriétés nécessaires comme l’opacité ou la position. Par défaut, l’animation fera une transformation linéaire entre les valeurs de la propriété au départ et à l’arrivée.

Sur l’image ci-dessous, on peut voir la timeline du storyboard faisant apparaitre notre image. On part d’une opacité de 0% pour aller à une opacité maximale de 80%. Les différentes valeurs que prend la propriété sont matérialisées par les jalons dans la timeline.

Dans le code-behind de la page ExtendedSplash il faut maintenant lancer les animations et le chargement des données. Cela se fait depuis la méthode RestoreStateAsync.

async void RestoreStateAsync(bool loadState)
{
	if (loadState)
		await SuspensionManager.RestoreAsync();
	// Normally you should start the time consuming task asynchronously here and
	// dismiss the extended splash screen in the completed handler of that task            
	DismissExtendedSplashscreen();
}
async void DismissExtendedSplashscreen()
{
	Storyboard moveSplash = (Storyboard)this.Resources["MoveSplash"];
	Storyboard heroApparition = (Storyboard)this.Resources["HeroApparition"];
	//Launch animations
	Task anims = Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
	  {
		  moveSplash.Begin();
		  heroApparition.Begin();
	  }).AsTask();
	//Simulate data loading
	Task load = Task.Delay(TimeSpan.FromSeconds(5));
	//Waiting for all tasks to complete
	await Task.WhenAll(anims, load);
	// Navigate to mainpage
	rootFrame.Navigate(typeof(MainHubPage));
	// Place the frame in the current Window
	Window.Current.Content = rootFrame;
}

Ici le chargement des données est simulé par une attente de 5 secondes.

À l’instanciation de la page, il faut aussi positionner correctement notre logo au même emplacement que celui du splashscreen.

private SplashScreen splash; // Variable to hold the splash screen object.
public ExtendedSplash(SplashScreen splashscreen, bool loadState)
{
	InitializeComponent();
	// ...
	splash = splashscreen;
	if (splash != null)
	{
		// Register an event handler to be executed when the splash screen has been dismissed.
		splash.Dismissed += new TypedEventHandler(DismissedEventHandler);
		// Retrieve the window coordinates of the splash screen image.
		splashImageRect = splash.ImageLocation;
		PositionImage();
		PositionRing();
	}
	// ...
}
/// 
/// Position the extended splash screen image in the same location as the system splash screen image.
/// 
void PositionImage()
{
	extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
	extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
	extendedSplashImage.Height = splashImageRect.Height;
	extendedSplashImage.Width = splashImageRect.Width;
}