Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Centrer un splash screen personnalisé avec Silverlight

Silverlight... ma seconde passion avec LINQ... Faire de belles application sous SL est un plaisir, mais une belle application n'est terminée que lorsqu'elle dispose de son splash screen personnalisé. La "final touch" qui fait voir au monde que vous n'êtes pas du genre à vous contenter des comportements par défaut et que vous êtes un vrai développeur, un dur, un tatoué !

Je reviendrai dans un tutor sur la façon de créer un splash screen sous Silverlight [EDIT]voir l'article créer des splash screen sous Silverlight[/EDIT], ce n'est pas très compliqué mais il y a quelques étapes à bien comprendre. Partons du principe que vous avez déjà un beau splash screen. Donc une présentation sous la forme d'un fichier Xaml contenant la définition d'un Canvas avec plein de jolis choses dedans. C'est le format Silverlight 1.0 utilisé pour les splash screens.

Tout va bien, vous avez fait tout ce qu'il faut, mais quand vous lancez votre application le splash est affiché en haut à gauche ! Damned ! Alors on commence à bricoler. Certains vont tenter de fixer une taille plus grande au Canvas de base et de centrer les objets dedans. Pas glop! ça ne s'adapte que très mal à la largeur réelle du browser... D'autres vont plonger les mains dans JavaScript pour calculer dynamiquement la position du Canvas. Compliqué et fatiguant...

Je vais vous donner une astuce. Plus facile à mettre en oeuvre j'ai pas en stock. Le truc consiste simplement à englober votre Canvas dans une balise Grid sans paramètres !

Et oui, la Grid est utilisable dans un splash sous Silverlight 2. Voilà comment faire :

   1: <Grid>
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
   4:     >
   5:     <Canvas x:Name="MonSpash" ....... >
   6:     </Canvas>
   7:     </Grid>
   8: </Grid>

 C'est tout ! Votre splash, originellement dans le Canvas "MonSplash" (lignes 5 et 6) se trouve entourré par un Grid. Et le tour est joué, le splash apparait bien centré sur le browser quelle que soit ses dimensions.

Attention à un détail : Le fichier Xaml du splash est placé dans le l'application Web et non dans le projet Xap de Silverlight (normal sinon il serait chargé avec l'appli et ne pourrait plus servir de splash). Mais dans cette configuration Expression Blend ne reconnaît le fichier que comme un source Silverlight 1.0, du coup si vous voulez rouvrir le splash sous Blend ce dernier affiche une erreur, Grid étant du SL 2 et ne pouvant être root d'un fichier Xaml SL 1.0. Je vous recommande donc de placer le Grid une fois que vous aurez terminé la conception du splash sous Blend... Dans le pire des cas vous pouvez toujours supprimer la balise Grid, travailler sur le splash, et remettre la balise. C'est tellement simple que cela ne devrait vraiment pas gêner.

Pour voir un splash personnalisé centré, regardez l'application de démo : les Codes Postaux Français sous Silverlight. L'application a été mise à jour pour intégrer un splash.

 Et .. Splashhhh !

blog comments powered by Disqus