silver light

Copyright 2009 Micro Application - 20-22, rue des Petits-Htels - 75010 Paris 1re dition - Fvrier 2009 Auteurs - Loc BAR, Simon BOIGELOT

Toute reprsentation ou reproduction, intgrale ou partielle, faite sans le consentement de MICRO APPLICATION est illicite (article L122-4 du code de la proprit intellectuelle). Avertissement aux utilisateurs Cette reprsentation ou reproduction illicite, par quelque procd que ce soit, constituerait une contrefaon sanctionne par les articles L335-2 et suivants du code de la proprit intellectuelle. Le code de la proprit intellectuelle nautorise, aux termes de larticle L122-5, que les reproductions strictement destines lusage priv et non destines lutilisation collective dune part, et dautre part, que les analyses et courtes citations dans un but dexemple et dillustration. Les informations contenues dans cet ouvrage sont donnes titre indicatif et nont aucun caractre exhaustif voire certain. A titre dexemple non limitatif, cet ouvrage peut vous proposer une ou plusieurs adresses de sites Web qui ne seront plus dactualit ou dont le contenu aura chang au moment o vous en prendrez connaissance. Aussi, ces informations ne sauraient engager la responsabilit de lEditeur. La socit MICRO APPLICATION ne pourra tre tenue pour responsable de toute omission, erreur ou lacune qui aurait pu se glisser dans cet ouvrage ainsi que des consquences, quelles quelles soient, qui rsulteraient des informations et indications fournies ainsi que de leur utilisation. Tous les produits cits dans cet ouvrage sont protgs, et les marques dposes par leurs titulaires de droits respectifs. Cet ouvrage nest ni dit, ni produit par le(s) propritaire(s) de(s) programme(s) sur le(s)quel(s) il porte et les marques ne sont utilises qu seule n de dsignation des produits en tant que noms de ces derniers. ISBN : 978-2-300-014314 Couverture ralise par Sbastien Wiegant MICRO APPLICATION 20-22, rue des Petits-Htels 75010 PARIS Tl. : 01 53 34 20 20 Fax : 01 53 34 20 00 Support technique : galement disponible sur www.microapp.com http://www.microapp.com

Retrouvez des informations sur cet ouvrage ! Rendez-vous sur le site Internet de Micro Application www.microapp.com. Dans le module de recherche, sur la page daccueil du site, entrez la rfrence 4 chiffres indique sur le prsent livre. Vous accdez directement sa che produit.

1431

Avant-proposLa collection Webmasters sadresse aux personnes inities au dveloppement de sites web qui souhaitent dcouvrir et mettre en pratique les nouvelles technologies Internet. Sans ngliger les aspects thoriques, nous donnons toujours priorit la pratique an que vous puissiez rapidement tre autonome. travers les diffrents titres de cette collection vous dcouvrirez les technologies qui font le web 2.0 et feront ce que certains nomment dj le web 3.0.

Conventions typographiquesAn de faciliter la comprhension des techniques dcrites, nous avons adopt les conventions typographiques suivantes :j j j j

gras : menu, commande, bote de dialogue, bouton, onglet. italique : zone de texte, liste droulante, case cocher, bouton radio. Police bton : instruction, listing, texte saisir. : dans les scripts, indique un retour la ligne volontaire d aux contraintes de la mise en page.

Il sagit dinformations complmentaires relatives au sujet trait. Propose conseils et trucs pratiques.

Mise en garde sur un point important ne pas ngliger.

Sommaire1Le langage XAML 22

1.1 1.2

Introduction .................................................................... 24 Les bases de XAML ........................................................... 24 Hritage de XML ............................................................... 24 Adaptation de XML ........................................................... 25 Les lments de structure ................................................... Grid .............................................................................. StackPanel ...................................................................... Canvas .......................................................................... ScrollViewer .................................................................... Border ........................................................................... Les lments de contenu .................................................... Images ........................................................................... TextBlock ........................................................................ ProgressBar ..................................................................... Les lments dinteractions ................................................. Button ............................................................................ CheckBox ....................................................................... ToggleButton .................................................................... RadioButton ..................................................................... TextBox .......................................................................... PasswordBox ................................................................... ListBox et ListBoxItem .......................................................... ComboBox et ComboBoxItem .............................................. Slider ............................................................................. Autres lments utiles ........................................................ Line ............................................................................... Rectangle ....................................................................... Popup ............................................................................ Premire approche du DataBinding ..................................... DataTemplates ................................................................. ValueConverter ................................................................ Le chier Generic.XAML ..................................................... Rednir la structure dune ListBox .......................................... 26 26 30 31 32 33 35 35 36 37 40 40 42 43 45 46 47 47 49 51 51 51 52 53 55 61 66 72 72

1.3

1.4

1.5 1.6

Les vnements et leur traitement ......................................... 38

1.7

1.8

1.9

Colorez votre application grce aux Brushes et aux Gradients .. 73

Sommaire

1.10 1.11 2

Animez votre application grce aux StoryBoard .................... 79 Crez une bannire Silverlight grce aux animations ................. 82 Check-List ....................................................................... 9596

Crer vos applications avec Expression Studio

2.1 2.2 2.3 2.4 2.5 2.6 3

Introduction Expression Studio ......................................... 98 Expression Design ............................................................ 99 Expression Encoder 2 ..................................................... 102 Expression Blend 2 ......................................................... 104 Intraction entre Expression Blend et Visual Studio 2008 ....... 109 Check-List ..................................................................... 111112

Exploiter vos sources de donnes

3.1

Utilisez SQL et votre base de donnes ................................ Silverlight, C# et SQL Serveur : introduction ........................... SQL ............................................................................. Les commandes SQL en C# ...............................................

114 114 115 116

3.2 3.3 3.4

Exploitez vos donnes sur Oracle ...................................... 120 MySQL et Silverlight ....................................................... 124 LINQ ........................................................................... 126 LINQ, un peu dexplication ............................................... 129 LINQ to XML par lexemple ................................................ 129 Les Web services ........................................................... 134 ADO.NET/Silverlight ..................................................... 143 Crez un widget mto ................................................... 153 MapCodesToConditions ................................................... 170 Traitez un ux de donnes RSS ......................................... 174 Check-list ..................................................................... 179180

3.5 3.6 3.7 3.8 3.9 4

Silverlight et ASP.NET

4.1

Introduction ASP.NET ................................................... 182 ASP.NET ....................................................................... 182 Prrequis ...................................................................... 183

Sommaire

Premier exemple ............................................................. 183 Le Web.cong ............................................................... 190 4.2 Les contrles ASP.NET ..................................................... Les contrles standard ...................................................... Les contrles de validation ................................................. Les contrles riches .......................................................... Les contrles de donnes .................................................. Les contrles de navigation ................................................ Les contrles de login ....................................................... Les contrles HTML .......................................................... Postback et ViewState ...................................................... Les contrles ASP.NET pour Silverlight ................................ Le contrle MediaPlayer ................................................... MediaPlayer et JavaScript ................................................. Le contrle Silverlight ........................................................ 191 191 192 193 193 195 196 197 197 198 201 205 207

4.3

4.4 4.5 5

Interaction de Silverlight avec la page ................................ 210 Check-list ..................................................................... 211212

Concepts avancs

5.1

Le DataBinding en dtails ................................................ 214 DataContext .................................................................. 216 Interaction avec lutilisateur ................................................ 218 Les Styles et ControlTemplates ........................................... 220 Style ............................................................................ 220 ControlTemplate ............................................................. 222 Crer un UserControl ...................................................... UserControl ClickMe ....................................................... UserControl Ranking ........................................................ Les DependencyProperties ................................................. Cration de lUserControl Ranking ....................................... MediaElement ................................................................ Les contrles de la librairie System.Windows.Controls .......... Calendar ...................................................................... DatePicker .................................................................... GridSplitter .................................................................... TabControl et TabItem ...................................................... 225 226 227 228 229 237 246 247 249 251 252

5.2

5.3

5.4

5.5 5.6 5.7

Le contrle DataGrid ...................................................... 253 DataGrid non auto gnr ................................................ 255 Les contrles Silverlight Toolkit de CodePlex ........................ 269 Check-list ..................................................................... 271

Sommaire

6

Dcouvrir Deepzoom

272

6.1 6.2 6.3 6.4 6.5 7

Introduction Deepzoom ................................................ 274 Fonctionnement de Deepzoom ......................................... 275 Deepzoom par lexemple ................................................ 279 MouseWheelHelper.cs ..................................................... 285 Deepzoom et Virtual Earth ............................................... 288 Check-list ..................................................................... 289290

Annexes

7.1

Silverlight et les langages dynamiques ............................... Silverlight et IronPyhton ..................................................... Silverlight et IronRuby ....................................................... Check-list ...................................................................... Introduction au C# ......................................................... Dclaration dune variable de type primitif ............................. Rgles de nommage ........................................................ Dclaration dune variable de type de classe ......................... Fonctionnement par rfrence des types de classe ................... Porte des variables ........................................................ Utilisation des proprits de classe ...................................... Utilisation des mthodes de classe ....................................... Structure dun programme C# (Partie 1) ................................ Dnir un type de classe ................................................... Dnir une nouvelle mthode ............................................. Ajouter une mthode une classe ....................................... Structure dun programme C# (Partie 2) ................................ Exemple dune application de gestion de donnes .................. Conclusion .................................................................... Check-list ...................................................................... Webographie ............................................................... Visual Studio 2008 ......................................................... Silverlight ...................................................................... Le Framework .NET .........................................................

292 292 297 299 299 300 300 301 301 302 303 303 303 304 305 306 306 307 311 311 311 312 312 313315

7.2

7.3

8

Index

RemerciementsNous remercions les personnes qui nous ont aid la ralisation de ce livre et en particulier Stphanie Fanara qui sest propose comme premire relectrice de louvrage. Bargelot (Loc Bar et Simon Boigelot)

9

