Pratique de Silverlight Éric Ambrosi Avec la collaboration d Aude Mousset et Thierry Bouquain
Table des matières Préface...IX Partie I Approche de Silverlight 1. Introduction...1 1.1 Qu est-ce que Silverlight?...2 1.2 De.Net 1 à Silverlight...3 1.3 Les avantages de Silverlight...4 1.4 La suite Expression Studio...6 1.5 Positionnement métier...7 1.5.1 Designer interactif...7 1.5.2 La chaîne de production...8 1.6 Langages de développement et choix...9 1.6.1 Langages accessibles...9 1.6.2 CLR, DLR et langages non compilés... 10 2. Le couple XAML / C#... 13 2.1 XML... 13 2.1.1 À quoi sert le XML?... 13 2.1.2 La grammaire... 14 2.1.3 L ambiguïté des relations familiales... 15 2.2 XAML, un langage déclaratif puissant... 16 2.2.1 L utilité du XAML... 16 2.2.2 Comparaison XAML / C#... 17 2.2.3 Afficher un visuel XAML... 18 2.2.4 Espaces de noms... 19 2.3 Les fondamentaux du langage C#... 20 2.3.1 C# et l API Silverlight... 20 2.3.2 Introduction à la programmation orientée objet... 21 2.3.3 Une première application en mode console... 22 2.3.4 Les types... 23 2.3.5 Déclarer des méthodes... 31 2.3.6 Héritage et implémentations... 34 3. HelloWorld... 37 3.1 Une première application Silverlight... 37 3.2 Architecture d'une solution... 40 3.3 Le conteneur racine... 42 3.4 Ajouter du texte... 42 3.4.1 Créer le champ texte... 42 3.4.2 Alignement... 43
IV Table des matières 3.5 Tester et compiler... 44 3.5.1 Première compilation... 44 3.5.2 Une application 100 % Silverlight... 45 3.5.3 Fichiers générés... 47 3.5.4 Processus de compilation... 49 4. Un site plein écran en 2 minutes... 51 4.1 Les projets de type site Internet... 51 4.2 Créer des conteneurs redimensionnables... 53 4.2.1 Créer le pied de page... 53 4.2.2 Créer le menu du haut... 55 4.2.3 Créer la grille centrale... 60 4.3 Le composant bouton... 61 4.3.1 Définir un nom d exemplaire... 61 4.3.2 Afficher une bulle d information au survol... 62 4.3.3 Choisir un curseur de survol personnalisé... 63 4.3.4 La propriété Content... 64 4.4 Ajouter de l interactivité... 67 4.4.1 Utiliser les comportements... 67 4.4.2 Mode plein écran... 69 4.4.3 Spécificités du mode plein écran... 70 4.4.4 Détecter le changement d affichage... 71 4.5 Fichiers déployés... 72 5. L arbre visuel et logique... 73 5.1 Composants visuels... 73 5.1.1 Familles de composants... 73 5.1.2 Arbre d héritage des classes graphiques... 75 5.2 Principe d imbrication... 81 5.2.1 Ordre d imbrication... 81 5.2.2 Accéder aux objets de l arbre visuel... 83 5.2.3 Parcourir la liste des enfants... 87 5.3 Ajouter des enfants à la liste d affichage... 91 5.3.1 Mécanisme d instanciation d objets graphiques... 91 5.3.2 Ajouter et insérer des objets dans l arbre... 92 5.3.3 Erreurs levées... 94 5.3.4 Créer un menu dynamique... 95 5.3.5 Affecter les propriétés Child et Content... 97 5.3.6 Événement diffusé... 98 5.4 Supprimer des objets de l arbre visuel... 99 5.4.1 Les différentes méthodes... 99 5.4.2 L effondrement de la liste d enfants... 100 5.4.3 Désactiver des objets... 103 5.4.5 Événement diffusé... 104 5.5 Échanges d index... 105 5.5.1 Échange d index du point de vue conception... 105 5.5.2 Une méthode d extension pour UIElementCollection... 106 5.5.3 Échange d index du point de vue design... 108
Table des matières V Partie II Interactivité et création graphique 6. Animations... 113 6.1 Introduction... 114 6.1.1 Qu est-ce qu une animation?... 114 6.1.2 La cadence des animations au sein de Silverlight... 115 6.1.3 Une première animation... 116 6.1.4 Les différents types d animation... 118 6.1.5 Les différents types d interpolation... 120 6.1.6 La classe Storyboard... 123 6.2 Animer avec Expression Blend... 124 6.2.1 Les bonnes pratiques... 124 6.2.2 Créer une animation d introduction... 125 6.2.3 Déclencher des animations... 128 6.2.4 Les transformations relatives... 129 6.3 Gérer l accélération... 132 6.3.1 Les principes... 132 6.3.2 Une animation de rebond en une seule clé d animation... 133 6.3.3 Améliorer l animation d introduction... 137 6.4 Animer avec C#... 138 6.4.1 L intérêt d animer avec C#... 138 6.4.2 Instanciation dynamique de ressources Storyboard... 139 6.4.3 Affectation dynamique de Storyboards... 144 6.4.4 Dupliquer un Storyboard créé dans Blend via C#... 146 6.5 Les transformations relatives... 150 6.5.1 Principes... 150 6.5.2 Tester la présence d une instance TransformGroup... 151 6.5.3 Affecter la propriété RenderTransform... 153 6.5.4 La bibliothèque ProxyRenderTransform... 154 6.5.5 Effets antagonistes et complémentaires... 158 6.6 Animer des particules... 160 6.6.1 Exemples d un fond sous-marin... 161 6.6.2 Créer l animation des bulles... 165 7. Boutons personnalisés... 169 7.1 Créer un lecteur vidéo... 169 7.1.1 Mettre en place le projet... 170 7.1.2 Insérer une image d arrière-plan... 170 7.1.3 Le rôle du composant Grid... 171 7.2 Style visuel... 172 7.2.1 Créer un style personnalisé... 172 7.2.2 Naviguer entre style, modèle et application principale... 174 7.3 Bouton générique... 177 7.3.1 La propriété Content... 177 7.3.2 Liaison de modèles... 178 7.4 Le gestionnaire d états visuels... 183 7.4.1 Évolution de l expérience utilisateur... 184 7.4.2 Au sein d un control... 187 7.4.3 Au niveau de l application... 196 7.5 Le bouton interrupteur ou ToggleButton... 201 7.5.1 Créer le bouton... 202 7.5.2 Le système d agencement fluide... 203
VI Table des matières 8. Interactivité et modèle événementiel... 205 8.1 Les fondements du modèle événementiel... 205 8.1.1 Le pattern Observateur... 206 8.1.2 Introduction au couplage faible... 207 8.1.3 Souscrire à un événement en C#... 208 8.1.4 Cas pratique... 209 8.2 Supprimer l écoute d un événement... 211 8.2.1 Principe... 211 8.2.2 Un cas concret d utilisation... 212 8.3 Le couplage faible en pratique... 215 8.3.1 Principe... 215 8.3.2 Simplifier le code du lecteur vidéo... 217 8.3.3 Affectation dynamique d animations... 219 8.4 Propagation événementielle... 220 8.4.1 Principe... 221 8.4.2 Un exemple simple de propagation... 222 8.4.3 Éviter la diffusion d événements... 223 8.4.4 Arrêter la propagation événementielle... 225 8.4.5 Glisser-déposer et capture des événements souris... 228 8.5 Les comportements... 232 8.5.1 Comportements versus programmation événementielle... 232 8.5.2 Les différents types de comportements... 232 8.5.3 Créer des comportements personnalisés... 234 9. Les bases de la projection 3D... 245 9.1 L environnement 3D... 245 9.1.1 Introduction... 246 9.1.2 Le plan de projection... 247 9.2 Les propriétés 3D... 249 9.2.1 Rotation 3D... 249 9.2.2 L axe de rotation... 250 9.2.3 Les axes de translation... 251 9.2.4 Accès et modification via C#... 253 9.3 La caméra... 257 9.3.1 Position de la caméra dans l espace de projection... 258 9.3.2 L angle d ouverture... 259 9.3.3 Les conteneurs 3D... 260 9.3.4 Le point de fuite... 262 9.4 Introduction aux matrices... 263 9.4.1 Définition et principes... 263 9.4.2 Les matrices 3D... 267 9.4.3 Opérations sur les matrices... 269 9.4.4 Initialiser une vue perspective... 272 10. Prototypage dynamique avec SketchFlow... 277 10.1 L environnement... 277 10.1.1 Le prototypage... 277 10.1.2 Qu est-ce que SketchFlow?... 279 10.1.3 Le flux de production... 282 10.2 Prototype simple... 283 10.2.1 Problématique cliente... 283 10.2.2 Le projet SketchFlow... 284 10.2.3 La carte de navigation... 287
Table des matières VII 10.3 Le lecteur SketchFlow... 290 10.3.1 Navigation... 291 10.3.2 Collaboration transverse avec SketchFlow... 292 10.4 Interactivité... 298 10.4.1 Importer des fichiers PSD... 298 10.4.2 Navigation utilisateur... 300 10.4.3 Simuler un flux d utilisation... 302 10.4.4 États visuels... 303 10.5 Interface riche... 304 10.5.1 Écran versus composant... 305 10.5.2 L exemple du configurateur riche... 306 Partie III Conception d applications riches 11. Ressources graphiques... 315 11.1 Qu est-ce qu une ressource... 316 11.1.1 Définition et types de ressources... 316 11.1.2 Les dictionnaires de ressources... 319 11.1.3 Appliquer des ressources... 324 11.2 Les pinceaux... 327 11.2.1 Couleurs et pinceaux... 328 11.2.2 Les pinceaux d images et de vidéos... 336 11.3 Les polices de caractères... 340 11.3.1 Afficher et mettre en forme du texte... 340 11.3.2 Polices personnalisées... 344 11.4 Styles et modèles de composants... 348 11.4.1 Les styles... 348 11.4.2 Affectation dynamique... 350 11.4.3 Organiser et nommer les ressources... 351 11.4.4 Les modèles... 353 11.5 Le modèle Slider... 355 11.5.1 Principes et architecture... 356 11.5.2 Un Slider personnalisé... 358 11.6 Les liaisons... 360 11.6.1 Créer une liaison... 360 11.6.2 Les données fictives... 367 11.6.3 Le contexte de données... 371 11.6.4 Paramètres optionnels... 374 11.7 Le modèle ListBox... 375 11.7.1 Structure et principes... 375 11.7.2 Modifier l apparence d une liste d éléments... 377 11.7.3 DataTemplate versus ListBoxItem... 379 12. Composants personnalisés... 385 12.1 Contrôle utilisateur... 385 12.1.1 Un héritage pertinent... 386 12.1.2 Navigation page par page... 386 12.2 Boîte de connexion... 390 12.2.1 Conception visuelle... 390 12.2.2 Validation par liaison de données... 393
VIII Table des matières 12.2.3 Rafraîchissement manuel de liaison de données... 398 12.2.4 Notification de changement de propriété... 399 12.2.5 Événements personnalisés... 403 12.3 Contrôles personnalisables... 409 12.3.1 ColorChooser et ColorPicker... 410 12.3.2 Créer des contrôles... 411 12.3.3 Le contrat de modèle... 413 12.3.4 Les propriétés de dépendance... 423 13. Médias et données... 429 13.1 Chargement de médias... 429 13.1.1 Chargement dynamique d images... 430 13.1.2 Formats vidéo et modes de diffusion... 438 13.1.3 Un lecteur vidéo simple... 444 13.1.4 Chargement dynamique de vidéos... 449 13.2 Conception MVVM... 452 13.2.1 Principes... 452 13.2.2 Modèle... 454 13.2.3 Vue-Modèle... 457 13.3 Chargement de données... 459 13.3.1 L objet WebClient... 460 13.3.2 Introduction à LINQ... 463 13.3.3 Expression lambda... 467 13.3.4 Consommer du XML avec LINQ... 469 13.3.5 Charger un flux JSON... 472 13.3.6 Sécurité interdomaines... 477 Index... 481