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 animation sont créées avec Blend. Il vous faut créer un storyboard pour chaque animation, modifier les propriétés nécessaire 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 un attente de 5 secondes.
A 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;
}Et voici un aperçu du résultat :
Vous trouverez la solution complète de cet exemple dans le lien ci-dessous. Vous pourrez lancer l’application pour avoir une idée plus précise du rendu que le gif précédent.