PrfaceDnition de SilverlightMicrosoft Silverlight est une plateforme de dveloppement dapplications web de haute qualit (RIA : rich Internet application). Cette plateforme est base sur la plateforme .NET, ce qui en fait la plateforme la plus rapide disponible sur Internet actuellement. Malgr leur dveloppement en .NET, les applications Silverlight sont portables. Autant sur Linux, Solaris, Windows et Mac Os que sur certains mobiles. Pour ce faire, le client web doit installer sur sa machine un sous-ensemble de la plateforme .NET : le plugin Silverlight. Ce sous-ensemble contient tout ce qui est ncessaire au fonctionnement de petites applications.

Les prrequis pour dbuterDun point de vue technique, pour programmer des applications Silverlight, le minimum vital est : j la plateforme .NET 3.5 ; j un exemplaire de Visual Studio 2008. (La version gratuite de Visual Studio C# Express suffit amplement.) ; j le Service pack 1 pour Visual Studio 2008 ; j les Silverlight Tools pour Visual Studio 2008. (SDK). Tous ces programmes sont disponibles en tlchargement sur le site http://www.silverlight .net/GetStarted. Il est pourtant conseill dajouter cette liste : j une version de Expression Blend 2 ; j le Silverlight ToolKit de CodePlex. Dun point de vue des connaissances, il est utile davoir de notions relatives : j la programmation oriente objets ; j le langage C# ; j le langage XML.

11

Prface

Pour accder une approche de la programmation .NET grce C#, reportez-vous lannexe 2, Introduction au C#.

Prsentation du Microsoft Framework .NETLe Framework .Net, ou plateforme .NET en franais, est un ensemble compos des lments suivants :j j j

une machine virtuelle capable dexcuter un code intermdiaire propre la plateforme ; un ensemble de langages parmi lesquels C#, VB.NET, ASP.NET, PHP.NET, IronPython, IronRuby, etc. ; un ensemble de librairies fournissant un grand nombre dAPI prprogrammes.

La version actuelle de la plateforme est 3.5. Au dbut, prvue pour la cration dapplications de bureautiques et de serveurs, cette plateforme sest peu peu dveloppe pour les sites web et les mobiles. De nombreux paradigmes de programmation accompagnent ce Framework. Le plus connu tant celui de la sparation du code dinterface et du code de la logique applicative. La majorit des langages implments par la plateforme divise le code dune application en deux chiers spars. Ce paradigme permet principalement une meilleure collaboration entre programmeurs, designers et intgrateurs. Parmi les librairies fournies, vous trouverez tout ce qui concerne les accs chier, les protocoles de communication, la gestion des donnes, les connexions aux bases de donnes, etc. Chaque nouvelle version du Framework ajoute une couche dabstraction qui rapproche le langage programm du langage humain. Ainsi la version 3.5 a ajout les requtes LINQ permettant de simplier grandement le maniement des donnes. La version 4, en beta actuellement, simpliera principalement laccs aux langages dynamiques. Entre autres, une librairie nomme DLR (Dynamic Langage Runtime) va permettre aux dveloppeurs de crer de nouveaux langages ou de migrer des langages existant sur la plateforme .NET.

12

Prface

Fonctionnement de SilverlightPour faire tourner une application Silverlight dans le navigateur web dun utilisateur, cet utilisateur doit pralablement installer un plugin. Ce plugin contient une machine virtuelle prte interprter le code XAML et certaines librairies de la plateforme .NET. Une fois install, et lors de la visite dune page HTML contenant un contrle Silverlight, le plugin va en tlcharger le contenu. Ce contenu est un chier XAP. Un chier XAP est un chier ZIP contenant tout les documents ncessaires au bon fonctionnement dune application Silverlight. Ces documents sont principalement :j j j j

les diffrents chiers XAML, dcrivant les interfaces de lapplication ; les diffrents chiers C# (ou autre langage) dcrivant la logique applicative ; les ventuels mdias (images, vidos, musique, polices de caractres) ; des librairies .NET non prsentes dans le plugin Silverlight de base.

Lapplication va ensuite tre excute dans une zone mmoire de lordinateur client. Cette zone est une zone scurise du nom de SandBox (bac sable). Le bac sable empche lapplication Silverlight de nuire la machine hte. Par exemple, en limitant laccs aux chiers. Une application Silverlight garde tout de mme la possibilit dcrire et de lire des chiers sur lordinateur de lutilisateur. Cependant, cette fonctionnalit est limite en taille et demande lapprobation pralable de lutilisateur. Ce mme principe sapplique, par exemple, aux accs aux services web. La version 1.0 de Silverlight permettait lutilisation :j j j j

des graphique 2D ; danimations ; de mdia ; dun code JavaScript comme code applicatif.

La version 1.1 permis lutilisation de code C# ainsi que de quelques autres langages du Framework.

13

Prface

La version 2.0, dernire en date, prsente dans ce livre, a ajout de nombreuses simplications dans lcriture du code XAML, de nouveaux contrles utilisateur et une version encore plus rapide du runtime.

Prise en main de Visual Studio 2008Visual Studio est une application vous aidant dvelopper. Elle gre des solutions. Une solution est un ensemble de projets travaillant en parallle pour rsoudre un problme donn. Lors du premier dmarrage de Visual Studio, le programme vous demande quel type de prol vous souhaitez utiliser. Ce livre est conu sous le prol Visual C# Dvelopper. Prenez en compte le fait que les raccourcis clavier ainsi que le formatage du texte peuvent changer en fonction du prol choisi.

c Fig. 1 : cran de dmarrage de Visual Studio

14

Prface

Le premier cran ouvert dans Visual Studio est la page de dmarrage. Cette page vous donne un accs rapide aux dernires solutions ouvertes, aux actions de cration et douverture dautres solutions ainsi quau dernier post intressant du Web. La partie en haut se nomme la barre de menu, la partie place lextrmit droite contient deux outils : lExplorateur de solution et lditeur de proprits. Si ces outils ne sont pas visibles sous votre conguration actuelle de Visual Studio, vous pouvez les activer via le menu Affichage de la Barre de menu.c Fig. 2 : Menu Affichage

Crer une nouvelle solution SilverlightPour crer une nouvelle application Silverlight :1

Sous le menu Fichier, ouvrez le sous-menu Nouveau et choisissez laction Projet.

c Fig. 3 : Nouveau Projet 2

Dans la bote de dialogue qui saffiche, naviguez vers le type de projet Visual C# Silverlight.

15

Prface

c Fig. 4 : Bote de dialogue Nouveau projet

Slectionnez le modle Application Silverlight. 4 Donnez un nom votre application et cliquez sur OK.3 c Fig. 5 : Bote de dialogue type de dbogage

Une nouvelle bote de dialogue souvre. Elle vous demande si vous dsirez gnrer un projet contenant un site web pour hberger votre application Silverlight immdiatement ou si vous prfrez que Visual Studio se charge de cette tche chaque dmarrage dune session de dbogage de votre application. 6 Ajoutez un nouveau projet ASP.NET la solution pour hberger Silverlight.5

Votre solution est cre et contient dj de nombreux chiers.

16

Prface

c Fig. 6 : Arborescence de la solution

Les trois seuls chiers qui nous importent pour le moment sont :j j j

Page.xaml contenant la dnition de linterface de votre application ; Page.xaml.cs qui dtient la dnition du code application de votre application ; NomDeLApplicationTestPage.aspx, page ASP.NET hte de votre SilverLight.

Ajouter un nouveau chier au projetPour ajouter un nouveau chier un projet sous Visual Studio : Cliquez du bouton droit sur le nom du projet dans lExplorateur de la solution. 2 Cliquez sur le menu Ajouter/Nouvel lment.1 c Fig. 7 : Ajouter un nouvel lment un projet

17

Prface

Compiler un projet1

Pour dboguer un projet Silverlight, cliquez sur le bouton Play situ dans la barre doutils juste au-dessous de la Barre de menu (ou appuyez sur [F5]).c Fig. 8 : Bouton Dboguer

Aprs compilation russie, votre projet sera lanc dans une page Internet Explorer. Si une erreur survient, la liste derreurs prsente en bas de Visual Studio vous en informera.

c Fig. 9 : Liste derreurs

18

Prface

Lors de la premire excution de votre application, il est probable que vous trouviez la bote de dialogue Dbogage non activ.c Fig. 10 : Dbogage non activ

2

Choisissez loption Modier le chier Web.cong pour activer le debogage et cliquez sur OK sans vous en soucier davantage.

Ma premire application Silverlight : HelloWorldQuoi de plus beau quun HelloWorld !1

Aprs avoir cr une solution Visual Studio 2008 contenant un projet Silverlight et un projet ASP.NET destins aux tests, ouvrez le chier Page.xaml.Page.xaml

Du code y est dj prsent, il sagit de code XAML, nous tudierons ce langage en dtails aux chapitres 2 et 5.

19

Prface

2

En attendant, ajoutez simplement quelques lignes de code :Page.xaml transforme en HelloWorld

3

Lancez lapplication.c Fig. 11 : HelloWorld

Prsentation du contenu de ce livreCe livre traite de Silverlight 2.0 et non des sujets connexes ; nous nous efforcerons de vous fournir le maximum dinformations pour satisfaire votre curiosit et votre comprhension. Cependant, impossible de rsumer dans un seul livre la somme norme des connaissances et des savoirs requis pour devenir un professionnel du dveloppement dapplications Silverlight. Notre voyage commencera par un dgrossissement de la fort impntrable que compose un chier XAML. Une fois ce dgrossissement termin, nous pourrons obtenir un court aperu de la suite Expression. Cette suite est un studio complet destin au design et la cration artistique.

20

Prface

Nous tudierons ensuite diffrentes mthodes daccs aux donnes, quelle quen soit leur provenance. Il sera alors temps de revenir sur nos bases de XAML pour en apprendre davantage. Pour nir, nous verrons comment intgrer au mieux Silverlight au sein dune application ASP.NET.

21

11.1 Introduction .............................................. 1.2 Les bases de XAML ..................................... 1.3 Les lments de structure ............................... 1.4 Les lments de contenu ............................... 1.5 Les vnements et leur traitement ...................... 1.6 Les lments dinteractions ............................. 1.7 Autres lments utiles ................................... 1.8 Premire approche du DataBinding .................. 1.9 Colorez votre application grce aux Brushes et aux Gradients ................................................ 1.10 Animez votre application grce aux StoryBoard .... 1.11 Check-List ................................................ 24 24 26 35 38 40 51 55 73 79 95

Le langage XAMLLors de la cration du Framework 3.0, Microsoft a mis un point dhonneur simplier linteraction entre les dveloppeurs, les intgrateurs et les designers lors du processus de dveloppement dune application. XAML (Extensible Application Markup Language) est la cl de vote de cette simplication concernant Windows Presentation Foundation.

1

Le langage XAML

1.1 IntroductionLinterface dune application y est dnie, ou dessine, sous la forme dun arbre XML. On retrouve dans cette mthode de dveloppement une approche trs proche de ce qui se fait depuis longtemps en ASP.NET, avec dun ct le code HTML, agrment de contrle ASP.NET, et de lautre, un code de logique applicative contenant la logique de lapplication. De nombreux outils tels que Expression Blend vous permettent de faire abstraction du XAML en vous proposant une interface interactive de dnition de votre application. Cependant, en tant que dveloppeur, une bonne connaissance du XAML vous aidera souvent. En effet, certaines opportunits offertes par Silverlight sont bien plus dpendantes du XAML que du code applicatif. Le binding en est un bon exemple.

1.2 Les bases de XAMLHritage de XMLLe langage XAML est bas sur le langage XML. Cela lui donne dj de nombreuses bases :j j j

Un document contient toujours un unique lment appel lment racine. Un lment est une suite de caractres respectant une nomenclature prcise. Un lment peut contenir des attributs et/ou des lments enfants.

Nomenclatures dun lment XML sans enfants :j j j j

Le premier caractre dun lment est toujours .

On obtient donc : . Lorsque llment a des enfants, la suite de caractres fermants /> est remplace par >[enfants].

24

Les bases de XAML

1

Adaptation de XMLEn XAML, le nom de llment est remplac par le nom de la classe du contrle utilisateur quil reprsente. Ainsi, on peut ajouter un bouton notre interface de la manire suivante :

Ce bouton peut avoir des attributs, tels quune taille et un nom (ce qui permettra de le retrouver plus tard dans le code de la logique applicative).

En XAML, tout attribut peut tre transform en enfant. Cette particularit nous sera trs utile pour dclarer des attributs structurs : 100 Button1

Tout contrle utilisateur est capable de contenir dautres contrles utilisateur. Ainsi, lemploi le plus frquent du contenu dun bouton est du texte : 100 Button1 c Fig. 1.1 : Bouton contenant du texte

Mais il peut en tre autrement. Par exemple, voici un bouton contenant un autre bouton : c Fig. 1.2 : Bouton contenant un autre bouton

Attention, la majorit des contrles utilisateur naccepte quun enfant. Il est donc impossible dcrire directement :

25

1

Le langage XAML

Pour obtenir un rsultat de ce genre, il est indispensable dutiliser un des lments de Layout que nous verrons au chapitre 3, Crer vos applications avec Expression Studio. Il existe trois types dattributs diffrents :j j j

Le premier type se trouve partout ou presque, tels Width et Height qui permettent de dnir la taille dun lment dinterface. Le deuxime type est un attribut qui se retrouve seulement dans un lment. Un attribut du deuxime type ne pourra jamais tre utilis dans un autre lment. Le troisime type dattribut est plus subtil. Un attribut de ce type appartient un lment mais est utilis dans un autre. Un bon exemple est lattribut Top de llment Canvas :Attribut de troisime type

1.3 Les lments de structureGridLors de la cration de votre premire application Silverlight, le premier lment que vous rencontrez est une Grid. La Grid, grille en franais, fait partie des lments structurants (Dit de Layout) de votre application. En effet, si en WinForm les diffrents lments de vos applications taient organiss les uns par rapport aux autres majoritairement grce leurs positions relatives, en XAML, des lments dits de Layout se chargent de cette organisation. Le plus commun de ces lments est la grille.

26

Les lments de structure

1

Une grille peut tre compare un tableau compos de lignes et de colonnes. Chaque lment quelle contient doit lui spcier sa position. Le comportement de base dune grille stipule quelle est compose dune cellule unique. Cette cellule tentera de donner son contenu la taille maximale possible :Comportement dune Grid sans cellules c Fig. 1.3 : Comportement dune Grid sans cellules

Il est pourtant possible de stipuler une grille le nombre de colonnes quelle doit afficher. Sans autres informations, chaque colonne aura une taille gale aux autres. Il est maintenant devenu indispensable, pour le bouton contenu dans la grille, de prciser sa position :Comportement dune Grid avec ColumnDenitions

27

1

Le langage XAML

Ajouter des lignes cette grille se fait de la mme manire :c Fig. 1.4 : Comportement dune Grid avec ColumnDenitions

Comportement dune Grid avec RowDenitions

28


1

c Fig. 1.5 : Comportement dune Grid avec RowDenitions

Trois options soffrent nous pour forcer les diffrentes lignes ou colonnes adopter des tailles diffrentes :j j j

en leur donnant une taille en pixels (Width=100) ; en leur demandant de prendre la taille de leur contenu (Width=Auto) ; en leur allouant une partie de lespace restant (Width=*).Variation de tailles sur les ColumnDenitions et les RowDenitions

29

1

Le langage XAML

c Fig. 1.6 : Variation de tailles sur les ColumnDenitions et les RowDenitions

StackPanelLe deuxime lment de la famille des Layout est le StackPanel. Un StackPanel imbrique ses diffrents enfants les uns au-dessous des autres :StackPanel

30


1

c Fig. 1.7 : StackPanel orientation verticale

Les lments fournis dans la plateforme Silverlight de base ne proposent pas de WrapPanel tel quon en trouve en WPF. Il existe deux solutions pour pallier ce problme :j

utiliser le Silverlight ToolKit de CodePlex que nous voquerons plus tard ; Pour obtenir plus de renseignements sur le Silverlight Toolkit de CodePlex, reportez-vous au chapitre 5, Silverlight et ASP.NET.

j

forcer un StackPanel afficher ses enfants les uns ct des autres.StackPanel orientation horizontale

c Fig. 1.8 : StackPanel orientation horizontale

CanvasLe dernier lment de la famille des Layout prsent dans ce livre est le Canvas. Son utilisation est la mme qu lpoque des WinForm. En effet, le Canvas, contrairement aux autres Layout, dlgue le positionnement de ses enfants eux-mmes. Ce positionnement est relatif leurs distances par rapport au dessus et la gauche du Canvas :

31

1

Le langage XAML

Canvas c Fig. 1.9 : Exemple de Canvas

ScrollViewerBien que le ScrollViewer ne soit pas proprement parler un lment de Layout, il permet tout de mme de structurer linterface. Cest lui qui vous offre lopportunit dajouter des ascenseurs votre application, quils soient horizontaux ou verticaux. Sans conguration, seul lascenseur vertical est visible :ScrollViewer sans conguration

32


1

c Fig. 1.10 : ScrollViewer sans conguration

Les attributs HorizontalScrollBarVisibility et VerticalScrollBarVisibility permettent de modier cette conguration. Ils acceptent 4 valeurs diffrentes :j j j j

Auto : lascenseur est visible uniquement si le contenu du ScrollViewer dpasse la taille du ScrollViewer. Disabled : lascenseur est visible mais inutilisable par lutilisateur. Hidden : lascenseur est cach. Visible : lascenseur est toujours visible. Si la taille du contenu dpasse la taille du ScrollViewer, lascenseur pourra tre employ par lutilisateur.ScrollViewer avec conguration

BorderAu mme titre que le ScrollViewer, llment Border nest pas un lment de Layout. Cependant, son utilisation permet de rendre plus comprhensible la structure dune interface pour lutilisateur. Un Border est seulement une ligne qui entoure llment quil contient. Ses diffrents attributs lui donnent une exibilit incomparable et font de lui un atout majeur :

33

1

Le langage XAML

Diffrents exemples de Border c Fig. 1.11 : Diffrents exemples de Border

34

Les lments de contenu

1

Les attributs Margin et CornerRadiusRemarquez lutilisation de lattribut Margin. Ce dernier, de type 1, est disponible dans la majorit des lments dinterfaces et permet de les espacer les uns des autres. Comme le CornerRadius dans sa version complexe, le Margin peut tre dnit avec 4 valeurs (Top, Right, Bottom, Left).

1.4 Les lments de contenuImagesLlment Image est enfantin utiliser. Pour ajouter une image votre application, il suffit den indiquer le chemin relatif par rapport au nud racine de votre application ou den indiquer une URI absolue. Par exemple, pour afficher un chier wipuslogo.jpg faisant partie de votre projet Silverlight :c Fig. 1.12 : Structure de la solution

Image avec Source relative au projet

Ou encore, afficher une image rcupre partir dun site web :c Fig. 1.13 : Image avec source relative au projet

35

1

Le langage XAML

Image avec Source absolue (URI) c Fig. 1.14 : Image avec source absolue (URI)

Un des attributs les plus importants de llment Image est lattribut Stretch. Il permet de dnir comment llment va interagir avec limage pour lafficher, sil va la redimensionner, la couper, en conserver les proportions dorigine ou non.

TextBlockLe TextBlock est la zone de texte la plus communment utilise. Elle permet de choisir toutes les caractristiques habituelles dun texte, de sa famille sa taille, en passant par sa couleur :TextBlock c Fig. 1.15 : Exemple de TextBlocks

Remarquez lattribut TextWrapping. Il permet de passer automatiquement la ligne lorsque sa valeur est Wrap. Le cas chant, si la longueur du texte dpasse la taille du TextBlock, le surplus sera coup.

ProgressBarComme son nom lindique, la ProgressBar sert indiquer ltat dune progression, il sagit de la mme ProgressBar que celle utilise par Windows lors dune copie. Son attribut Value indique ltat actuel de la progression qui peut varier de Minimum Maximum :ProgressBar

37

1

Le langage XAML

c Fig. 1.16 : ProgressBar

1.5 Les vnements et leur traitementAvant de continuer, il est important de comprendre comment fonctionne le traitement des vnements en Silverlight, comment interagir entre le code XAML et le code C# de lapplication. Ds quun lment, tel quun bouton, est ajout au code XAML, et pour peu que cet lment contienne un attribut Name, il devient accessible dans le code C#. Ainsi pour atteindre le bouton de Name Button1 dans le code C# dune application, il suffit dcrire son nom. Tout attribut en XAML devient alors une proprit en C# :Code XAML

Code C#using using using using using System; System.Collections.Generic; System.Linq; System.Net; System.Windows;

38

Les vnements et leur traitement

1

using using using using using using

System.Windows.Controls; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes;

namespace LearnXAML { public partial class Page : UserControl { public Page() { InitializeComponent(); string temp = "" + Boutton1.Content; } } }

Pour ajouter lvnement Clic sur ce bouton, indiquez-le comme attribut dans le code XAML et ajoutez la fonction relative dans le code C#. Gnralement, cette opration est automatique :Modication du code XAML

Modication du code C#using namespace LearnXAML { public partial class Page : UserControl { public Page() {} private void Boutton1_Clic(object sender, RoutedEventArgs e) { Boutton1.Content = "Merci"; } } }

39

1

Le langage XAML

c Fig. 1.17 : vnement Clic sur bouton

Les vnements relatifs aux entres utilisateur sont partags par la majorit des lments dinterface. Ainsi MouseEnter, MouseMove, MouseLeftButtonDown, MouseLeftButtonUp, MouseLeave, KeyUp et KeyDown se retrouvent presque partout.Absence de clic droit en SilverlightEn Silverlight, il ny a pas dvnements lis au clic droit de la souris.

1.6 Les lments dinteractionsButtonLe bouton est llment dinteraction par excellence que nous avons dj largement utilis. Voici, pour rappel, son fonctionnement :Code XAML dun bouton

Le texte dun bouton est dni dans son attribut Content. En effet, ce contenu peut tre autre chose que du texte. Par exemple, une image :Bouton avec une image comme contenu c Fig. 1.18 : Bouton avec une image comme contenu

Ou quelque chose de plus complexe tel quune grille contenant plusieurs images et un autre bouton :Bouton contenu htroclite c Fig. 1.19 : Bouton contenu htroclite

Gnricit du principe des poupes suissesCe principe sapplique tous les lments XAML.

CheckBoxUne CheckBox est une bote deux ou trois tats selon sa conguration. Son tat peut tre coch, non coch ou ventuellement inconnu. Cet tat est stock sous forme dun boolen annulable dans lattribut IsChecked. Lattribut IsThreeState permet de dnir si la CheckBox peut ou non passer par ltat inconnu :Exemple de CheckBox

42

Les lments dinteractions

1

c Fig. 1.20 : Exemple de CheckBox

Lorsquune CheckBox passe dun tat un autre, les vnements Checked et UnChecked sont dclenchs :Evnements Checked et UnChecked (XAML)

Evnements Checked et UnCheked (C#)private void CheckBox_Checked(object sender, RoutedEventArgs e) { } private void CheckBox_Unchecked(object sender, RoutedEventArgs e) { }

ToggleButtonUn ToggleButton est une CheckBox sous forme de bouton. Son tat peut tre enfonc, non-enfonc ou ventuellement inconnu. Cet tat est stock sous forme dun boolen annulable dans lattribut IsChecked.

43

1

Le langage XAML

Lattribut IsThreeState permet de dnir si le ToggleButton peut ou non passer par ltat inconnu :Exemple de ToggleButton c Fig. 1.21 : Exemple de ToggleButton

Lorsque ltat dun ToggleButton change, les vnements Checked et UnChecked sont dclenchs :Evnements dtat dun ToggleButton

44


1

RadioButtonLes RadioButtons fonctionnent de la mme faon que les ToggleButtons. Eux aussi possdent les attributs IsChecked, IsThreeState, Content, etc. Cependant, ils offrent une fonctionnalit supplmentaire les rendant intressants : lattribut GroupName. Parmi un ensemble de plusieurs RadioButtons partageant le mme GroupName, seul un RadioButton pourra avoir son tat IsCheked vrai. Si un autre de ces RadioButtons passe ltat Checked, automatiquement, le prcdent RadioButton Checked deviendra UnChecked :Exemple de RadioButtons

45

1

Le langage XAML

c Fig. 1.22 : Exemple de RadioButtons

De mme que pour le ToggleButton, les vnements Checked et UnChecked sont dclenchs lorsquun RadioButton change dtat.

TextBoxlment de saisie de texte, une TextBox offre les mmes attributs quun TextBlock :Exemple de TextBox c Fig. 1.23 : Exemple de TextBox

Lvnement TextChanged est dclench lorsque lutilisateur a ni dditer le texte contenu dans la TextBox. Cela tant, hormis pour une validation, le texte entr par lutilisateur sera utilis lors dun autre vnement, tel que le clic sur un bouton adjacent. Pour rcuprer le texte contenu dans ce TextBox partir du code C#, il suffit den utiliser la proprit Text.

46


1

PasswordBoxUne PasswordBox est une TextBox naffichant pas les caractres frapps au clavier mais des caractres de remplacements :Exemple de PasswordBox c Fig. 1.24 : Exemple de PasswordBox

Attention, le texte contenu dans une PasswordBox porte le nom de Password et non de Text. Il en va de mme pour la proprit dans le code C#. Lattribut PasswordChar donne au dveloppeur lopportunit de choisir un caractre de remplacement diffrent de celui de la plateforme dorigine.

ListBox et ListBoxItemLa ListBox est un lment compos dun StackPanel et dun ScrollViewer. Mais ce nest pas tout, elle implmente dorigine une interface lui permettant de grer une collection ditems slectionnables :ListBox contenant des ListBoxItems

47

1

Le langage XAML

c Fig. 1.25 : ListBox contenant des ListBoxItems

Les lments utiliss dans cet exemple comme items sont des ListBoxItems. Bien que les ListBoxItems soient prvus spcialement pour servir ditems dans une ListBox, tout autre lment de la plateforme peut les substituer. Ainsi, il est possible davoir une ListBox contenant comme items des boutons, des autres ListBox, des lments de Layout contenant eux-mmes dautres lments enfants, etc. :ListBox contenant des lments htroclites

48


1

c Fig. 1.26 : ListBox contenant des lments htroclites

Lorsque la slection passe dun lment un autre, lvnement SelectedItemChanged est dclench.

ComboBox et ComboBoxItemUne ComboBox est une ListBox prsente sous forme dune liste droulante. Son utilisation est donc semblable celle dune ListBox :Exemple de ComboBox c Fig. 1.27 : Exemple de ComboBox

Les lments utiliss dans cet exemple sont des ComboBoxItems, mais comme une ListBox, les ComboBox acceptent nimporte quels lments comme items.

49

1

Le langage XAML

Il est donc possible, par exemple, de construire une ComboBox dimages, de boutons et dinformations diverses runies :Exemple de ComboBox contenu htroclite c Fig. 1.28 : Exemple de ComboBox contenu htroclite

Lorsque la slection passe dun lment un autre, lvnement SelectedItemChanged est dclench.

50

Autres lments utiles

1

SliderUn Slider est un curseur se dplaant le long dune ligne pour permettre lutilisateur dindiquer une valeur numrique de faon visuelle. La valeur (Value) indique par le curseur varie de lattribut Minimum gauche de la ligne lattribut Maximum droite de la ligne :Exemple de Slider c Fig. 1.29 : Exemple de Slider

Les attributs SmallChange et LargeChange reprsentent respectivement la valeur ajoute ou retire la valeur en cours lors dun dplacement par la souris ou le clavier. Lvnement ValueChanged est dclench lorsque la valeur indique par le curseur est modie par lutilisateur.

1.7 Autres lments utilesLineLa plateforme noffre pas que des lments dinterface mais aussi des lments graphiques tels que les lignes, les polygones, les rectangles, etc. Bien que ces lments soient plus utiles aux designers quaux dveloppeurs, il est intressant de comprendre leurs fonctionnements :

51

1

Le langage XAML

Exemple de Ligne c Fig. 1.30 : Exemple de ligne

Dans cet exemple, deux lignes sont dessines grce aux positions relatives (en pixels) de leurs points dorigine et de destination par rapport llment qui les contient. Ces deux points sont respectivement {X1,Y1} et {X2,Y2}.

RectangleDans le mme ordre dides, un rectangle est dni par ses dimensions. Les attributs RadiusX et RadiusY, quant eux, permettent den arrondir les bords :Exemple de Rectangle

52

Autres lments utiles

1

c Fig. 1.31 : Exemple de Rectangle

Interaction utilisateur des lments graphiquesSouvenez-vous que tout lment graphique garde une possibilit dinteraction avec la souris et/ou le clavier. Dans cet exemple, nous retrouvons lvnement MouseLeftButtonDown.

Attention, un rectangle est un lment gomtrique et non un lment dinterface ; il naccepte donc pas de contenu. Le code suivant ne fonctionnera pas :Rectangle avec contenu

Pour obtenir un rsultat semblable qui fonctionne, utilisez un Border avec Background.

PopupEn Silverlight, un lment Popup nest pas un popup proprement parler tel quon lentend dans le monde du Web. En effet, il ne sagit en aucun cas dune fentre supplmentaire qui souvre hors du navigateur dans lequel sexcute lapplication Silverlight. Un popup Silverlight nest rien dautre quun lment dinterface indpendant de la structure solide dnie par les lments de Layout de lapplication. Il saffiche librement au-dessus de tout autre contrle.

53

1

Le langage XAML

Dans cet exemple, un bouton contrle louverture dun popup. Ce popup contient comme lments enfants un texte et un bouton dclenchant sa fermeture :Exemple de Popup (XAML)

Ce sont sur les vnements Clic des deux boutons que lon assignera une valeur diffrente lattribut IsOpen du popup. Lorsque cet attribut est vrai, le popup est affich :Exemple de Popup (C#)using using using using using using using using using System; System.Collections.Generic; System.Linq; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Input; System.Windows.Media;

54

Premire approche du DataBinding

1

using System.Windows.Media.Animation; using System.Windows.Shapes; namespace LearnXAML { public partial class Page : UserControl { public Page() { InitializeComponent(); } private void OpenPopup(object sender, RoutedEventArgs e) { MyPopup.IsOpen = true; } private void ClosePopup(object sender, RoutedEventArgs e) { MyPopup.IsOpen = false; } } }

c Fig. 1.32 : Exemple de Popup

1.8 Premire approche du DataBindingLe binding est la mthode de liaison de donnes entre le code applicatif (code C#) et le code XAML. Grce cette mthode, il devient ais dafficher un set de donnes lutilisateur tout en lui proposant une interaction directe avec elles, sans devoir crire de nombreuses lignes de code. Pour lier des donnes une interface, il nous faut dabord crer ces donnes. Si vous ntes pas habitu la programmation oriente objets, reportez-vous lannexe 2 de ce livre, Introduction au C#.

55

1

Le langage XAML

Lapplication que nous allons raliser ici se doit de grer une liste dtudiants, rpartis dans plusieurs cours. Un tudiant est dni par son Nom, son Prnom et son ge :Etudiant.csusing using using using using using using using using using System; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Ink; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes;

namespace LearnXAML { public class Etudiant { private string nom; public string Nom { get { return nom; } set { nom = value; } } private string prenom; public string Prenom { get { return prenom; } set { prenom = value; } } private int age; public int Age { get { return age; } set { age = value; } } public Etudiant() { }

56


1

} }

Un cours, quant lui, est dni par son Nom et comprend une liste dtudiants :Cours.csusing using using using using using using using using using using System; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Ink; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes; System.Collections.Generic;

namespace LearnXAML { public class Cours { private string nom; public string Nom { get { return nom; } set { nom = value; } } private List etudiants; public List Etudiants { get { return etudiants; } set { etudiants = value; } } public Cours() { } } }

57

1

Le langage XAML

Ajoutons au code applicatif de cette application la dclaration en dur dune liste de deux cours comprenant chacun quelques tudiants :Dclaration en dure dune liste dtudiantusing using using using using using using using using using using System; System.Collections.Generic; System.Linq; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes;

namespace LearnXAML { public partial class Page : UserControl { private List ListeDeCours; public Page() { InitializeComponent(); #region HardCode ListeDeCours ListeDeCours = new List() { new Cours() { Nom = "Declamation", Etudiants = new List() { new Etudiant() {Prenom="Laurane", Nom="D.", Age=19 }, new Etudiant() {Prenom="Ma", Nom="H.", Age=18 }, new Etudiant() {Prenom="Dovy", Nom="F.", Age=21 } } }, new Cours() { Nom = "Sculpture", Etudiants = new List() { new Etudiant() {Prenom="Adelade", Nom="A.", Age=19 },

58


1

new Etudiant() {Prenom="Klintes", Nom="T.", Age=20 }, new Etudiant() {Prenom="Kaphilis", Nom="A.", Age=20 }, new Etudiant() {Prenom="Jade", Nom="G.", Age=14 } } } }; #endregion HarCode ListeDeCours } } }

Dans cette dclaration, nous retrouvons la structure suivante :j j

un cours de dclamation dont les lves sont Laurane, Ma et Dovy ; un cours de sculpture dont les lves sont Adelade, Klintes, Kaphilis et Jade.

Du ct de la dnition de linterface, dclarons une ListBox :chier XAML

Pour lier la liste de cours cette ListBox, il suffit dajouter dans le code applicatif, sous la dclaration en dur :Ajout au code applicatifCoursListBox.ItemsSource = ListeDeCours;

Cette ligne de code ordonne la ListeBox CoursListBox dafficher le contenu de la liste ListeDeCours.

59

1

Le langage XAML

Voici le rsultat :c Fig. 1.33 : DataBinding direct

Bien que cela ne plante pas et que nous dtections dj 2 items diffrents dans cette ListBox, linterface obtenue est loin dtre satisfaisante pour un utilisateur nal. Pourquoi ? La plateforme .Net, en labsence dinformations lui dictant comment afficher un objet, en appelle la mthode ToString. Cette mthode, prsente intrinsquement dans chaque objet, retourne une chane de caractres comprenant le nom de la classe de cet objet. Le premier contournement de ce problme est donc la surcharge de cette mthode :Ajout Cours.cspublic override string ToString() { string ret = this.nom; if(etudiants == null) return ret; ret += "\t("; foreach(Etudiant e in etudiants) ret += " "+e.Prenom; ret += " )"; return ret; }

60


1

Grce cette simple modication, notre affichage de donnes est dj bien plus agrable voir :c Fig. 1.34 : DataBinding avec surcharge de ToString()

DataTemplatesVoici la faon la plus intressante de rendre lisible toute notre liste de cours ainsi que ses lves respectifs. Un DataTemplate est une structure XAML qui sera applique chacun des items dune ListBox donne. Ici le changement se fait uniquement dans le code XAML, lindpendance avec le code applicatif est parfaite. Ce qui permet de dlguer plus facilement ce travail aux designers et intgrateurs. La ListBox possde un attribut du nom de ItemTemplate qui permet de dnir quel Template utiliser pour afficher les items :Exemple de DataTemplate 1

61

1

Le langage XAML

c Fig. 1.35 : Exemple de DataTemplate 1

Pour prciser quelles proprits des objets forment la source du binding, il faut afficher. XAML offre une mthode de navigation par chane de caractres travers ces derniers. Ainsi le code {Binding Path=Nom} dans notre exemple, stipule que pour chaque Cours, linterface doit afficher la proprit Nom. En ce qui concerne la liste dlves, il faut ajouter ce DataTemplate une nouvelle liste, dont lItemSource est la proprit Etudiants de chaque cours :Exemple de DataTemplate2

62


1

c Fig. 1.36 : Exemple de DataTemplate2

Un nouveau DataTemplate doit ensuite tre cr, cette fois non pour les cours mais pour les tudiants :Exemple de DataTemplate 3

63

1

Le langage XAML

c Fig. 1.37 : Exemple de DataTemplate 3

Cette mthode donne un rsultat surprenant. Cependant, le code, lui, est des plus immondes. Lire un code XAML de ce genre est presque impossible ds quil grandit un peu. Rsoudre ce problme de clart invoque lutilisation des Ressources XAML. Chaque lment XAML a la possibilit dtre lhte dune collection de ressources. Ces ressources seront accessibles tous les lments enfants de llment hte grce leur nom. (En loccurrence, grce leur x:Key.) Le code XAML de lexemple prcdent, agrment de lutilisation des ressources, devient :Exemple de DataTemplate en Ressources

64


1

Non seulement la lisibilit du code sest beaucoup amliore, mais en plus, ces DataTemplates sont maintenant rutilisables dautres endroits de notre interface, sans quon ait besoin de les copier.Diffrence entre StaticResource et DynamicResourceRemarquez lutilisation du mot StaticResource. Une ressource statique est une ressource dnie dans le mme document et en amont de son utilisation. Ceci explique que EtudiantDatatTemplate soit dni avant CoursDataTemplate. Une alternative cette structure rigoureuse est dutiliser DynamicResource. Une ressource dynamique peut tre dnie nimporte o dans lapplication, mme dans un autre chier.

65

1

Le langage XAML

ValueConverterDans lexemple prcdent, une proprit C# est affiche telle quelle lors de son binding sur linterface. Ainsi, le nom Lauranne est pleinement lisible. Cependant ce nest pas toujours lidal. Si nous ajoutons la proprit EstDou de type booleen aux tudiants, le rsultat de son binding sera soit TRUE, soit FALSE :Ajout Etudiant.csprivate bool estDou; public bool EstDou { get { return estDou; } set { estDou = value; } }

Une fois de plus, la mthode ToString du type booleen sert la plateforme.c Fig. 1.38 : Binding sans ValueConverter

Comme il nest pas possible de surcharger cette mthode dans un type primitif, une autre solution soffre nous : un ValueConverter. Un ValueConverter est une classe C# qui, comme son nom lindique, transforme une valeur, quelle quelle soit, en une autre valeur. Ainsi dans le cas prsent, nous allons crire un ValueConverteur transformant la valeur TRUE en est un lve dou, et la valeur FALSE en nest pas un lve dou.

66


1

Linterface IValueConverter fait dune classe un ValueConverteur. Son implmentation demande deux mthodes :j j

Convert convertit la valeur source en valeur afficher. ConvertBack convertit la valeur afficher en valeur source.EstDouValueConverter.cs

using using using using using using using using using using using using

System; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Ink; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes; System.Windows.Data; System.Globalization;

namespace LearnXaml { public class EstDouValueConverter : IValueConverter { private const string Dou = "est un lve dou"; private const string NonDou = "nest pas un lve dou"; #region IValueConverter Membres public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { bool? EstDou = (value as bool?); if (EstDou == null || EstDou.HasValue == false) throw new InvalidCastException( "EstDouValueConverter.Convert value is not bool or is null"); if (EstDou.Value) { return Dou; } else { return NonDou;

67

1

Le langage XAML

} } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { string EstDou = value.ToString(); switch (EstDou) { case Dou: return true; case NonDou: return false; default: throw new InvalidCastException( "EstDouValueConverter.ConvertBack value incorrecte" + value.ToString()); } } #endregion } }

Pour utiliser le ValueConverter EstDouValueConverter dans un binding, plusieurs tapes doivent tre respectes :j j

j j

ajouter le code du ValueConverter la solution Silverlight (ou en ajouter la rfrence dune assembly compile pralablement pour Silverlight) ; ajouter au chier XAML un using (xmls) pointant vers lespace de noms du ValueConverter (dans ce cas, lespace de noms est le mme que celui de lapplication mais cela peut varier) ; crer une instance de ce ValueConverter dans les ressources de lapplication ; spcier au binding dutiliser cette instance de ValueConverter.Modication du chier XAML

68


1

c Fig. 1.39 : Binding avec ValueConverter

69

1

Le langage XAML

Attributs dun ValueConverterIl est parfois utile de laisser au charg dinterface (celui qui crit le XAML) la possibilit de congurer un ValueConverter sans devoir passer par le code C#. Cest le cas dun RatioValueConverter multipliant simplement un nombre entier par un autre. Il serait aberrant de devoir crer un RatioValueConverter par multiplication souhaite. Ajouter un attribut congurable en XAML se fait en ajoutant une proprit publique dans la classe du ValueConverter, ainsi quil est montr dans le code suivant avec la proprit Ratio :RatioConverter.csusing using using using using using using using using using using using System; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Ink; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes; System.Windows.Data; System.Globalization;

namespace LearnXaml { public class RatioValueConverter : IValueConverter { private int ratio = 5; public int Ratio { get { return ratio; } set { ratio = value; } }

public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (int)value * ratio; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

70


1

{ return (int)value / ratio; } } }

Il est alors possible dutiliser ce RatioConverter dans le code XAML pour, par exemple, transformer lge (en annes) des tudiants en un nombre de mois :Modication du code XAML c Fig. 1.40 : Binding avec RatioValueConverter

71

1

Le langage XAML

Le chier Generic.XAMLComme nous le voyons dans lexemple suivi tout au long ce chapitre, le nombre de ressources de notre page XAML ne cesse de grandir. Pour viter un code trop long et rendre ces ressources accessibles depuis nimporte quel chier XAML de notre application, il suffit de crer un chier XAML du nom de Generic.XAML dans le dossier Themes de larborescence de la solution Silverlight.c Fig. 1.41 : Arborescence de solution pour le chier Generic.XAML

Attention, dans les proprits du chier Generic.xaml, le mode de compilation doit tre chang de Page Resource.

c Fig. 1.42 : Modication des proprits de Generic.xaml

Rednir la structure dune ListBoxNous avons vu comment changer laspect des items contenus dans une ListBox lors dun binding. Il est galement possible de forcer lordre dans lequel ces items vont safficher. De base, pour une ListBox, les items sont affichs dans un StackPanel dont lorientation est verticale. Pour changer cela, il suffit de surcharger lattribut ItemPanel de la ListBox :

72

Colorez votre application grce aux Brushes et aux Gradients

1

Surchage de lattribut ItemPanel ... c Fig. 1.43 : Surcharge de lattribut ItemPanel

1.9 Colorez votre application grce aux Brushes et aux GradientsAjouter de la couleur vos applications Silverlight se fait grce aux Brushes. Un Brush est la reprsentation dune couleur. Nous en avons souvent rencontr dans les exemples prcdents de ce livre.

73

1

Le langage XAML

En outre, dans le code suivant, White est un Brush :Exemple dun Brush

De nombreux lments dinterface ont la possibilit dtre congurs pour utiliser dautres couleurs que leurs couleurs dorigines. Il sagit gnralement des attributs Background, Foreground, Stoke, BorderColor, etc. Mais il y a mieux, en plus daccepter des Brushes comme valeurs, ces attributs acceptent aussi des Gradients. Les Gradients sont des collections de couleurs et doffsets permettant de crer un dgrad. La classe Gradient est une classe abstraite dont dcoule quelques types de Gradients diffrents et ne pouvant tre utiliss directement en XAML.

LinearGradientBrushLe type de Gradient le plus simple est le LinearGradiantBrush :Exemple de LinearGradientBrush

74


1

c Fig. 1.44 : Exemple de LinearGradientBrush

Le LinearGradientBrush est une fonction linaire dont les couleurs varient proportionnellement un offset. Dans ce cas, le pinceau va varier du blanc x = 0 au noir x = 100. Il est possible dajouter plus de couleurs dans un LinearGradientBrush la fonction est alors divise en un set de segments de taille suffisante pour afficher le dgrad selon les crits du XAML :Exemple de LinearGradientBrush dcoup c Fig. 1.45 : Exemple de LinearGradientBrush dcoup

75

1

Le langage XAML

Lorientation du dgrad, ici de gauche droite, est elle aussi modiable. Le dgrad commence son attribut StartPoint et nit son attribut EndPoint. Chacun de ces attributs sont des points dnis par deux valeurs : X et Y en pourcentage de llment colorier. En modiant un peu ces attributs, nous pouvons crer un dgrad vertical :LinearGradientBrush vertical c Fig. 1.46 : LinearGradientBrush vertical

RadialGradientBrushUn RadialGradientBrush agit de la mme manire quun LinearGadientBrush mais en dcrivant des cercles :Exemple de RadialGradientBrush

76


1

c Fig. 1.47 : Exemple de RadialGradientBrush

Contrairement au LinearGradientBrush, ce sont les attributs Center et GradientOrigin qui permettent de changer la source et lorientation du dgrad :RadialGradientBrush dcentr c Fig. 1.48 : RadialGradientBrush dcentr

77

1

Le langage XAML

ImageBrushLes ImageBrushes vous permettent dutiliser une image la place dun Brush. On les emploie de la mme faon que llment Image :Exemple de ImageBrush c Fig. 1.49 : Exemple dImageBrush

Lutilit de ce genre de GradientBrush est vidente lorsquon lemploie sur des attributs plus surprenants de la plateforme Silverlight. Dans lexemple qui suit, le mme ImageBrush est utilis sur lattribut Foreground dune TextBox :Exemple dImageBrush sur lattribut Foreground

78

Animez votre application grce aux StoryBoard

1

c Fig. 1.50 : Exemple dImageBrush sur lattribut Foreground

1.10 Animez votre application grce aux StoryBoardEn XAML, il est possible danimer nimporte quoi, nimporte comment. En effet, par animation, le XAML nentend pas seulement mouvement dun objet mais bien variation dune valeur partir dune valeur initiale jusqu une valeur nale sur une priode de temps donne. Ainsi, bien quil soit possible de faire bouger un lment grce une animation, il est galement envisageable den faire varier sa couleur, sa taille, etc. Plusieurs animations peuvent tre runies en un ensemble appel StoryBoard, scnario en franais. Pour commencer en beaut, voici un scnario qui va changer la taille du texte dun TexBlock et dplacer la position dun rectangle :Les animations Silverlight (XAML)

Cette animation est dclenche lors de lvnement MouseLeftButtonClic sur le TextBox HeodeLabel. Le code de la logique applicative de cette application appelle la mthode Begin du scnario MagnifyStoryBoard. Cette mthode va enclencher simultanment chacune des animations contenues dans ce scnario :

80


1

Les animation en Silverlight (C#)using using using using using using using using using using using System; System.Collections.Generic; System.Linq; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes;

namespace LearnXaml { public partial class Page : UserControl { public Page() { InitializeComponent(); } private void HeodeLabel_Clic(object sender, MouseButtonEventArgs e) { MagnifyStoryBoard.Begin(); } } } c Fig. 1.51 : Animation non dmarre

c Fig. 1.52 : Animation aprs quelques secondes

81

1

Le langage XAML

c Fig. 1.53 : Animation aprs 10 secondes

Ce scnario a une dur (Duration), une rgle de rptition (RepeatBehavior) et une rgle de renversement (AutoReverse). La dure est le temps que prend un cycle complet de ce scnario ; il sagit dune valeur temporelle reprsente sous la forme hh:mm:ss. La rgle de rptition est elle aussi une valeur temporelle. Si cette rgle avait eu comme valeur 10:00:00, ce scnario se rpterait pendant une priode de 10 heures suivant lappel de la mthode Begin, et sarrterait ensuite. Dans le cas prsent, la valeur de la rgle de rptition est Forever ; cela signie que le scnario redmarrera ad vitam aeternam. La rgle de renversement, quant elle, est une valeur boolenne. Lorsquelle est vraie, une fois arrive sa n, le scnario sera rembobin. Une DoubleAnimationUsingKeyFrame est une animation modiant la valeur dun double (nombre rel) sur une certaine dure. Ses attributs StoryBoard.TagetName et StoryBoard.TargetProperty indiquent respectivement quel lment XAML contient ce double, et le nom de lattribut reprsentant ce double. Ces animations possdent un attribut BeginTime et une dure (Duration). Inutile de prciser que jouer avec ces StoryBoard est une bonne solution pour faire luire un bouton lorsque la souris passe par-dessus, et ainsi de suite.

Crez une bannire Silverlight grce aux animationsGrce au savoir acquis au cours de ce chapitre, il nous est maintenant possible de crer une bannire Silverlight tel que celle du site de Mircrosoft.

82


1

c Fig. 1.54 : Bannire du site Microsoft

Cette bannire affiche 3 publicits diffrentes ; des boutons sur le ct permettent de changer de publicit. Lorsque la souris passe par-dessus un de ces boutons, les publicits glissent les unes sur les autres jusqu ce que la publicit relative au bouton survol soit visible. Commenons par dnir linterface visuelle de la bannire sous la structure suivante :j

Canvas

- StackPanel PubCanvas1 .Publicit1 (Image + Lien vers site web) .Bouton vers Publicit1 - StackPanel PubCanvas2 .Publicit2 (Image + Lien vers site web) .Bouton vers Publicit2 - StackPanel PubCanvas3 .Publicit3 (Image + Lien vers site web) .Bouton vers Publicit3

83

1

Le langage XAML

Interface visuelle de la bannire

84


1

85

1

Le langage XAML

86


1

c Fig. 1.55 : Interface visuelle de la bannire

Leffet voulu est le suivant : chaque passage sur un des Border ToPub1, ToPub2 ou ToPub3, les publicits vont glisser vers la droite pour afficher la publicit relative au Border survol. Si la publicit relative au Border a dj gliss pralablement vers la droite, elle va glisser vers la gauche. Il y a donc 3 tats notre bannire :Publicit3Visible (tat actuel de la bannire) ; Publicit2Visible ; j Publicit1Visible.j j

87

1

Le langage XAML

Pour des raisons de lisibilit du code, crons une numration reprsentant ces tats :Etat de la bannire (C#)using using using using using using using using using using System; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Ink; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes;

namespace SilverlightBanner { public enum EtatBannire { Publicit1Visible, Publicit2Visible, Publicit3Visible } }

Ce sont des animations qui vont nous permettre de passer dun tat lautre. Pour naviguer entre 3 tats, il faut 4 animations (ou scnario en loccurrence, chaque scnario contenant une unique animation). Ces animations sont :DePub3Pub2 ; j DePub2Pub1 ; j DePub1Pub2 ; j DePub2Pub3.j

Ajoutons le code XAML de ces scnarios au chier XAML de linterface :Les animations de la bannire

88


1

89

1

Le langage XAML

Cest ensuite sur les vnements MouseMouve et MouseEnter de chaque Border ToPub quil faut ajouter le dclenchement dun de ces scnarios. Une analyse pralable de la logique applicative semble requise :Analyse de la logique applicative de la bannireDclarer un tat assign Publicit1Visible au dmarage de lapplication Dclarer un boolen signalant si une animation est dj en cours ou non pour viter que 2 animations ne dmarrent en mme temps { Ajouter chaque fin danimation un vnement modifiant ce boolen Modifier ce boolen avant chaque appel de la mthode Begin dun animation } Dclarer une destination de type EtatBannire. Cette destination est la dernire publicit survole par la souris de lutilisateur. Crer une mthode StartNextAnimation qui dmare une animation en fonction des valeurs tat et destination. Appeler cette mthode chaque fin danimation au cas o ltat soit actuel diffrent de la destination actuelle Lors du survol des Borders ToPub. { Assigner la publicit courante comme destination Si aucune animation nest en cours, alors appeler la mthode StartNextAnimation }

90


1

Code de la logique applicative :Code C# de la bannireusing using using using using using using using using using using System; System.Collections.Generic; System.Linq; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes;

namespace SilverlightBanner { public partial class Page : UserControl { private EtatBannire tat = EtatBannire.Publicit3Visible; private bool AnimationEnCours = false; private EtatBannire destination = EtatBannire.Publicit3Visible; public Page() { InitializeComponent(); DePub1Pub2.Completed DePub2Pub1.Completed DePub2Pub3.Completed DePub3Pub2.Completed } void SetEtatToPub1(object sender, EventArgs e) { tat = EtatBannire.Publicit1Visible; AnimationEnCours = false; StartNextAnimation(); } void SetEtatToPub2(object sender, EventArgs e) { tat = EtatBannire.Publicit2Visible; AnimationEnCours = false; StartNextAnimation(); += += += += new new new new EventHandler(SetEtatToPub2); EventHandler(SetEtatToPub1); EventHandler(SetEtatToPub3); EventHandler(SetEtatToPub2);

91

1

Le langage XAML

} void SetEtatToPub3(object sender, EventArgs e) { tat = EtatBannire.Publicit3Visible; AnimationEnCours = false; StartNextAnimation(); } private void ToPub3_MouseEnter(object sender, MouseEventArgs e) { destination = EtatBannire.Publicit3Visible; if (AnimationEnCours == true) return; StartNextAnimation(); } private void ToPub2_MouseEnter(object sender, MouseEventArgs e) { destination = EtatBannire.Publicit2Visible; if (AnimationEnCours == true) return; StartNextAnimation(); } private void ToPub1_MouseEnter(object sender, MouseEventArgs e) { destination = EtatBannire.Publicit1Visible; if (AnimationEnCours == true) return; StartNextAnimation(); } private void StartNextAnimation() { if (tat == destination) return; AnimationEnCours = true; switch (tat)

92


1

{ case EtatBannire.Publicit1Visible: DePub1Pub2.Begin(); break; case EtatBannire.Publicit2Visible: if (destination == EtatBannire.Publicit1Visible) DePub2Pub1.Begin(); else DePub2Pub3.Begin(); break; case EtatBannire.Publicit3Visible: DePub3Pub2.Begin(); break; } } } }

La bannire devrait maintenant fonctionner merveille ; cependant, ce nest pas le cas. Lors de lexcution du premier scnario, la publicit 3 sort du contrle Silverlight et empite sur la page ASP.NET (ou HTML) le contenant.

c Fig. 1.56 : Animation sortant du contrle Silverlight

Ce problme nest pas un problme d au code Silverlight mais bien un problme d au code ASP.NET (ou HTML) gnr par VisualStudio. Dans la page ASP.NET hte du projet de dveloppement Silverlight, remplacez la taille du contrle Silverlight par With =500 et Height=200 :

93

1

Le langage XAML

Page ASP.NET hte dun projet de dveloppement Silverlight SilverlightBanner

La bannire fonctionnera parfaitement.

c Fig. 1.57 : Bannire tat 3 2

94

Check-List

1

c Fig. 1.58 : Bannire tat 2 1

c Fig. 1.59 : Bannire tat 1

1.11 Check-ListCe chapitre vous a fourni les bases ncessaires la comprhension dun chier XAML. Nous avons tudi ici les diffrents contrles et fonctionnalits de base dune interface Silverlight :

a le langage XAML driv du XML ; a les diffrents contrles de Layout structurants une interface ; a quelques contrles daffichages dinformations ; a quelques contrles de captures dinformations ; a les bases du Binding ; a quelques lments de design.Enn, nous avons conclu par la cration complte dune bannire Silverlight.

95

22.1 Introduction Expression Studio ...................... 2.2 Expression Design ...................................... 2.3 Expression Encoder 2 .................................. 2.4 Expression Blend 2 ..................................... 2.5 Intraction entre Expression Blend et Visual Studio 2008 .................................................... 2.6 Check-List ................................................ 98 99 102 104 109 111

Crer vos applications avec Expression StudioDans ce chapitre, vous dcouvrirez la nouvelle gamme doutils Microsoft destine aux graphistes et cratifs. Microsoft Expression Studio vous simpliera la vie lorsque vous devrez crer des applications pousses, au niveau graphique. Dcouvrez lensemble de la gamme doutils dans ce chapitre : Expression Design pour la partie purement graphique, Expression Web pour tout ce qui concerne lintgration de Silverlight et ASP.NET dans vos pages, Expression Blend pour la partie animation et web application, Expression Media et Media Encoder pour lintgration de vos vidos dans Silverlight.

2


2.1 Introduction Expression StudioLorsque vous crez une application, que ce soit pour le Web ou pour toute autre plateforme, vous devez veiller ce que tout soit correctement prsent. Le design, cest--dire linterface du produit, inuence beaucoup les consommateurs. Cest ainsi quApple a, depuis un moment, un succs de plus en plus remarqu grce au design raffin de ses ordinateurs. Jusqualors, lunivers des cratifs et des dveloppeurs tait diffrent. Dun ct, les graphistes utilisaient des suites logicielles dAdobe avec le clbre Photoshop ou Illustrator et dun autre ct, les dveloppeurs employaient des logiciels de dveloppement comme Visual Studio que vous avez dcouvert lors du premier chapitre. Ces logiciels navaient aucune cohrence entre eux, ce qui posait normment de problmes de communication entre cratifs et dveloppeurs. Microsoft, soucieux des mthodologies de travail, a donc cr une nouvelle suite de logiciels appele Expression Studio. Cette suite est plutt destine aux cratifs et intgrateurs. Microsoft a russi son pari pour ces nouveaux logiciels ; non seulement linteroprabilit avec Visual Studio est parfaite, mais en plus, les cratifs qui ont dj eu loccasion de lutiliser ne sont pas dus. Seul bmol pour le moment : Expression Studio tourne uniquement sur du Windows. Seul Microsoft Expression Media 2 peut fonctionner dans un environnement Mac OS. Nul doute que tout le monde nabandonnera pas la suite Adobe mais vous trouverez sur Internet une srie doutils vous permettant de faire la liaison entre la gamme de logiciels Adobe et la gamme Expression Studio. La suite Microsoft a pour vocation de faciliter la cration de RIA (Rich Internet Application).Rich Internet ApplicationCe terme est apparu avec la redcouverte dAJAX. Les applications sont dites riches quand elles permettent beaucoup dinteraction avec lutilisateur. Flash et Silverlight sont orients vers ce genre dinteractions. En effet, comme tout est tlcharg du ct du client, on peut avoir des applications web trs rapides lexcution, ce qui permet une trs bonne ractivit et donc une bonne interaction avec lutilisateur de lapplication. Le mot riche peut aussi tre associ des interfaces jolies ou encore user friendly. Nous verrons dans les prochains sous-chapitres que Expression Studio a tout pour crer ce genre dapplication.

98

Expression Design

2

La gamme Expression Studio comprend 5 outils :j j j j j

Expression Expression Expression Expression Expression

Web ; Blend ; Design ; Media ; Encoder 2.

Les plus utiles, dans le cas de Silverlight, sont Expression Blend, Expression Media et Encoder (les deux derniers sont fortement lis). Si vous ne comptez pas tirer parti de la puissance de Silverlight pour la vido, Expression Blend vous suffira. Expression Studio est payant mais vous disposez dune version dvaluation vous permettant de tester le produit. Vous pourrez trouver ce produit en magasin, la FNAC par exemple ou chez des partenaires Microsoft.Un bon exemple dapplication ralis en XAMLUn bon exemple dapplication ralise en XAML est Expression Studio. En effet, lensemble des outils de la gamme Expression a t ralis en XAML.

Partons maintenant la dcouverte de ces 5 outils qui vous serviront tout au long de la cration dune application web Silverlight.

2.2 Expression DesignExpression Design est un peu le Photoshop de Microsoft. Bien que plus jeune et moins complet, il vous permet de raliser bon nombre dlments graphiques. Son grand intrt par rapport dautres logiciels, est sa connaissance par dfaut du XAML. Comme vous lavez vu, XAML est un langage de dnitions dinterfaces vectorielles. Expression Design gre uniquement des images vectorielles par dfaut, ce qui permet de les convertir trs rapidement en XAML. Prenons un exemple, si dans Expression Design, vous crez un dessin ainsi :

99

2


c Fig. 2.1 : Expression Design 2

Si vous voulez crer le mme dessin en XAML, voici quoi cela ressemblera :

100

Expression Design

2

Imaginez alors combien de temps cela vous prendrait de crer des dessins beaucoup plus complexes ? Expression Design est donc un outil indispensable la ralisation dinterfaces riches. Expression Design fait lobjet de livres entiers. Si vous tes habitu Photoshop, vous naurez aucun problme le prendre en main.XAML vs ImagesSi XAML reprsente une image, pourquoi ne pas directement prendre cette image et lajouter comme ressource notre projet en utilisant la balise XAML Image ? Tout dpend du type dapplications que vous voulez raliser. Si limage fait partie intgrante de votre interface et que celle-ci soit extensible, vous devez la prvoir en XAML. Mais si vous devez afficher une srie darticles avec des images, il est inutile de transformer ces images en XAML.

101

2


2.3 Expression Encoder 2Si vous aimez la vido et que vous vouliez utiliser vos vidos dans Silverlight, Expression Encoder 2 est loutil dont vous avez besoin. Un peu complexe prendre en main au dbut, il vous permet deffectuer tout le processus du dbut la n, cest--dire de lencodage de la vido un rendu dans un lecteur Silverlight prt lemploi. Prenons un exemple avec une vido WMV. Vous pouvez limporter dans Expression Encoder laide du bouton import.

c Fig. 2.2 : Expression Encoder

Une fois la vido importe, vous pouvez la visualiser laide du lecteur intgr au programme. Vous avez la possibilit de couper la vido comme vous le dsirez pour y placer des chapitres ou des explications. Lorsque votre dition est termine, vous pouvez regarder toute une srie de paramtres droite. Dans le dernier onglet, output, vous avez la possibilit de choisir un lecteur pour votre vido. Il en existe toute une srie et vous pouvez en crer vous-mme de nouveaux ou diter les existants en les ouvrant dans Expression Blend laide du petit carr situ juste ct de la liste droulante. Lorsque vous avez termin, cliquez sur Encode et attendez le rsultat qui devrait safficher dans une nouvelle fentre Internet explorer.

102

Expression Encoder 2

2

Si on regarde la page (C:\Users\VOTRE_USER\Documents\Expression\Expression Encoder\Output) qui a t gnre : html, body { margin: 0; padding: 0; height:100% } #divPlayer_0 { min-height: 100%; height:100%; } var player = new StartPlayer_0();

Vous pourrez trouver tous les chiers JavaScript en rapport dans le mme dossier que le chier Default.html. Microsoft Expression Encoder permet galement de senregistrer (voix et son) an de crer vos propres vidos lmes par webcam ou camscope. Pour cela, cliquez sur longlet Live Encoding. Une nouvelle fentre apparat en overlay. Vous devez choisir la source de la vido et la source audio et cliquez sur Start. Une fois lenregistrement effectu, vous obtenez un aperu en vous rendant dans longlet output et en cliquant sur Launch Preview.

103

2


2.4 Expression Blend 2Expression Blend 2 est loutil le plus puissant pour la ralisation dapplication Silverlight 2. Pour commencer, il vous faudra tlcharger le SP1 de Microsoft Expression Blend 2 an davoir la possibilit de crer des projets Silverlight 2. Par dfaut, Blend 2 supporte uniquement les projets Silverlight 1, cest--dire les projets Silverlight base de JavaScript. Pour pouvez tlcharger Microsoft Expression Blend 2 SP ladresse suivante : http:// www.microsoft.com/downloads/details.aspx?FamilyId=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66&displaylang=en.c Fig. 2.3 : Nouveau projet Expression Blend 2 SP1

Aprs avoir install le SP1, vous pouvez crer un projet Silverlight 2 en lui donnant un nom et en cliquant sur OK. Un projet vide sest cr. Vous pouvez basculer entre laffiche design ou XAML par les onglets verticaux de droite. Mme un projet blanc nest pas tout fait vide puisque Blend vous prpare directement un conteneur de base (Grid) :

104

Expression Blend 2

2

Si on passe nouveau du ct Design et que lon ajoute un rectangle, on remarquera que le code XAML sest directement mis jour :

c Fig. 2.4 : Expression Blend 2

Au niveau des proprits des lments, on retrouve assez facilement des lments dj vus dans Microsoft Expression Design 2. Vous pouvez consulter tout les lments XAML disponibles en cliquant sur la double che gauche. Par dfaut, ils ne sont pas tous affichs. Si vous voulez les afficher tous, vous devrez cocher la case en haut droite Show all.

105

2


c Fig. 2.5 : Barre des proprits

Llment le plus important de Blend est la colonne Objects and Timeline. Elle vous permet de visualiser les lments que vous avez ajouts votre projet et surtout de voir leur situation dans le projet. En effet, cette colonne reprsente les lments sous forme darbre de telle manire que vous puissiez voir comment les lments sont imbriqus les uns dans les autres.

Les nomsIl est trs important de donner des noms vos lments. Cest ainsi que vous pouvez les retrouver quand vous en avez beaucoup sur une mme interface. De la mme manire, lorsque vous voudrez interagir avec ceux-ci par code, vous devrez connatre leur nom dans le code. Sils nont pas de noms, on peut considrer les lments comme inaccessibles.

106

Expression Blend 2

2

c Fig. 2.6 : Objects and Timeline

Cest aussi dans cette colonne que vous allez contrler les diffrentes animations de votre application. Ainsi, pour animer votre rectangle, il faut cliquer sur le petit bouton en forme de plus et donner un nom votre animation. Vous entrez alors en mode denregistrement. Vous avez une ligne du temps gauche et un encadr rouge droite qui montre la zone denregistrement. Effectuer une animation avec Blend et Silverlight savre trs simple, surtout si vous tes habitu jouer avec les mmes concepts pour Flash/Flex. Tout se fait par point darrt. Un point darrt est x ds que vous dplacez un lment. Pour crer une animation, placez-vous sur la ligne du temps et dplacez llment. Pour visualiser lanimation, cliquez sur le bouton Play.

c Fig. 2.7 : Animation dans Expression Blend 2

Ces actions trs basiques gnrent du code XAML larrire :

108

Intraction entre Expression Blend et Visual Studio 2008

2

la simple vue de ce code, vous vous rendez compte quel point Expression Blend peut tre utile.La limite dExpression BlendSi les outils pouvaient gnrer le code sans faire derreurs, nous naurions plus besoin dexperts. Trs souvent, une intervention humaine est apprcie pour optimiser le code. Tout ceci sera expliqu dans les concepts avancs. Retenez que Blend ne remplace pas un code bien crit la main. Il est l pour vous simplier la vie mais tentez de toujours comprendre ce quil fait.

2.5 Intraction entre Expression Blend et Visual Studio 2008La plupart du temps, on ne commence pas un projet rel dans Expression Blend ; cela pause de nombreux problmes de portabilit de dorganisation par la suite. Il arrive nanmoins de commencer un projet dans Expression Blend si celui-ci est destin donner un avant-got du logiciel ou de lapplication au client. Cest en effet un trs bon moyen de convaincre un client. Vous pouvez facilement tablir la comparaison avec les graphistes qui dessinent une interface et la montrer au client avant que tout soit implment. Les bonnes pratiques veulent quon cre dabord le projet dans Visual Studio. Si vous travaillez dans un environnement professionnel avec ces outils, vous devez utiliser une solution de gestion de version comme Visual Source Safe ou SVN. Malheureusement, Blend nest pas encore compatible avec ces outils, lutilisation de Visual Studio 2008 est donc recommande. Visual Studio ou Visual Developer ne proposent pas une interface ddition du XAML aussi pousse que Expression Blend. Les prochaines versions du logiciel devraient apporter des amliorations ce niveau. Heureusement, Microsoft a prvu lutilisation de ces deux logiciels en simultan. Lorsque vous crez un projet dans Visual Studio, vous avez la possibilit dditer les chiers XAML directement dans Expression Blend. Pour cela, cliquez du bouton droit sur le chier dont lextension est xaml. Cela a pour effet douvrir directement Blend. La moindre modication dun ct des rpercutions directes de lautre. Vous tes normalement jour dans la gestion de vos chiers.

109

2


Considrez toujours Visual Studio comme votre outil principal et Expression Blend comme un outil de retouche plutt quun outil de cration dapplication Silverlight. Expression Blend ne permet pas de modier les chiers contenant la logique mtier. Si vous cliquez sur la petite croix devant le nom du chier, vous verrez un sous-chier ; cest le chier contenant tout ce qui est dynamique dans lapplication. Seul Visual Studio ou votre Bloc-notes vous permet de modier ces chiers :using using using using using using using using using using using System; System.Collections.Generic; System.Linq; System.Net; System.Windows; System.Windows.Controls; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Animation; System.Windows.Shapes;

namespace SilverlightApplication1 { public partial class Page : UserControl { public Page() { InitializeComponent(); } } }

Si vous travaillez deux sur un mme projet, il arrive frquemment quune personne travaille sur le chier xaml et lautre sur le chier cs. Attention toutefois aux abus ; la plupart du temps, pour avoir un code cohrent, il faut une interface dj bien dnie ; le chier xaml est souvent plus avanc que le chier cs qui lui