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 !


Tags: , , , Categories: Astuce | Silverlight

Wed 03 Jun 2009 04:31 4 Comments
Actions: E-mail | Permalink | Comment RSSRSS comment feed

Comments

July 20. 2010 11:57

Nk54

Tu as une faute ligne 1 : tu fermes la balise Grid :p

C'est la manière que j'utilise. Je pensais qu'il y avait moyen de centrer via les balises param de l'objet conteneur de l'appli SL ^^

Nk54

July 20. 2010 14:19

Nk54

//Pour ceux qui veulent faire du copier coller :

<Grid  xmlns="schemas.microsoft.com/.../presentation"
  xmlns:x="schemas.microsoft.com/winfx/2006/xaml">

<Grid HorizontalAlignment="Center" VerticalAlignment="Center"
Height="une taille" Width="une taille">

<Canvas HorizontalAlignment="Left" VerticalAlignment="Top">

Nk54

July 20. 2010 21:55

Olivier

Merci Smile
Il y a une solution sous VS : copier le texte tel qu'il est avec les numéros de ligne puis faire un bloc de sélection en colonne (je crois avec la touche Alt), puis appuyer sur Suppression, et la colonne de chiffres disparait Smile

Olivier

July 20. 2010 22:00

Olivier

Pour l'erreur en ligne 1 : bien vu ! Au moins un qui suit ! Smile

Olivier

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading