Académique Documents
Professionnel Documents
Culture Documents
2006 Micro Application 20-22, rue des Petits-Htels 75010 Paris 1re dition - Septembre 2006
Jean-Alain BAEYENS 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). 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 responsable de toute omission, erreur ou lacune qui aurait pu se glisser dans ce produit 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 fin de dsignation des produits en tant que noms de ces derniers. ISBN : 2-7429-6729-X Couverture ralise par Room22. MICRO APPLICATION 20-22, rue des Petits-Htels 75010 PARIS Tl. : 01 53 34 20 20 Fax : 01 53 34 20 00 http://www.microapp.com Support technique galement disponible sur 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 fiche produit.
7729
Avant-propos
Le collection Guide du codeur sadresse aux personnes inities la programmation qui souhaitent dcouvrir une technologie particulire. Sans ngliger les aspects thoriques, nous donnons toujours priorit la pratique an que vous puissiez rapidement tre autonome. Avant dentrer dans le vif du sujet, notez ces quelques informations gnrales propos de la collection.
Conventions typographiques
An de faciliter la comprhension de 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.
: dans les programmes, indique un retour la ligne d aux contraintes de la mise en page.
Met laccent sur un point important, souvent dordre technique quil ne faut ngliger aucun prix.
Sommaire 1 Introduction . . . . . . . . . . . . . . . . . . . . . . 11
1.1. 1.2. 1.3. Avertissement . . . . . . Prrequis . . . . . . . . . Prsentation de XAML Quest-ce que XAML ? . Petits rappels XML . . . Les principes gnraux . Utiliser XAMLPad . . . Checklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 12 13 13 14 15 17 19
1.4. 1.5.
Fonctionnalits de base . . . . . . . . . . . . . . . 21
2.1. Afficher du texte . Avec un Label . . . Avec un TextBlock . Introduire du texte Crer un bouton . Afficher un cadre . Afficher une image Checklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 22 30 38 46 47 48 53
Sommaire
4.7. 4.8. 4.9. 4.10. 4.11. 4.12. 4.13. Crer un bouton automatique . . . Utiliser un Slider . . . . . . . . . . Utiliser un Expander . . . . . . . . Utiliser une ViewBox . . . . . . . . Utiliser un Popup . . . . . . . . . . Ajouter de la vido dans la fentre Checklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 114 118 121 123 126 129
6.2. 6.3.
6.4.
Sommaire
7.2. 7.3. 7.4. Lier les donnes un objet mtier . . . . . . . . . . . . . . . 203 Lier les donnes sans utiliser le code .NET . . . . . . . . . . 207 Checklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
8.4.
10
11
Le dessin . . . . . . . . . . . . . . . . . . . . . . . 315
11.1. Le dessin en 2D . . . . . . . . . . . . . . . . . . . . . . . . . . 316 11.2. Le dessin en 3D . . . . . . . . . . . . . . . . . . . . . . . . . . 323 11.3. Checklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
12
13
Annexes . . . . . . . . . . . . . . . . . . . . . . . . 351
13.1. XAML sur le Web . . . . . . . . . . . . . . . . . . . . . . . . 352
Sommaire
13.2. Glossaire . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.3. Schma dhritage des diffrentes classes Visual . . . . Schma dhritage des diffrentes classes Visual . . . . . Le dtail de lhritage dans la branche Control. . . . . . . Schma dhritage des diffrentes classes ContentElement Schma dhritage des diffrentes classes Freezable . . . 13.4. Rsum des classes et des attributs utiliss . . . . . . . Classe ArcSegment . . . . . . . . . . . . . . . . . . . . . Classe BezierSegment . . . . . . . . . . . . . . . . . . . . Classe Border . . . . . . . . . . . . . . . . . . . . . . . . . Classe Button . . . . . . . . . . . . . . . . . . . . . . . . . Classe Canvas . . . . . . . . . . . . . . . . . . . . . . . . Classe CheckBox . . . . . . . . . . . . . . . . . . . . . . Classe ColorAnimation . . . . . . . . . . . . . . . . . . . Classe ComboBox . . . . . . . . . . . . . . . . . . . . . . Classe DiffuseMaterial . . . . . . . . . . . . . . . . . . . . Classe DirectionalLight . . . . . . . . . . . . . . . . . . . Classe DockPanel . . . . . . . . . . . . . . . . . . . . . . Classe DocumentViewer . . . . . . . . . . . . . . . . . . . Classe DoubleAnimation . . . . . . . . . . . . . . . . . . Classe DoubleAnimationUsingKeyFrames . . . . . . . . Classe Ellipse . . . . . . . . . . . . . . . . . . . . . . . . . Classe EventTrigger . . . . . . . . . . . . . . . . . . . . . Classe Expander . . . . . . . . . . . . . . . . . . . . . . . Classe Figure . . . . . . . . . . . . . . . . . . . . . . . . . Classe FixedPage . . . . . . . . . . . . . . . . . . . . . . Classe FixedDocument . . . . . . . . . . . . . . . . . . . Classe Floater . . . . . . . . . . . . . . . . . . . . . . . . Classe FlowDocument . . . . . . . . . . . . . . . . . . . . Classe GradientStop . . . . . . . . . . . . . . . . . . . . . Classe Grid . . . . . . . . . . . . . . . . . . . . . . . . . . Classe GridSplitter . . . . . . . . . . . . . . . . . . . . . . Classe GridView . . . . . . . . . . . . . . . . . . . . . . . Classe GridViewColumn . . . . . . . . . . . . . . . . . . Classe Hyperlink . . . . . . . . . . . . . . . . . . . . . . . Classe Image . . . . . . . . . . . . . . . . . . . . . . . . . Classe ImageBrush . . . . . . . . . . . . . . . . . . . . . . Classe Label . . . . . . . . . . . . . . . . . . . . . . . . . Classe Line . . . . . . . . . . . . . . . . . . . . . . . . . . Classe LinearGradientBrush . . . . . . . . . . . . . . . . Classe LineSegment . . . . . . . . . . . . . . . . . . . . . Classe ListBox . . . . . . . . . . . . . . . . . . . . . . . . Classe ListView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 363 363 364 366 366 368 368 368 368 369 370 371 373 373 374 374 375 375 376 376 376 377 377 377 378 379 379 380 380 380 381 382 382 382 383 383 384 385 385 385 386 387
Sommaire
Classe Menu . . . . . . . . . . Classe MenuItem . . . . . . . . Classe MeshGeometry3D . . . Classe NavigationWindow . . Classe ObjectDataProvider . . Classe Page . . . . . . . . . . . Classe PageContent . . . . . . Classe Paragraph . . . . . . . . Classe Path . . . . . . . . . . . Classe PathFigure . . . . . . . Classe Pen . . . . . . . . . . . Classe PerspectiveCamera . . . Classe Polygon . . . . . . . . . Classe Polyline . . . . . . . . . Classe PolylineSegment . . . . Classe Popup . . . . . . . . . . Classe RadialGradientBrush . Classe RadioButton . . . . . . Classe Rectangle . . . . . . . . Classe RotateTransform . . . . Classe RepeatButton . . . . . . Classe ScaleTransform . . . . Classe ScrollViewer . . . . . . Classe Section . . . . . . . . . Classe Setter . . . . . . . . . . Classe SkewTransform . . . . Classe Slider . . . . . . . . . . Classe SolidColorBrush . . . . Classe SplineDoubleKeyFrame Classe StackPanel . . . . . . . Classe StoryBoard . . . . . . . Classe Style . . . . . . . . . . . Classe Table . . . . . . . . . . Classe TableCell . . . . . . . . Classe TableColumn . . . . . . Classe TableRow . . . . . . . . Classe TabControl . . . . . . . Classe TabItem . . . . . . . . . Classe TextBlock . . . . . . . . Classe TextBox . . . . . . . . . Classe Toolbar . . . . . . . . . Classe ToolbarTray . . . . . . Classe TranslateTransform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 387 388 388 389 389 390 391 392 392 392 393 393 393 393 394 394 394 395 396 396 396 396 397 397 397 398 399 399 399 400 400 401 401 401 401 401 402 403 404 405 405 406
Sommaire
Classe TreeView . . . . . . . . . . . . . . . . . . . . . . Classe TreeViewItem . . . . . . . . . . . . . . . . . . . Classe Trigger . . . . . . . . . . . . . . . . . . . . . . . Classe ViewBox . . . . . . . . . . . . . . . . . . . . . . Classe Viewport3D . . . . . . . . . . . . . . . . . . . . Classe Window . . . . . . . . . . . . . . . . . . . . . . . Classe WrapPanel . . . . . . . . . . . . . . . . . . . . . Classe XmlDataProvider . . . . . . . . . . . . . . . . . Classes autorises dans la zone internet . . . . . . . . Liste des touches de raccourcis pour les commandes ddition . . . . . . . . . . . . . . . . . . . . . . . . . . Liste des classes par catgories . . . . . . . . . . . . . Liste des couleurs prdnies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 406 406 407 407 408 409 409 409
14
Index . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Ch apit re
1 Introduction
Avertissement ............................................. Prrequis ................................................... Prsentation de XAML ................................. Utiliser XAMLPad ....................................... Checklist ....................................................
12 12 13 17 19
Introduction
1.1 Avertissement
Ce livre vous fera dcouvrir progressivement XAML au moyen dexemples. Nous partirons des fonctionnalits les plus simples et les plus utiles pour aller vers des notions un peu plus complexes. Toutefois, an que vous puissiez facilement revenir par la suite sur une fonctionnalit particulire, les lments sont regroups le plus possible dans des chapitres ddis. la n du livre, vous trouverez un rcapitulatif des classes et des attributs utiliss. Celui-ci se veut non pas un rfrentiel complet mais plutt un rcapitulatif des notions vues. Il sagit dune prsentation du XAML et non de WinFX. Cest pourquoi nous nous attacherons principalement aux techniques accessibles depuis XAML, mme si certains moments nous devrons videmment voir ou raliser le code .NET associ. Au moment o ces lignes ont t crites, le code XAML et la bibliothque WinFX avec laquelle il travaille taient toujours en version bta et susceptibles dtre modis. Il se peut que certaines fonctionnalits aient entre-temps t ajoutes ou retires. Comme nous nous intresserons surtout aux fonctions les plus courantes, il est probable que le contenu de ce livre respecte les rgles en vigueur dans la version dnitive du produit.
1.2 Prrequis
Avant de pouvoir dvelopper avec XAML et WinFX, vous devez au pralable installer le Framework .NET 2.0 ainsi quune version de Visual Studio 2005. Vous pourriez utiliser nimporte quel diteur de texte, et ce y compris Notepad, mais lutilisation de Visual Studio vous facilitera grandement la vie, que ce soit pour la cration des projets ou la compilation de votre application. Il vous apporte galement lIntelliSense, ce qui est un trs gros avantage. Vous devez ensuite installer le kit de dveloppement WinFX. Attention, Windows XP SP2, Windows 2003 ou Windows Vista est requis pour pouvoir linstaller ! Pour raliser les exemples, nous utiliserons dune part "XAMLPad", un petit utilitaire livr avec le kit de dveloppement et dautre part "Microsoft Visual Basic 2005 Express Edition". An de bncier de toutes les fonctionnalits dans Visual Studio, vous devez galement installer lextension pour Visual Studio. Lensemble de ces lments sera repris dans le Framework 3.0, dont la sortie est attendue pour le dbut de lanne 2007.
12 Le guide du codeur
Prsentation de XAML
Windows Communication Fundation ; Windows Presentation Fundation ; Windows Workow Fundation ; Windows CardSpace ; .NET Framework 2.0.
XAML, quant lui, est un langage de description fond sur la norme XML. Contrairement au XML, les noms des balises et leur contenu doivent respecter une syntaxe stricte et correspondre une classe de WPF. Tout ce qui est fait en XAML peut galement tre fait dans du code traditionnel. De mme, XAML ne supporte quune partie du modle offert par WPF. Il offre en revanche une beaucoup plus grande lisibilit et une sparation entre le code logique et linterface graphique. Le XAML va nous permettre de dcrire les crans de lapplication. Le reste du traitement se fait de manire traditionnelle, via du code .NET. Dans le cadre de ce guide dinitiation, les parties .NET des exemples sont en Visual Basic .NET mais, si vous prfrez, vous pouvez bien entendu utiliser du C# ou nimporte quel autre langage .NET. Lapprentissage du .NET nest pas lobjectif de ce guide ; nanmoins, pour une bonne comprhension des exemples, il sera souvent ncessaire de voir aussi bien la partie XAML que la partie .NET. An de mieux comprendre la place de WinFX, de .NET et de XAML dans larchitecture, vous pouvez vous rfrer au schma ci-dessous.
Le guide du codeur 13
Introduction
Comme vous pouvez le constater, XAML, comme les langages .NET, forme la couche suprieure et reprsente linterface avec le dveloppeur. En dessous, nous retrouvons les couches composes de code manag ainsi que la CLR ncessaire pour lexcution de ce code. La dernire partie est la couche de communication avec Windows lui-mme. noter que WPF est pour sa part compos effectivement de Presentation Framework, de Presentation Core et de Milcore.
Un nud est tout ce qui se trouve entre une balise ouvrante <NomDuNoeud > et une balise fermante </ NomDuNoeud>. Les attributs sont des informations qui se placent dans la balise ouvrante.
<NomDuNoeud MonAttribut= "valeur">
Lattribut est toujours suivi du symbole = et dune valeur entre guillemets. Si le nud ne contient que des attributs, la syntaxe autorise de ne pas placer de balise fermante. La balise ouvrante se termine alors par le symbole /.
<NomDuNoeud MonAttribut= "valeur" />
Pour commenter du code XML, vous inclurez les commentaires dans une balise spcique.
<!-- votre commentaire -->
14 Le guide du codeur
Prsentation de XAML
permet dinstancier un objet de la classe Window. Si vous dsirez initialiser une proprit de la classe, il suffit dajouter un attribut dans le nud XML ou, selon les cas, de crer un nud enfant. Exemple :
<Window Title= "Titre" />
Cette balise permet dassigner la valeur "Titre" la proprit Titel de la classe Window. Notez que mme les proprits numriques doivent tre assignes comme une chane de caractres. Pour les valeurs boolennes, vous devez assigner True ou False entre guillemets. Pour les collections, il sagit de dnir des nuds enfants. Par exemple :
<Window> <Window.InputBindings> </Window.InputBindings> < /Window>
Le langage XAML est sensible la majuscule Vous devez respecter lcriture exacte dnie dans la documentation, et cela mme si votre projet est en Visual Basic. Ncrivez donc pas WINDOW mais bien Window.
Comme en XAML les noms des attributs des balises XML correspondent aux noms des proprits de la classe associe, nous parlerons indistinctement dans ce livre dattribut ou de proprit.
Le guide du codeur 15
Introduction
Pour mieux comprendre cette notion de correspondance entre XAML et les langages .NET, sachez que les deux bouts de code ci-dessous ont la mme fonction. En XAML :
<Label Name="lblNom" Width="60" Height="20"> mon nom </Label>
En VB .NET :
Dim lblNom as new Label lblNom.Width = 60 lblNom.Height = 20 lblNom.Text = "mon nom"
Comme vous pouvez le constater, ce qui est fait en XAML peut parfaitement tre fait en code .NET. Toutefois, la bonne pratique veut que lon utilise XAML pour dcrire linterface et les langages .NET traditionnels pour les traitements. Pour une mme classe, vous aurez alors vraisemblablement deux chiers de sources, un en XAML et lautre en code .NET. Les deux seront fusionns lors de la compilation. Nous reviendrons sur les diffrents chiers automatiquement gnrs ou non au cours de ce livre, au fur et mesure des besoins et de lexplication des diffrentes notions. Sachez toutefois que du code XAML seul peut dj tre compris par le systme et interprt sans mme devoir utiliser un compilateur. Cest par ce genre de code que nous allons commencer. XAML contient malgr tout quelques petites subtilits que nous allons dtailler. Tout dabord, le code XAML doit contenir un lment root comme le veut XML, mais cet lment doit tre un lment faisant partie du modle dapplication comme Window ou Page ou encore un conteneur tel Grid ou StackPanel. Nous reviendrons ultrieurement sur la notion de conteneur et dlments dapplication. Cet lment root doit contenir comme attribut la dclaration de deux Namespaces au minimum. Cette dclaration se fait en utilisant lattribut classique xmlns.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
Sil est ncessaire de faire rfrence dautres namespaces, il sera ncessaire dajouter dautres attributs xmlns en respectant la syntaxe ci-dessous.
16 Le guide du codeur
Utiliser XAMLPad
Lassembly peut tre omis si le namespace est contenu dans le mme assembly que le programme. XAML autorise galement lutilisation dattributs particuliers, dont voici les principaux.
Attributs spciques Attribut Utilit
x:Name
Cet attribut a la mme fonction que lattribut Name, qui est gnralement prsent. Ils sont totalement interchangeables mais ne peuvent tre utiliss simultanment. Prfrez Name x:Name et limitez lusage de ce dernier aux objets qui ne disposent pas de la proprit Name. Est encore un moyen de donner un nom mais, typiquement, ce type de nommage est utilis pour nommer des ressources. Il ne sagit en aucun cas du mme usage que x:Name. Attribut plac dans llment root ; il fait le lien avec la classe dnie dans le code behind (.NET). Permet de spcier dautres modieurs que partial et public, qui sont les valeurs par dfaut. Pour dnir une valeur nulle une proprit. Permet dintroduire du code .NET dans le chier XAML. Il sera gnralement utilis en conjonction avec CDATA :
<x:Code> <![CDATA[ Code ]]> </x:Code>
x:Key
Pour accder une valeur statique dune classe. Dans XAML, il a le mme effet que TypeOf dans le code .NET. Pour dterminer le type des arguments qui doivent tre reus. Cet attribut est principalement utilis par PageFunction. Permet dinstancier un array comme valeur dun attribut. Toutefois, il nest pas possible de remplir cet array dans le code XAML.
Ces diffrentes notions seront abordes par lexemple dans la suite de ce livre.
Introduction
XamlPad se prsente comme une fentre en deux parties. La partie suprieure affiche le rsultat du code et la partie infrieure, le code lui-mme.
En rsum, vous tapez le code en bas, il affiche le rsultat en haut. Cest aussi simple que cela. Pour faciliter la vision, vous disposez de quelques options :
j
Auto Parse, qui est active par dfaut et traite en temps rel votre code
Long code source Si votre code est long, vous pouvez dsactiver loption AutoParse. Cela vous vitera de dsagrables effets de rafrachissement.
j j
Avec les autres options de la barre doutils, vous pouvez changer la police utilise pour le code, choisir de cacher temporairement le code ou encore faire un zoom de la fentre daffichage du rsultat. Consultez la barre de statut, elle vous donne de prcieux renseignements sur votre code en cours de frappe.
18 Le guide du codeur
Checklist
Il est dommage que lIntelliSense ne soit pas disponible dans cet utilitaire. Si vous dsirez en disposer, vous pouvez reproduire les exemples dans Visual Studio. Mais vous devrez alors pralablement crer un projet spcique et demander chaque fois lexcution pour visualiser le rsultat. Vous pouvez vous reporter au chapitre Crer une application
Renvoi Windows page 132 pour vous aider crer votre projet.
1.5 Checklist
Les notions essentielles que nous avons vues dans ce premier chapitre sont :
j j j j
le matriel ncessaire pour dbuter en programmation XAML ; les bases du XML ; comment fonctionne XAML ; comment utiliser loutil XAMLPad.
Le guide du codeur 19
Ch apit re
2 Fonctionnalits de base
Afficher du texte .......................................... Introduire du texte ....................................... Crer un bouton .......................................... Afficher un cadre ......................................... Afficher une image ....................................... Checklist .................................................... 22 38 46 47 48 53
Fonctionnalits de base
Dans ce chapitre, nous allons voir de manire individuelle les diffrents lments de base ncessaires la ralisation dune interface utilisateur. Cela nous permettra daborder laffichage et la saisie de texte, laffichage dune image et lutilisation dun bouton. Avec ce minimum de connaissance, nous pourrons ensuite passer ltape suivante, qui sera le placement des lments. Cest seulement aprs que nous aborderons les autres contrles classiquement utiliss. Dans le but de grouper les fonctionnalits, nous ne nous contenterons pas de survoler ces fonctionnalits mais les verrons assez en profondeur.
Avec un Label
Le Label est probablement le contrle le plus utilis. Il reste trs simple manipuler mais, comme vous allez le constater, il nous rserve dagrables surprises. Pour crer un label, vous devez utiliser la balise du mme nom.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <Label> Mon premier label. </Label> </StackPanel> </Page>
Ne vous souciez pas pour linstant des balises Page et StackPanel. Nous verrons ultrieurement quoi elles servent et comment les utiliser. Sachez seulement que, sans la balise Page ou une autre balise racine valide, vous ne pourrez visualiser le rsultat. La balise StackPanel sert de conteneur. Nous reviendrons sur les conteneurs dans le chapitre Disposer les
Renvoi lments lcran sur la mise en page (page 56).
22 Le guide du codeur
Afficher du texte
Dans la suite, ces balises ne seront plus systmatiquement reprises au sein des exemples mais elles devront videmment tre prsentes.
Au lieu de placer le code entre la balise de dbut et la balise de n du nud Label, vous pouvez galement opter pour assigner lattribut Content. Le rsultat sera le mme. La syntaxe devient alors :
<Label Content="Mon premier label."/>
Porte des explications Les attributs que nous allons voir dans cette partie seront galement utilisables pour les autres contrles que nous aborderons ultrieurement.
Comme beaucoup de contrles, le Label occupe un espace rectangulaire. Nous pouvons nous en rendre compte en affichant un bord autour de notre contrle.
<Label BorderBrush="Chocolate" BorderThickness="1"> Mon premier label. </Label>
Les deux attributs sont ncessaires car aucune couleur nest dnie par dfaut et la taille est de zro.
Le guide du codeur 23
Fonctionnalits de base
La taille occupe dpend de divers paramtres comme la taille de la fentre. Si vous souhaitez contrler la taille de cette zone, vous pouvez utiliser les attributs Width et Height. Dans lexemple, nous allons xer la taille 200 pixels de large sur 60 pixels de haut.
<Label BorderBrush="Chocolate" BorderThickness="1" Width="200" Height="60"> Mon premier label. </Label>
24 Le guide du codeur
Afficher du texte
Centrage Notez au passage que par dfaut le contrle est centr horizontalement.
Ce nest pas le seul moyen de contrler la taille du Label. XAML met galement notre disposition les attributs MinWidth, MinHeight, MaxWidth et MaxHeight. Avec ces attributs, vous laissez la taille sadapter lenvironnement tout en xant des valeurs limites.
<Label BorderBrush="Chocolate" BorderThickness="1" MinWidth="100" MinHeight="30" MaxWidth="300" MaxHeight="80"> Mon premier label. </Label>
Si la position du texte ne vous convient pas, vous avez lopportunit de modier lalignement horizontal et vertical. Vous pouvez utiliser les attributs HorizontalContentAlignment et VerticalContentAlignment.
<Label BorderBrush="Chocolate" BorderThickness="1" Width="200" MinHeight="60" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom"> Mon premier label. </Label>
Le guide du codeur 25
Fonctionnalits de base
Les valeurs possibles sont respectivement Left, Rigth, Center, Stretch et Top pour lalignement horizontal et Bottom, Center et Stretch pour lalignement vertical.
Ne pas confondre Ne confondez pas ces deux attributs avec les attributs VerticalAlignment et HorizontalAlignment, qui permettent de centrer le contrle dans son conteneur.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Label BorderBrush="Chocolate" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center"> Mon premier label. </Label> </Page>
Absence de la balise StackPanel Pour une meilleure comprhension, dans cet exemple, la balise StackPanel a t retire. Cest pourquoi le code est prsent complet.
26 Le guide du codeur
Afficher du texte
Si la police par dfaut ne vous convient pas, vous disposez de cinq attributs diffrents pour ladapter votre got. Lattribut FontFamily permet de slectionner le type de police comme Arial ou Verdana. Lattribut FontSize dtermine la taille.
<Label HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Verdana" FontSize="14" FontWeight="Heavy" FontStyle="Italic" FontStretch="UltraExpanded"> Mon premier label. </Label>
Le guide du codeur 27
Fonctionnalits de base
Contrairement ce que nous connaissions avant, les possibilits sont bien plus tendues. FontStrech accepte pas moins de dix valeurs diffrentes allant de UltraCondensed UltraExpanded alors que FontWeight accepte quatorze valeurs allant de Thin Heavy. La taille du font peut varier de 1 35 791. En ce qui concerne les couleurs, nous disposons des attributs trs traditionnels Foreground et Background.
<Label HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Verdana" FontSize="14" FontWeight="Heavy" FontStyle="Italic" FontStretch="UltraExpanded" Foreground="Aquamarine" Background="Blue"> Mon premier label. </Label>
Nous avons vu les principales possibilits offertes avec le contrle Label et qui sont par ailleurs applicables aux autres contrles classiques que nous verrons dans ce chapitre.
Nommer ses contrles Pour pouvoir ultrieurement interagir avec les diffrents contrles que vous avez crs, ils doivent porter un nom. Bien que vous nayez pas interagir avec tous les contrles, je vous conseille de les nommer tous, et ce y compris les Label. Votre code sen trouvera beaucoup plus clair.
28 Le guide du codeur
Afficher du texte
Pour nommer le contrle, vous devez utiliser lattribut Name. Vous vous rendrez vite compte quil est utile dutiliser systmatiquement cet attribut.
<Label Name="lblPremierLabel" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Verdana" FontSize="14" FontWeight="Heavy" FontStyle="Italic" FontStretch="UltraExpanded" Foreground="Aquamarine" Background="Blue"> Mon premier label. </Label>
Donner toujours des noms clairs ses contrles La comprhension nale de votre programme sera grandement accrue si les noms donns sont clairs et sans ambigut. Si, sur le moment, cela vous parat superu, lors de modications ultrieures vous serez trs heureux de lavoir fait. Dans les exemples, en plus dun nom explicite, je commence par un prxe qui identie le type de contrle. Il existe dautres conventions de nommage, chacune ayant ses avantages et ses inconvnients. Choisissez-en une et tenez-vous-y.
signie que chaque mot dans le nom donn commence par une majuscule et que le reste du mot est en minuscule. Nom dun membre public
CamelCase suivi de _m. La bonne pratique veut que les membres publics soient vits. Prfrez un membre priv associ une proprit pour y accder. Ex. : NomDeRue_m CamelCase commenant par une minuscule et termin par _m. Ex. : nomDeRue_m CamelCase commenant par une majuscule. Si la proprit est associe un membre, le nom de la proprit sera le mme que le nom du membre associ mais sans le _m. Ex. : NomDeRue
Le guide du codeur 29
Fonctionnalits de base
camelCase commenant par une minuscule Si la proprit est associe un membre, le nom de la proprit sera le mme que le nom du membre associ mais sans le _m. Ex. : nomDeRue CamelCase commenant par une minuscule. Ex. : nomDeRue (en VB, vu que le langage est insensible aux majuscules, il sera probablement utile dajouter le suffixe _v pour viter la confusion avec la proprit) CamelCase termin par le type de contrle. Microsoft prconise maintenant que le type soit crit dans son entiret (TextBox et non Txt). Ex. : nomDeRueTextBox Comme dailleurs dans ce livre, vous trouverez souvent le type de contrle en prxe et non en suffixe. Toutefois, le fait de placer le type la n a lavantage de regrouper les lments concernant une mme donne dans lIntelliSense. La bonne pratique veut que les contrles soient privs. Si tel nest pas le cas, le nom doit commencer par une majuscule.
Nom de variable
Avec un TextBlock
Lorigine du TextBlock est plutt Web que Windows. Il fait pourtant son entre dans lAPI disponible pour les applications Windows classiques. Contrairement au contrle de type Label, TextBlock nhrite pas de la classe Control. TextBlock est optimis pour laffichage de longs textes. Je ne reviendrai pas sur la manire de modier les couleurs ou la police, il suffit dutiliser lidentique les techniques vues prcdemment. Le TextBlock ncessite un peu plus de mise en forme que le Label, qui se contente dun minimum. En effet, si nous utilisons la commande ci-dessous :
<TextBlock Name="blckTexte"> Nous sommes maintenant arrivs notre deuxime contrle. Comme vous avez dj pu le constater, XAML est la fois simple dutilisation et performant. </TextBlock>
30 Le guide du codeur
Afficher du texte
Il est possible de dterminer une taille la zone daffichage, et ainsi nous pouvons demander un arrangement automatique du texte.
<TextBlock Name="blckTexte" MaxWidth="200" MaxHeight="70" TextWrapping="Wrap"> Nous sommes maintenant arrivs notre deuxime contrle Comme vous avez dj pu le constater, XAML est la fois simple dutilisation et performant. </TextBlock>
Le guide du codeur 31
Fonctionnalits de base
Limiter la taille au lieu de la xer Au lieu de xer la taille, choisissez de dlimiter une taille maximale. De cette manire, si nous rduisons la taille de la fentre, le texte sadapte au mieux aux modications.
Lattribut TextWrapping peut prendre les valeurs NoWrap, Wrap mais galement WrapWithOverflow. Dans ce dernier cas, la taille du contrle sera automatiquement agrandie si ncessaire, mme si vous avez dni une taille avec lattribut Height. Bien sr, si pour quelque motif que ce soit la zone rserve au TextBlock devient trop petite, le texte ne pourra plus tre entirement affich. Dans ce cas, lattribut TextTrimming nous permettra dinclure automatiquement les signalant ainsi lutilisateur que le texte est incomplet.
<TextBlock Name="blckTexte" MaxWidth="200" MaxHeight="70" TextWrapping="Wrap" TextTrimming="WordEllipsis"> Nous sommes maintenant arrivs notre deuxime contrle Comme vous avez dj pu le constater, XAML est la fois simple dutilisation et performant. </TextBlock>
32 Le guide du codeur
Afficher du texte
Lattribut TextTrimming, en plus de la valeur par dfaut (None), peut prendre deux valeurs diffrentes. Soit WordEllipsis, comme dans notre exemple, o larrt se fait aprs un mot entier, soit CharacterEllipsis, qui provoque larrt derrire nimporte quel caractre. Comme vous pouvez le constater, le contrle se place trs prs des bords de son conteneur, ce qui nest pas forcment du meilleur effet. Vous pouvez dnir une marge tout autour de votre contrle en utilisant lattribut Margin. Cet attribut nest pas spcique au TextBlock et nous aurions dj pu lutiliser avec le contrle de type Label.
<TextBlock Name="blckTexte" MaxWidth="200" MaxHeight="70" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="5,5,5,5" > Nous sommes maintenant arrivs notre deuxime contrle. Comme vous avez dj pu le constater, XAML est la fois simple dutilisation et performant. </TextBlock>
Pour terminer les spcicits du TextBlock par rapport au Label, il nous reste voir lattribut TextAlignment. Les valeurs possibles sont les trs classiques Left, Right, Center et Justify.
<TextBlock Name="blckTexte" MaxWidth="200" MaxHeight="70" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="5,5,5,5" TextAlignment="Justify" > Nous sommes maintenant arrivs notre deuxime contrle. Comme vous avez dj pu le constater, XAML est la fois simple dutilisation et performant. </TextBlock>
Le guide du codeur 33
Fonctionnalits de base
De plus, le TextBlock permet denrichir le contenu. Vous pouvez par exemple y inscrire du texte en gras, en italique ou soulign.
<TextBlock Name="blckTexte" MaxWidth="200" MaxHeight="70" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="5,5,5,5" TextAlignment="Justify" > Nous sommes maintenant arrivs notre deuxime contrle Comme vous avez dj pu le constater, <Bold>XAML</Bold> est la fois <Underline>simple dutilisation</Underline> et <Italic>performant</Italic>. </TextBlock>
34 Le guide du codeur
Afficher du texte
Si ces possibilits denrichissement ne vous suffisent pas, vous pouvez utiliser TextDecoration. Cette proprit nest pas spcique TextBlock, et vous pouvez la retrouver quasiment partout o du texte est affich. Elle est accessible grce la balise TextBlock. TextDecorations, pour un autre contrle, remplace TextBlock par la valeur approprie. Elle permet dajouter des dcorations vos caractres. La description de la dcoration est dnie lintrieur du nud TextDecoration. La dcoration est en ralit un trait qui peut tre plac quatre endroits diffrents. La position est dnie au moyen de la proprit Location. Elle peut tre au-dessus du caractre, au milieu du caractre, sous le caractre ou juste sous le caractre. La taille, la couleur, la forme du trait sont dnies avec un objet de type Pen. Ci-dessous, vous trouverez un code complet reprenant les diffrentes possibilits numres ci-avant.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <TextBlock TextWrapping="WrapWithOverflow" Margin="5,5,5,5" Width="800" HorizontalAlignment="Center"> <Bold>Non seulement vous pouvez utiliser lenrichissement classique</Bold> mais vous pouvez aussi utiliser un enrichissement plus complexe <LineBreak/>
Le TextBlock suivant utilise une dcoration au milieu du caractre. Le trait est rouge et dune paisseur de 2 points.
<TextBlock> <TextBlock.TextDecorations> <TextDecoration Location="Strikethrough"> <TextDecoration.Pen> <Pen Brush="Red" Thickness="2"/> </TextDecoration.Pen> </TextDecoration> </TextBlock.TextDecorations> comme du barr color </TextBlock> <LineBreak/>
Le TextBlock suivant utilise une dcoration sous le caractre. Le trait est bleu et toujours dune paisseur de 2 points.
Le guide du codeur 35
Fonctionnalits de base
<TextBlock> <TextBlock.TextDecorations> <TextDecoration Location="Underline"> <TextDecoration.Pen> <Pen Brush="Blue" Thickness="2"/> </TextDecoration.Pen> </TextDecoration> </TextBlock.TextDecorations> comme un soulignement en bleu </TextBlock> <LineBreak/>
Le TextBlock suivant utilise une dcoration juste sous le caractre. Le trait est noir et dune paisseur de 1 point.
<TextBlock> <TextBlock.TextDecorations> <TextDecoration Location="Baseline"> <TextDecoration.Pen> <Pen Brush="Black" Thickness="1"/> </TextDecoration.Pen> </TextDecoration> </TextBlock.TextDecorations> comme une fine ligne sous les caractres </TextBlock> <LineBreak/>
Le TextBlock suivant utilise une dcoration au-dessus du caractre. Le trait est rouge et dune paisseur de 2 points.
<TextBlock> <TextBlock.TextDecorations> <TextDecoration Location="OverLine"> <TextDecoration.Pen> <Pen Brush="Red" Thickness="2"/> </TextDecoration.Pen> </TextDecoration> </TextBlock.TextDecorations> ou encore une ligne au dessus </TextBlock> <LineBreak/>
Le TextBlock suivant utilise plusieurs dcorations. Une premire juste sous le caractre. Le trait est rouge, dune paisseur de 1 point et discontinu. La seconde est sous le caractre. Le trait est bleu, dune paisseur de 1 point et est continu. Les deux ensembles ralisent un double trait spcique.
36 Le guide du codeur
Afficher du texte
<TextBlock> <TextBlock.TextDecorations> <TextDecoration Location="Baseline"> <TextDecoration.Pen> <Pen Brush ="Red" Thickness="1"> <Pen.DashStyle> <DashStyle Dashes="1"/> </Pen.DashStyle> </Pen> </TextDecoration.Pen> </TextDecoration> <TextDecoration Location="Underline"> <TextDecoration.Pen> <Pen Brush="Blue" Thickness="1"/> </TextDecoration.Pen> </TextDecoration> </TextBlock.TextDecorations> Bien sur vous pouvez mlanger ces options et utiliser </TextBlock> <LineBreak/>
Ce dernier TextBlock utilise une dcoration sous le caractre. Le trait est dune paisseur de 4 points et dun dgrad allant dun bleu lger un bleu fonc.
<TextBlock> <TextBlock.TextDecorations> <TextDecoration Location="Underline"> <TextDecoration.Pen> <Pen Thickness="4"> <Pen.Brush> <LinearGradientBrush> <LinearGradientBrush .GradientStops> <GradientStop Color="LightBlue" Offset="0"/> <GradientStop Color="DarkBlue" Offset="1"/> </LinearGradientBrush .GradientStops> </LinearGradientBrush> </Pen.Brush> </Pen> </TextDecoration.Pen> </TextDecoration> </TextBlock.TextDecorations> ou encore dutiliser des dgrads
Le guide du codeur 37
Fonctionnalits de base
</TextBlock> <LineBreak/> <LineBreak/> Les possibilits sont infinies ! </TextBlock> </StackPanel> </Page>
Notez au passage lutilisation de la balise LineBreak pour provoquer un passage ligne impos. Dans lexemple, vous aurez pu constater la prsence dun dgrad ;
Renvoi si vous souhaitez en savoir plus sur cette fonctionnalit, elle est
38 Le guide du codeur
Introduire du texte
Nous pouvons appliquer ce contrle tout ce que nous avons dj vu pour le contrle Label.
Appliquer des marges Pour une question de lisibilit et de mise en page, je vous conseille dappliquer systmatiquement des marges vos contrles de type TextBox.
Le guide du codeur 39
Fonctionnalits de base
Lattribut MaxLength va nous permettre de limiter lencodage. Ce qui est bien pratique quand le contenu doit tre enregistr dans une base de donnes. Vous vitez ainsi une perte dinformation linsu de lutilisateur ou des problmes plus tard dans le code. Lattribut CharacterCasing limite lui aussi lencodage en imposant automatiquement le texte en majuscule (valeur Upper) ou en minuscule (valeur Lower). Jaurais galement apprci la possibilit de forcer la premire lettre en majuscule et les autres en minuscules mais, actuellement, ce nest pas prvu.
<TextBox Name="txtNom" Margin="3,3,3,3" MaxLength="20" CharacterCasing="Upper" />
Un TextBox peut galement tre multiligne. Dans ce cas, vous aurez la possibilit dajuster son utilisation avec les attributs AcceptsReturn, AcceptsTab et TextWrapping. Lattribut AcceptsReturn autorise ou non lutilisation du passage la ligne impos (touche [Entre]). Lattribut AcceptsTab autorise ou non lemploi de la tabulation.
Dplacement par tabulations Si vous autorisez lutilisation de la tabulation, elle ne pourra videmment plus tre utilise pour passer au champ suivant. Toutefois, mais il faut le savoir, la combinaison [Ctrl]+[Tab] remplit aussi cette fonction.
40 Le guide du codeur
Introduire du texte
Lattribut TextWrapping dtermine le comportement du contrle quand le texte frapp arrive en bout de ligne. Les valeurs possibles sont NoWrap, Wrap et WrapWithOverflow. Cette dernire va non seulement provoquer un passage la ligne automatique mais, contrairement Wrap, galement tendre vers le bas la zone prvue initialement.
<TextBox Name="txtNom" Margin="3,3,3,3" MinHeight="80" AcceptsReturn="True" AcceptsTab="True" TextWrapping="WrapWithOverflow" />
Dans lexemple ci-dessus, le texte arrive sur la dernire ligne. Si daventure nous continuons la frappe, vous pouvez constater leffet de WrapWithOverflow.
Le guide du codeur 41
Fonctionnalits de base
Combiner la zone de dbordement et la hauteur maximale Si vous utilisez loption WrapWithOverflow, il est prfrable de xer une taille maximale en utilisant lattribut MaxHeight.
Gestion des lignes Comme vous pouvez le remarquer, rien nindique quil sagisse ou non dun
Les attributs MinLines et MaxLines sont une bonne alternative lutilisation des attributs MinHeight et MaxHeight. MinLines et MaxLines xent respectivement le nombre minimal et maximal de lignes visibles. La taille sera automatiquement adapte en fonction. De cette faon, la dernire ligne visible sera toujours complte, ce qui nest pas le cas en xant les limites de la hauteur en nombre de points.
<TextBox Name="txtNom" Margin="3,3,3,3" MinLines="2" MaxLines="3" AcceptsReturn="True" AcceptsTab="True" TextWrapping="Wrap" />
Selon les comportements que vous aurez dnis pour votre TextBox, lutilisateur sera oblig de faire dler le texte horizontalement et verticalement. Sans aide visuelle, il nest pas toujours ais pour lutilisateur de voir le texte cach. Le mieux dans ce cas est dajouter des barres de dlement. vous de choisir celle quil vous faut.
<TextBox Name="txtNom" Margin="3,3,3,3" MinLines="2" MaxLines="3" MaxWidth="300" AcceptsReturn="True" AcceptsTab="True" TextWrapping="NoWrap" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" />
42 Le guide du codeur
Introduire du texte
Les valeurs possibles pour les attributs VerticalScrollBarVisibility et HorizontalScrollBarVisibility sont Auto, Hidden, Disabled et Visible. Pour plus dinformations sur lutilisation des valeurs possibles, reportezRenvoi vous au paragraphe Autoriser le dlement page 77.
Conit entre hauteur et nombre de lignes Si vous utilisez simultanment les attributs MinLines, MaxLines et les attributs MinHeight, MaxHeight, ce sont ces derniers qui auront la prsance. MinLines et MaxLines nauront ds lors aucun effet.
Dans certaines circonstances, vous souhaiterez certainement afficher un TextBox mais sans autoriser lutilisateur en modier le contenu. Pour ce faire, vous disposez de deux possibilits, soit utiliser lattribut IsReadOnly, soit utiliser lattribut IsEnabled. Chacune de ces mthodes offre ses avantages et ses inconvnients. Voyons dabord leffet de IsReadOnly.
<TextBox Name="txtNom" Margin="3,3,3,3" Text="Ce texte est en lecture seule." IsReadOnly="True" />
Le guide du codeur 43
Fonctionnalits de base
Visuellement, il ny a aucune diffrence entre un TextBox limit la lecture et un autre TextBox. Toutefois, il ne vous sera pas possible dintroduire du texte dans ce contrle. En revanche, vous pourrez slectionner du texte pour faire un copier en vue de le coller ailleurs.
Valeur par dfaut Il est difficile de concevoir une TextBox non modiable sans valeur par dfaut. Pour donner cette valeur, vous devez utiliser lattribut Text.
En revanche, avec lattribut IsEnabled, lutilisateur visualise directement que le champ est inaccessible.
<TextBox Name="txtNom" Margin="3,3,3,3" Text="Ce texte est en lecture seule." IsEnabled="False" />
Cette technique a toutefois deux dfauts. Premirement, il nest pas possible de slectionner du texte en vue de le copier ailleurs. Deuximement, beaucoup dutilisateurs se plaignent du manque de lisibilit des TextBox dsactivs. Vous pouvez modier les attributs de couleur de votre TextBox pour quil affiche visuellement son tat soit en copiant le style dun TextBox dsactiv, soit en utilisant votre propre charte graphique.
44 Le guide du codeur
Introduire du texte
Dans cet exemple, le style du champ en lecture seule est proche du style du champ dsactiv tout en tant plus lisible.
<TextBox Name="txtNom" Margin="3,3,3,3" Text="Ce texte est en lecture seule." IsEnabled="False" /> <TextBox Name="txtNom2" Margin="3,3,3,3" Text="Ce contrle est en lecture seule." IsReadOnly="true" Foreground="Gray" Background="Beige" />
Le guide du codeur 45
Fonctionnalits de base
Introduire un mot de passe Si vous dsirez crer une zone de saisie pour introduire un mot de passe, utilisez la balise PasswordBox en lieu et place de TextBox. Il ny a pas de diffrence majeure dans leur utilisation si ce nest que les caractres affichs sont remplacs par des * et que la proprit Text est remplace par la proprit Password.
46 Le guide du codeur
Afficher un cadre
Fixer la taille des boutons Gnralement, la taille des boutons prsents dans un mme cran est xe. Ne pas respecter cette rgle produit le plus souvent un trs mauvais effet visuel.
De manire gnrale, le bouton OK sera prsent comme bouton par dfaut. De mme manire, le bouton Annuler devrait tre associ la touche [Echap]. Pour quun bouton soit le bouton par dfaut, il suffit dutiliser lattribut IsDefault. Pour associer un bouton la touche [Echap], il suffit dutiliser lattribut IsCancel.
<Button Name="btnOk" IsDefault="True" Width="80" Height="30" > Ok </Button> <Button Name="btnCancel" Content="Annuler" Width="80" Height="30" IsCancel="True"/>
Nous devons encore pouvoir associer le bouton avec une action bien dnie. Toutefois, cette opration faisant appel du code .NET, nous reviendrons dessus dans le chapitre sur les vnements (page 138).
Fonctionnalits de base
48 Le guide du codeur
Erreur dans le code Le contenu de la balise Image est volontairement scind en deux lignes pour une question de lisibilit de lexemple. Toutefois, si vous dsirez le reproduire, il sera ncessaire de regrouper le chemin du chier sur une mme ligne.
Le nud ls ImageSource permet de dnir le chier qui sera affich. Les formats supports sont bmp, gif, ico, jpg, png et tiff. Vous pouvez galement xer les dimensions de limage avec les diffrents attributs MinWidth, MaxWidth, MinHeight, MaxHeight ou encore, comme dans lexemple ci-dessous, en faire une miniature en utilisant les attributs Width et Height.
<Image Name="imgPhoto" Width="100" Height="100" > <Image.Source> C:\Documents and Settings\All Users\Documents\ Mes images\chantillons dimages\Hiver.jpg </Image.Source> </Image>
Le guide du codeur 49
Fonctionnalits de base
Il existe une seconde possibilit pour afficher des images mais il sagit alors non pas directement dun contrle placer dans votre page mais dune image utilise dans un contrle ; par exemple insrer limage comme fond dun bouton, dun cadre ou dune page.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Page.Background> <ImageBrush ImageSource="\Emoticons\no.gif" /> </Page.Background> <StackPanel> <Label> Une fentre avec une image de fond </Label> </StackPanel> </Page>
50 Le guide du codeur
ImageBrush dispose dattributs tout fait particuliers pour grer lapparence de limage. Il nest pas question de taille puisque celle-ci dpend du conteneur. En revanche, il est toutefois possible de contrler la taille relative en utilisant lattribut Viewport. Si vous lassociez TileMode, vous pouvez par exemple crer une mosaque.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Page.Background> <ImageBrush Viewport="0.5,0.5,0.5,0.5" TileMode="TILE" ImageSource="\Emoticons\no.gif" /> </Page.Background> <StackPanel> <Label> Une fentre avec une image de fond </Label> </StackPanel> </Page>
Le guide du codeur 51
Fonctionnalits de base
Il est aussi possible de paramtrer ltirement de limage et son alignement en utilisant les attributs Stretch, AlignmentX.et AlignmentY.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Page.Background> <ImageBrush Stretch="None" AlignmentY="Bottom" AlignmentX="Right" ImageSource="\Emoticons\no.gif" /> </Page.Background> <StackPanel> <Label> Une fentre avec une image de fond </Label> </StackPanel> </Page>
52 Le guide du codeur
Checklist
2.6 Checklist
Voici les points essentiels que nous avons abords dans ce chapitre :
j j j j j j j
laffichage des textes et leurs manipulations avec des Label et TextBlock ; laffichage et la saisie des textes avec TextBox ; la saisie dun mot de passe avec PasswordBox ; laffichage des boutons avec Button ; laffichage des images avec Image et ImageBrush ; la ralisation de cadres avec Border ; lutilisation des attributs les plus communs et utilisables avec la majorit des contrles ; lutilisation des dcorateurs avec TextDecoration.
Le guide du codeur 53
Ch apit re
Avec les contrles vus au chapitre prcdent, nous possdons assez dlments pour raliser un cran complet et complexe. Ce qui nous manque maintenant, cest une mthode pour organiser tout cela. XAML ne se contente pas dune mthode mais nous en fournit plusieurs, chacune ayant ses avantages et ses inconvnients.
<TextBox Name="txtCP" Canvas.Top="70" Canvas.Left="80" Width="50" MaxLength="5"/> <Label Name="lblLocalite" Canvas.Top="70" Canvas.Left="150"> Localit </Label> <TextBox Name="txtLocalite" Canvas.Top="70" Canvas.Left="200" Width="230" MaxLength="50"/> </Canvas> </Page>
Comme vous pouvez le constater, le placement lcran se fait au moyen des attributs Canvas.Top et Canvas.Left. Il sagit de proprits attaches. Une proprit attache est en fait une proprit du parent, ici du Canvas, mais pour laquelle chaque enfant peut assigner une valeur diffrente. Cest pourquoi, bien que proprit de Canvas, lattribut Canvas.Top est par exemple un attribut des lments contenus dans le Canvas et non du Canvas lui-mme. La balise Canvas dispose elle-mme de quelques attributs. Lattribut Background vous permet de changer la couleur du fond si la couleur standard ne vous satisfait pas.
<Canvas Background="LightCoral">
Le guide du codeur 57
Un autre attribut intressant est lattribut IsEnabled. En effet, si vous lui assignez la valeur False, lensemble des contrles contenus dans le Canvas seront eux aussi dsactivs.
Dsactiv et non lecture seule Noubliez pas toutefois les diffrences que nous avons vues prcdemment entre dsactiver et lecture seule pour un contrle tel que la bote de texte.
58 Le guide du codeur
Les attributs Canvas.Top et Canvas.Left ne sont pas les seuls utilisables pour positionner un contrle. Vous pouvez galement utiliser Canvas.Right et Canvas.Bottom, ce qui permet de placer un contrle relativement nimporte quel coin du Canvas. Ajoutons le code suivant devant la balise de n du nud Canvas.
<Border Width="100" Height="120" BorderThickness="1" Background="White" BorderBrush="Black" Canvas.Top="10" Canvas.Right="10"> <TextBlock Name="blkPhoto" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"> Photo </TextBlock> </Border> <Label Name="lblCopyright" Canvas.Bottom="10" Canvas.Right="10" Content="Micro Application 2006" />
Le guide du codeur 59
Comme vous pouvez le constater, le fait de positionner un contrle non pas partir du coin suprieur gauche mais dun autre coin ne fait pas que changer le systme de coordonnes. Lors du redimensionnement de lcran, les contrles suivent le coin partir duquel ils sont positionns. Cette facult pourra tre utilise dans de nombreuses circonstances pour obtenir un cran beaucoup plus exible.
Fixer une taille minimale son Canvas Si vous ne xez pas une taille minimale votre Canvas, les lments contenus vont invitablement se chevaucher si la fentre est rduite au-del de la taille critique.
En remplaant la balise Canvas dans lexemple par celle ci-dessous, nous empcherons ce comportement chaotique.
<Canvas Background="LightBlue" MinWidth="550" MinHeight="200">
60 Le guide du codeur
La premire chose faire lorsque lon utilise une grille, cest de dnir les lignes et les colonnes.
<Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions>
Nous pouvons ensuite utiliser les contrles tout en dnissant leurs positions dans la grille en utilisant Grid.Row et Grid.Column.
<Label Name="lblNom" Grid.Row="0" Grid.Column="0"> Nom </Label> <TextBox Name="txtNom" Grid.Row="0" Grid.Column="1" MaxLength="30" CharacterCasing="Upper" /> <Label Name="lblPrenom" Grid.Row="0" Grid.Column="2">
Le guide du codeur 61
Prnom </Label> <TextBox Name="txtPrenom" Grid.Row="0" Grid.Column="3" MaxLength="30"/> <Label Name="lblAdr" Grid.Row="1" Grid.Column="0"> Rue </Label> <TextBox Name="txtAdr" Grid.Row="1" Grid.Column="1" MaxLength="80"/> <Label Name="lblCP" Grid.Row="2" Grid.Column="0"> Code postal </Label> <TextBox Name="txtCP" Grid.Row="2" Grid.Column="1" MaxLength="5"/> <Label Name="lblLocalite" Grid.Row="2" Grid.Column="2" > Localit </Label> <TextBox Name="txtLocalite" Grid.Row="2" Grid.Column="3" MaxLength="50"/> <Border BorderThickness="1" Background="White" Grid.Row="0" Grid.Column="4" BorderBrush="Black"> <TextBlock Name="blkPhoto" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"> Photo </TextBlock> </Border> <Label Name="lblCopyright" Content="Micro Application 2006" Grid.Row="3" Grid.Column="4"/> </Grid> </Page>
Comme vous pouvez le constater, la dnition de la grille se fait au dbut en utilisant les collections RowDefinitions et ColumnDefinitions. Ces collections contiennent autant dlments que de lignes ou de colonnes dsires. la place des attributs Canvas.Top et autre Canvas.Left, ce sont les attributs Grid.Column et Grid.Row.
Dbut de numrotation La numrotation des lignes et des colonnes commence 0. La ligne 1 est donc bel et bien la seconde ligne.
Malheureusement, comme vous pouvez le voir ci-dessous, le rsultat obtenu nest pas vraiment la hauteur des esprances.
62 Le guide du codeur
Commenons par le plus simple, le fond dcran nest pas color. Pour cela, pas de soucis, il suffit dutiliser le mme attribut que pour Canvas.
<Grid Background="LightBlue">
Autre problme vident, la zone de saisie de ladresse est limite la deuxime colonne. Pour rsoudre ce problme, il est possible dtendre le contrle sur plusieurs colonnes en utilisant lattribut Grid.ColumnSpan.
<TextBox Name="txtAdr" Grid.Row="1" Grid.Column="1" MaxLength="80" Grid.ColumnSpan="3"/>
Il en va de mme pour la zone photo qui est limite une ligne. La solution est quasiment identique except que lattribut est Grid.RowSpan.
<Border BorderThickness="1" Background="White" Grid.Row="0" Grid.Column="4" Grid.RowSpan="3" BorderBrush="Black"> <TextBlock Name="blkPhoto" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"> Photo </TextBlock> </Border>
Le guide du codeur 63
Avec lajout de ces nouveaux attributs, lcran est enn un peu plus ressemblant.
Le code ainsi modi va permettre de placer le copyright en bas droite de lcran, et ce quelle que soit sa dimension comme ctait le cas avec le canevas. Placez galement lattribut ci-dessous dans chaque balise TextBox et dans la balise Border.
Margin="2,2,2,2"
Le gros problme restant est llargissement inconsidr des botes de texte, qui dnature fortement leffet visuel de lcran. Pour y remdier, il suffit dassigner les attributs MaxHeight et VerticalAlignment chaque TextBox.
64 Le guide du codeur
Pour contrler le comportement de la fentre en cas de redimensionnement, vous pouvez ajuster les dimensions des lignes et des colonnes. Nhsitez pas utiliser les dimensions minimales et maximales.
<Grid.ColumnDefinitions> <ColumnDefinition Width="70"/> <ColumnDefinition MinWidth="60"/> <ColumnDefinition Width="50"/> <ColumnDefinition MinWidth="60"/> <ColumnDefinition MinWidth="120" MaxWidth="200"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition MinHeight="22"/> <RowDefinition MinHeight="22"/> <RowDefinition MinHeight="76"/> <RowDefinition MinHeight="20"/> </Grid.RowDefinitions>
Redimensionnez la fentre et voyez ce qui se passe. Bien sr, comme pour Canvas, vous pouvez utiliser lattribut IsEnabled pour dsactiver lensemble de la grille.
Visualiser la grille Parfois, pour faciliter la mise en page, il est intressant de voir les limites des cellules. Pour cela, utilisez lattribut ShowGridLines.
Le guide du codeur 65
En complment de ces possibilits, XAML offre la possibilit de crer des bords mobiles pour permettre lutilisateur dajuster la taille que ce soit en largeur ou en hauteur. Cette possibilit doit tre mise en uvre en utilisant un GridSplitter. Cette balise va vous permettre de dnir dans la grille sur quelle cellule ou groupe de cellules vous dsirez placer la bordure mobile et dans quel sens. An de vous montrer cette fonctionnalit, nous allons construire un tableau de 3 lignes et 4 colonnes. La hauteur de la premire ligne pourra tre adapte ainsi que la largeur de la premire colonne. La premire partie du code est classique. Notez toutefois que 4 lignes et non 3 sont dnies. Nous reviendrons sur le pourquoi la n de lexercice. Ensuite, les 2 GridSplitter sont dnis. Le premier dans le sens vertical, via lattribut ResizeDirection= "Columns", lautre dans le sens horizontal avec ResizeDirection= "Rows". La position est donne respectivement avec Grid.Column et Grid.Row. ColSpan et RowSpan permettent dtendre la visibilit du bord sur lensemble des cellules.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="5"/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <GridSplitter Grid.Column="0" Grid.RowSpan="4" ResizeDirection="Columns" ShowsPreview="False"/> <GridSplitter Grid.Row="1" Grid.ColumnSpan="4" ResizeDirection="Rows" HorizontalAlignment="Stretch" ShowsPreview="True"/> </Grid> </Page>
66 Le guide du codeur
Lattribut ShowsPreview modie le comportement de telle sorte que, si vous souhaitez la prvisualisation, le bord ne bouge que quand vous lchez le bouton de la souris. Dans lintervalle, cest une ligne repre qui prvisualise la future position du bord.
4 lignes au lieu de 3 Maintenant, comme promis, pourquoi 4 et non 3 lignes. Comme vous avez pu le constater, la hauteur de la ligne a t xe 5. En fait, cette astuce est utilise pour pallier un comportement diffrent entre le bord horizontal et vertical. Cette diffrence aura probablement disparu dans la version dnitive et
Le guide du codeur 67
cette ligne supplmentaire naura plus lieu dtre mais, dans le doute, il vaut mieux savoir comment contourner le problme. Donc, si pour un bord vertical celui-ci se place correctement droite de la colonne, pour une ligne horizontale il napparat pas. En utilisant HorizontalAlignment= Stretch , le bord devient visible mais occupe toute la hauteur. Lide est donc dutiliser une ligne supplmentaire pour contenir le bord ainsi cr.
Les diffrents contrles doivent tre indiqus dans lordre dans lequel vous dsirez les voir apparatre. Ils sont affichs de gauche droite et de haut en bas.
<TextBlock Width="200" TextWrapping="WrapWithOverflow" Margin="5,5,5,5" TextAlignment="Justify"> <Bold>StackPanel</Bold> Lutilisation dun StackPanel offre encore des possibilits plus restreinte que le WrapPanel. Toutefois, contrairement au WrapPanel, il offre une structure moins mobile et donc beaucoup plus controlable. Dans un StackPanel, chaque contrle occupe une ligne. </TextBlock> <TextBlock Width="200" TextWrapping="WrapWithOverflow" Margin="5,5,5,5" TextAlignment="Justify">
68 Le guide du codeur
<Bold>Grid</Bold>: Cette mthode est gnralement la mthode la plus recommande car elle offre un trs haut niveau dadaptabilit du contenu de lcran sa taille et donc galement aux changements de rsolution. Elle est toutefois plus complexe mettre en uvre. </TextBlock> </WrapPanel> </Page>
Le guide du codeur 69
Les diffrents contrles doivent tre indiqus dans lordre dans lequel vous dsirez les voir apparatre. Ils sont affichs de haut en bas.
<TextBlock TextWrapping="WrapWithOverflow" Margin="5,5,5,5" TextAlignment="Justify"> <Bold>StackPanel</Bold> Lutilisation dun StackPanel offre encore des possibilits plus restreinte que le WrapPanel. Toutefois, contrairement au WrapPanel, il offre une structure moins mobile et donc beaucoup plus controlable. Dans un StackPanel, chaque contrle occupe une ligne. </TextBlock> <TextBlock TextWrapping="WrapWithOverflow" Margin="5,5,5,5" TextAlignment="Justify"> <Bold>Grid</Bold>: Cette mthode est gnralement la mthode la plus recommande car elle offre un trs haut niveau dadaptabilit du contenu de lcran sa taille et donc galement aux changements de rsolution. Elle est toutefois plus complexe mettre en uvre. </TextBlock> </StackPanel> </Page>
70 Le guide du codeur
Utiliser un empilement
Longueur de ligne Contrairement lexemple tel quil est dans le chapitre sur le WrapPanel, o nous avions dni la largeur avec la proprit Width, comme avec StackPanel les lments sont automatiquement placs lun sous lautre il nest pas ncessaire de xer la largeur.
Le guide du codeur 71
Utiliser le docking
<TextBlock TextWrapping="WrapWithOverflow" Margin="5,5,5,5" TextAlignment="Justify"> <Bold>Grid</Bold>: Cette mthode est gnralement La mthode la plus recommande car elle offre un trs haut niveau dadaptabilit du contenu de lcran sa taille et donc galement aux changements de rsolution. Elle est toutefois plus complexe mettre en uvre. </TextBlock> </Border> </DockPanel> </Page>
Tout dabord, des balises Border ont t ajoutes an de mieux visualiser le rsultat. Elles nont aucun but particulier si ce nest une meilleure comprhension du rsultat. Du fait de leur prsence, la taille des diffrents blocs est xe dans les balises Border et non plus dans les balises TextBlock. Les marges sont galement prsentes pour bien diffrencier les divers lments. Voyons maintenant le rsultat.
Si nous ajoutons un cadre, celui-ci prendra automatiquement toute la place restant disponible.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <DockPanel> <Border BorderThickness="1" BorderBrush="Black" Margin="2,2,2,2" HorizontalAlignment="Center">
Le guide du codeur 73
<TextBlock TextWrapping="WrapWithOverflow" Margin="5,5,5,5" TextAlignment="Justify"> <Bold>Grid</Bold>: Cette mthode est gnralement La mthode la plus recommande car elle offre un trs haut niveau dadaptabilit du contenu de lcran sa taille et donc galement aux changements de rsolution. Elle est toutefois plus complexe mettre en uvre. </TextBlock> </Border> </DockPanel> </Page>
Lordre des contrles a une importance capitale quant au rsultat obtenu. Si nous ajoutons un cinquime cadre et que nous xions lattribut DockPanel.Dock Bottom, le cadre noccupera pas lentiret du bas dcran comme cest le cas pour le cadre du haut.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <DockPanel> <Border BorderThickness="1" BorderBrush="Black" DockPanel.Dock="Top" Margin="2,2,2,2" > <TextBlock TextWrapping="WrapWithOverflow" </TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Black"
74 Le guide du codeur
Utiliser le docking
DockPanel.Dock="Right" Margin="2,2,2,2" Width="200"> <TextBlock TextWrapping="WrapWithOverflow" </TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Black" DockPanel.Dock="Left" Width="200" Margin="2,2,2,2" HorizontalAlignment="Left"> <TextBlock TextWrapping="WrapWithOverflow" </TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Black" DockPanel.Dock="Bottom" Margin="2,2,2,2" > <TextBlock TextWrapping="WrapWithOverflow" Margin="5,5,5,5" TextAlignment="Justify"> <Bold>WrapPanel</Bold> La mise en page avec un WrapPanel nest pas du tout adapte lexemple prcdent. En effet avec un WrapPanel les contrles sont placs cot les un des autres et sont renvoys automatiquement la ligne lorsque la fin de celle-ci est atteinte. </TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Black" Margin="2,2,2,2" HorizontalAlignment="Center"> <TextBlock TextWrapping="WrapWithOverflow"
Le guide du codeur 75
En revanche, si dans le code nous dplaons ce dernier cadre avant les cadres de gauche et de droite, elle occupe alors toute la largeur.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <DockPanel> <Border BorderThickness="1" BorderBrush="Black" DockPanel.Dock="Top" Margin="2,2,2,2" > <TextBlock TextWrapping="WrapWithOverflow" </TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Black" DockPanel.Dock="Bottom" Margin="2,2,2,2" > <TextBlock TextWrapping="WrapWithOverflow" </TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Black" DockPanel.Dock="Right" Margin="2,2,2,2" Width="200"> <TextBlock TextWrapping="WrapWithOverflow" </TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Black" DockPanel.Dock="Left" Width="200" Margin="2,2,2,2" HorizontalAlignment="Left"> <TextBlock TextWrapping="WrapWithOverflow" </TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Black" Margin="2,2,2,2" HorizontalAlignment="Center"> <TextBlock TextWrapping="WrapWithOverflow" </TextBlock> </Border> </DockPanel> </Page>
76 Le guide du codeur
Autoriser le dlement
Suivant cette mme technique, vous pouvez ordonner les contrles pour obtenir la segmentation qui vous convient.
La balise ScrollViewer gre la fois la barre horizontale et verticale. Dans lexemple, les attributs ScrollViewer.HorizontalScrollBarVisibility et ScrollViewer.VerticalScrollBarVisibility sont initialiss Auto. Cela correspond lusage le plus frquent pour les barres de dlement. En mode automatique, les barres ne sont visibles que lorsquelles deviennent obligatoires. Les autres valeurs possibles sont Disabled, qui a pour effet de ne pas avoir de barre de dlement dans la direction correspondante ; Hidden, qui naffiche pas
78 Le guide du codeur
Autoriser le dlement
la barre de dlement, mais le contenu se comporte comme si celle-ci tait prsente, cest--dire quil ny aura pas de passage la ligne automatique ; la dernire valeur possible est Visible, qui fonctionne comme Auto la diffrence prs que la barre de dlement est visible mme si elle nest pas utile. Dans ce dernier cas, elle sera grise.
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
Valeur par dfaut Si vous ne spciez que la balise ScrollViewer, la barre horizontale sera cache et inactive (Hidden) alors que la barre verticale sera visible (Visible).
Lutilisation dun ScrollViewer ne se limite pas au bord de la fentre. Vous pouvez parfaitement en intgrer dautres dans linterface.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible"
Le guide du codeur 79
ScrollViewer.VerticalScrollBarVisibility="Hidden"> <StackPanel> <Border Width="200" Height="200" BorderBrush="Black" BorderThickness="1"> <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible"> <TextBox TextWrapping="Wrap" AcceptsReturn="True"> Cet exemple dmontre lutilisation dun ScrollView. </TextBox> </ScrollViewer> </Border> </StackPanel> </ScrollViewer> </Page>
Tapez du texte dans la bote de texte et vous verrez apparatre la barre de dlement.
80 Le guide du codeur
Nous commenons par dnir une barre de dlement horizontale et une verticale.
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
Le premier conteneur dni est un DockPanel. Il va nous permettre de dcouper la fentre en quatre zones. Une pour len-tte, une pour le bas de page et deux pour le corps de la fentre.
<DockPanel>
Le guide du codeur 81
Ensuite le bas dcran, qui de faon quil occupe toute la largeur de la fentre doit tre dni ce moment. Il contient galement un Canvas dans lequel le contrle est positionn depuis le coin infrieur droit.
<Canvas DockPanel.Dock="Bottom" Background="Green" MinHeight="30"> <Label Name="lblCopyright" Content="Le concepteur 2006" Canvas.Bottom="3" Canvas.Right="10" VerticalAlignment="Bottom" HorizontalAlignment="Right"/> </Canvas>
La partie droite du corps contient un WrapPanel. Cette partie sera xe lors dun redimensionnement horizontal.
<Border DockPanel.Dock="Right" MinWidth="200" MaxWidth="400" BorderThickness="1" BorderBrush="Black" Background="LightGreen"> <WrapPanel> <Image Width="190" Margin="2,2,2,2"> <Image.Source> C:\Documents and Settings\All Users\ Documents\Mes images\ chantillons dimages\Hiver.jpg </Image.Source> </Image> <TextBox TextWrapping="Wrap" Width="195" Margin="2,2,2,2" AcceptsReturn="True" /> <TextBox TextWrapping="Wrap" Margin="2,2,2,2" AcceptsReturn="True" /> </WrapPanel> </Border>
Le dernier volet est coll sur le bord gauche et contient une grille. La grille sert alors positionner les diffrentes zones de saisie.
82 Le guide du codeur
La grille contient 2 colonnes et 6 lignes. La largeur de premire colonne est xe et plus troite que la seconde, tandis que la hauteur de la troisime ligne est xe un minimum de 40 points pour que la ComboBox reste suffisamment visible.
<Grid.ColumnDefinitions> <ColumnDefinition Width="80" /> <ColumnDefinition MinWidth="200"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition MinHeight="40"/> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Label Name="lblLivre" Grid.Row="0" Grid.Column="0"> Livre </Label> <TextBox Name="txtLivre" Grid.Row="0" Grid.Column="1" MaxLength="30" Height="23" Text="TL" VerticalAlignment="Top" Margin="2,2,2,2"/> <Label Name="lblAuteur" Grid.Row="1" Grid.Column="0"> Auteur </Label> <TextBox Name="txtAuteur" Grid.Row="1" Grid.Column="1" MaxLength="30" CharacterCasing="Upper" Height="23" VerticalAlignment="Top" Margin="2,2,2,2"/> <Label Name="lblColl" Grid.Row="2" Grid.Column="0"> Collection </Label> <ComboBox Name="txtColl" Grid.Row="2" Grid.Column="1" IsEditable="True" VerticalAlignment="Top" Margin="2,2,2,2"> <ComboBoxItem> Fiction </ComboBoxItem> <ComboBoxItem>
Le guide du codeur 83
Horreur </ComboBoxItem> <ComboBoxItem IsSelected="True"> Policier </ComboBoxItem> <ComboBoxItem> Historique </ComboBoxItem> <ComboBoxItem> Amour </ComboBoxItem> </ComboBox> <Label Name="lblISBN" Grid.Row="3" Grid.Column="0"> Numro ISBN </Label> <TextBox Name="txtISBN" Grid.Row="3" Grid.Column="1" MaxLength="15" Height="23" VerticalAlignment="Top" Margin="2,2,2,2"/> <Label Name="lblGenre" Grid.Row="4" Grid.Column="0"> Genre </Label> <TextBox Name="txtGenre" Grid.Row="4" Grid.Column="1" MaxLength="50" Height="23" VerticalAlignment="Top" Margin="2,2,2,2"/> <Grid Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button Grid.Row="0" Grid.Column="0" Content="Prcdent" Width="80" Height="30" /> <Button Grid.Row="0" Grid.Column="1" Content="Suivant" Width="80" Height="30" /> </Grid> </Grid> </Border> </DockPanel> </ScrollViewer> </Page>
84 Le guide du codeur
Erreur dans le code Le contenu de la balise image est volontairement scind en 3 lignes pour une question de lisibilit de lexemple. Toutefois, si vous dsirez le reproduire, il sera ncessaire de regrouper le nom du chier sur une mme ligne.
Analysons cet exemple. La mise en page se fait au moyen dun DockPanel inclus dans un ScrollViewer. Ce DockPanel est compos de 4 zones. La premire zone est le titre "Ma bibliothque". Il sinscrit naturellement en haut dcran. Nous utilisons donc lattribut Top pour le docking. Un cadre vert clair entoure la zone de titre. Ce cadre est ralis avec la balise Border.
<Border BorderThickness="2" DockPanel.Dock="Top" BorderBrush="LightGreen"> <Canvas Background="DarkSeaGreen" MinHeight="40" > <Label FontSize="24" FontFamily="Engravers MT" Content="Ma bibliothque" /> </Canvas> </Border>
Comme vous le voyez, cest le nud Border qui est le parent de ce groupe. Cest donc lui qui doit tre positionn par rapport notre DockPanel. Les autres
Le guide du codeur 85
lments suivent invitablement le mouvement. Le contrle Border inclut un Canvas, ce qui va nous permettre de positionner notre titre sur la base de coordonnes. Grce lutilisation du Canvas, nous pourrions avoir dautres contrles dans la barre de titre Pour obtenir la couleur du fond de notre barre de titre, il nous a suffi dutiliser lattribut Background du Canvas. Pour viter un crasement exagr, la hauteur minimale du Canvas est xe 40. Pour obtenir le bas dcran, nous faisons de mme mais cette fois sans utiliser de bord. Cest donc directement le Canvas qui reoit lattribut DockPanel.Dock="Bottom".
<Canvas DockPanel.Dock="Bottom" Background="Green" MinHeight="30"> <Label Name="lblCopyright" Content="Le concepteur 2006" Canvas.Bottom="3" Canvas.Right="10" VerticalAlignment="Bottom" HorizontalAlignment="Right"/> </Canvas>
An quils prennent toute la largeur de la fentre, nous commenons par dnir len-tte et le bas de page. Les autres zones de notre DockPanel sont dnies aprs. La troisime zone dnie est la zone de droite.
<Border DockPanel.Dock="Right" MinWidth="200" MaxWidth="400" BorderThickness="1" BorderBrush="Black" Background="LightGreen"> <WrapPanel> <Image Width="190" Margin="2,2,2,2"> <Image.Source> C:\Documents and Settings\All Users\ Documents\Mes images\ chantillons dimages\Hiver.jpg </Image.Source> </Image> <TextBox TextWrapping="Wrap" Width="195" Margin="2,2,2,2" AcceptsReturn="True" /> <TextBox TextWrapping="Wrap" Margin="2,2,2,2" AcceptsReturn="True" /> </WrapPanel> </Border>
Dans cette zone, les contrles sont positionns au moyen dun WrapPanel.
86 Le guide du codeur
Il est galement inclus dans un Border, simplement an dobtenir un n cadre noir autour. La dernire zone, celle de gauche, est ralise grce un Grid dans lequel les diffrents contrles sont positionns dans les cellules formes par la grille. Le Grid est lui-mme inclus dans un Border pour dnir un n cadre noir. Le fond est galement dni dans la balise Border, mais nous aurions tout aussi bien pu le dnir dans la balise Grid.
<Border DockPanel.Dock="Left" MinWidth="280" MinHeight="200" BorderThickness="1" BorderBrush="Black" Background="LightGreen"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="80" /> <ColumnDefinition MinWidth="200"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition MinHeight="40"/> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> </Grid> </Border>
Si nous examinons le contenu de plus prs, nous remarquons la prsence dun Grid lintrieur de notre Grid.
<Grid Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button Grid.Row="0" Grid.Column="0" Content="Prcdent" Width="80" Height="30" /> <Button Grid.Row="0" Grid.Column="1 Content="Suivant" Width="80" Height="30" /> </Grid>
Pourquoi ce Grid ? Tout simplement parce que les boutons doivent tre centrs dans la grille et que les colonnes dnies dans notre premier Grid sont de largeur diffrente. Ce nouveau Grid inclut, grce lattribut Grid.ColumnSpan,
Le guide du codeur 87
les deux colonnes. Dans ce nouveau Grid, qui occupe en dnitive toute la ligne, deux colonnes, cette fois de largeur identique, sont rednies.
Effet du redimensionnement La rgle du DockPanel, qui dtermine que le dernier lment occupe lespace restant, aura pour consquence lorsque vous redimensionnez la fentre que seule la zone de gauche va sadapter dans les deux sens. La taille des autres parties reste xe dans une direction.
Cet exemple dmontre quel point il est possible dintgrer les diffrents composants les uns dans les autres mais galement que chaque choix, et ce y compris lordre de chaque balise, va avoir un impact sur le rsultat nal. Comme les zones sont dnies volontairement dans un ordre bien dtermin, les contrles qui y sont inclus vont galement tre ordonns en fonction. Cet tat de fait peut ventuellement tre prjudiciable la qualit de votre interface graphique. En effet, lordre dapparition des contrles va galement rgir le dplacement du curseur avec la touche [Tab]. La solution ce problme est simple et dj connue de ceux qui ont lhabitude du dveloppement traditionnel. XAML met notre disposition lattribut TabIndex, qui va simplement rednir lordre de parcours avec la touche [Tab].
88 Le guide du codeur
<Frame Source="Page2.xaml" BorderBrush="Black" BorderThickness="1" Width="200" Height="100"/> </WrapPanel> </StackPanel> </Window> Page1.xaml contient : <Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <Label> Frame 1 </Label> </StackPanel> </Page> Page2.xaml contient : <Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <Label> Frame 2 </Label> </StackPanel> </Page>
Le guide du codeur 89
Contenu dun frame Si vous pouvez utiliser des frames aussi bien au sein dune balise Window que dune balise Page, la page rfrence par la balise Frame ne pourra en aucun cas tre une page utilisant la balise Window.
3.9 Checklist
Dans ce chapitre, nous avons essentiellement vu comment disposer les lments lcran et principalement :
j j j
j j j j
le positionnement par utilisation des coordonnes en utilisant Canvas ; le positionnement en utilisant une grille avec la classe Grid ; le positionnement en utilisant les panneaux de type StackPanel, WrapPanel et DockPanel ; le mlange de ces diffrentes mthodes ; autoriser le dlement avec ScrollViewer ; raliser des pages composes de plusieurs pages avec Frame ; comprendre et utiliser les attributs attachs.
90 Le guide du codeur
Ch apit re
Outre les attributs que nous avons dj voqus comme MaxWidth, repris dans lexemple, deux attributs sont particulirement intressants pour ce contrle. Il sagit tout dabord de SelectedIndex, qui permet de dnir une valeur par dfaut.
<ListBox Name="lstLangue" SelectedIndex="3" MaxWidth="80"> <ListBoxItem>Franais</ListBoxItem> <ListBoxItem>Anglais</ListBoxItem> <ListBoxItem>Allemand</ListBoxItem> <ListBoxItem>Italien</ListBoxItem> <ListBoxItem>Espagnol</ListBoxItem> </ListBox>
92 Le guide du codeur
Comme vous pouvez le constater en comparant le rsultat avec lcran ci-dessous, la prslection ne saffiche pas de la mme manire quun lment slectionn par lutilisateur.
Particularit de la numrotation Les diffrentes lignes de la liste de choix sont numrotes non pas de 1 n mais bien de 0 n-1 ; n tant le nombre dlments de la liste. Pour slectionner le premier, vous devez donc mettre comme valeur 0. Dans lexemple, la valeur slectionne est bien la quatrime, SelectedIndex vaut 3.
Le guide du codeur 93
Il existe une autre faon pour indiquer quel lment doit tre prslectionn. Cette mthode a lavantage dtre beaucoup plus visuelle car il sagit de modier dans la balise de llment voulu lattribut IsSelected. Le rsultat obtenu est le mme quavec lattribut SelectedIndex.
<ListBox Name="lstLangue" MaxWidth="80"> <ListBoxItem>Franais</ListBoxItem> <ListBoxItem>Anglais</ListBoxItem> <ListBoxItem>Allemand</ListBoxItem> <ListBoxItem IsSelected="true">Italien</ListBoxItem> <ListBoxItem>Espagnol</ListBoxItem> </ListBox>
Le second attribut intressant est lattribut SelectionMode, qui permet dautoriser ou dinterdire la slection de plusieurs valeurs. Si vous optez pour plusieurs valeurs, il existe deux modes possibles, en assignant soit la valeur Multiple, ce qui permet de slectionner ou de dslectionner plusieurs valeurs en cliquant simplement avec la souris, soit la valeur Extend, ce qui permet dutiliser les touches [Ctrl] et [Maj] pour raliser votre slection. La touche [Ctrl] permet dajouter votre slection llment sur lequel vous cliquez sans dslectionner les lments dj choisis. La touche [Maj] permet quant elle de slectionner tous les lments repris entre le dernier lment slectionn et llment sur lequel vous cliquez.
<ListBox Name="lstLangue" SelectionMode="Multiple" MaxWidth="80"> <ListBoxItem>Franais</ListBoxItem> <ListBoxItem>Anglais</ListBoxItem> <ListBoxItem>Allemand</ListBoxItem> <ListBoxItem>Italien</ListBoxItem> <ListBoxItem>Espagnol</ListBoxItem> </ListBox>
94 Le guide du codeur
Si vous dsirez raliser une prslection de plusieurs valeurs, il suffit de modier lattribut IsSelected de chaque lment prslectionner.
<ListBox Name="lstLangue" MaxWidth="80" SelectionMode="Multiple"> <ListBoxItem>Franais</ListBoxItem> <ListBoxItem IsSelected="true">Anglais</ListBoxItem> <ListBoxItem>Allemand</ListBoxItem> <ListBoxItem IsSelected="true">Italien</ListBoxItem> <ListBoxItem>Espagnol</ListBoxItem> </ListBox>
Prslectionner un lment avec SelectedValue Au lieu dutiliser SelectedIndex, vous pourriez utiliser lattribut SelectedValue. Toutefois, dans le code XAML, cela me semble peu opportun et plus compliqu. Il nen va pas ncessairement de mme si vous initialisez la valeur depuis le code .NET.
Si vous dsirez rendre une liste inaccessible lutilisateur, vous devrez utiliser lattribut IsEnabled. Ce contrle ne supporte pas lattribut IsReadOnly.
<ListBox Name="lstLangue" IsEnabled="False" MaxWidth="80"> <ListBoxItem>Franais</ListBoxItem> <ListBoxItem>Anglais</ListBoxItem> <ListBoxItem>Allemand</ListBoxItem> <ListBoxItem IsSelected="true">Italien</ListBoxItem> <ListBoxItem>Espagnol</ListBoxItem> </ListBox>
Le guide du codeur 95
Problme de lisibilit Cette faon de procder ne convient pas bien car, comme vous pouvez le constater, bien quune valeur soit prslectionne, elle nest pas visible. Pour rsoudre ce problme, assignez la valeur Blue lattribut Background de la balise ListBoxItem correspondante.
<ListBox Name="lstLangue" MaxWidth="80"> <ListBoxItem>Franais</ListBoxItem> <ListBoxItem>Anglais</ListBoxItem> <ListBoxItem>Allemand</ListBoxItem> <ListBoxItem Background="Blue" IsSelected="true"> Italien </ListBoxItem> <ListBoxItem>Espagnol</ListBoxItem> </ListBox>
Limite de cette modication Cette solution nest envisageable que si le contrle reste toujours ltat inactif. Dans le cas contraire, llment modi avec Background apparatra toujours comme slectionn.
96 Le guide du codeur
Si vous souhaitez que le contrle soit actif mais que certaines valeurs soient dsactives, il suffit de placer lattribut IsEnabled dans ltat False pour chacun des lments.
<ListBox Name="lstLangue" MaxWidth="80"> <ListBoxItem>Franais</ListBoxItem> <ListBoxItem>Anglais</ListBoxItem> <ListBoxItem>Allemand</ListBoxItem> <ListBoxItem IsEnabled="False">Italien</ListBoxItem> <ListBoxItem IsEnabled="False">Espagnol</ListBoxItem> </ListBox>
b Figure 4-7 : Une liste de choix dont certains lments sont dsactivs
Si la hauteur de la liste nest pas suffisante, une barre de dlement sera automatiquement ajoute.
<ListBox Name="lstLangue" MaxWidth="80" MaxHeight="45"> <ListBoxItem>Franais</ListBoxItem> <ListBoxItem>Anglais</ListBoxItem> <ListBoxItem>Allemand</ListBoxItem> <ListBoxItem IsEnabled="False">Italien</ListBoxItem> <ListBoxItem IsEnabled="False">Espagnol</ListBoxItem> </ListBox>
Le guide du codeur 97
98 Le guide du codeur
Lattribut IsEditable permet de dnir si oui ou non vous pouvez encoder une valeur diffrente dune des valeurs de la liste.
<ComboBox Name="cboPays" SelectedIndex="4" IsEditable="True" Height="20" Margin="2,2,2,2"> <ComboBoxItem>France</ComboBoxItem> <ComboBoxItem>Belgique</ComboBoxItem> <ComboBoxItem>Allemagne</ComboBoxItem> <ComboBoxItem>Suisse</ComboBoxItem> <ComboBoxItem>Italie</ComboBoxItem> <ComboBoxItem>Espagne</ComboBoxItem> </ComboBox>
Le fait que ce contrle soit ditable a pour consquence quil possde la fois des attributs de ListBox et de TextBox. Cest pourquoi vous pouvez par exemple assigner lattribut Text, qui aura pour effet de placer cette valeur dans la zone de saisie.
Lattribut IsReadOnly Lattribut IsReadOnly provoque un comportement inattendu. En effet, le fait de placer le contrle en lecture seule au moyen de cet attribut nempche pas lutilisateur de choisir dans la liste et ainsi de changer la valeur. Cet attribut naffecte que la zone de saisie du texte. Si vous dsirez que la valeur ne puisse tre change, il est ncessaire dassigner la valeur False lattribut IsEnabled.
Le guide du codeur 99
Si pour une raison particulire vous dsirez retirer la possibilit de rechercher dans la liste en tapant successivement les lettres du dbut du mot recherch, lattribut IsTextSearchEnabled doit tre mis False.
<ComboBox Name="cboPays" SelectedIndex="4" IsTextSearchEnabled="False" Height="20" Margin="2,2,2,2"> <ComboBoxItem>France</ComboBoxItem> <ComboBoxItem>Belgique</ComboBoxItem> <ComboBoxItem>Allemagne</ComboBoxItem> <ComboBoxItem>Suisse</ComboBoxItem> <ComboBoxItem>Italie</ComboBoxItem> <ComboBoxItem>Espagne</ComboBoxItem> </ComboBox>
Lattribut IsChecked reoit une valeur boolenne qui indique si par dfaut la case est coche ou non. Si vous ne souhaitez pas que la case soit coche par dfaut, vous pouvez bien sr omettre tout simplement cet attribut. Parfois, vous aurez besoin dune case cocher autorisant ltat indtermin. Cest lattribut IsThreeState qui va autoriser ce comportement.
<CheckBox Name="chkDispo" Margin="5,5,2,2" IsThreeState="True" > Disponible en semaine </CheckBox>
Si vous souhaitez utiliser ce contrle uniquement pour afficher une information mais que vous ne souhaitiez pas que lutilisateur puisse modier ltat de la case cocher, vous devez ici encore utiliser obligatoirement lattribut IsEnabled.
<CheckBox Name="chkDispo" Margin="5,5,2,2" IsEnabled="False" IsChecked="True" Content="Disponible en semaine" />
Lattribut Content Dans ce dernier exemple, le texte est assign lattribut Content au lieu de le placer dans le nud. Le rsultat est identique, cest une question de got personnel.
Comme pour la case cocher, nous retrouvons lattribut IsChecked. la diffrence de la case cocher, les boutons radio sont associs les uns aux autres. Ce qui fait que, quand vous slectionnez un bouton radio, les autres sont automatiquement dslectionns.
<RadioButton Name="rbUseVB" IsChecked="True"> Jutilise VB.NET </RadioButton> <RadioButton Name="rbUseCSharp">
102 Le guide du codeur
Si vous dsirez avoir dans un mme cran plusieurs listes de boutons radio indpendantes les unes des autres, vous devez les intgrer dans un ensemble. Dans les versions prcdentes, nous aurions d utiliser une RadioButtonList mais elle nest actuellement plus disponible en XAML. Pour regrouper des boutons radio dans des ensembles diffrents, le moyen le plus simple est de leur ajouter un attribut GroupName. Assignez la mme valeur cet attribut pour tous les boutons radio devant tre associs.
<RadioButton Name="rbUseVB" IsChecked="True" GroupName="grpLanguage"> Jutilise VB.NET </RadioButton> <RadioButton Name="rbUseCSharp" GroupName="grpLanguage"> Jutilise C# </RadioButton> <RadioButton Name="rbUsedelphi" GroupName="grpLanguage"> Jutilise Delphi.NET </RadioButton> <RadioButton Name="rbUse10" GroupName="grpFramework"> Jutilise le Framework 1.0 </RadioButton> <RadioButton Name="rbUse11" IsChecked="True"
GroupName="grpFramework"> Jutilise le Framework 1.1 </RadioButton> <RadioButton Name="rbUse20" GroupName="grpFramework"> Jutilise le Framework 2.0 </RadioButton>
Une autre solution consiste utiliser un contrle conteneur spar pour chaque liste de boutons radio. Dans lexemple ci-dessous, nous utiliserons deux StackPanel supplmentaires. Cest pourquoi, pour cet exemple, le code complet vous est nouveau prsent.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <StackPanel> <RadioButton Name="rbUseVB" IsChecked="True"> Jutilise VB.NET </RadioButton> <RadioButton Name="rbUseCSharp"> Jutilise C# </RadioButton> <RadioButton Name="rbUsedelphi"> Jutilise Delphi.NET </RadioButton> </StackPanel> <StackPanel>
<RadioButton Name="rbUse10"> Jutilise le Framework 1.0 </RadioButton> <RadioButton Name="rbUse11" IsChecked="True"> Jutilise le Framework 1.1 </RadioButton> <RadioButton Name="rbUse20"> Jutilise le Framework 2.0 </RadioButton> </StackPanel> </StackPanel> </Page>
Le rsultat est identique la mthode prcdente. Toutefois, lutilisation dune mthode ou dune autre peut inuencer la mise en page.
Liste de choix non modiable Pour rendre une liste de choix non modiable, vous devez utiliser lattribut IsEnabled. Celui-ci doit tre appliqu sur chaque bouton radio. Toutefois, si elle est incluse dans un conteneur qui lui est spcique, vous pouvez spcier lattribut IsEnabled dans le conteneur. Cette faon de faire est bien plus pratique bien des gards.
Normalement, il devrait tre possible dutiliser un contrle de type GroupBox au lieu dun Canvas. Toutefois, dans la version bta utilise au moment dcrire ces lignes, cette possibilit ntait pas supporte. Le contrle GroupBox existe bel et bien mais ne supporte quun enfant et ne permet ds lors pas de regrouper les boutons radio. Son utilisation se limite laffichage du traditionnel contour. Son utilit reste malgr tout vidente pour rendre votre interface claire et bien comprhensible pour lutilisateur.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel> <GroupBox BorderThickness="1" BorderBrush="Black" Header="Language" Width="150"> <StackPanel> <RadioButton Name="rbUseVB" IsChecked="True"> Jutilise VB.NET </RadioButton> <RadioButton Name="rbUseCSharp"> Jutilise C# </RadioButton>
Le guide du codeur 105
<RadioButton Name="rbUsedelphi"> Jutilise Delphi.NET </RadioButton> </StackPanel> </GroupBox> <GroupBox BorderThickness="1" BorderBrush="Black" Header="Framework" Width="150"> <StackPanel> <RadioButton Name="rbUse10"> Jutilise le Framework 1.0 </RadioButton> <RadioButton Name="rbUse11" IsChecked="True"> Jutilise le Framework 1.1 </RadioButton> <RadioButton Name="rbUse20"> Jutilise le Framework 2.0 </RadioButton> </StackPanel> </GroupBox> </StackPanel> </Page>
Notez au passage lutilisation de lattribut Header pour indiquer le titre de votre GroupBox.
en dehors des programmes commerciaux. Pourtant, elles apportent un rel plus votre dveloppement et, surtout, elles vitent pas mal dincomprhension et de confusion pour lutilisateur de votre interface. Pour des questions de place lcran, les tiquettes prcdant les diffrents champs de saisie ou de choix sont gnralement fortement rsumes et trs peu explicites. Les bulles dinformation sont l pour pallier ce manque et constituent le premier niveau daide. Pour raliser une telle bulle, vous devez utiliser lattribut ToolTip du contrle auquel la bulle dinformation doit tre associe. titre dexemple, nous allons associer une bulle dinformation une bote de saisie de texte.
<TextBox Name="txtNom" Margin="3,3,3,3" ToolTip="Dans ce champ vous devez introduire le nom de famille de votre contact." />
Cette faon de faire est toutefois limite la prsentation sur une seule ligne. Pour amliorer notre info-bulle, nous devons utiliser une syntaxe lgrement plus complique en la dnissant comme un nud ls.
<TextBox Name="txtNom" Margin="3,3,3,3"> <TextBox.ToolTip> <TextBlock MaxWidth="200" TextWrapping="WrapWithOverflow" > Dans ce champ vous devez introduire le nom de famille de votre contact. </TextBlock> </TextBox.ToolTip> </TextBox>
De cette faon, le texte dinformation est alors inclus dans un bloc de texte, ce qui permet dajuster les attributs daffichage pour obtenir le rsultat souhait. Dans lexemple, la taille de la bulle est limite 150 pixels et le texte passe automatiquement la ligne en tendant la zone autant que ncessaire.
Outre le passage la ligne, cette faon daborder le problme offre galement la possibilit denrichir la prsentation du contenu.
<TextBox Name="txtNom" Margin="3,3,3,3"> <TextBox.ToolTip> <TextBlock MaxWidth="200" TextWrapping="WrapWithOverflow" > <Image Width="16" Height="16"> <Image.Source> C:\Windows\Microsoft.NET\Windows\ v6.0.5070\Avalon\avalonArp.ico </Image.Source> </Image> Dans ce champ vous devez introduire le <Bold>nom</Bold> de <Underline>famille </Underline> de votre contact. </TextBlock> </TextBox.ToolTip> </TextBox>
Bien quil reprsente une surface, le TabControl est plus proche des contrles de type TextBox que du Canvas, par exemple. En effet, chaque nud TabItem ne peut avoir quun seul enfant. Pour pallier ce problme, la solution est trs simple et revient
Renvoi appliquer les rgles qui sont vues dans le chapitre Mlanger les
<Image Grid.Column="0" Grid.Row="0" Source="C:\Documents and Settings\All Users\ Documents\Mes images\chantillons dimages\ Collines.jpg" /> <Image Grid.Column="0" Grid.Row="1" Source="C:\Documents and Settings\All Users\ Documents\Mes images\chantillons dimages\ Coucher de soleil.jpg" /> <Image Grid.Column="1" Grid.Row="0" Source="C:\Documents and Settings\All Users\ Documents\Mes images\chantillons dimages\ Hiver.jpg" /> <Image Grid.Column="1" Grid.Row="1" Source="C:\Documents and Settings\All Users\ Documents\Mes images\chantillons dimages\ Nnuphars.jpg" /> </Grid> </TabItem>
Utilisation de IsSelected Remarquez au passage lutilisation de IsSelected pour spcier un onglet par dfaut diffrent du premier.
Pour obtenir un contrle efficace du comportement de ce bouton rptition, nous disposons tout dabord de lattribut Interval, qui dtermine le temps entre deux appels de laction associe au bouton.
<RepeatButton Name="btnSuivant" Width="80" Height="30" Interval="100"> Suivant </RepeatButton>
Dans lexemple, lopration Suivant sera effectue tous les diximes de seconde. Pour viter que la rptition ne dmarre directement, vous pouvez imposer un dlai. Si la pression sur le bouton est infrieure au dlai, il se comportera comme un bouton normal. En revanche, si la pression se prolonge au-del du dlai x, la rptition de tche va pouvoir dmarrer. Pour contrler ce dlai, vous disposez de lattribut Delay.
<RepeatButton Name="btnSuivant" Delay="500" Interval="100"> Suivant </RepeatButton>
Dure du traitement La dure du traitement raliser chaque rptition ne peut excder lintervalle prvu entre chaque rptition. Dans le cas contraire, le traitement pourrait se poursuivre encore un certain temps aprs que lutilisateur eut relch le bouton.
Comme vous pouvez le constater, visuellement, il ny a aucune diffrence entre les deux types de boutons. Si vous dsirez visuellement identier ce type de bouton, vous pouvez adapter pour lui votre charte graphique en changeant par exemple la couleur du fond. Pour rappel, vous disposez pour cela de lattribut Background. Vous pouvez galement jouer sur leffet visuel li la forme du curseur de la souris.
<RepeatButton Name="btnSuivant" Delay="500" Interval="100" Cursor="Hand"> Suivant </RepeatButton>
Dans lexemple ci-dessus, le curseur de la souris est transform en une main lors du passage sur le bouton.
Gnralement, ce genre de contrle dispose de repres visuels. Il existe deux possibilits pour les ajouter, en utilisant soit lattribut TickFrequency, qui vous permet de dnir lcart entre chaque repre :
<Slider Width="200" VerticalAlignment="Center" Minimum="0" Maximum="100" Value="50" TickFrequency="10" TickPlacement="BottomRight"/>
Utiliser un Slider
Ce dernier est plus contraignant mais permet davoir des repres qui sont irrguliers. En plus des repres visuels, vous pouvez ajouter automatiquement la valeur dans un ToolTip.
<Slider Width="200" VerticalAlignment="Center" Minimum="0" Maximum="100" Value="50" Ticks="10,20,30,40,50,60,70,80,90" TickPlacement="BottomRight" AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="0" />
Limiter les valeurs aux repres Avec lattribut IsSnapToTickEnabled, les valeurs sont automatiquement arrondies au repre le plus proche.
Il est galement possible de modier la valeur sans dplacer le curseur mais en cliquant sur la barre. LargeChange permet de dnir la valeur qui sera ajoute ou retire automatiquement chaque clic. Les attributs Delay et Interval permettent de moduler automatiquement la rptition de laction.
<Slider Width="200" VerticalAlignment="Center" Minimum="0" Maximum="100" Value="50" Ticks="10,20,30,40,50,60,70,80,90" TickPlacement="BottomRight" AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="0" LargeChange="10" Delay="500" Interval="200" />
Vous pouvez galement dnir une zone visuelle o devrait se trouver la valeur. Cette zone est un attribut purement visuel mais ne limite en rien les valeurs possibles.
<Slider Width="200" VerticalAlignment="Center" Minimum="0" Maximum="100" Value="50" Ticks="10,20,30,40,50,60,70,80,90" TickPlacement="BottomRight" AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="0" LargeChange="10" Delay="500" Interval="200" IsSelectionRangeEnabled="True" SelectionStart="20" SelectionEnd="80" />
Si vous prfrez un Slider vertical, aucun problme, la proprit Orientation vous permet de choisir entre horizontal (par dfaut) ou vertical.
<Slider HorizontalAlignment="Center" Minimum="0" Maximum="100" Value="50" Ticks="10,20,30,40,50,60,70,80,90" TickPlacement="BottomRight" AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="0"
116 Le guide du codeur
Utiliser un Slider
Dnition de la taille En orientation verticale, la taille est contrle non plus par lattribut Width mais bien par lattribut Height.
Une autre solution est dutiliser un Expander. Celui-ci a la facult dafficher ou de cacher son contenu en ne laissant alors visible que son titre.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Expander" > <StackPanel> <Expander Header="Informations" IsExpanded="false"> <TextBlock> Cette zone contient un texte dinformation </TextBlock> </Expander>
Utiliser un Expander
Un Expander peut parfaitement contenir plus dun contrle utilisateur mais, dans ce cas, ils devront tre encapsuls dans un conteneur.
<Expander Header="Contenu" IsExpanded="true"> <StackPanel> <WrapPanel> <Label Width="60"> Nom: </Label> <TextBox Name="txtNom" Width="150"/> </WrapPanel> <WrapPanel> <Label Width="60"> Prnom: </Label> <TextBox Name="txtprenom" Width="150"/> </WrapPanel> </StackPanel> </Expander> <Expander Header="Plus"> <WrapPanel> <Label Width="60"> Tl: </Label> <TextBox Name="txttel" Width="150"/> </WrapPanel> </Expander> <Button Width="80"> Ok </Button> </StackPanel> </Page>
Pour ouvrir ou fermer un Expander, il suffit dutiliser les ches sur sa droite ; lorientation des ches indique sil est ouvert ou ferm. Si les ches sont diriges vers le bas, le contenu est cach. A contrario, si les ches sont diriges vers le haut, le contenu est affich.
Comme vous pouvez le constater, il est possible de mettre plusieurs Expander dans une mme page. En revanche, un Expander ne peut avoir quun seul nud enfant. Celui-ci sera ds lors souvent un conteneur comme un StackPanel. Notez dans lexemple lutilisation combine de StackPanel et de WrapPanel. Lattribut Header permet de dterminer le titre, alors que lattribut IsExpanded indique si la zone est cache (false) ou affiche (true). Par dfaut, le contenu est cach. Notez que le bouton ne sera jamais cach car il nest pas repris dans une balise
Expander.
Direction dexpansion Si vous souhaitez que la zone souvre vers le haut plutt que vers le bas, utilisez lattribut ExpandDirection et assignez-lui la valeur Up.
Grce loption Stretch="Fill", le contenu occupe automatiquement lentiret de la ViewBox. Lattribut StretchDirection vous permet de limiter lagrandissement au sens horizontal ou vertical. Si vous changez la largeur de 150 en 50, le contenu est modi en fonction.
Selon la valeur donne lattribut Stretch, le rsultat sera fort diffrent. Pour bien comprendre le fonctionnement de chacune de ces valeurs, voici un autre exemple.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <WrapPanel> <Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5"> <Viewbox Width="70" Height="100" Stretch="None" StretchDirection="Both"> <Image Source="c:\Mir.bmp" Width="50" Height="50"/> </Viewbox> </Border> <Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5"> <Viewbox Width="70" Height="100" Stretch="Fill" StretchDirection="Both"> <Image Source="c:\Mir.bmp" Width="50" Height="50"/> </Viewbox> </Border> <Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5"> <Viewbox Width="70" Height="100" Stretch="Uniform" StretchDirection="Both">
Utiliser un Popup
<Image Source="c:\Mir.bmp" Width="50" Height="50"/> </Viewbox> </Border> <Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5"> <Viewbox Width="70" Height="100" Stretch="UniformToFill" StretchDirection="Both"> <Image Source="c:\Mir.bmp" Width="50" Height="50"/> </Viewbox> </Border> </WrapPanel> </Page>
Pour une question de clart de lexemple, la taille de limage est xe dans le code 50 sur 50 et est place dans quatre ViewBox identiques lexception de la valeur de lattribut Stretch. Les balises Border sont uniquement prsentes pour dlimiter visuellement lemplacement des ViewBox. Le rsultat parle de lui-mme.
AffichePopup est excute et que, lorsque vous cliquez sur le bouton Cliquer pour fermer, cest la mthode CachePopup qui est excute.
<Page x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <Button Name="MonBouton" Click="AffichePopup"> Cliquez pour ouvrir </Button> <Popup Name="MonPopup" PlacementTarget="{Binding ElementName=MonBouton}" PlacementRectangle="30,20,100,40"> <Border BorderThickness="1" BorderBrush="Black"> <StackPanel Margin="5,5,5,5" Background="AliceBlue"> <Label> Ceci nest pas un tooltip mais un popup et peut tre une page part entire </Label> <Button Click="CachePopup"> Cliquez pour fermer </Button> </StackPanel> </Border> </Popup> </StackPanel> </Page> Interaction logic for Page1.xaml Partial Public Class Page1 Inherits Page Public Sub New() InitializeComponent() End Sub Public Sub AffichePopup(ByVal sender As Object, ByVal e As RoutedEventArgs) Me.MonPopup.IsOpen = True End Sub
Utiliser un Popup
Public Sub CachePopup(ByVal sender As Object, ByVal e As RoutedEventArgs) Me.MonPopup.IsOpen = False End Sub End Class
Comme vous pouvez le constater, rien ne suggre quil puisse y avoir un Popup.
MediaElement est simplement place dans un cadre. La proprit Source permet de dnir le chier multimdia qui devra tre utilis. La proprit LoadedBehavior permet de dterminer laction qui sera prise directement aprs le chargement du contrle. La proprit UnloadedBehavior a le mme effet mais lors du dchargement du contrle. Les valeurs possibles sont Stop, Play, Close, Pause, NoSet et Manual.
cran vide Il est possible que lemplacement o devrait se trouver la vido reste vide. Il sagit dun problme de pilote de la carte cran qui nest pas adapt. En effet, MediaElement requiert un pilote rcent et adapt. Si cest votre cas, essayez de mettre jour votre pilote. Cest aussi pour cette raison que lcran vous est prsent sous Windows Vista et non sous Windows XP comme les autres crans.
Il existe galement une classe SoundPlayer et une MediaPlayer. SoundPlayer ne peut tre utilise directement en XAML mais uniquement en code .NET. De manire gnrale, lutilisation de MediaElement est trs largement privilgie, et tout particulirement dans le code XAML. Il est possible galement dutiliser les Triggers pour manipuler la vido depuis, par exemple, des boutons. Dans lexemple qui suit, un bouton Play permet de dmarrer la vido et un bouton Pause permet de larrter. Si vous voulez plus dinformations sur les triggers, reportez-vous au
Renvoi chapitre Utiliser les Triggers page 238.
<Window x:Class="Window1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WindowsApplication8" Height="300" Width="300" > <Window.Triggers>
Le storyboard a dni une MediaTimeLine qui est une TimeLine spcique aux lments multimdias. Cest ici quest dnie la source.
<MediaTimeline Source="c:\news.wmv" Storyboard.TargetName="laVideo"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger>
Checklist
Mthodes de MediaElement Vous pouvez remarquer qu aucun moment nous navons utilis les mthodes Start et Pause de la classe MediaElement.
4.13 Checklist
Ce chapitre a t loccasion de passer en revue les diffrents contrles permettant de raliser une interface utilisateur complte. Cest--dire :
j
crer et manipuler les listes droulantes, que ce soient les ListBox ou les
ComboBox ;
j j j j j j j j j j
utiliser les cases cocher (CheckBox) ; utiliser les boutons radio (RadioButton) et les grouper ; crer des info-bulles (ToolTip) ; crer un panneau onglets (TabControl) ; congurer un bouton pour le rendre autorptitif ; utiliser un curseur (Slider) pour dterminer une valeur ; utiliser des Expander pour rendre linterface plus lisible ; utiliser une ViewBox ; crer des fentres Popup ; manipuler le multimdia avec MediaElement.
Ch apit re
Ce type nest pas prsent Si vous ne trouvez pas ce type de projet dans Visual Studio, cest que vous navez pas install le kit de dveloppement ou, selon les versions, ladd-in pour Visual Studio. Vous le trouverez sur le site de Microsoft.
Au lieu du traditionnel Form1.vb, vous retrouvez quatre chiers diffrents. Ils sont associs par paire : les chiers MyApp.xaml et MyApp.xaml.vb, dune part, et les chiers Window1.xaml et Window1.xaml.vb, dautre part. Chaque paire de chiers prend en charge la gestion dune classe. Il est vrai que, si vous avez dj travaill avec Visual Studio 2005, vous savez que derrire le chier Form1.vb se cachait un chier Form1.Designer.vb. Le but dans les deux cas est le mme : sparer le code daffichage du code de traitement. Mais revenons notre projet et examinons pour commencer le chier MyApp.xaml. <Application x:Class="MyApp" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml"> <Application.Resources> </Application.Resources> </Application> A priori, il est probable que vous nayez pas changer ce chier sauf lattribut
StartupUri, qui dnit la classe instancier et excuter au dmarrage de lapplication. Il ne serait pas de bon ton de conserver pour votre classe le nom par dfaut. Remplacez Window1.xaml par HelloWorld.xaml.
Comme vous le voyez, ce niveau rien dire. Dans la majorit des cas, vous naurez pas ajouter du code dans cette partie. Nhsitez pas, toutefois,
changer le nom MyApp en un nom plus cohrent. Faites-le galement dans le chier xaml et renommez aussi les chiers.
Proprits de lapplication Quand vous changez le nom du chier MyApp, la proprit Action de gnration du chier devient Page. Vous devez remettre la valeur ApplicationDefinition. Pour y accder, cliquez du bouton droit sur le nom du chier et choisissez Proprits.
Nom des classes Si le nom des classes diffre entre le chier XAML et le chier xaml.vb, vous aurez immanquablement une erreur la compilation. Les chiers peuvent porter un autre nom que la classe mais il est de bon aloi de garder le mme.
<Window x:Class="HelloWorld" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Ma premire application" > <Grid> </Grid> </Window>
Comme vous pouvez le constater, Microsoft vous propose par dfaut lutilisation dune grille. Contrairement aux exemples vus jusqu prsent, la premire balise est une balise Window et non plus une balise Page. La balise Window est utilise pour dnir une fentre de type Windows. Nous reviendrons ultrieurement sur lutilisation de la balise Page. Ajoutons le code suivant entre les balises Grid.
<Label VerticalAlignment="Center" HorizontalAlignment="Center"> Bonjour le monde. </Label>
La balise Window dispose comme les autres balises dun grand nombre dattributs. Certains comme Width ou MinHeight ont dj t vus dans dautres chapitres et nous ne reviendrons pas dessus. En revanche, il existe quelques autres attributs fort intressants. Vous avez dj pu voir dans les exemples laction de lattribut Title, qui permet de dnir le titre de la fentre. Pour positionner la fentre, vous disposez de lattribut WindowsStartupLocation, qui va dterminer la position initiale de la fentre.
WindowStartupLocation="CenterScreen"
Les valeurs possibles sont CenterScreen pour centrer la fentre dans lcran, idal pour la fentre principale ; CenterOwner pour centrer la fentre dans la fentre qui la contient, idal pour les sous-fentres ; et Manual pour vous permettre de choisir la position vous-mme. Cette dernire valeur est utiliser en conjonction avec les attributs Top et Left.
<Window x:Class="HelloWorld" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Ma premire application" WindowStartupLocation="Manual" Top="100" Left="300" >
Un autre attribut intressant est lattribut SizeToContent. Sil est x True, la taille de la fentre lors de la cration sera automatiquement adapte au contenu.
SizeToContent="WidthAndHeight"
Il est possible de nadapter la taille quen largeur en utilisant la valeur Width ou uniquement en hauteur en utilisant la valeur Height. Vous pouvez galement opter pour dmarrer automatiquement en mode maximis ou minimis.
WindowState="Maximized"
Il est galement possible de modier le comportement et les possibilits de redimensionnement des fentres en utilisant lattribut ResizeMode.
ResizeMode="CanResizeWithGrip"
Notez le grip en bas droite. Vous pouvez galement opter pour interdire le redimensionnement avec la valeur NoResize. La taille de la fentre nest pas la seule chose que nous puissions modier, il est galement possible de modier son affichage en ajoutant lattribut WindowStyle. Par dfaut, sa valeur est SingleBorderWindow, mais vous pouvez ajouter un effet 3D.
WindowStyle="ThreeDBorderWindow"
Pour certaines fentres, vous souhaiterez peut-tre quil ne soit pas possible de les recouvrir avec une autre. Si cest le cas, utilisez lattribut Topmost.
Topmost="True"
Par dfaut, toutes les fentres sont automatiquement reprises dans la barre des tches. Si, pour la fentre principale, cette option par dfaut est judicieuse, ce nest pas toujours le cas pour les autres fentres. Pour viter quune fentre ne soit reprise dans la barre des tches, il suffit dutiliser lattribut ShowInTaskbar.
ShowInTaskbar="False"
Centrage Les attributs ralisant le centrage sont dplacs du Label au StackPanel. Sans cela, vu le type de fonctionnement du StackPanel, le centrage vertical dans la fentre naurait pas lieu.
Un bouton a galement t ajout la fentre. La question est maintenant de savoir comment associer une action au bouton. Comme vous pouvez limaginer, laction sera ralise dans le code .NET au sein dune mthode de la classe. Ceci tant entendu, le problme se rsume alors associer le bouton la mthode voulue. Tout dabord, il faut savoir que la mthode doit tre associe non pas au bouton lui-mme mais un vnement du bouton. En loccurrence, lvnement Click. Commenons par crire dans le code VB une mthode que vous dsirez excuter.
Public Sub Click_Repondre(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.lblTexte.Content = "Merci" Me.btnRepondre.IsEnabled = False End Sub
Cette mthode va remplacer le texte "Bonjour le monde" par "Merci". La signature de la mthode, cest--dire les diffrents paramtres, doit absolument respecter la dnition reprise dans lexemple. Elle correspond par ailleurs strictement la dnition des mthodes charges de rpondre aux vnements dans lenvironnement .NET. Le nom est quant lui entirement libre, mais choisissez toujours un nom parlant.
Utiliser lIntelliSense Pour bncier de lIntelliSense et ainsi retrouver facilement les noms des membres que vous aurez dnis dans votre code XAML, nhsitez pas utiliser le mot cl ME mme sil est facultatif.
Maintenant que nous avons dni la mthode, il ne reste plus quune simple tape faire, raliser lassociation entre lvnement et la mthode. Nous pourrions classiquement le faire en .NET mais il est plus judicieux de le faire dans le code XAML.
<Button Name="btnSuite" Click="Click_Repondre"> Suite </Button>
Cest aussi simple que cela. Le nom de lattribut correspond au nom de lvnement et la valeur est le nom de la mthode appeler.
La mme technique peut tre applique avec nimporte quel vnement de nimporte quelle classe.
tirer parti de toute la puissance des API WinFX ou presque, et ce y compris les fonctionnalits 3D. Toutefois, comme pour lASP.NET, le dveloppement se fait en mode Page. Contrairement une application ASP.NET, les pages sont codes dans un mme module. Leur accs se fera alors sans devoir faire appel au serveur. En revanche, le fait que lapplication soit excute sur le poste client rend ncessaire la prsence de WinFX sur le poste client. Il ne sagit donc pas dune technologie universelle indpendante de la plate-forme utilise comme lest le HTML.
Le contenu du projet est trs semblable au contenu pour une application Windows.
Vous y retrouvez les deux paires de chiers mais, cette fois, au lieu de Window1 les chiers se nomment Page1. Voyons le contenu de ces quatre chiers et les diffrences par rapport ceux raliss dans lapplication Windows (voir p. 132). Si ce nest ladresse de lURI, les chiers MyApp.xaml et MyApp.xaml.vb sont identiques ceux dj vus.
<Application x:Class="MyApp" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Page1.xaml" > <Application.Resources> </Application.Resources> </Application> Interaction logic for MyApp.xaml Partial Public Class MyApp Inherits Application End Class
En revanche, les chiers Page1.xaml et Page1.xaml.vb hritent non plus dun objet de classe Window mais bien dun objet de la classe Page.
<Page x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <Grid> </Grid> </Page> Imports Imports Imports Imports Imports Imports Imports Imports System System.Windows System.Windows.Controls System.Windows.Data System.Windows.Documents System.Windows.Media System.Windows.Media.Imaging System.Windows.Navigation
Imports System.Windows.Shapes Interaction logic for Page1.xaml Partial Public Class Page1 Inherits Page Public Sub New() InitializeComponent() End Sub End Class
Il ny a en dnitive pas de diffrences notables. Pour changer les noms des classes et des chiers, vous devez utiliser
Renvoi la technique dcrite dans le paragraphe Crer une application
Inherits Page Public Sub New() InitializeComponent() End Sub Public Sub Click_Repondre(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.lblTexte.Content = "Merci" Me.btnRepondre.IsEnabled = False End Sub End Class
Lapplication est trs semblable lapplication Windows mais elle est bien excute dans le navigateur. Si nous cliquons sur le bouton Rpondre, lapplication ragit comme prvu.
Erreur de scurit Si vous utilisez une version express de Visual Studio, vous recevrez peut-tre une erreur de scurit lors de la premire excution. Fermez puis rouvrez votre projet et lerreur disparatra delle-mme.
Si dans votre page vous ne devez pas utiliser de mthode, vous pouvez opter pour une page XAML seule. Il sagit alors dune page statique. Le code XAML sera directement excut lors du chargement de la page. Faites un copier-coller du code XAML dans NotePad. Supprimez lattribut Class et lattribut Click an dobtenir le code suivant :
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <Label Name="lblTexte"> Bonjour le monde. </Label> <Button Name="btnRepondre"> Rpondre </Button> </StackPanel> </Page>
Sauvez le document et, depuis lExplorateur Windows, double-cliquez dessus ou tapez son adresse dans Internet Explorer. La mme page est charge mais, bien entendu, le bouton neffectue plus aucune action. Comme il est possible de modier la taille dune fentre Windows, il est galement possible de modier la taille de la page mais aussi de la fentre du navigateur. Les attributs WindowWidth et WindowHeight permettent de contrler la taille de la fentre du navigateur alors que les attributs Width et Height contrlent la taille de la page. Modiez les valeurs de ces attributs dans lexemple ci-dessous pour bien comprendre leur porte.
<Page x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" WindowTitle="Ma page"
146 Le guide du codeur
<Border BorderThickness="1" BorderBrush="Black"> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <Label Name="lblTexte"> Bonjour le monde. </Label> <Button Name="btnRepondre" Click="Click_Repondre"> Rpondre </Button> </StackPanel> </Border> </Page>
>
Titre de la fentre Le titre de la fentre est donn non pas par lattribut Title de la balise Page mais bien par lattribut WindowTitle.
La page tant entirement statique, il est inutile de crer une contre-partie VB. videmment, si votre seconde page est plus labore, rien nempche de crer une page complte avec du contenu XAML et .NET. Maintenant, voyons comment raliser lappel de cette page depuis le code .NET de notre premire page.
Public Sub Click_Repondre(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.NavigationService.Navigate(New Uri("Page2.xaml", UriKind.Relative)) End Sub
Lappel la page se fait comme prcdemment dans lvnement Click associ au bouton en utilisant la mthode Navigate de la proprit NavigationService. Cette mthode reoit comme paramtre une URI qui donne ladresse de la page afficher. LURI peut tre absolue ou relative.
Barre de navigation dInternet Explorer Notez que la barre de navigation du navigateur ne permet pas de raliser les habituelles oprations Prcdente, Suivante. Vous devez pour cela utiliser la barre de navigation spcique. b Figure 5-18 : Barre de navigation
Si vous ne souhaitez pas voir apparatre la barre de navigation, il suffit dassigner False lattribut ShowsNavigationUI de la balise Page.
148 Le guide du codeur
NavigationService dispose galement des mthodes GoBack et GoForward pour provoquer un passage la page prcdente ou la page suivante. Les mthodes CanGoBack et CanGoForward vous informent sur la possibilit ou non dappeler les mthodes respectives.
Il ny a pas grand-chose dire sur cette classe. Elle servira pour le transfert de donnes entre les pages. La premire page qui est automatiquement charge lors du dmarrage de lapplication est une page classique qui hrite de Page.
<Page x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <StackPanel> <Label Name="valeur"/> <Label Name="texte"/> <Button Name="btnPageSuiv" Click="PageSuivante"> Page suivante </Button> </StackPanel> </Page>
Dans le chier Page1.xaml, deux Label sont dnies mais sont vierges. Elles serviront afficher les valeurs reues. Le bouton sert demander la navigation vers la page suivante. Lappel se fera dans la mthode PageSuivante.
Partial Public Class Page1 Inherits Page
Dans le code .NET associ, nous dclarons un membre du type de la page qui sera appel. Il est important de dclarer que la page se mettra lcoute des vnements, ce qui est ralis avec WithEvents.
Private WithEvents pageSuiv As Page2 Public Sub New() InitializeComponent() End Sub Sub PageSuivante(ByVal sender As Object, ByVal e As RoutedEventArgs)
La transmission des paramtres la page se fait par le constructeur. Lappel de la page elle-mme se fait exactement comme une page normale.
pageSuiv = New Page2("dfaut") Me.NavigationService.Navigate(pageSuiv) End Sub
Il faut dnir la mthode qui sera appele lors du retour. Pour quelle soit effectivement appele, il faut lassocier lvnement avec Handles. Notez que
150 Le guide du codeur
Les valeurs reues sont places dans les contrles Label et le bouton est dsactiv.
valeur.Content = e.Result.Texte texte.Content = e.Result.Val btnPageSuiv.IsEnabled = False End Sub End Class
Nous devons maintenant dnir la page 2, qui sera une PageFunction. Notez la dnition du type de paramtre et la prsence de la dclaration du namespace de lapplication. Le namespace tant dans lassembly du programme, il nest pas ncessaire de prciser lassembly. La TextBox recevra la valeur reue en paramtre, qui pourra ainsi tre modie. La mthode associe lvnement Click du bouton aura pour effet de fermer la page.
<PageFunction x:Class="Page2" x:TypeArguments="app:Data" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:app="clr-namespace:WinFxBrowserApplication1" Title="Page2" > <StackPanel> <TextBox Name="texte"/> <Button Click="Fin"> Fin </Button> </StackPanel> </PageFunction>
Mme dans le code .NET, ds la dclaration de la page, il faut dcrire les paramtres reus.
Partial Public Class Page2 Inherits PageFunction(Of Data) Private donne As New Data
Pour fermer la fentre et revenir la page appele, on utilise OnReturn, qui doit imprativement retourner un objet de type ReturnEventArgs qui est un type gnrique.
Sub Fin(ByVal sender As Object, ByVal e As RoutedEventArgs) donne.Texte = texte.Text Dim retour As New ReturnEventArgs(Of Data)(donne) OnReturn((retour) End Sub End Class
Aprs avoir cliqu sur le bouton, la deuxime page est affiche. Et nous pouvons changer la valeur dans la bote de texte.
Aprs avoir cliqu sur le bouton de n, la premire page est nouveau affiche.
Il est galement possible dutiliser cette technique dans un Frame. Vous pouvez par exemple raliser une fentre complte avec un menu et divers lments qui doivent perdurer tout au long de la navigation et utiliser le Frame comme zone daffichage des diffrents contenus. En somme, il sagit dun genre de page matre. Pour illustrer cela, imaginons que notre page de dmarrage est la page StartPage dcrite ci-dessous.
<Page x:Class="StartPage" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="StartPage" > <DockPanel VerticalAlignment="Top"> <Image DockPanel.Dock="Top" Source="c:\photo.jpg" MinWidth="300"> </Image> <Menu DockPanel.Dock="Top" Height="30"> <MenuItem Header="Page 1" Click="GoToPage1"/> <MenuItem Header="Page 2" Click="GoToPage2"/> <MenuItem Header="Page 3" Click="GoToPage3"/> </Menu> <StatusBar DockPanel.Dock="Bottom" Background="LightBlue"> <Label> Micro Application </Label>
Il sagit dune page classique dont le menu servira naviguer et contenant un Frame qui reoit HomePage.xaml, dont le contenu est en dnitive la page daccueil.
Partial Public Class StartPage Inherits Page Public Sub New() InitializeComponent() End Sub Sub GotoPage1(ByVal sender As Object, ByVal e As RoutedEventArgs) Dim nvPage As New Page1 zoneContenu.Navigate(nvPage) End Sub Sub GotoPage2(ByVal sender As Object, ByVal e As RoutedEventArgs) Dim nvPage As New Page2 zoneContenu.Navigate(nvPage) End Sub Sub GotoPage3(ByVal sender As Object, ByVal e As RoutedEventArgs) Dim nvPage As New Page3 zoneContenu.Navigate(nvPage) End Sub End Class
Si nous examinons le code .NET de la page, nous pouvons constater qu chaque action du menu une nouvelle page est affiche en provoquant la navigation dans le Frame uniquement. Notre page matre reste donc bel et bien toujours affiche.
coute des vnements Contrairement lexemple prcdent, le programme appelant ne se met pas lcoute de la valeur de retour car, dans cet exemple, elle ne nous intresse pas. Rien nempche de la faire si tel est le besoin.
La page daccueil HomePage.xaml est galement une page tout fait classique.
<Page x:Class="HomePage" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <Label> Ceci est la page principale </Label> </StackPanel> </Page>
Examinons maintenant la classe Page1. Page2 et Page3 sont construites sur le mme modle.
<PageFunction x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" x:TypeArguments="sys:String" > <StackPanel> <Label> Ceci est la page 1 </Label> <Button Click="Retour"> Retour </Button> </StackPanel> </PageFunction>
Rfrence au namespace System Notez la prsence dune rfrence au namespace System et lassembly mscorlib pour pouvoir dnir le type String comme argument.
Partial Public Class Page1 Inherits PageFunction(Of String) Public Sub New() InitializeComponent() End Sub Sub Retour(ByVal sender As Object, ByVal e As RoutedEventArgs) Dim retour As New ReturnEventArgs(Of String)("De Page1")
Le code .NET est galement extrmement simple. La seule chose noter est la prsence de OnReturn, dont nous avons vu prcdemment le fonctionnement. Lors du lancement du programme, la page daccueil est affiche.
Si dans le menu vous choisissez Menu1, la page 1 est son tour affiche mais dans le Frame, laissant tout le contexte inchang.
Particularit de navigation Si au lieu de cliquer sur Retour vous demandez une autre page dans le menu, par exemple pour demander la page 3, celle-ci saffiche sans problme mais, dans le cas o vous cliquez ce moment sur Retour, cest non pas la page daccueil qui est affiche mais bien la page 1, page qui est en ralit la base de lappel de la PageFunction.
Si vous souhaitez que la page daccueil soit systmatiquement raffiche, il vous suffit de vous mettre lcoute de la valeur de retour, comme nous lavons fait dans le premier exemple ; et, dans la mthode qui traite le retour, vous pouvez imposer dafficher la page daccueil dans le Frame. Cette faon de travailler apporte normment de souplesse. Rien ne vous empche par exemple de travailler avec plusieurs Frame. Finalement, le modle en page peut facilement suivre un comportement semblable aux applications Windows classiques. Noubliez toutefois pas que lutilisateur peut galement utiliser la barre de navigation.
<NavigationWindow x:Class="Window1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Ma premire application Windows en mode page" Source="Page1.xaml" />
Window1.xaml.vb Dans lexemple, ce chier est inutile et peut tre effac. Si vous dsirez le conserver, vous devrez modier lhritage de la classe pour y faire apparatre NavigationWindow en lieu et place de Window.
Lutilisation dune application WBA en tant quapplication Windows client nest pas la seule utilit de NavigationWindow. Cette faon de travailler est aussi trs utile pour raliser un assistant Wizard, par exemple. Il sagit non plus alors dune application complte faite sur ce modle mais uniquement dune partie
158 Le guide du codeur
de celle-ci. Le reste de lapplication tant classiquement compos de fentres de type Window simple. Voici un exemple extrmement simpli. Tout dabord, la fentre classique, qui fait appel lassistant via un bouton, mais cela peut tout aussi bien tre un menu.
<Window x:Class="ClassicWindow" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <Label Name="lblTexte"> Fentre classique. </Label> <Button Name="btnWizard" Click="Wizard"> Wizard </Button> </StackPanel> </Window> Imports Imports Imports Imports Imports Imports Imports Imports System System.Windows System.Windows.Controls System.Windows.Data System.Windows.Documents System.Windows.Media System.Windows.Media.Imaging System.Windows.Shapes
Interaction logic for Window1.xaml Partial Public Class HelloWorld Inherits Window Public Sub New() InitializeComponent() End Sub Public Sub Wizard(ByVal sender As Object, ByVal e As RoutedEventArgs) Dim wiz As New Window1 wiz.ShowDialog() End Sub End Class
La mthode Wizard qui est associe lvnement Click du bouton instancie et affiche une fentre de type Window1. Comme vous pouvez le constater dans ce qui suit, Window1 est une fentre de type NavigationWindow.
<NavigationWindow x:Class="Window1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Mon premier wizard" Source="Page1.xaml" Width="280" Height="160" />
Interaction logic for Page1.xaml Partial Public Class Page1 Inherits Page Public Sub New() InitializeComponent() End Sub Public Sub Prec(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.NavigationService.GoBack() End Sub Public Sub Suiv(ByVal sender As Object _ , ByVal e As RoutedEventArgs) If Me.radA.IsChecked Then Me.NavigationService.Navigate( _ New Uri("Page1A.xaml", UriKind.Relative)) Else Me.NavigationService.Navigate( _ New Uri("Page1B.xaml", UriKind.Relative)) End If End Sub End Class
Notez que le bouton Retour dclenche la mthode GoBack de la fentre de navigation tout comme si vous aviez appuy sur la che [Retour}Arrire]. Si nous choisissons loption A, la mthode nous fait naviguer vers la page Page1A.xaml.
<Page x:Class="Page1A" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1A" > <StackPanel>
Le guide du codeur 161
<RadioButton Name="rad1" MaxWidth="50" Margin="5,5,5,5"> 1. </RadioButton> <RadioButton Name="rad2" MaxWidth="50" Margin="5,5,5,5"> 2. </RadioButton> <WrapPanel HorizontalAlignment="Center"> <Button Width="80" Margin="5,5,5,5" Click="Prec"> Retour </Button> <Button Width="80" Margin="5,5,5,5" Click="Suiv"> Suivant </Button> </WrapPanel> </StackPanel> </Page> Imports Imports Imports Imports Imports Imports Imports Imports Imports System System.Windows System.Windows.Controls System.Windows.Data System.Windows.Documents System.Windows.Media System.Windows.Media.Imaging System.Windows.Navigation System.Windows.Shapes
Partial Public Class Page1A Inherits Page Public Sub New() InitializeComponent() End Sub Public Sub Prec(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.NavigationService.GoBack() End Sub Public Sub Suiv(ByVal sender As Object _ , ByVal e As RoutedEventArgs) If Me.rad1.IsChecked Then Me.NavigationService.Navigate( _ New Uri("Page1A1.xaml", UriKind.Relative)) Else Me.NavigationService.Navigate( _
162 Le guide du codeur
Interaction logic for Page1.xaml Partial Public Class Page1A2 Inherits Page Public Sub New() InitializeComponent() End Sub Public Sub Prec(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.NavigationService.GoBack() End Sub Public Sub Terminer(ByVal sender As Object _ , ByVal e As RoutedEventArgs) DirectCast(Me.Parent, NavigationWindow).Close() End Sub End Class
Pour fermer la fentre, il est ncessaire de convertir la proprit Parent en une NavigationWindow que nous savons quelle est. Si nous demandons le retour en arrire, les ches avant et arrire deviennent accessibles.
Boutons de navigation La fentre ne rend accessibles les boutons de navigation que si la navigation dans ce sens est possible. Vous pouvez galement connatre cette information en utilisant les proprits CanGoBack et CanGoForward.
Comme vous pouvez le constater, XAML pourra interagir avec le JavaScript mais galement excuter du code intermdiaire (compil) .NET. Ce dernier pourra tre excut directement par lAdd-in. Le code XAML pourra tre intgr la page HTML ou utilis comme une ressource externe. Voici tout dabord comment devrait se prsenter une page avec une application WPF/E en ressource externe.
<html> <body> <object id="wpfehost" size=""> <param name=source value=monAppliction.wpfe/> </body> </html>
Lapplication WPF/E contiendra le XAML compress (baml) mais aussi le code IL (.NET compil) et les ressources (images, mdia...). Maintenant, voyons comment devrait se prsenter une application WPF/E intgre la page HTML.
<html> <head> <!Script XAML--> <script id="monScriptXaml" type="text/xaml"> <? Xml version="1.0" ?>
Checklist
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> ... </Canvas> </script> </head> <body> ... <object id="wpfe" classid="..." codebase="xcpctrl.cab#version=0,0,3,0" height="300" width="400"> <param name="SourceElement" value="monScriptXaml"/> <param name="WindowslessMode" value="True"/> <param name="BackgroundColor value="#00000000"/> </object> ... </body> </html>
Comme vous lavez vu dans le diagramme darchitecture, vous pouvez manipuler des objets WPF/E depuis le code JavaScript. Voici en quelques lignes comment faire.
<script type="text/javascript"> void Fuction maFonction() { var wpfeObject = document.getElementById("wpfe") ; var ctrl = wpfeObject.FindName("LeNomDeMonControleDansXAML") ; ctrl.SetValue("NomDeLaProprit", valeur) ; } </script>
Vous pouvez par ce moyen crer des pages qui utilisent la fois le HTML, le JavaScript et WPF/E au travers de XAML et si ncessaire de code .NET. Ces technologies peuvent non seulement cohabiter mais galement interagir.
5.7 Checklist
Dans ce chapitre essentiellement dirig sur la gestion dune application, nous avons vu :
j j
comment est compose une application Windows et comment la raliser ; comment raliser une application laquelle on accdera depuis un navigateur web (application WBA) ; comment utiliser PageFunction ;
Le guide du codeur 167
j j j
j j j
comment raliser une page matre pour naviguer dans lapplication ; comment grer la scurit pour les applications WBA ; comment transformer simplement une application WBA en application Windows ; comment raliser un assistant (Wizard) ; comment grer les vnements dans XAML ; les bases du futur modle dapplication WPF/E.
Ch apit re
6 Les menus
Crer un menu .......................................... Crer un menu contextuel ........................... Crer une barre doutils .............................. Checklist ..................................................
Les menus
Hauteur du menu La proprit Height est obligatoire sinon le menu occupera toute la hauteur disponible dans notre fentre.
Dans lexemple prcdent, la fentre principale ne pourra contenir que le menu. Cest toutefois le cas de beaucoup dapplications et essentiellement des applications MDI. Si tel nest pas votre objectif, la solution est simple et dj connue. Il nous suffit de placer le menu dans un conteneur tel quune grille, un StackPanel ou encore un DockPanel.
170 Le guide du codeur
Crer un menu
<Window xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Les menus avec XAML" > <DockPanel> <Menu VerticalAlignment="Top" Height="20" DockPanel.Dock="Top"> <MenuItem Header="Fichier"/> <MenuItem Header="Edition"/> <MenuItem Header="Aide"/> </Menu> </DockPanel> </Window>
Le rsultat sera identique, la diffrence prs quil est maintenant possible de placer dautres contrles ou dautres conteneurs dans la fentre.
Les sous-menus
Pour crer un sous-menu, un menu vertical, il suffit de dnir un ou des MenuItem dans le nud MenuItem du menu principal. Chaque nouveau MenuItem peut son tour contenir dautres MenuItem ls.
<Window xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Les menus avec XAML" > <DockPanel> <Menu VerticalAlignment="Top" Height="20" DockPanel.Dock="Top"> <MenuItem Header="Fichier"> <MenuItem Header="Ouvrir"/> <MenuItem Header="Fermer"/> </MenuItem> <MenuItem Header="Edition"> <MenuItem Header="Copier"/> <MenuItem Header="Coller"/> <Separator /> <MenuItem Header="Livre"> <MenuItem Header="Prcdent"/> <MenuItem Header="Suivant"/> </MenuItem> </MenuItem> <MenuItem Header="Aide"/> </Menu>
Le guide du codeur 171
Les menus
</DockPanel> </Window>
Placer des sparations dans le menu Notez lutilisation de la balise Separator pour crer un sparateur.
Crer un menu
Raliser soi-mme lexemple Si vous souhaitez reproduire cet exemple, vous devrez crer un projet dans Visual Studio.
Les menus
<Menu VerticalAlignment="Top" Height="20" DockPanel.Dock="Top"> <MenuItem Header="Fichier"> <MenuItem Name="mnuOuvrir" Header="Ouvrir" Click="Click_Ouvrir"/> <MenuItem Name="mnuFermer" Header="Fermer" IsEnabled="False" Click="Click_Fermer"/> </MenuItem> <MenuItem Header="Edition"> <MenuItem Header="Copier"/> <MenuItem Header="Coller"/> <Separator /> <MenuItem Header="Livre"> <MenuItem Header="Prcdent"/> <MenuItem Header="Suivant"/> </MenuItem> </MenuItem> <MenuItem Header="Aide"> <MenuItem Name="mnuEnLigne" Header="En ligne" IsChecked="True" Click="Click_EnLigne"/> </MenuItem> </Menu> </DockPanel> </Window>
Importance des noms Jusqu maintenant, dans les menus, je navais pas pris la peine de donner des noms. Comme vous pouvez le constater, cela se rvle rapidement ncessaire.
Les mthodes qui seront appeles lors des vnements Click respectifs sont dnies dans le code VB.NET associ.
Imports Imports Imports Imports Imports Imports Imports Imports System System.Windows System.Windows.Controls System.Windows.Data System.Windows.Documents System.Windows.Media System.Windows.Media.Imaging System.Windows.Shapes
Interaction logic for Window1.xaml Partial Public Class Window1 Inherits Window
Crer un menu
Public Sub New() InitializeComponent() End Sub Public Sub Click_Ouvrir(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuFermer.IsEnabled = True Me.mnuOuvrir.IsEnabled = False End Sub Public Sub Click_Fermer(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuFermer.IsEnabled = False Me.mnuOuvrir.IsEnabled = True End Sub Public Sub Click_EnLigne(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuEnLigne.IsChecked = _ Not Me.mnuEnLigne.IsChecked End Sub End Class
La syntaxe dcriture des mthodes appeles par les vnements est tout fait conforme ce que nous avons vu dans le chapitre rserv ce sujet.
Problme avec lIntelliSense Actuellement, lIntelliSense ne reconnat pas directement les noms que nous avons ajouts. Recompilez votre projet et ceux-ci apparatront.
Pour changer notre menu, nous devons simplement modier les proprits IsChecked et IsEnabled qui correspondent aux attributs du mme nom.
Inverser une valeur Nous ne devons pas connatre ltat de IsChecked pour cocher ou dcocher llment En ligne du menu. Il suffit dinverser la valeur pour obtenir le rsultat souhait, ce qui se fait simplement en rassignant la valeur elle-mme et en la prcdant de Not.
Les menus
Comme vous pouvez le constater, tous les lments du menu sont maintenant nomms, ce qui nous permettra daccder nimporte lequel des lments. Un autre attribut important a galement t ajout. Lattribut Visibility permet de cacher ou dafficher un lment. Il peut prendre trois valeurs diffrentes.
Crer un menu
j j j
visible : llment est affich. hidden : llment nest pas affich mais sa place est rserve. collapsed : llment nest pas affich et sa place nest pas rserve, ce qui provoque un dplacement des autres lments du menu.
Interaction logic for Window1.xaml Partial Public Class Window1 Inherits Window Public Sub New() InitializeComponent() End Sub Public Sub Click_Ouvrir(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuFermer.IsEnabled = True Me.mnuOuvrir.IsEnabled = False Me.mnuEdition.Visibility = Windows.Visibility.Visible End Sub Public Sub Click_Fermer(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuFermer.IsEnabled = False Me.mnuOuvrir.IsEnabled = True Me.mnuEdition.Visibility = _ Windows.Visibility.Collapsed End Sub Public Sub Click_EnLigne(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuEnLigne.IsChecked = Not Me.mnuEnLigne.IsChecked End Sub End Class
Les menus
Mais, aprs avoir cliqu sur Ouvrir, le menu Edition est ajout.
Grce lutilisation de la proprit Visibility, le code .NET est Cela ncessite de penser compltement le menu dans le module vous tes amen ajouter un menu de manire totalement cest--dire sans quil soit prvu initialement, vous devrez le faire au moyen de code .NET.
Title="Les menus avec XAML" > <DockPanel> <Menu Name="mnuMain" VerticalAlignment="Top" Height="20" DockPanel.Dock="Top"> <MenuItem Name="mnuFichier" Header="Fichier"> <MenuItem Name="mnuOuvrir" Header="Ouvrir" Click="Click_Ouvrir"/> <MenuItem Name="mnuFermer" Header="Fermer" IsEnabled="False" Click="Click_Fermer"/> </MenuItem> <MenuItem Name="mnuEdition" Header="Edition" Visibility="Collapsed"> <MenuItem Name="mnuCopier" Header="Copier"/> <MenuItem Name="mnuColler" Header="Coller"/> <Separator /> <MenuItem Name="mnuLivre" Header="Livre"> <MenuItem Name="mnuPrec" Header="Prcdent" Click="Click_Prev"/> <MenuItem Name="mnuSuiv" Header="Suivant" Click="Click_Next"/> </MenuItem> </MenuItem> <MenuItem Header="Aide"> <MenuItem Name="mnuEnLigne" Header="En ligne" IsChecked="True" Click="Click_EnLigne"/> </MenuItem> </Menu> <Canvas Name="frmData" IsEnabled="False" Background="LightBlue" DockPanel.Dock="Bottom"> <Canvas.ContextMenu> <ContextMenu> <MenuItem Header="Prcdent" Click="Click_Prev"/> <MenuItem Header="Suivant" Click="Click_Next"/> </ContextMenu> </Canvas.ContextMenu> <Label Name="lblNom" Canvas.Top="10" Canvas.Left="10"> Nom </Label> <TextBox Name="txtNom" Canvas.Top="10" Canvas.Left="80" Width="150" MaxLength="30" CharacterCasing="Upper" /> <Label Name="lblPrenom" Canvas.Top="10" Canvas.Left="240"> Prnom
Le guide du codeur 179
Les menus
</Label> <TextBox Name="txtPrenom" Canvas.Top="10" Canvas.Left="300" Width="130" MaxLength="30"/> <Label Name="lblAdr" Canvas.Top="40" Canvas.Left="10"> Rue </Label> <TextBox Name="txtAdr" Canvas.Top="40" Canvas.Left="80" Width="350" MaxLength="80"/> <Label Name="lblCP" Canvas.Top="70" Canvas.Left="10"> Code postal </Label> <TextBox Name="txtCP" Canvas.Top="70" Canvas.Left="80" Width="50" MaxLength="5"/> <Label Name="lblLocalite" Canvas.Top="70" Canvas.Left="150"> Localit </Label> <TextBox Name="txtLocalite" Canvas.Top="70" Canvas.Left="200" Width="230" MaxLength="50"/> <Border Width="100" Height="120" BorderThickness="1" Background="White" BorderBrush="Black" Canvas.Top="10" Canvas.Right="10"> <TextBlock Name="blkPhoto" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"> Photo </TextBlock> </Border> <Label Name="lblCopyright" Canvas.Bottom="10" Canvas.Right="10" Content="Micro Application 2006" /> </Canvas> </DockPanel> </Window>
Public Sub Click_Ouvrir(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuFermer.IsEnabled = True Me.mnuOuvrir.IsEnabled = False Me.mnuEdition.Visibility = Windows.Visibility.Visible Me.frmData.IsEnabled = True End Sub Public Sub Click_Fermer(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuFermer.IsEnabled = False Me.mnuOuvrir.IsEnabled = True Me.mnuEdition.Visibility = Windows.Visibility.Collapsed Me.frmData.IsEnabled = False End Sub Public Sub Click_EnLigne(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuEnLigne.IsChecked = Not Me.mnuEnLigne.IsChecked End Sub Public Sub Click_Prev(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Code pour prcedent End Sub Public Sub Click_Next(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Code pour suivant End Sub End Class
Les menus
Si vous essayez dactiver le menu contextuel, rien ne se passe. Le menu nest pas accessible car le canevas est dsactiv. Lactivation du canevas est ralise dans la mthode Click_Ouvrir. Aprs avoir effectu Fichier, Ouvrir, le menu contextuel est maintenant actif.
Toutefois, les botes de texte conservent leur menu contextuel par dfaut.
Si vous dsirez les remplacer, il faudra crer un autre menu contextuel. Remplacez le premier TextBox par celui-ci et il possdera son propre menu contextuel. videmment, dans lexemple, il est trs simpli. Aucune action ne lui est associe mais cela, vous savez dj comment le rsoudre.
<TextBox Name="txtNom" Canvas.Top="10" Canvas.Left="80" Width="150" MaxLength="30" CharacterCasing="Upper"> <TextBox.ContextMenu> <ContextMenu> <MenuItem Header="Copier"/> <MenuItem Header="Coller"/> </ContextMenu> </TextBox.ContextMenu> </TextBox>
Les menus
Positionnement de la barre doutils Nous avons ici utilis un DockPanel pour placer la barre doutils et le menu, mais nous aurions tout aussi bien pu utiliser une grille, un StackPanel ou mme un WrapPanel. Le canevas est quant lui moins appropri, mais pourquoi pas !
La barre doutils peut contenir dautres contrles que le bouton. Par exemple une ComboBox.
<ToolBar DockPanel.Dock="Top" Height="24"> <Button ToolTip="Ouvrir" Click="Click_Ouvrir"> <Image> <Image.Source> <Binding Source="open.bmp"/> </Image.Source> </Image> </Button> <Button ToolTip="Fermer" Click="Click_Fermer"> <Image> <Image.Source> <Binding Source="close.bmp"/> </Image.Source> </Image> </Button> <Button ToolTip="Precedent"> <Image> <Image.Source>
<Binding Source="precedent.bmp"/> </Image.Source> </Image> </Button> <Button ToolTip="Suivant"> <Image> <Image.Source> <Binding Source="suivant.bmp"/> </Image.Source> </Image> </Button> <Separator/> <ComboBox Width="80"> <ComboBoxItem IsSelected="True"> Par nom </ComboBoxItem> <ComboBoxItem> Par localit </ComboBoxItem> </ComboBox> </ToolBar>
Sparateur La ComboBox est prcde dun sparateur. Il ne sagit absolument pas dune obligation. Vous pouvez placer des sparateurs o bon vous semble simplement en y plaant la balise Separator comme dans le code ci-dessus.
Les menus
redimensionner votre guise les diffrentes barres doutils. Avec XAML, nous pouvons crer un conteneur dans lequel nous allons placer nos barres doutils. Elles pourront tre alors dplaces ou redimensionnes par lutilisateur dans lespace dtermin par le conteneur. Si lutilisateur rduit trop la taille dune barre doutils, les lments qui ne sont plus affichables sont automatiquement ajouts dans une zone de dpassement et rendus accessibles via la petite che qui marque la n de la barre doutils. Pour crer un conteneur, vous devez utiliser la balise ToolBarTray.
<ToolBarTray DockPanel.Dock="Top" IsLocked="False" Background="LightGray"> <ToolBar Band="0" Height="24"> <Button ToolTip="Ouvrir" Click="Click_Ouvrir"> <Image> <Image.Source> <Binding Source="open.bmp"/> </Image.Source> </Image> </Button> <Button ToolTip="Fermer" Click="Click_Fermer"> <Image> <Image.Source> <Binding Source="close.bmp"/> </Image.Source> </Image> </Button> <Button ToolTip="Precedent"> <Image> <Image.Source> <Binding Source="precedent.bmp"/> </Image.Source> </Image> </Button> <Button ToolTip="Suivant"> <Image> <Image.Source> <Binding Source="suivant.bmp"/> </Image.Source> </Image> </Button> </ToolBar> <ToolBar Band="1" Height="24"> <ComboBox Width="80"> <ComboBoxItem IsSelected="True"> Par nom </ComboBoxItem> <ComboBoxItem> Par localit
Vous pouvez constater que la barre doutils prcdemment cre a t scinde en deux au niveau du sparateur. Cest maintenant la ToolBarTray qui reoit lattribut DockPanel.Dock. Pour viter un fond blanc, lattribut Background reoit la valeur LightGray. Lattribut Band dans la balise ToolBar permet de xer le numro de ligne dans lequel vous dsirez voir apparatre la barre doutils.
Lutilisateur peut dplacer les barres doutils, soit pour les rassembler sur une mme ligne, soit pour les inverser. Il ne pourra en revanche pas les dcaler vers la gauche en laissant un espace entre les barres doutils.
Bloquer les barres doutils La proprit IsLocked permet de spcier si les barres doutils contenues sont mobiles ou non. Il est possible de le spcier individuellement pour chaque barre en introduisant dans la balise de la barre concerne lattribut ToolBarTray.IsLocked.
Si vous souhaitez afficher la barre doutils gauche plutt quen haut de lcran, cest trs simple. Vous changez lattribut Orientation et cest pratiquement tout.
<ToolBarTray DockPanel.Dock="Left" IsLocked="False" Background="LightGray" Orientation="Vertical">
Le guide du codeur 187
Les menus
En effet, il est galement judicieux de changer le docking, sans quoi le rsultat ne sera pas celui espr.
Ordre des lignes Vu le changement dorientation, les lignes dnies par lattribut Band deviennent des colonnes. Cest pourquoi il est prfrable dans notre exemple de xer la valeur 0 pour les deux barres doutils.
<ToolBar Band="0">
Hauteur des lignes Pour les mmes raisons, la hauteur qui tait xe 24 points doit tre adapte pour par exemple devenir automatique. Pour y arriver, retirez lattribut Height de chaque balise ToolBar.
Avec ces barres doutils ottantes, nous devons nous pencher dun peu plus prs sur la zone de dbordement. Si vous rduisez la taille de la premire barre doutils en montant la seconde, la zone de dbordement indique par la che maintenant noire et non plus grise est active. Malheureusement, si vous tentez de lutiliser, licne cache va bel et bien safficher mais en trs grand. Pour viter ce problme, il est prudent dutiliser les attributs MaxWidth et MaxHeigth des images des diffrents boutons. Les autres contrles ventuels doivent subir le mme traitement.
<Image MaxHeight="24" MaxWidth="24">
Checklist
Si vous souhaitez changer lordre des barres doutils sans dplacer tout le code, vous pouvez simplement utiliser lattribut BandIndex. Dans lexemple, assignez 1 cet attribut pour la premire barre doutils.
ToolBar Band="0" BandIndex="1">
6.4 Checklist
Dans ce chapitre, nous avons vu comment crer et manipuler les menus et particulirement comment :
j j j j
crer un menu dapplication complet avec sous-menu et menus imbriqus ; rendre un menu dynamique ; crer un menu contextuel ; crer et manipuler une barre doutils.
Le guide du codeur 189
Ch apit re
Outre la possibilit dassigner vous-mme les valeurs aux diffrents contrles, vous aurez certainement envie de mettre en place des techniques comme la liaison aux donnes (Data Binding) pour lier vos contrles avec les donnes qui doivent y tre reprises. Cette technique nest pas neuve mais nous allons voir comment la mettre en uvre avec XAML.
Une fois la base de donnes cre, nous devons lajouter notre projet. Choisissez dans le menu de Visual Studio Donnes - Ajouter une nouvelle
source de donnes
Si ce nest dj fait, choisissez loption Base de donnes et cliquez sur Suivant. Cliquez sur le bouton Nouvelle connexion et ensuite sur le bouton Modier.
Cliquez maintenant sur le bouton Parcourir, choisissez la base de donnes que vous venez de crer et cliquez sur OK puis sur Suivant.
Le DataSet est maintenant cr. Il ne nous reste qu linclure dans notre programme. Modiez le code de Window1.xaml.vb pour reter le code ci-dessous.
Private m_data As New DBXAMLDataSet Private m_i As Integer Public Sub New() InitializeComponent() Dim adapter As New _ DBXAMLDataSetTableAdapters.Carnet_adressesTableAdapter adapter.Fill(m_data.Carnet_adresses) End Sub
Une fois cette tape ralise, nous devons maintenant associer le DataSet notre fentre. Commenons par ajouter la gestion de lvnement Loaded de la fentre.
<Window x:Class="Window1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Les menus avec XAML" Loaded="Win_loaded" >
La mthode Win_loaded est appele aprs le chargement de la fentre. Dans cette mthode, nous allons initialiser la source de donnes.
Private Sub Win_loaded(ByVal sender As Object _ , ByVal e As RoutedEventArgs) m_i = 0 Me.DataContext = m_data.Carnet_adresses.Rows(m_i) End Sub
Liaison une ligne de la table En ralit, nous ne lions pas le DataSet dans son ensemble notre cran mais lions seulement une ligne dune table. En loccurrence, la premire ligne de la table Carnet adresses.
Il reste maintenant lier les champs avec les zones cran. Commenons par le nom.
194 Le guide du codeur
<TextBox Name="txtNom" Canvas.Top="10" Canvas.Left="80" Width="150" MaxLength="30" CharacterCasing="Upper" Text ="{Binding Path=Nom}">
Pour raliser la liaison, nous devons utiliser un objet de type Binding. Lobjet doit tre assign la proprit, qui doit tre lie. Pour y arriver, nous avons utilis une syntaxe un peu particulire. Nous pouvons dj excuter lapplication telle quelle.
Le nom est correctement affich lcran. Faisons de mme avec les autres champs. Pour vous aider reconstruire lexemple, vous trouverez ci-dessous le code complet que nous avons dj discut prcdemment.
<Window x:Class="Window1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Les menus avec XAML" Loaded="Win_loaded" > <DockPanel> <Menu Name="mnuMain" VerticalAlignment="Top" Height="20" DockPanel.Dock="Top"> <MenuItem Name="mnuFichier" Header="Fichier"> <MenuItem Name="mnuOuvrir" Header="Ouvrir" Click="Click_Ouvrir"/> <MenuItem Name="mnuFermer" Header="Fermer" IsEnabled="False" Click="Click_Fermer"/> </MenuItem> <MenuItem Name="mnuEdition" Header="Edition" Visibility="Collapsed">
Le guide du codeur 195
<MenuItem Name="mnuCopier" Header="Copier"/> <MenuItem Name="mnuColler" Header="Coller"/> <Separator /> <MenuItem Name="mnuContact" Header="Contact"> <MenuItem Name="mnuPrec" Header="Prcdent" Click="Click_Prev"/> <MenuItem Name="mnuSuiv" Header="Suivant" Click="Click_Next"/> </MenuItem> </MenuItem> <MenuItem Header="Aide"> <MenuItem Name="mnuEnLigne" Header="En ligne" IsChecked="True" Click="Click_EnLigne"/> </MenuItem> </Menu> <ToolBarTray DockPanel.Dock="Left" IsLocked="False" Background="LightGray" Orientation="Vertical"> <ToolBar Band="0"> <Button ToolTip="Ouvrir" Click="Click_Ouvrir"> <Image MaxHeight="24" MaxWidth="24"> <Image.Source> <Binding Source="open.bmp"/> </Image.Source> </Image> </Button> <Button ToolTip="Fermer" Click="Click_Fermer"> <Image MaxHeight="24" MaxWidth="24"> <Image.Source> <Binding Source="close.bmp"/> </Image.Source> </Image> </Button> <Button ToolTip="Precedent" Click="Click_Prev"> <Image MaxHeight="24" MaxWidth="24"> <Image.Source> <Binding Source="precedent.bmp"/> </Image.Source> </Image> </Button> <Button ToolTip="Suivant" Click="Click_Next"> <Image MaxHeight="24" MaxWidth="24"> <Image.Source> <Binding Source=" suivant.bmp"/> </Image.Source> </Image> </Button> </ToolBar> <ToolBar Band="0">
196 Le guide du codeur
<ComboBox Width="80"> <ComboBoxItem IsSelected="True"> Par nom </ComboBoxItem> <ComboBoxItem> Par localit </ComboBoxItem> </ComboBox> </ToolBar> </ToolBarTray> <Canvas Name="frmData" IsEnabled="False" Background="LightBlue" DockPanel.Dock="Bottom"> <Canvas.ContextMenu> <ContextMenu> <MenuItem Header="Prcdent" Click="Click_Prev"/> <MenuItem Header="Suivant" Click="Click_Next"/> </ContextMenu> </Canvas.ContextMenu> <Label Name="lblNom" Canvas.Top="10" Canvas.Left="10"> Nom </Label> <TextBox Name="txtNom" Canvas.Top="10" Canvas.Left="80" Width="150" MaxLength="30" CharacterCasing="Upper" Text ="{Binding Path=Nom}"> <TextBox.ContextMenu> <ContextMenu> <MenuItem Header="Copier"/> <MenuItem Header="Coller"/> </ContextMenu> </TextBox.ContextMenu> </TextBox> <Label Name="lblPrenom" Canvas.Top="10" Canvas.Left="240"> Prnom </Label>
Cest partir dici que le code est effectivement modi. Pour chacun des TextBox un objet de type Binding est assign la proprit Text.
<TextBox Name="txtPrenom" Canvas.Top="10" Canvas.Left="300" Width="130" MaxLength="30" Text ="{Binding Path=Prenom}"/> <Label Name="lblAdr" Canvas.Top="40" Canvas.Left="10"> Rue
</Label> <TextBox Name="txtAdr" Canvas.Top="40" Canvas.Left="80" Width="350" MaxLength="80" Text ="{Binding Path=Adresse}"/> <Label Name="lblCP" Canvas.Top="70" Canvas.Left="10"> Code postal </Label> <TextBox Name="txtCP" Canvas.Top="70" Canvas.Left="80" Width="50" MaxLength="5" Text ="{Binding Path=CP}"/> <Label Name="lblLocalite" Canvas.Top="70" Canvas.Left="150"> Localit </Label> <TextBox Name="txtLocalite" Canvas.Top="70" Canvas.Left="200" Width="230" MaxLength="50" Text ="{Binding Path=Localite}"/> <Border Width="100" Height="120" BorderThickness="1" Background="White" BorderBrush="Black" Canvas.Top="10" Canvas.Right="10"> <Image Source="{Binding Path=Photo}"/> </Border> <Label Name="lblCopyright" Canvas.Bottom="10" Canvas.Right="10" Content="Micro Application 2006" /> </Canvas> </DockPanel> </Window>
Autres modications Au passage, la gestion des vnements Click a t ajoute dans la barre doutils pour faire appel aux mthodes Click_Next et Click_Prev.
En revanche, rien ne se passe si vous cliquez sur Suivant. Nous devons encore ajouter la gestion des changements denregistrement.
Public Sub Click_Prev(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Code pour prcedent If m_i > 0 Then m_i = m_i - 1 Me.DataContext = m_data.Carnet_adresses.Rows(m_i) End If End Sub Public Sub Click_Next(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Code pour suivant If m_i < m_data.Carnet_adresses.Rows.Count - 1 Then m_i = m_i + 1 Me.DataContext = m_data.Carnet_adresses.Rows(m_i) End If End Sub
Le champ m_i permet de conserver en mmoire la position courante dans la DataTable. Ce code intgre les instructions pour viter de dpasser les limites de la table. Comme vous pouvez le constater, il suffit dadapter le DataContext pour quil contienne la ligne voulue. Maintenant, lenregistrement change lorsque vous demandez le suivant ou le prcdent.
Idalement, il faudrait dsactiver les boutons Prcdent et Suivant des diffrents menus quand ceux-ci ne peuvent tre raliss.
Le guide du codeur 199
Vous pouvez modier une valeur dans lcran, changer denregistrement et revenir sur celui que vous avez modi, les modications sont toujours prsentes.
Enregistrement dans la base de donnes Les donnes sont bien sauves dans le DataSet mais le code en ltat nenregistre pas le DataSet dans la base de donnes. Les modications sont ds lors perdues au moment o vous quittez le programme.
Par exemple, nous pouvons enregistrer les donnes dans la base de donnes lors de lopration de fermeture. Modiez le code pour reter le code ci-dessous.
Private m_adapter As _ DBXAMLDataSetTableAdapters.Carnet_adressesTableAdapter Public Sub New() InitializeComponent() m_adapter = New _ DBXAMLDataSetTableAdapters.Carnet_adressesTableAdapter m_adapter.Fill(m_data.Carnet_adresses) End Sub Public Sub Click_Fermer(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Me.mnuFermer.IsEnabled = False Me.mnuOuvrir.IsEnabled = True Me.mnuEdition.Visibility = _ Windows.Visibility.Collapsed Me.frmData.IsEnabled = False m_adapter.Update(m_data) End Sub
Nouveau champ dans la classe Lobjet m_adapter prcdemment dni comme variable locale dans le constructeur devient un champ de la classe. De cette faon, il peut tre utilis dans la mthode Click_Fermer.
Il est galement possible dutiliser une table pour charger un contrle de type liste. Si vous souhaitez reproduire lexemple, modiez votre base de donnes et recrez le schma XSD pour reter le graphique ci-dessous.
Non seulement nous chargeons le membre m_data avec la DataTable Carnet_adresses mais nous chargeons galement la table Pays. Private Sub Win_loaded(ByVal sender As Object _ , ByVal e As RoutedEventArgs) m_i = 0 Me.DataContext = m_data.Carnet_adresses.Rows(m_i) Me.lstPays.DataContext = m_data End Sub
La table Pays est maintenant charge dans le DataSet et le DataContext de la liste est diffrent de celui du reste de lcran. Ajoutez ces balises dans le code XAML.
<Label Canvas.Top="100" Canvas.Left="150"> Pays </Label> <ListBox Name="lstPays" Canvas.Top="100" Canvas.Left="200" ItemsSource="{Binding Path=Pays}" DisplayMemberPath="Pays"/>
Remarquez que la source est non pas un champ mais une table. Cest lattribut DisplayMemberPath qui prcise le nom du champ afficher. Dans cet exemple, le nom est le mme car il sagit du champ Pays dans la table Pays.
Cette solution fonctionne parfaitement pour charger la liste mais, du coup, il ne nous est pas possible de lier la valeur notre carnet dadresses. La solution la plus simple est de modier nouveau le code .NET.
Private Sub Win_loaded(ByVal sender As Object _ , ByVal e As RoutedEventArgs) m_i = 0 Me.DataContext = m_data.Carnet_adresses.Rows(m_i) Dim bind As New Binding("Pays") bind.Source = m_data Me.lstPays.SetBinding(ListBox.ItemsSourceProperty _ , bind) End Sub
De cette faon, une source spcique est dnie pour la liste et la source par dfaut pour la valeur. Cet exemple dmontre non seulement quil est possible de raliser des liaisons vers divers objets mais galement que la liaison peut tre effectue sur diffrents attributs. Vous pourriez par exemple dnir une liaison sur la couleur du fond.
Public Property Nom() As String Get Return m_nom End Get Set(ByVal value As String) m_nom = value.ToUpper() End Set
End Property Public Property Prenom() As String Get Return m_prenom End Get Set(ByVal value As String) m_prenom = valueli End Set End Property
Comme vous pouvez le voir, il sagit essentiellement de dnir des membres privs et les proprits qui leur sont associes. Vous pourriez tre tent de dnir directement les membres comme publics et ainsi de vous passer des proprits. Toutefois, il vaut mieux suivre ds le dpart les bonnes pratiques et respecter cette rgle qui apportera dans lvolution de votre classe beaucoup plus de souplesse. Sans compter que le membre dni peut pour des raisons mtier ou techniques tre stock dune certaine manire et prsent aux utilisateurs de la classe dune autre faon.
Public Property Adresse() As String Get Return m_adresse End Get Set(ByVal value As String) m_adresse = value End Set End Property Public Property CP() As String Get Return m_cp End Get Set(ByVal value As String) m_cp = value End Set End Property Public Property Localite() As String Get Return m_localite End Get Set(ByVal value As String) m_localite = value End Set End Property
Public Property Pays() As Integer Get Return m_pays End Get Set(ByVal value As Integer) m_pays = value End Set End Property
Pour une question de simplicit, la mthode de chargement des donnes est incluse dans lobjet Business. Il existe beaucoup de techniques diffrentes pour raliser les couches, mais nous entrons l dans des problmes darchitecture bien loigns de ce qui nous occupe. Toutefois, mme avec XAML et peut-tre encore plus avec XAML, pensez larchitecture que vous allez implmenter dans votre programme avant de commencer la moindre lige de code.
Public Sub Charger(ByVal val As Short) If val = 1 Then m_nom = "Dupond" m_prenom = "Louis" m_adresse = "Rue des coteaux, 23" m_localite = "Pillion" m_cp = "23456" m_pays = 22 Else m_nom = "Durand" m_prenom = "Albert" m_adresse = "Rue des poteaux, 2" m_localite = "Paille" m_cp = "23765" m_pays = 24 End If End Sub End Class
Le but de cet exemple nest pas de vous apprendre travailler en couche. La classe mtier qui vous est prsente ici est trs simplie et la mthode de chargement des donnes nest l que pour permettre dafficher simplement un rsultat. Typiquement, nous devrions trouver dans la classe des mthodes de manipulation, de contrle, de transformation des donnes. Linteraction entre lobjet mtier et la couche daccs aux donnes nest pas gre par XAML. Il sagit de .NET pur. Le code .NET doit tre adapt pour charger lobjet mtier.
Partial Public Class Window1 Inherits Window
Le guide du codeur 205
En tout premier, nous devons dclarer notre objet mtier comme membre de la classe. Notez que nous avons galement conserv le DataSet. Il est encore ncessaire pour charger la liste des pays.
Private m_data As New DBXAMLDataSet Private m_business As New Business
Dans le constructeur, nous chargeons les donnes dans le DataSet et dans lobjet mtier.
Public Sub New() InitializeComponent() Dim adapter As New DBXAMLDataSetTableAdapters.PaysTableAdapter adapter.Fill(m_data.Pays) m_business.Charger(1) End Sub
Comme ctait le cas pour le DataSet, lobjet mtier est dclar comme champ de la classe. Il est initialis dans le constructeur et plac comme source de
206 Le guide du codeur
donnes dans la mthode Win_Load. Il manque bien videmment lenregistrement des donnes de lobjet mtier mais, l encore, il sagit de programmation .NET classique.
Rafrachissement An de provoquer le rafrachissement de lcran lorsque les valeurs sont recharges, la valeur Nothing est charge dans lattribut DataContext et est ensuite nouveau charge par m_business.
Selon les circonstances, vous pourriez avoir plusieurs objets mtier et changer le DataContext pour quil pointe sur lun ou lautre. Dans ce cas, typiquement, vous aurez une collection dobjets mtier.
Le chier XAML nest pas modi Les liaisons se font sur les noms des proprits de la classe. Comme nous avons donn les mmes noms nos proprits que les noms des champs dans le schma xsd, le code XAML peut rester tel que.
En dnitive, cet exemple dmontre quil est non seulement possible de lier nimporte quelle proprit une donne externe mais galement que la donne externe peut elle-mme tre conserve dans nimporte quelle classe dobjet.
<Record> <Nom>Durant</Nom> <Prenom>Louis</Prenom> <Titre>Directeur general</Titre> </Record> <Record> <Nom>Dupont</Nom> <Prenom>Leon</Prenom> <Titre>Product manager</Titre> </Record> <Record> <Nom>Durand</Nom> <Prenom>Carine</Prenom> <Titre>Directrice generale adjointe</Titre> </Record> </Records> </Table>
Ce chier contient donc une simulation de table dont le nom serait Direction et qui contient trois enregistrements. La structure de ce chier XML nest absolument pas une structure obligatoire et nest reprise qu titre dexemple. Une fois ce chier cr, nous pouvons maintenant raliser notre page XAML qui va lire directement ce chier. Les donnes seront affiches dans une ListView. Ce sera pour nous loccasion de dcouvrir ce contrle, qui se prte particulirement bien laffichage de donnes enregistres dans une source externe.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid> <Grid.Resources> <XmlDataProvider x:Key="data" Source=" Data.XML"/> </Grid.Resources> <Grid.DataContext> <Binding Source="{StaticResource data}" XPath="/Table/Records"/> </Grid.DataContext> <ListView Height="92" Margin="13,18,19,0" Name="MaListView" VerticalAlignment="Top" ItemsSource="{Binding XPath=Record/Nom}" </Grid> </Page>
b Figure 7-11 : Affichage du contenu dun chier XML dans une ListView
Comme vous pouvez le constater, la balise XmlDataProvider est extrmement simple dutilisation puisquil ne sagit que de donner un nom via lattribut x:Key et de dnir le chier en utilisant lattribut Source. Comme pour les techniques prcdentes, nous devons utiliser le DataContext. Cette fois, nous le faisons directement dans le chier XAML puisque la source est dnie en tant que ressource statique. Lattribut XPath va permettre de dterminer dans le chier XML le nud qui contient les donnes qui nous intressent. Il ne reste plus alors qu dnir la ListView. En dehors de lattribut ItemSource, qui permet de dnir les donnes associes, rien de bien neuf. Notez que, pour dnir les donnes, nous utilisons nouveau XPath. Le contenu du nud Nom inscrit dans chaque nud Record de la source de donnes (DataContext) servira dnir un lment de la liste. Si nous dsirons afficher plus dune information par liste, vous pouvez utiliser lattribut ItemTemplate de notre ListView. Pour cela, nous devons au pralable dnir un DataTemplate. Le DataTemplate sert dcrire le contenu et la faon de reprsenter chacun des lments de la liste. Il se place galement dans la zone des ressources.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid> <Grid.Resources> <XmlDataProvider x:Key="data" Source=" Data.XML"/>
<DataTemplate x:Key="DataListView"> <WrapPanel> <Label Content="{Binding XPath=Nom}"/> <Label Content="{Binding XPath=Prenom}"/> <Label Content="{Binding XPath=Titre}"/> </WrapPanel> </DataTemplate> </Grid.Resources> <Grid.DataContext> <Binding Source="{StaticResource data}" XPath="/Table/Records"/> </Grid.DataContext> <ListView Height="92" Margin="13,18,19,0" Name="MaListView" VerticalAlignment="Top" ItemsSource="{Binding XPath=Record}" ItemTemplate="{StaticResource DataListView}"/> </Grid> </Page>
Contenu dun DataTemplate Comme vous pouvez le remarquer, un DataTemplate peut contenir nimporte quel code XAML ou presque.
Un autre moyen dafficher plus dinformations est dutiliser un GridView. Le GridView est non pas proprement parler un autre contrle mais plutt une extension qui se place dans la proprit View de ListView. Il permet dafficher les informations dans des colonnes spares et mme de donner un titre ces colonnes. Si nous reprenons le mme exemple, nous devrons le modier comme suit.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid> <Grid.Resources> <XmlDataProvider x:Key="data" Source=" Data.XML"/> </Grid.Resources> <Grid.DataContext> <Binding Source="{StaticResource data}" XPath="/Table/Records"/> </Grid.DataContext> <ListView Height="92" Margin="13,18,19,0" Name="MaListView" VerticalAlignment="Top" ItemsSource="{Binding XPath=Record}"> <ListView.View>
Dans cet exemple, le GridView contient trois colonnes, une pour le nom, une pour le prnom et une pour le titre.
<GridView AllowsColumnReorder="True"> <GridViewColumn Header="Nom" Width="50" DisplayMemberBinding= "{Binding XPath=Nom}"/> <GridViewColumn Header="Prnom" Width="60" DisplayMemberBinding= "{Binding XPath=Prenom}"/> <GridViewColumn Header="Titre" Width="140" DisplayMemberBinding= "{Binding XPath=Titre}"/> </GridView> </ListView.View> </ListView> </Grid> </Page>
Dplacer les colonnes Pour permettre lutilisateur de dplacer les colonnes par glisser-dposer, vous devez assigner la valeur True lattribut AllowsColulmnReorder dans la balise GridView.
Si vous prfrez donner un aspect plus structur votre affichage, vous utiliserez probablement un TreeView. Sur la base du mme exemple, nous pouvons construire un petit TreeView mais, an de lui donner un aspect plus hirarchis, il y a lieu de modier au pralable notre source de donnes.
<Table> <Name> Direction </Name> <Records> <Administration> <Record> <Nom>Durant</Nom> <Prenom>Louis</Prenom> <Titre>Directeur general</Titre> </Record> <Record> <Nom>Durand</Nom> <Prenom>Carine</Prenom>
212 Le guide du codeur
<Titre>Directrice generale adjointe</Titre> </Record> </Administration> <Production> <Record> <Nom>Dupont</Nom> <Prenom>Leon</Prenom> <Titre>Product manager</Titre> </Record> </Production> </Records> </Table>
Avec les nuds Administration et Production, les membres de la direction sont maintenant groups selon leurs tches. Nous pouvons reprsenter cette structure dans le TreeView.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid> <Grid.Resources> <XmlDataProvider x:Key="data" Source="Data2.XML"/> <DataTemplate x:Key="Admin"> <WrapPanel> <Label Foreground="Blue" Content="{Binding XPath=Nom}"/> <Label Content="{Binding XPath=Prenom}"/> <Label Content="{Binding XPath=Titre}"/> </WrapPanel> </DataTemplate>
Nous pouvons dnir un deuxime DataTemplate sur la mme source. Dans lexemple, seule la couleur est modie, mais vous pourriez changer tous les lments.
<DataTemplate x:Key="Prod"> <WrapPanel> <Label Foreground="Green" Content="{Binding XPath=Nom}"/> <Label Content="{Binding XPath=Prenom}"/> <Label Content="{Binding XPath=Titre}"/> </WrapPanel> </DataTemplate> </Grid.Resources> <Grid.DataContext>
Le guide du codeur 213
<Binding Source="{StaticResource data}" XPath="/Table/Records"/> </Grid.DataContext> <TreeView Margin="13,18,19,0" Name="MaTreeView" Background="Azure"> <TreeViewItem ItemsSource="{Binding XPath=Administration/Record}" Header="Administration" ItemTemplate="{StaticResource Admin}"/> <TreeViewItem ItemsSource="{Binding XPath=Production/Record}" Header="Production" ItemTemplate="{StaticResource Prod}"/> </TreeView> </Grid> </Page>
Comme vous pouvez le constater, chaque lment du TreeView possde sa propre source ou plutt son propre chemin vers les donnes. Il peut aussi avoir sa propre reprsentation mais, gnralement, le modle (DataTemplate) sera le mme pour lensemble des lments. Voyons maintenant comment raliser une liaison avec un objet en utilisant
ObjectDataProvider.
Nous devons tout dabord crer une classe. Prenons comme exemple la classe Auteur, qui contient son nom et une collection de livres quil a crits.
Ensuite, nous avons besoin dune collection type pour stocker les objets Livre.
Public Class Livres Inherits ObservableCollection(Of Livre) Public Sub New() End Sub End Class
Maintenant, nous pouvons passer au code XAML et lutilisation dObjectDataProvider. La proprit ObjectType va nous permettre de spcier le type dobjet qui sera cr.
Le paramtre ConstructorParameters, que nous nutiliserons pas ici, permet de transmettre des paramtres au constructeur. Les autres techniques utilises ont dj t vues prcdemment.
<Window xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:src="clr-namespace:ObjectProviderExemple" > <Window.Resources> <ObjectDataProvider x:Key="sk" ObjectType="{x:Type src:Auteur}"/> <DataTemplate x:Key="NomAuteur"> <TextBlock Text="{Binding Path=Name}" /> </DataTemplate> </Window.Resources> <StackPanel DataContext= "{Binding Source={StaticResource sk}}" Margin="10,10,10,0"> <TextBlock Text="{Binding Path=Name}" Background="LightGray" /> <ListView Background="LemonChiffon" ItemsSource="{Binding Path=Livres}" ItemTemplate="{DynamicResource NomAuteur}" /> </StackPanel> </Window>
ObjectProviderExemple
Les paramtres ObjectInstance, MethodName et MethodParameters tendent encore les possibilits de cette classe en permettant entre autres laccs des mthodes de lobjet cr.
Le guide du codeur 217
7.4 Checklist
Dans ce chapitre sur la connexion aux donnes, nous avons essentiellement vu :
j
j j j
j j
comment lier un objet DataSet ou autre avec un contrle en utilisant les proprits DataContext et Source ; comment lier les donnes en utilisant Binding ; comment lier les donnes un chier XML en utilisant XmlDataProvider ; comment afficher les donnes dans une ListView ou de manire plus labore avec un GridView ; comment afficher les donnes dans une arborescence avec TreeView ; comment lier les donnes un objet en utilisant ObjectDataProvider.
Ch apit re
8 Fonctionnalits avances
Appliquer des transformations sur les contrles ....................................... Crer une ressource .................................. Crer un style ........................................... Checklist ..................................................
Fonctionnalits avances
<Label Name="lblPremierLabel" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Verdana" FontSize="14" FontWeight="Heavy" FontStyle="Italic" FontStretch="UltraExpanded" Foreground="Aquamarine" Background="Blue"> Mon premier label. <Label.RenderTransform> <RotateTransform Angle="270" /> </Label.RenderTransform> </Label>
Accder une proprit grce un nud ls Pour la premire fois, nous utilisons une proprit de la classe non pas en la dnissant grce un attribut mais bien comme un nud ls de notre nud Label.
Notez la prsence de lattribut CenterY, qui comme CenterX permet de modier la position du contrle en mme temps que lui est applique la transformation.
Fonctionnalits avances
Si vous ne trouvez pas votre bonheur dans ces transformations, vous pouvez toujours utiliser une transformation grce une matrice.
<Label Name="lblPremierLabel" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Verdana" FontSize="14" FontWeight="Heavy" FontStyle="Italic" FontStretch="UltraExpanded" Foreground="Aquamarine" Background="Blue" RenderTransform= "1,-0.5,0,1,0,0"> Mon premier label. </Label>
Nous revenons avec cette commande dans la structure plus traditionnelle dun attribut de notre balise. Chaque chiffre de la matrice applique une transformation notre label.
Les transformations appliques prcdemment sur un Label peuvent parfaitement tre utilises avec dautres contrles. Par exemple, leffet sur un texte long est, pour qui a lhabitude des limites de lAPI Win32, toujours trs surprenant.
<TextBlock Name="blckTexte" MaxWidth="200" MaxHeight="70" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="5,5,5,5" TextAlignment="Justify" > Nous sommes maintenant arrivs notre deuxime contrle. Comme vous avez dj pu le constater, XAML est la fois simple dutilisation et performant. <TextBlock.RenderTransform> <RotateTransform CenterX="100" CenterY="100" Angle="270"/> </TextBlock.RenderTransform> </TextBlock>
Fonctionnalits avances
pouvoir rutiliser le code sans devoir le rcrire compltement. Ce qui permet un gain de temps mais aussi limite les risques de bug ou doubli en cas de modication. Prenons un exemple simple de ressource.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Page.Resources> <SolidColorBrush Color="Gold" x:Key="Background1"/> <SolidColorBrush Color="Lavender" x:Key="Background2"/> </Page.Resources> <StackPanel> <TextBox Background="{StaticResource Background1}"/> <TextBox Background="{StaticResource Background2}"/> <TextBox Background="{StaticResource Background1}"/> <TextBox Background="{StaticResource Background1}"/> <TextBox Background="{StaticResource Background2}"/> </StackPanel> </Page>
Le nom de la ressource est dni grce lattribut x :key. La ressource est accde en assignat {StaticResource NomDeLaRessource} lattribut cible. Si vous changez la ressource, toute la page est directement affecte. Il nest pas ncessaire de modier chaque contrle.
Nous avons utilis les ressources de manire statique, il est toutefois possible de les utiliser de manire dynamique en remplaant le mot cl StaticResource par DynamicResource. Cette possibilit nest intressante que quand la ressource peut tre modie. Elle pourra alors tre recharge. Il est possible davoir deux ressources portant le mme nom pour autant quelles ne soient pas dnies dans la mme balise. Pour retrouver une ressource, XAML remonte niveau aprs niveau la recherche de cette ressource. Pour la lisibilit du code, il est malgr tout fortement conseill dutiliser des noms diffrents.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Page.Resources> <SolidColorBrush Color="Red" x:Key="Background1"/> <SolidColorBrush Color="Blue" x:Key="Background2"/> </Page.Resources> <StackPanel> <StackPanel.Resources> <SolidColorBrush Color="Lavender" x:Key="Background1"/> </StackPanel.Resources>
Fonctionnalits avances
<TextBox Background="{StaticResource <TextBox Background="{StaticResource <TextBox Background="{StaticResource <TextBox Background="{StaticResource <TextBox Background="{StaticResource </StackPanel> </Page>
Les ressources sont aussi un moyen simple pour partager un menu contextuel entre plusieurs lments.
<Window.Resources> <ContextMenu x:Key="CtxtMnu"> <MenuItem Header="Copier"/> <MenuItem Header="Coller"/> </ContextMenu> </Window.Resources> <TextBox Name="txtNom" Canvas.Top="10" Canvas.Left="80" Width="150" MaxLength="30" CharacterCasing="Upper" Text ="{Binding Path=Nom}" ContextMenu="{StaticResource CtxtMnu}" /> <Label Name="lblPrenom" Canvas.Top="10" Canvas.Left="240"> Prnom </Label> <TextBox Name="txtPrenom" Canvas.Top="10" Canvas.Left="300" Width="130" MaxLength="30" Text ="{Binding Path=Prenom}" ContextMenu="{StaticResource CtxtMnu}"/>
226 Le guide du codeur
Crer un style
Si nous analysons ce code, la premire chose faire est de donner un nom ce style avec lattribut x:Key. La balise Setter va nous permettre de dnir la proprit affecte. Il ne nous reste qu demander lutilisation du style. Cela se fait pour chaque contrle car vous pourriez avoir plusieurs styles diffrents pouvant tre appliqus au mme type de contrle. Pour appliquer un style, il suffit dutiliser lattribut Style.
<TextBox Name="txtNom" Canvas.Top="10" Canvas.Left="80" Width="150" MaxLength="30" CharacterCasing="Upper" Text ="{Binding Path=Nom}" Style="{StaticResource MyTextBox}">
Fonctionnalits avances
Affichage du style Le style tel que nous lavons dni naffecte le contrle que lorsquil est activ. Son apparence dsactive na pas chang. Pour voir les couleurs, vous devez donc utiliser loption Ouvrir du menu.
Bien sr, vous pouvez rtorquer quil a fallu modier toutes les TextBox et que, ds lors, il aurait t aussi simple de changer lattribut correspondant. Toutefois, si vous dsirez maintenant changer la couleur, il suffit de la changer un endroit. Changeons la couleur.
<Style x:Key="MyTextBox"> <Setter Property="TextBox.Background" Value="Lavender"/> </Style>
Toutes les botes de texte concernes sont automatiquement adaptes. Si vous trouvez toujours quil est fastidieux de dclarer le style pour chaque contrle, il est galement possible dappliquer automatiquement un style tous les contrles dun mme type sans devoir le prciser pour chacun deux.
<Style TargetType="{x:Type TextBox}"> <Setter Property="TextBox.Background" Value="Lavender"/> </Style>
Lattribut TargetType permet de dnir le type de contrle qui doit tre affect. Une autre bonne raison dutiliser un style est quil peut regrouper non pas une mais un ensemble de modications apporter la prsentation. Et, dans ce cas, il sera beaucoup plus fastidieux de les raliser pour chaque contrle concern.
<Style x:Key="MyTextBox"> <Setter Property="TextBox.Background" Value="Lavender"/>
228 Le guide du codeur
Crer un style
Fonctionnalits avances
Comme vous pouvez le constater, il est possible de pousser trs loin les modications de prsentation. Une fois encore, nous pouvons voir quon peut accder une proprit comme un attribut.
<Setter Property="TextBox.BorderBrush" Value="Gray"/>
Une petite explication simpose sur la classe LinearGradientBrush, que nous navons pas encore utilise. Comme vous avez pu le constater, elle permet de raliser un fondu linaire entre plusieurs couleurs. Le fondu se fait sur la diagonale entre le coin suprieur gauche (coordonnes 0,0) et le coin infrieur droit (coordonnes 1,1). Les attributs SartPoint et EndPoint dnissent le dbut et la n de la zone o doit sappliquer le fondu. La collection GradientStops permet de dnir les couleurs et leurs positions sur la diagonale. Vous pouvez galement prfrer un fondu radial en utilisant la classe RadialGradientBrush..
<Style x:Key="MyTextBox"> <Setter Property="TextBox.Background"> <Setter.Value> <RadialGradientBrush> <RadialGradientBrush.GradientStops> <GradientStop Color="LavenderBlush" Offset="0" /> <GradientStop Color="Lavender" Offset="0.2" /> <GradientStop Color="LightGray" Offset="0.5" /> <GradientStop Color="Gray" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Setter.Value> </Setter> <Setter Property="TextBox.BorderBrush" Value="Black"/> <Setter Property="TextBox.BorderThickness" Value="1"/> <Setter Property="TextBox.TextAlignment" Value="Center"/> </Style>
Crer un style
Un autre avantage des styles est quil est possible dhriter dun autre style.
<Window.Resources> <Style x:Key="MyControl"> <Setter Property="Control.Background"> <Setter.Value> <RadialGradientBrush> <RadialGradientBrush.GradientStops> <GradientStop Color="LavenderBlush" Offset="0" /> <GradientStop Color="Lavender" Offset="0.2" /> <GradientStop Color="LightGray" Offset="0.5" /> <GradientStop Color="Gray" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Setter.Value> </Setter> <Setter Property="Control.BorderBrush" Value="Black"/> <Setter Property="Control.BorderThickness" Value="1"/> </Style> <Style TargetType="{x:Type TextBox}" x:Key="MyTextBox" BasedOn="{StaticResource MyControl}"> <Setter Property="TextBox.TextAlignment" Value="Center"/> </Style> <Style TargetType="{x:Type ListBox}" x:Key="MyListBox" BasedOn="{StaticResource MyControl}"/> </Window.Resources>
Fonctionnalits avances
Dans cet exemple, le style que nous avions dni est maintenant applicable au type Control. Le style peut tre hrit par les autres styles destins dautres contrles. La proprit TextAlignment nest modie que pour le style MyTextBox.
Rednition dun lment dun style Si votre style hrite dun autre, vous pouvez sans problme rednir des attributs dj dnis.
Un autre attribut important et souvent utilis en conjonction avec les styles est lattribut Template. Si vous ne souhaitez changer lattribut Template que pour un seul contrle de votre cran, il est inutile de crer un style. Vous pouvez modier cette proprit directement dans la balise du contrle. Nous allons commencer en modiant lattribut Template du nom et nous crerons ensuite un style sur cette base. De cette faon, nous aurons utilis les deux possibilits.
<TextBox Name="txtNom" Canvas.Top="10" Canvas.Left="80" Width="150" MaxLength="30" CharacterCasing="Upper" Text ="{Binding Path=Nom}" > <TextBox.Template> <ControlTemplate> <Border CornerRadius="10" BorderThickness="1" BorderBrush="Black"> <Border.Background>
232 Le guide du codeur
Crer un style
<RadialGradientBrush> <RadialGradientBrush.GradientStops> <GradientStop Color="LavenderBlush" Offset="0" /> <GradientStop Color="Lavender" Offset="0.2" /> <GradientStop Color="LightGray" Offset="0.5" /> <GradientStop Color="Gray" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Border.Background> <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalAlignment="Center"/> </Border> </ControlTemplate> </TextBox.Template> <TextBox.ContextMenu> <ContextMenu> <MenuItem Header="Copier"/> <MenuItem Header="Coller"/> </ContextMenu> </TextBox.ContextMenu> </TextBox>
Dans lexemple, nous avons remplac la reprsentation normale par une bordure arrondie avec les mmes effets de fondu que le contrle original, mais les coins sont arrondis. La valeur est contenue dans un ScrollView. Ceci est rendu possible grce la prsence de lattribut x:Name="PART_ContentHost".
Le guide du codeur 233
Fonctionnalits avances
En utilisant cet attribut, il est possible de faire quasiment tout mais aussi nimporte quoi.
<Label Name="lblNom" Canvas.Top="10" Canvas.Left="10"> Nom <Label.Template> <ControlTemplate> <CheckBox> <ContentPresenter x:Name="ContentSite" /> </CheckBox> </ControlTemplate> </Label.Template> </Label>
Dans lexemple ci-dessus, la reprsentation du contrle Label est remplace par celle du contrle CheckBox. Toutefois, il sagit toujours dun objet Label. Les proprits de CheckBox comme IsChecked ne sont pas accessibles. Ce genre de remplacement na aucun intrt mais dmontre bien la dissociation faite entre lobjet et sa reprsentation. Ce quil est possible de raliser sur un contrle contenu simple, il est galement possible de le raliser pour un contrle grant une liste comme la ListBox utilise dans lexemple.
<ListBox Name="lstPays" Canvas.Top="100" Canvas.Left="200" DisplayMemberPath="Pays" SelectedValue="{Binding Path=Pays}" SelectedValuePath="Id"> <ListBox.Template>
234 Le guide du codeur
Crer un style
<ControlTemplate> <Border CornerRadius="10" BorderThickness="1" BorderBrush="Black" > <Border.Background> <RadialGradientBrush> <RadialGradientBrush.GradientStops> <GradientStop Color="LavenderBlush" Offset="0" /> <GradientStop Color="Lavender" Offset="0.2" /> <GradientStop Color="LightGray" Offset="0.5" /> <GradientStop Color="Gray" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Border.Background> <ScrollViewer Focusable="False" HorizontalAlignment="Center"> <ItemsPresenter/> </ScrollViewer> </Border> </ControlTemplate> </ListBox.Template> </ListBox>
Maintenant que nous avons vu comment modier la reprsentation dun contrle, voyons comment inclure cela dans un style.
<Window.Resources> <Style x:Key="MyTextBox"> <Setter Property="Template">
Fonctionnalits avances
<Setter.Value> <ControlTemplate> <Border CornerRadius="10" BorderThickness="1" BorderBrush="Black"> <Border.Background> <RadialGradientBrush> <RadialGradientBrush.GradientStops> <GradientStop Color="LavenderBlush" Offset="0" /> <GradientStop Color="Lavender" Offset="0.2" /> <GradientStop Color="LightGray" Offset="0.5" /> <GradientStop Color="Gray" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Border.Background> <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources>
En dnitive, cest trs simple. Il suffit dappliquer ce que nous avons vu en dbut de chapitre mais sur lattribut Template. Il est galement possible dutiliser des ressources dans un style. La ressource doit bien entendu tre dnie avant le style.
236 Le guide du codeur
Crer un style
<Window.Resources> <RadialGradientBrush x:Key="Fondu"> <RadialGradientBrush.GradientStops> <GradientStop Color="LavenderBlush" Offset="0" /> <GradientStop Color="Lavender" Offset="0.2" /> <GradientStop Color="LightGray" Offset="0.5" /> <GradientStop Color="Gray" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> <Style x:Key="MyTextBox"> <Setter Property="TextBox.Template"> <Setter.Value> <ControlTemplate> <Border CornerRadius="10" BorderThickness="1" BorderBrush="Black" Background="{StaticResource Fondu}"> <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources>
Fonctionnalits avances
Utilisation du terme trigger plutt que dclencheur Le terme dclencheur tant fort peu usit par les dveloppeurs, nous utiliserons dans la suite de ce chapitre le terme anglais trigger. Il est frquent en informatique dutiliser les termes anglais plutt que franais car ils sont trs proches des langages de programmation, et lanalogie entre langage parl et langage de programmation dlimite prcisment et directement le sens du mot au contexte spcique.
Les triggers vont nous permettre de gnrer un certain dynamisme de nos crans sans recourir au code .NET. Les triggers peuvent tre dclenchs lors de la modication de valeurs des proprits des objets ou associs aux vnements dun objet. Les triggers sont gnralement intgrs dans des styles. Modions le style de notre exemple prcdent pour souligner le champ actif.
<Window.Resources> <RadialGradientBrush x:Key="Fondu"> <RadialGradientBrush.GradientStops> <GradientStop Color="LavenderBlush" Offset="0" /> <GradientStop Color="Lavender" Offset="0.2" /> <GradientStop Color="LightGray" Offset="0.5" /> <GradientStop Color="Gray" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> <RadialGradientBrush x:Key="FonduBleu"> <RadialGradientBrush.GradientStops> <GradientStop Color="LightBlue" Offset="0" /> <GradientStop Color="MediumBlue" Offset="0.5" /> <GradientStop Color="Blue" Offset="0.7" /> <GradientStop Color="DarkBlue" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> <Style x:Key="MyTextBox"> <Setter Property="TextBox.Template">
238 Le guide du codeur
Crer un style
<Setter.Value> <ControlTemplate> <Border CornerRadius="10" BorderThickness="1" BorderBrush="Black" x:Name="Zone" Background="{StaticResource Fondu}"> <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalAlignment="Center"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsFocused" Value="true"> <Setter TargetName="Zone" Property="Background" Value="{StaticResource FonduBleu}" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources>
Si nous analysons les changements, nous retrouvons dabord lajout dune nouvelle ressource semblable notre ressource Fondu mais avec des couleurs bleues. Ensuite, dans le style proprement dit, une nouvelle balise (ControlTemplate.Triggers) a fait son apparition. Cest dans cette balise que nous allons dnir tous les triggers dont nous aurons besoin. Chaque trigger est dni au moyen de la balise Trigger. Lattribut Property dtermine la proprit laquelle le trigger est associ. Lattribut Value dtermine quant lui la valeur que doit avoir la proprit pour que le trigger sexcute. Il sagit en fait dune
Fonctionnalits avances
condition simple sur la valeur de la proprit. Les actions raliser sont places lintrieur de ce nud.
Le terme Template Comme trigger, le terme anglais template est trs souvent privilgi par rapport sa traduction franaise, qui surtout dans ce contexte rend mal le concept sous-jacent. Cest pourquoi nous utiliserons ce terme, qui est de plus utilis tel quel comme proprit dans XAML.
La traduction habituelle du terme template est modle. Toutefois, dans le contexte qui nous occupe, il sagit de la dnition de la forme que doit prendre un contrle en utilisant le langage de description XAML lui-mme. Cest par lutilisation des template que XAML fait la distinction entre le contenu dun contrle (la dnition de la classe) et sa reprsentation lcran. Le terme modle prend malgr tout tout son sens si lon considre que le contrle sera prsent selon le modle que vous dnissez.
Nommage des lments constituant le template Pour pouvoir dans le trigger inuencer les diffrents composants participant la ralisation du template, chaque lment, ou du moins ceux sur lesquels une action doit tre ralise, doit tre nomm au moyen de la proprit x:Name.
Pour appliquer un trigger un contrle unique, la technique est fort similaire. Nous pouvons appliquer la mme technique pour la ListBox de notre exemple.
<ListBox Name="lstPays" Canvas.Top="100" Canvas.Left="200" DisplayMemberPath="NomPays" SelectedValue="{Binding Path=Pays}" SelectedValuePath="Id"> <ListBox.Template> <ControlTemplate> <Border x:Name="Zone" CornerRadius="10" BorderThickness="1" BorderBrush="Black" Background="{StaticResource Fondu}"> <ScrollViewer Focusable="False" HorizontalAlignment="Center"> <ItemsPresenter/> </ScrollViewer> </Border>
Crer un style
<ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="Zone" Property="Background" Value="{StaticResource FonduBleu}" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </ListBox.Template> </ListBox>
La technique utilise est identique celle mise en uvre dans lexemple prcdent.
Trigger sur la prsence du curseur de la souris Ici, au lieu dassocier le trigger la proprit IsFocused, il est associ la proprit IsMouseOver.
Fonctionnalits avances
Prenons un exemple simple, un contrle de type Border qui souvre lors de laffichage de la fentre. Pour y arriver, nous allons dnir un trigger sur lvnement Loaded du contrle. Pour en savoir plus sur la manire de crer un trigger, reportez-vous
Renvoi au chapitre Utiliser les Triggers page _Ref133244991109.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel Margin="20"> <Border Name="Carre" Width="10" Height="10" Background=Blue> <Border.Triggers> <EventTrigger RoutedEvent="Border.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Width" From="10" To="200" Duration="0:0:2"/> <DoubleAnimation Storyboard.TargetProperty="Height" From="10" To="200" Duration="0:0:2"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Border.Triggers> </Border> </StackPanel> </Page>
Le trigger contient une balise BeginStoryboard qui elle-mme contient une balise Storyboard. Cest dans cette dernire quest dnie lanimation. Elle consiste modier la largeur et la hauteur du cadre. Celui-ci va varier de la taille 10 200 en lespace de 2 secondes. Dans cet exemple, les animations agissent sur le contrle dans lequel elles sont dnies. Vous aurez probablement besoin danimer plusieurs contrles lors dun mme vnement. Cela est possible en spciant lattribut Storyboard.TargetName. Pour une animation lors de louverture de la fentre, lidal est dassocier lanimation lvnement Page.Loaded et non Border.Loaded.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Triggers> <EventTrigger RoutedEvent="Page.Loaded">
242 Le guide du codeur
Crer un style
<BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="Carre" Storyboard.TargetProperty="Width" From="10" To="200" Duration="0:0:2"/> <DoubleAnimation Storyboard.TargetName="Carre" Storyboard.TargetProperty="Height" From="10" To="200" Duration="0:0:2"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Page.Triggers> <StackPanel Margin="20"> <Border Name="Carre" Width="10" Height="10" Background=Blue/> </StackPanel> </Page>
Animations simultanes Les animations dnies dans la balise Storyboard sont excutes simultanment et non successivement.
Cet exemple est nalement assez simple car la transformation modie directement la valeur de la proprit de lobjet. Ce nest malheureusement pas toujours le cas. Pour modier la couleur du fond, nous ne pouvons pas utiliser simplement la balise ColorAnimation comme ceci :
<ColorAnimation Storyboard.TargetName="Carre" Storyboard.TargetProperty="Background" From="Blue" To="Red" Duration="0:0:5"/>
Le problme nest pas vident car lattribut Background de la balise Border reoit bien comme valeur Blue. Toutefois, dans lanimation, comme le dmontre la balise utilise, lattribut modi est un attribut de type Color alors que lattribut Background attend un attribut de type Brush. La syntaxe correcte sera donc :
<ColorAnimation Storyboard.TargetName="Carre" Storyboard.TargetProperty="Background.Color" From="Blue" To="Red" Duration="0:0:5"/>
Le guide du codeur 243
Fonctionnalits avances
Dans le mme ordre dide, il sera parfois ncessaire de prciser compltement la proprit.
<ColorAnimation Storyboard.TargetName="Carre" Storyboard.TargetProperty= "(Border.Background).(SolidColorBrush.Color)" From="Blue" To="Red" Duration="0:0:5"/>
De cette faon, il est clair que la proprit modie est la proprit Color de lobjet de type SolidColorBrush assign la proprit Background de lobjet de type Border. Si vous prfrez, vous avez galement la possibilit de dcrire vous-mme le contenu de la proprit Background. Vous pourrez ainsi nommer son contenu et y accder directement dans lanimation.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Triggers> <EventTrigger RoutedEvent="Page.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="Carre" Storyboard.TargetProperty="Width" From="10" To="200" Duration="0:0:2"/> <DoubleAnimation Storyboard.TargetName="Carre" Storyboard.TargetProperty="Height" From="10" To="200" Duration="0:0:2"/> <ColorAnimation Storyboard.TargetName="Couleur" Storyboard.TargetProperty="Color" From="LightGray" To="SlateGray" Duration="0:0:5" AutoReverse="true" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Page.Triggers> <StackPanel Margin="20"> <Border Name="Carre" Width="10" Height="10"> <Border.Background> <SolidColorBrush x:Name="Couleur"
Crer un style
Nommage avec x:Name Pour nommer un sous-lment, vous devez utiliser lattribut x:Name et non lattribut Name.
Jusquici, nous avons utilis uniquement des animations qui faisaient varier une ou des proprits dune valeur une autre. Il existe une autre mthode permettant de raliser des animations plus complexes. Cette mthode consiste passer successivement dun tat un autre. titre dexemple dans notre exercice complet, nous pouvons faire pivoter la photo sur son axe quand la souris passe dessus. Pour y arriver, nous devrons modier la balise Border.
<Border Width="100" Height="120" BorderThickness="1" Background="White" BorderBrush="Black" Canvas.Top="10" Canvas.Right="10" > <Image Name="Photo" Source="{Binding Path=Photo}" > <Image.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Image.RenderTransform> <Image.Triggers> <EventTrigger RoutedEvent="Image.MouseMove"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty= "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame Value="-1"
Le guide du codeur 245
Fonctionnalits avances
KeyTime="00:00:03"/> <SplineDoubleKeyFrame Value="1" KeyTime="00:00:06"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty= "(UIElement.RenderTransform)(TransformGroup.Children) [1].(TranslateTransform.X)"> <SplineDoubleKeyFrame Value="100" KeyTime="00:00:03"/> <SplineDoubleKeyFrame Value="0" KeyTime="00:00:06"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Image.Triggers> </Image> </Border>
Pour raliser cette animation, deux transformations sont dnies, un changement dchelle et une translation. Les valeurs dnies sont choisies pour que ces transformations naient aucune action. Ce nest que lors de lactivation du trigger que les transformations doivent avoir effectivement lieu. Pour plus dinformations sur les transformations, reportez-vous
Renvoi au chapitre Appliquer des transformations sur les contrles
page 220.
Ensuite, lies lvnement MouseMove, deux animations sont dnies, une modiant la transformation dchelle et lautre, la translation. Notez que les animations utilisent non pas DoubleAnimation mais bien DoubleAnimationUsingKeyFrames. Les valeurs atteindre sont dnies dans des nuds ls : ici des nuds de type SplineDoubleKeyFrame. La valeur atteindre est spcie par lattribut Value et le temps pour y arriver est dtermin par KeyTime. Une fois ltat atteint, lanimation passe ltat suivant. Le passage dun tat lautre se fait par interpolation. Cela nempche pas les diffrentes animations dtre ralises en mme temps. Vous devez donc les synchroniser en jouant sur les temps et par exemple en utilisant lattribut BeginTime.
Checklist
8.4 Checklist
Dans ce chapitre, les notions essentielles que nous avons vues sont :
j
j j j
comment appliquer une transformation un contrle et particulirement les rotations, les changements dchelle et les changements doblicit ; quoi sert une ressource et comment la crer ; comment crer un style ; comment utiliser les triggers pour effectuer automatiquement certaines tches ; comment crer simplement des animations.
Ch apit re
9 Les documents
Utiliser FixedDocument ............................... Utiliser FlowDocument ................................ diter un document .................................... Annoter un document ................................. Checklist ..................................................
Les documents
Les documents sont au centre des dveloppements informatiques. Ils reprsentent un moyen efficace de mise disposition de linformation et sont un complment de plus en plus important des donnes structures. WPF, et en ce qui nous concerne plus spciquement XAML, met notre disposition un ensemble doutils qui vont nous permettre de manipuler et de prsenter ce type dinformation.
Le document Doc1-1.xaml :
<FixedPage xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel HorizontalAlignment="Stretch" > <Image> <Image.Source> Header.gif </Image.Source> </Image> <TextBlock TextWrapping="WrapWithOverflow" Margin="5,5,5,5" Width="400" HorizontalAlignment="Center"> <TextBlock Foreground="Orange FontSize="12" FontWeight="Bold"> XAML en un clin dil </TextBlock> <LineBreak/> <LineBreak/> Avec Avec larrive de Windows Vista et de WPF/E, XAML va prendre de plus en plus
Utiliser FixedDocument
dimportance dans le quotidien de lutilisateur. Bien sr celui-ci ne sen apercevra pas forcment. Combien dutilisateurs savent que telle ou telle page est ralise avec Flash, ASP.NET, DHTML... Par contre, pour le dveloppeur et les designers, larrive de XAML et de WinFX reprsente une rvolution quil ne faudra pas rater <LineBreak/> <LineBreak/> <TextBlock Foreground="Orange" FontSize="12"> Termin, le casse-tte du Design </TextBlock> <LineBreak/> <LineBreak/> Le dveloppeur et le designer peuvent travailler en toute autonomie chacun sur sa partie tout en disposant de ce que lautre a fait et cela au travers doutils trs simples comme SourceSafe par exemple. Chacun pourra disposer des outils qui lui sont rellement destins. <LineBreak/> <LineBreak/> </TextBlock> </StackPanel> </FixedPage>
Les documents
Formatage complexe Pour obtenir diffrents formats complexes de vos caractres, vous pouvez utiliser des TextBlock imbriqus.
Si votre document est compos de plusieurs pages, il suffit dajouter de nouvelles balises PageContent pour chaque page du document. Dans lexemple ci-dessous, vous constaterez quil nest pas ncessaire de crer un chier par page. Le contenu de la page peut tre directement dni dans la balise.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <FixedDocument> <PageContent Source="Doc1-1.xaml" /> <PageContent> <FixedPage> <StackPanel HorizontalAlignment="Stretch" > <Image> <Image.Source> Header.gif </Image.Source> </Image> <TextBlock TextWrapping="WrapWithOverflow" Margin="5,5,5,5" Width="400" HorizontalAlignment="Center"> <Bold>Dveloppez votre crativit </Bold> Ds <LineBreak/> <LineBreak/> Encore une autre options sont les programmes <LineBreak/> <LineBreak/> Les possibilits sont infinies ! </TextBlock> </StackPanel> </FixedPage> </PageContent> </FixedDocument> </Page>
Utiliser FixedDocument
Les documents
Si vous souhaitez contrler certains attributs comme Zoom, ShowPageBorders ou VerticalPageSpacing, vous pouvez inclure votre FixedDocument dans une balise DocumentViewer.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <DocumentViewer Zoom="150"> <FixedDocument> </FixedDocument> </DocumentViewer> </Page>
prsentation au mieux selon lenvironnement dans lequel il est affich. Lobjectif est donc totalement inverse de FixedDocument.
Balise obsolte Vous rencontrerez peut-tre au dtour dInternet des exemples de documents utilisant la balise TextFlow. Toutefois, sachez que cette possibilit a t retire partir de la version bta 2 de WinFX et ne peut donc plus tre utilise.
<Page x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <FlowDocument TextAlignment="Justify"> <Paragraph> <Image> <Image.Source> Photo.jpg </Image.Source> </Image> </Paragraph> <Paragraph> <Bold>Dveloppez votre crativit</Bold> Ds que vous
254 Le guide du codeur
Utiliser FlowDocument
</Paragraph> <Paragraph> Encore une autre </Paragraph> <Paragraph> Les possibilits sont infinies ! </Paragraph> </FlowDocument> </Page>
Association la classe Pour rappel, si vous utilisez XAMLPad, lattribut x:Class="Page1" doit tre retir du code puisque aucun code behind (.Net) nest associ.
Les documents
Notez que, lorsque vous redimensionnez la fentre, FlowDocument ne gnre pas de dlement mais fait une gestion de pages. Dans lexemple ci-dessus, le document occupe maintenant deux pages. La position courante et le nombre de pages sont indiqus dans la barre doutils en bas du document.
Vous pouvez naviguer entre les pages en utilisant les petites ches dans la barre doutils. Vous pouvez galement, depuis cette barre doutils, choisir laffichage sur deux pages cte cte ou opter pour un dlement continu. Cette barre doutils contient galement un Slider qui vous permet de zoomer sur le document. Le zoom inuence automatiquement le nombre de pages. Vous pouvez encore imposer des sauts de page en utilisant les attributs BreakPageBefore ou BreakPageAfter. Ajoutez le code suivant la n du document.
<Paragraph BreakPageBefore="True"> Nouvelle page </Paragraph>
Utiliser FlowDocument
Quelle que soit la taille de la fentre, Nouvelle page sera toujours sur une page spare. Cet attribut sapplique aussi bien Paragraph que List et mme Section. Il est dailleurs temps de vous en dire un peu plus sur la balise Section. Celle-ci a pour but de regrouper un certain nombre dlments du texte exactement comme une section en Word. Il devient alors possible dappliquer certains attributs sur lensemble des paragraphes contenus dans la section.
<Section BreakPageBefore="True" FontSize="24"> <Paragraph> Nouvelle page </Paragraph> <Paragraph> Ce texte est dans la mme section que "Nouvelle page" </Paragraph> </Section>
Outre la balise Section et la balise Table, dont nous parlerons plus loin dans le chapitre, vous pouvez utiliser au sein de FlowDocument la balise List.
<Page x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <FlowDocument TextAlignment="Justify"> <Paragraph> Les moyens les plus courants </Paragraph> <List> <ListItem> <Paragraph> Appreil photo </Paragraph> </ListItem>
Les documents
Camescope </Paragraph> </ListItem> <ListItem> <Paragraph> Webcam </Paragraph> </ListItem> </List> </FlowDocument> </Page>
Attributs de FlowDocument An damliorer la prsentation, vous pouvez galement utiliser des attributs dj vus prcdemment pour dautres contrles tels que TextAlignment.
La balise List peut tre congure pour raliser les listes puce les plus courantes ou mme des listes numrotes. Avec lattribut MarkerStyle, vous allez pouvoir choisir le type de puce ou de numro. Les diffrentes puces possibles sont Disk, Circle, Square et Box alors
258 Le guide du codeur
Utiliser FlowDocument
que, pour les listes numrotes, vous pouvez utiliser LowerLatin, UpperLatin, LowerRoman, UpperRoman ou encore Decimal. Lattribut MarkerOffset dtermine lespace entre le texte et la puce. Si vous optez pour une liste numrote, vous pouvez inuencer le numro dorigine en utilisant lattribut StartIndex.
<List StartIndex="1" MarkerStyle="Decimal" MarkerOffset="20">
Si les possibilits offertes par List ne vous satisfont pas, cest alors le moment de voir le BulletDecorator. Ce nest pas un contrle spcique au document mais cest certainement une des bonnes faons de lutiliser.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <TextBlock> BulletDecorator permet dafficher des listes personnalises. </TextBlock> <BulletDecorator> <BulletDecorator.Bullet> <Image Height="16" Source="c:\bullet.gif"/> </BulletDecorator.Bullet> <Label> Photographie </Label> </BulletDecorator>
Les documents
Le BulletDecorator est divis en deux parties. La premire, dnie dans la proprit Bullet, dtermine la forme de la puce. La seconde partie dnit la forme que doit prendre le texte. Il va sans dire que rien ne vous oblige vous limiter une image et du texte.
<BulletDecorator Margin="20,0,0,0"> <BulletDecorator.Bullet> <Image Height="16" Source="c:\bullet.jpg"/> </BulletDecorator.Bullet> <Label> Film </Label> </BulletDecorator>
En modiant la marge, vous pouvez ajuster lindentation de votre lment. Notez que chaque lment peut prendre une forme diffrente. Contrairement aux ListItem, il sagit en fait chaque fois dun contrle spar indpendant des autres.
<BulletDecorator Margin="20,0,0,0"> <BulletDecorator.Bullet> <Image Height="16" Source="c:\bullet.jpg"/> </BulletDecorator.Bullet> <Label> Digitale </Label> </BulletDecorator> <BulletDecorator> <BulletDecorator.Bullet> <Image Height="16" Source="c:\bullet.gif"/> </BulletDecorator.Bullet> <Label> Vido </Label> </BulletDecorator> </StackPanel> </Page>
Utiliser FlowDocument
Avec lexemple suivant, nous pouvons voir que bien dautres contrles peuvent tre inclus dans le BulletDecorator.
<Page xmlns= http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <TextBlock> BulletDecorator autorise quasi nimporte quoi. </TextBlock> <BulletDecorator> <BulletDecorator.Bullet> <TextBox Width="30"/> </BulletDecorator.Bullet> <Label> Photographie </Label> </BulletDecorator> </StackPanel> </Page>
Comme vous pouvez le constater, BulletDecorator permet le meilleur mais aussi le pire. vous de lutiliser bon escient. Aprs ce petit dtour, revenons au sujet qui nous occupe, laffichage dun document. Parfois, le document ne sera quun lment de votre page parmi dautres. Vous souhaiterez alors peut-tre le placer dans une grille. Malheureusement, FlowDocument ne peut tre inclus tel quel dans un contrle de type Grid ou StackPanel. En revanche, il est possible de linclure dans une balise FlowDocumentScrollViewer.
<Page x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Les documents
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <FlowDocumentScrollViewer> <FlowDocumentScrollViewer.Document> <FlowDocument> </FlowDocument> </FlowDocumentScrollViewer.Document> </FlowDocumentScrollViewer> </Page>
Comme vous pouvez le constater, la prsentation du document est diffrente une fois quil est inclus dans ce contrle.
La barre doutils ne prsente plus la navigation entre les pages. En fait, la notion de page disparat. Cest pourquoi une barre de dlement fait son apparition sur la droite.
BreakPageBefore
Malgr la prsence de lattribut BreakPageBefore, le texte se suit sans aucun saut de page.
Utiliser FlowDocument
Le FlowDocumentScrollViewer peut tre intgr dans un conteneur de type grille, par exemple.
<Page x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <FlowDocumentScrollViewer Grid.Column=1> <FlowDocumentScrollViewer.Document> <FlowDocument> </FlowDocument> </FlowDocumentScrollViewer.Document> </FlowDocumentScrollViewer> </Grid> </Page>
Les documents
Il est possible de regrouper les avantages de ces deux techniques daffichage dun document en mode Flow en utilisant la balise FlowDocumentReader. Cest par ailleurs elle qui est utilise par dfaut si vous nincluez pas FlowDocument dans une des deux autres balises. Toutefois, il doit tre explicitement dni si
264 Le guide du codeur
Utiliser FlowDocument
vous dsirez par exemple intgrer votre FlowDocument dans une grille.
<Page x:Class="Page1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <FlowDocumentReader> <FlowDocumentReader.Document> <FlowDocument> </FlowDocument> </FlowDocumentReader.Document> </FlowDocumentReader> </Grid> </Page>
Les documents
La gestion des pages fait nouveau son apparition dans la barre doutils sous le document. Comme nous lavions vu sans le savoir, avec ce contrle lutilisateur peut choisir, grce aux boutons dans cette barre doutils, entre laffichage par une ou deux pages mais aussi en mode de dlement. Une loupe sur la gauche permet douvrir une extension de la barre doutils an de raliser des recherches dans le texte.
Les possibilits de mise en page ne sarrtent pas l. Vous pouvez par exemple insrer une gure dans votre document. Une gure permet dintroduire du contenu un endroit spcique de la page.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Figure" > <FlowDocument> <Paragraph> <Figure HorizontalAnchor="ContentLeft">
La gure peut contenir autre chose quune image. Notez que, mme avec une image, vous devez linclure dans un paragraphe.
Utiliser FlowDocument
<Paragraph FontSize="8"> <Image Width="40" Source=idea.gif"/> <LineBreak/> Ide. </Paragraph> </Figure> <Bold>Une ide !</Bold> Pourquoi ne pas placer une figure dans votre texte. Cela peut tre du plus bel effet dans la prsentation dun document. </Paragraph> <Paragraph> Vous venez encore de dcouvrir une nouvelle possibilit avec XAML. </Paragraph> </FlowDocument> </Page>
Comme vous pouvez le constater, la gure se place en parallle du texte. Si nous avions simplement ajout notre image dans le texte, le rsultat aurait t fort diffrent.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Image"
Les documents
<FlowDocument> <Paragraph> <Image Width="40" Source=idea.gif"/> <Bold>Une ide !</Bold> Pourquoi ne pas placer une figure dans votre texte. Cela peut tre du plus bel effet dans la prsentation dun document. </Paragraph> <Paragraph> Vous venez encore de dcouvrir une nouvelle possibilit avec XAML. </Paragraph> </FlowDocument> </Page>
>
Comme toujours, vous disposez dun certain nombre dattributs pour modier le comportement de la gure. Vous avez dj pu voir HorizontalAnchor dans lexemple prcdent. Il existe galement VerticalAnchor. Remplacez dans lexemple la balise Figure par celle ci-dessous.
<Figure HorizontalAnchor="ContentRight" VerticalAnchor="ContentBottom">
Utiliser FlowDocument
Position de la gure Comme vous pouvez le constater, la gure se positionne non pas en fonction du paragraphe dans lequel elle est incluse mais bien en fonction de la page.
Les attributs VerticalOffset et HorizontalOffset vont galement vous permettre de modier la position en produisant un dcalage. Le dcalage peut tre une valeur positive ou ngative selon le sens dsir.
<Figure HorizontalAnchor="ContentRight" VerticalAnchor="ContentBottom" VerticalOffset="-50" HorizontalOffset="-50">
Les documents
Outre Figure, vous disposez galement de la balise Floater pour raliser la prsentation du document. Floater est trs semblable Figure mais, contrairement ce dernier, il se positionne par rapport au ux dans lequel il est inclus. Lattribut principal de Floater est HorizontalAlignment, qui va permettre de positionner le contenu gauche, droite ou mme au centre du reste du ux.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Floater" > <FlowDocument> <Paragraph> <Floater HorizontalAlignment="Left"> <Paragraph FontSize="8"> <Image Width="40" Source=idea.gif"/> <LineBreak/> Ide. </Paragraph> </Floater> <Bold>Une ide !</Bold> Pourquoi ne pas placer une figure dans votre texte. Cela peut tre du plus bel effet dans la prsentation dun document. </Paragraph> <Paragraph> Vous venez encore de dcouvrir une nouvelle possibilit avec XAML. </Paragraph> </FlowDocument> </Page>
Utiliser FlowDocument
Une dernire fonctionnalit intressante est la navigation par les liens. Cette navigation fonctionne comme les hyperliens du HTML. Elle vous permet datteindre une autre page XAML simplement en cliquant sur le texte.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Hyperlien" > <FlowDocument> <Paragraph> <Bold>Naviguer avec des hyperliens</Bold> A linstar du HTML, il est galement possible de naviguer en utilisant des liens </Paragraph> <Paragraph> <Hyperlink NavigateUri="Page2.xaml"> Aller la page 2. </Hyperlink> </Paragraph> </FlowDocument> </Page>
Les documents
<FlowDocument> <Paragraph> vous tes sur page2.xaml <Hyperlink NavigateUri="#suite"> Atteindre une section. </Hyperlink> </Paragraph> <Paragraph BreakPageBefore="True"> La page 2 </Paragraph> <Section Name="suite"> <Paragraph> La section atteindre </Paragraph> </Section> </FlowDocument> </Page>
>
Notez que ce second document possde deux pages. En cliquant sur le lien, vous atteignez la section prsente sur la deuxime page.
Utiliser FlowDocument
Notion de page Quand on parle de page, il faut toujours bien faire la distinction entre page du navigateur et page du document. Il sagit de notions bien distinctes.
Bien que les hyperliens soient parfaitement adapts lutilisation dans des documents, il est tout fait possible de les placer dans des contrles plus traditionnels comme un Label. Pour pouvoir disposer de toutes les fonctionnalits ncessaires laffichage dun document, il nous manque encore un grand classique, le tableau. Pour gnrer un tableau, nous disposons de toute une batterie de balises, commencer par la balise Table. Un peu la faon dune grille, nous devons commencer par dnir le nombre de colonnes. Les colonnes sont dnies au sein dun nud Table.Columns et dcrites au moyen de la balise TableColumn. En revanche, les lignes sont dnies au fur et mesure avec la balise TableRow et sont incluses dans un nud TableRowGroup. Chaque ligne contient un ensemble de cellules. Les cellules sont cres par la balise TableCell et prennent place successivement dans les colonnes. Il nest pas ncessaire de dnir autant de cellules que de colonnes ; toutefois, si une colonne doit rester vide mais quau moins une colonne suivante est remplie, vous devrez crer une cellule vide pour cette colonne. lintrieur des cellules, vous pouvez placer nimporte quel contenu et mme ventuellement un autre tableau. titre dexemple, crons un tableau simple.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <FlowDocument> <Table BorderBrush="Gray" BorderThickness="1"> <Table.Columns> <TableColumn Width="200" Background="LightGray"/> <TableColumn Width="80"/> <TableColumn Width="120"/> </Table.Columns>
Aprs avoir dni les colonnes, vous devez dnir les lignes et leur contenu.
<TableRowGroup> <TableRow Background="SlateGray"> <TableCell ColumnSpan="3"
Le guide du codeur 273
Les documents
Block.TextAlignment="Center"> <Paragraph> Titre </Paragraph> </TableCell> </TableRow> <TableRow Background="Gray"> <TableCell/> <TableCell Block.TextAlignment="Center"> <Paragraph> Valeur </Paragraph> </TableCell> <TableCell Block.TextAlignment="Left"> <Paragraph> Remarque </Paragraph> </TableCell> </TableRow> <TableRow> <TableCell> <Paragraph> Niveau a </Paragraph> </TableCell> <TableCell Block.TextAlignment="Center"> <Paragraph> 99 </Paragraph> </TableCell> <TableCell> <Paragraph> Boni +15 </Paragraph> </TableCell> </TableRow> <TableRow> <TableCell> <Paragraph> Niveau c </Paragraph> </TableCell> <TableCell Block.TextAlignment="Center"> <Paragraph> 48 </Paragraph>
274 Le guide du codeur
diter un document
</TableCell> <TableCell> <Paragraph> A revoir </Paragraph> </TableCell> </TableRow> </TableRowGroup> </Table> </FlowDocument> </Page>
Notez dans cet exemple la prsence de lattribut Block.TextAlignment, qui va permettre de spcier lalignement du contenu de la cellule.
Les documents
<Grid> <RichTextBox>
En utilisant les touches ddition, vous pouvez enrichir le format du texte dactylographi. Par exemple, [Ctrl]+[U] pour souligner ou [Ctrl]+[I] pour mettre le texte en italique. Vous trouverez la liste complte des raccourcis dans les annexes.
diter un document
Dans la pratique, il sera trs rare de modier un document x dans le code. Mais, plus vraisemblablement, vous devrez charger et sauver le document
Le guide du codeur 277
Les documents
dynamiquement. titre dexemple, nous pouvons raliser un menu contextuel qui permettra le chargement et lenregistrement dun document mais galement son impression. Deux options complmentaires permettront de voir dune part comment ajouter du contenu riche et dautre part comment utiliser les commandes ddition autrement que via les touches de raccourci. Nous ajoutons un simple menu contextuel dans le code XAML avec les appels aux mthodes qui y sont associes.
<Window x:Class="Window1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="testrtf" Height="300" Width="300" > <Grid> <RichTextBox Name="rtfDocument"> <RichTextBox.ContextMenu> <ContextMenu> <MenuItem Click="Charger" Header="Charger"/> <MenuItem Click="Sauver" Header="Sauver"/> <Separator/> <MenuItem Click="AddButton" Header="ajout"/> <Separator/> <MenuItem Click="Imprimer" Header="Imprimer"/> <Separator/>
Pour faire appel une commande ddition, nul besoin de faire appel du code .NET, il suffit dassigner la commande voulue la proprit Command.
<MenuItem Command="EditingCommands.ToggleBullets" Header="Puces"/> </ContextMenu> </RichTextBox.ContextMenu> </RichTextBox> </Grid> </Window>
diter un document
En premier, voyons comment sauver le contenu de notre RichTextControl. La premire chose faire est de dnir un TextRange englobant le contenu complet du document. Ensuite, grce ce TextRange, nous pourrons sauver le document dans un chier via un FileStream, et ce dans le format dsir. Vous avez le choix entre le format RTF, bien sr, mais aussi XAML et dautres galement.
Public Sub Sauver(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Dim range As TextRange Dim fichier As FileStream range = New TextRange( _ rtfDocument.Document.ContentStart _ , rtfDocument.Document.ContentEnd) fichier = New FileStream("Sauvegarde.xml" _ , FileMode.Create) range.Save(fichier, DataFormats.Xaml) fichier.Close() End Sub
Pour rcuprer le document, il suffit dappliquer la mme mthode mais en sens inverse avec la mthode Load de la classe TextRange.
Public Sub Charger(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Dim range As TextRange Dim fichier As FileStream If File.Exists("Sauvegarde.xml") Then range = New TextRange( _ rtfDocument.Document.ContentStart _ , rtfDocument.Document.ContentEnd) fichier = New FileStream("Sauvegarde.xml" _ , FileMode.Open) range.Load(fichier, DataFormats.Xaml) fichier.Close() End If End Sub
Pour imprimer un document, le plus simple est dutiliser la classe PrintDialog, qui est capable dimprimer les objets dont la classe hrite de Visual, ce qui est justement le cas de FlowDocument, comme cest par ailleurs le cas de tous les contrles UIElement et de tous les conteneurs.
Les documents
Public Sub Imprimer(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Dim choixImprimante As New PrintDialog() If choixImprimante.ShowDialog() Then choixImprimante.PrintVisual( _ DirectCast(rtfDocument, Visual) _ , "Impression FlowDocument") End If End Sub
Pour ajouter du contenu complexe comme un bouton, il est dabord ncessaire de crer le contenu insrer, ce qui est fait par New Button ; ensuite, ce contenu est ajout par exemple dans un paragraphe et plac dans le document par lintermdiaire de la proprit Blocks.
Public Sub AddButton(ByVal sender As Object _ , ByVal e As RoutedEventArgs) Dim elem As New Button elem.Content = "Click" rtfDocument.Document.Blocks.Add(New _ Paragraph((New InlineUIContainer(elem)))) End Sub End Class
Le mme contrle aprs usage de lajout de contenu riche et de lutilisation des puces.
diter un document
Lorsque vous demandez limpression, vous recevez automatiquement lcran standard de choix dimprimante.
Si vous souhaitez aller plus loin dans cette voie et crer sur cette base un diteur complexe, vous aurez certainement lusage dune barre de statut. Cette possibilit nest bien sr pas limite lusage dun RichTextBlock et peut tre utilise dans de nombreux contextes. Son usage se rvle relativement simple. Il suffit de la dnir lintrieur du conteneur dans lequel elle doit prendre place. Les lments qui doivent tre prsents sont placs dans des StatusBarItem.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="testrtf" Height="300" Width="300" >
Le guide du codeur 281
Les documents
<Grid> <RichTextBox> </RichTextBox> <StatusBar Grid.Column="0" Grid.Row="1" VerticalAlignment="Bottom" Background="Beige"> <StatusBarItem> <TextBlock> Zoom: </TextBlock> </StatusBarItem> <StatusBarItem> <Slider/> </StatusBarItem> </StatusBar> </Grid> </Page>
Vous pouvez placer dans la barre de statut tous les contrles dont vous aurez besoin.
Annoter un document
La premire chose voir dans le code ci-dessous, cest la prsence dun namespace supplmentaire. Celui-ci reoit comme nom ann. Notez aussi la prsence de lvnement Closed.
<Window x:Class="Window1" xmlns= [ ]"http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ann= [ ]"clr-namespace:System.Windows.Annotations;assembly=PresentationFramework" Title="Les annotations" Height="500" Width="500" Closed="OnClose" > <StackPanel>
Un menu o seront reprises les fonctionnalits des annotations est ajout la fentre. Ainsi que vous pouvez le constater, nous utilisons comme pour ldition dun document des commandes prdnies, mais cette fois en provenance dAnnotationService. Ces fonctionnalits sont au nombre de six :
j j j j j j
surligner la slection ; associer une note la slection ; associer une note dessine la slection ; enlever le surlignement de la slection ; effacer les notes de la slection ; effacer les notes et les surlignements dans la slection.
<Menu Name="MainMenu" > <MenuItem Header="Annotations" > <MenuItem Command= "ann:AnnotationService.CreateHighlightCommand" Header="Surligner" /> <MenuItem Command= "ann:AnnotationService.CreateTextStickyNoteCommand" Header="Nouvelle note" /> <MenuItem Command= "ann:AnnotationService.CreateInkStickyNoteCommand" Header="Nouvelle note manuscrite" /> <Separator /> <MenuItem Command= "ann:AnnotationService.ClearHighlightsCommand" Header="Enlever le surlignement" /> <MenuItem Command= "ann:AnnotationService.DeleteStickyNotesCommand" Header="Effacer les notes" /> <MenuItem Command=
Les documents
Malheureusement, ce nest pas tout fait aussi simple. Il nous faut encore dmarrer le service permettant de raliser les annotations. Cette partie se fait dans le code .NET. Les membres suivants doivent tre dnis.
Private annotService As AnnotationService Private annotStream As FileStream Private annotStore As XmlStreamStore Private Sub StartAnnotations() annotService = New AnnotationService(docViewer) annotStream = New FileStream("annotations.xml"_ , FileMode.OpenOrCreate _ , FileAccess.ReadWrite)
284 Le guide du codeur
Annoter un document
Dans cette mthode, le service assurant la gestion des notes est dmarr et le chier XML devant contenir les notes lui est associ. La mthode StartAnnotations doit tre excute avant de pouvoir utiliser les notes. Vous pouvez utiliser soit lvnement Loaded pour le dmarrer, soit le constructeur.
Public Sub New() InitializeComponent() StartAnnotations() End Sub
Lvnement Closed a galement t dni car, avant de quitter, il est ncessaire de fermer le chier et le service utilis par les annotations.
Private Sub StopAnnotations() annotStore.Flush() annotStream.Flush() annotStream.Close() annotStore = Nothing End Sub
Les documents
Comme vous pouvez le voir, le menu est dsactiv. En effet, il est ncessaire de slectionner du contenu pour pouvoir lui associer une note.
Dans cette seconde gure, vous devez pouvoir voir la premire phrase qui a t surligne et une note ouverte associe une autre partie du texte.
Annoter un document
Lutilit de ce genre de note reste dmontrer car il nest pas toujours facile de dessiner avec la souris.
Nous avions dj vu les commandes ddition ; maintenant, nous venons de voir quil existe galement des commandes prdnies pour les notes. En fait, il en existe bien dautres dont les commandes dapplication, de navigation, de composant titre dexemple, nous pouvons introduire lune ou lautre de ces commandes dans le code ci-dessus.
<MenuItem Header="Commandes" > <MenuItem Command="NavigationCommands.IncreaseZoom" Header="Zoom avant" /> <MenuItem Command="NavigationCommands.DecreaseZoom" Header="Zoom arrire" /> <Separator /> <MenuItem Command="ApplicationCommands.Copy" Header="Copier" /> </MenuItem>
Les documents
Modication de la prsentation Si vous comparez le bas de cette illustration par rapport aux prcdentes, vous constaterez lapparition de la barre doutils ! Cela est d au fait que, pour ce dernier exemple, le StackPanel qui encadre lensemble a t remplac par un DockPanel.
9.5 Checklist
Dans ce chapitre, les notions essentielles que nous avons vues sont :
j j j
j j j j j
afficher un document pour que sa prsentation reste inchange ; afficher un document pour quil sadapte au mieux lcran ; comment utiliser les contrles spciques la gestion du document comme les paragraphes, les sections, les tableaux, les listes puce, les gures, les layers et les hyperliens ; comment utiliser un BulletDecorator pour raliser des listes originales ; comment diter et imprimer un document ; comment placer des annotations dans un document ; utiliser une barre de statut ; utiliser les commandes prdnies.
Ch apit re
10
Bien que, comme nous lavons vu, il soit possible et mme facile de crer des interfaces graphiques mme complexes en introduisant vous-mme le code XAML ncessaire, les diteurs ne vont pas manquer de vous proposer des outils graphiques pour raliser vos crans, vos pages ou toutes autres ralisations en XAML. De son ct, Microsoft prpare dores et dj divers outils. Le premier sera intgr dans Visual Studio, les autres font partie de la gamme Expression. Microsoft nest pas le seul acteur du march actif dans le domaine. La socit Mobiform a elle aussi un outil nomm Aurora Designer et destin la cration dinterfaces utilisateurs XAML. Pour la cration 3D, il existe loutil ZAM 3D dElectric Rain. Un autre acteur historique concernant XAML est XAMLON. Toutefois, au moment dcrire ces lignes, la position du produit nest pas trs claire, que ce soit en termes de compatibilit ou de futur suite lintgration de la technologie Flash.
Il y a XAML et XAML Outre le XAML de Microsoft, dautres projets similaires tel MyXAML ont vu ou verront le jour. Ils offriront peut-tre des outils graphiques qui leur sont ddis. Ces projets ne sont pas forcment compatibles avec le XAML Microsoft, soyez prudent et assurez-vous que le produit respecte entirement la syntaxe XAML. moins bien sr que vous noptiez volontairement pour ce langage proche.
Dans les chapitres suivants, nous allons passer en revue ces diffrents produits. Il sagit non pas dapprendre les manipuler mais uniquement de les dcouvrir sommairement et den comprendre les objectifs. Notez que tous ces produits sont actuellement en version bta et par consquent encore susceptibles dtre largement modis. Cette liste ne se veut pas exhaustive, et beaucoup dautres logiciels auront probablement vu le jour ou ajout le support du format XAML leur propre logiciel.
10
Comme vous pouvez le voir dans limage ci-dessous, lorsque vous ouvrez le chier XAML lditeur de Visual Studio vous permet de naviguer entre la vue en mode Design, la vue en mode XAML et le code source galement appel code behind (code associ se trouvant dans le chier extension .vb ou .cs). Pour passer de lun lautre, il suffit de cliquer sur longlet adquat en bas gauche de votre cran. Le designer Cider ne diffre gure de votre designer Visual Studio habituel. Il prsente au centre le rsultat que vous allez obtenir.
gauche, vous retrouvez les composants que vous pouvez inclure. Pour ajouter un composant, il suffit de le slectionner dans votre fentre de gauche et de le faire glisser o vous dsirez le placer. Vous pouvez dplacer ou redimensionner les objets dj placs dans la fentre centrale comme bon vous semble.
10
droite, vous trouverez les proprits de lobjet slectionn, que vous pourrez adapter selon vos besoins.
10
Bien sr, comme pour toute linterface Visual Studio, vous pouvez changer la disposition des diffrentes fentres. Si vous dsirez accder directement au code ou simplement le visualiser, vous cliquez sur longlet XAML. Les modications apportes au code sont directement rpercutes dans laffichage en mode Design.
Code non valide Si votre code est erron, le mode Design ne pourra tre activ.
10
Si votre projet concerne non pas une application Windows mais une page web, le designer fonctionne lidentique except que la fentre Windows est remplace par un cadre reprsentant les limites de la page.
10
Nous pouvons reproduire lexemple prsent dans le chapitre 55 mais cette fois ralis non pas la main mais avec le designer. Faites glisser les diffrents composants et noubliez pas de changer les proprits Name, MaxLength...
Lors de lexcution de notre page, nous obtenons un rsultat fort similaire (voir Figure 10-8). Lorsque nous redimensionnons la page, le comportement est semblable celui obtenu avec notre balise Canvas (voir Figure 10-9).
10
Et, pourtant, si nous observons le code gnr, nous nous apercevrons quil sagit dune grille.
<Page x:Class="Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" Height="122" Width="491"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.4*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.882470119521912*" /> </Grid.ColumnDefinitions>
10
<Label HorizontalAlignment="Left" Margin="3.37,11.7233333333333,0,0" Name="lblNom" Width="36.63" Height="25.2766666666668" VerticalAlignment="Top">Nom</Label> <TextBox Margin="37.9999999999999,13.7233333333333,0,0" Name="txtNom" CharacterCasing="Upper" MaxLength="30" HorizontalAlignment="Left" Width="101.709090909091" Height="20.2766666666668" VerticalAlignment="Top"></TextBox> <Label Margin="141.079090909091,13.7233333333333,0,0" Name="lblPrenom" Height="23.2766666666668" VerticalAlignment="Top" HorizontalAlignment="Left" Width="54.211818181818">Prnom</Label> <TextBox Margin="197,15,106,0" Name="txtPrenom" MaxLength="30" Height="20.2766666666668" VerticalAlignment="Top" ></TextBox> <Label HorizontalAlignment="Left" Margin="2.37,38.7233333333333,0,58" Name="lblAdr" Width="35.63">Rue</Label> <TextBox Margin="38,40.7233333333333,105.709090909091,58" MaxLength="80" Name="txtAdr" ></TextBox> <Label Height="21.2766666666667" HorizontalAlignment="Left" Margin="3.37,0,0,27.0000000000001" Name="lblCP" VerticalAlignment="Bottom" Width="70.63">Code Postal</Label> <TextBox Height="26.2766666666667" HorizontalAlignment="Left" Margin="79,0,0,23" MaxLength="5" Name="txtCP" VerticalAlignment="Bottom" Width="58"></TextBox> <Label Height="22.2766666666667" Margin="142.37,0,103,28" Name="lblLocalite" VerticalAlignment="Bottom">Localit</Label> <TextBox Height="24.2766666666667" Margin="194,0,106,26" MaxLength="50" Name="txtLocalite" VerticalAlignment="Bottom"></TextBox> <Canvas HorizontalAlignment="Right" Margin="0,14,7,23" MinHeight="50" MinWidth="50" Name="Canvas1" Width="88" /> <Label HorizontalAlignment="Right" Margin="0,38.7233333333333,36,58" Name="blkPhoto" Width="35.63">Label</Label> </Grid> </Page>
Lisibilit du code Le code vous est prsent exactement comme il est gnr. Cest--dire une ligne de code par contrle. La lisibilit du code est loin dtre assure.
Comme vous pouvez le constater, le code est loin dtre propre et il vous faudra le revoir vous-mme ou du moins adapter via la fentre des proprits certains lments pour obtenir des valeurs plus adquates. videmment, vous pouvez laisser tout ainsi et dcider de toujours utiliser le designer. Dans ce cas, esprons seulement que vous nayez jamais tre contraint, pour des raisons techniques, devoir malgr tout accder directement au code.
10
Donc, la lecture du code, nous avons une grille dune ligne et dune colonne. Les lments sont placs dans cette cellule selon leur ordre et en jouant sur les tailles et les marges de chacun des lments. Il est videmment possible de crer des lignes et des colonnes avec le designer. Il suffit pour cela de slectionner la ligne gauche, petit triangle en haut gauche, ou la ligne en bas droite, mme triangle, et de le faire glisser l o vous le dsirez. Vous pouvez aussi dplacer une de ces lignes pour changer la taille dune ligne ou dune colonne de la grille.
Ces problmes ventuels de lisibilit sont loccasion de parler un peu du dbogage dune application XAML. En ralit, il y a dbogage non pas proprement parler du code XAML mais seulement du code .NET qui lui est associ. Cest donc un autre motif pour essayer davoir un code propre et clair. Comme le code dpend peu dune situation particulire, lexception gnre en cas derreur suffit largement pour comprendre et rsoudre le problme. En revanche, il est toutefois possible de dboguer du code .NET que vous avez crit indirectement grce au XAML. Pour plus dinformation sur ce code, reportez-vous au chapitre
Renvoi Utiliser une grille page 61.
Pour accder facilement ce code avec le dbugger, vous ouvrez la source .NET de la page ou de la fentre laquelle vous dsirez accder. Vous placez un point darrt sur la ligne InitializeComponent(), que vous trouverez dans le constructeur. Pour rappel, pour placer facilement un point darrt vous placez le curseur sur la ligne voulue et vous appuyez sur la touche [F9].
10
Vous demandez ensuite lexcution du programme en mode debug en utilisant la touche [F5]. Il vous reste alors manipuler le programme pour accder la page ou lcran voulu. ce moment, le programme sarrte. Appuyez alors classiquement sur la touche [F11] pour poursuivre lintrieur de la procdure appele et vous tes en dbogage dans le chier g.vb correspondant. titre dexemple, vous trouverez ci-dessous le chier correspondant notre exemple. vous alors de poursuivre le dbogage.
--------------------------------------------------------- <auto-generated> This code was generated by a tool. Runtime Version:2.0.50727.42 Changes to this file may cause incorrect behavior and will be lost if the code is regenerated. </auto-generated> ---------------------------------------------------------Option Strict Off Option Explicit On Imports System
10
Imports Imports Imports Imports Imports Imports Imports Imports Imports Imports Imports Imports Imports Imports Imports Imports
System.Windows System.Windows.Automation System.Windows.Controls System.Windows.Controls.Primitives System.Windows.Data System.Windows.Documents System.Windows.Input System.Windows.Markup System.Windows.Media System.Windows.Media.Animation System.Windows.Media.Effects System.Windows.Media.Imaging System.Windows.Media.Media3D System.Windows.Media.TextFormatting System.Windows.Navigation System.Windows.Shapes
<summary> Page1 </summary> < Microsoft.VisualBasic.CompilerServices.DesignerGenerated() > _ Partial Public Class Page1 Inherits System.Windows.Controls.Page Implements System.Windows.Markup.IComponentConnector Friend WithEvents lblNom As System.Windows.Controls.Label Friend WithEvents txtNom As System.Windows.Controls.TextBox Friend WithEvents lblPrenom As System.Windows.Controls.Label Friend WithEvents txtPrenom As System.Windows.Controls.TextBox Friend WithEvents lblAdr As System.Windows.Controls.Label Friend WithEvents txtAdr As System.Windows.Controls.TextBox Friend WithEvents lblCP As System.Windows.Controls.Label Friend WithEvents txtCP As System.Windows.Controls.TextBox Friend WithEvents lblLocalite As System.Windows.Controls.Label Friend WithEvents txtLocalite As System.Windows.Controls.TextBox Friend WithEvents Canvas1 As System.Windows.Controls.Canvas
10
Friend WithEvents blkPhoto As System.Windows.Controls.Label Private _contentLoaded As Boolean <summary> InitializeComponent </summary> Public Sub InitializeComponent() Implements System.Windows.Markup. IComponentConnector.InitializeComponent If _contentLoaded Then Return End If _contentLoaded = true Dim resourceLocater As System.Uri = _ New System.Uri( _ "WinFxBrowserApplication1;component\page1.baml" _ , System.UriKind.RelativeOrAbsolute) System.Windows.Application.LoadComponent(Me _ , resourceLocater) End Sub Sub System_Windows_Markup_IComponentConnector_Connect( _ ByVal connectionId As Integer _ , ByVal target As Object) _ Implements _ System.Windows.Markup.IComponentConnector.Connect If (connectionId = 1) Then Me.lblNom = _ CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 2) Then Me.txtNom = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 3) Then Me.lblPrenom = _ CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 4) Then Me.txtPrenom = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 5) Then Me.lblAdr = _
Le guide du codeur 301
10
CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 6) Then Me.txtAdr = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 7) Then Me.lblCP = _ CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 8) Then Me.txtCP = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 9) Then Me.lblLocalite = _ CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 10) Then Me.txtLocalite = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 11) Then Me.Canvas1 = _ CType(target,System.Windows.Controls.Canvas) Return End If If (connectionId = 12) Then Me.blkPhoto = _ CType(target,System.Windows.Controls.Label) Return End If Me._contentLoaded = true End Sub End Class
Lorsquil y a une faute au cours de lexcution dans la partie du programme crite en XAML, cest ce code que le debugger va vous montrer.
10
Graphic Designer
Comme son nom lindique, il sagit dun outil de design destin celui qui souhaite raliser du graphisme. Il ne sagit pas a priori dun pur outil XAML puisquil travaille avec un autre format de chier. En revanche, il dispose dun outil dexportation vers le XAML, ce qui fait de lui un candidat idal pour raliser les graphismes que vous souhaitez introduire dans vos dveloppements. Le but de ce livre ntant clairement pas de vous expliquer le fonctionnement de cet outil, qui mrite lui seul un livre, vous ne trouverez dans ce chapitre quune simple prsentation de loutil sans mme entrer dans ses possibilits. La page principale de Graphic Designer est trs classique avec la page proprement dite droite et les fentres doutils prsentes par dfaut gauche.
10
10
Celle-ci vous permet de dnir quelques paramtres comme lutilisation dun Canvas. Une fois le chier export, il ne vous reste qu lincorporer dans votre programme ou lafficher directement dans un browser.
10
Comme vous pouvez le constater, le rendu nest pas totalement identique mais Graphic Designer est lui aussi en version bta et nous pouvons esprer que ces problmes soient prochainement rsolus. Vous pouvez galement ouvrir le chier XAML gnr mais, comme nous pouvions nous y attendre, celui-ci est relativement touffu. Il contient plus de 400 nuds pour un total de plus de 150 000 caractres.
Interactive Designer
Interactive Designer est un outil qui peut tre considr soit comme un outil de conception complet, soit comme un outil complmentaire Visual Studio et Cider. Grce sa puissante interface utilisateur, il permet de crer des pages XAML trs compltes et incluant des animations entirement cres visuellement. Comme Visual Studio, il travaille sur la base de projets contenant lensemble dune application. Celle-ci sera alors compile. Vous avez le choix entre le langage VB.NET ou C#. Avec ceux-ci, vous pourrez encoder du code .NET. Il est galement capable de compiler et dexcuter les projets. Cest pourquoi il peut tre considr comme un outil complet. Il noffre toutefois pas les facilits de dveloppement de code quoffre Visual Studio. Lidal tant dutiliser les deux.
10
Les chiers projets sont compatibles avec ceux de Visual Studio, ce qui permet de passer facilement de lun lautre et rend ces outils complmentaires, Visual Studio tant destin au dveloppeur et Interactive Designer, comme son nom lindique, au designer. Crons avec Visual Studio un petit projet o le dveloppeur na fait que placer les contrles dont il avait besoin et sans se soucier de lesthtique.
Rcuprons-le dans Interactive Designer simplement en faisant Open Project (voir Figure 10-21). Le projet est parfaitement rcupr et la fentre est affiche telle quelle. Le designer peut alors raliser la mise en page. Si ncessaire, il peut avoir accs au code et mme lIntelliSense (voir Figure 10-22).
10
10
Une fois les modications apportes, il peut excuter lapplication pour voir le rsultat.
Le projet peut parfaitement tre nouveau ouvert dans Visual Studio, qui prendra parfaitement en compte les modications apportes.
10
Aurora Designer
10
Linterface dAurora est tout aussi classique que les prcdentes avec une fentre de design et des fentres dplaables pour la bote outils, les proprits, les chiers du projet et ainsi de suite.
Selon le type de chier choisi lors de la cration, Aurora vous propose un conteneur adapt. Pour une fentre Windows, il sagit par dfaut dune grille.
10
Vous pouvez non seulement visualiser le code XAML mais galement le modier. La partie gauche de lcran vous facilite la navigation. Si nous transfrons le code cr dans XamlPad, il saffiche sans problme.
Nous pouvons aussi crer des projets 3D mais aucun lment spcique comme une sphre ou mme un cube nest prvu. Ce qui est propos correspond au XAML de base uniquement. Il est malgr tout possible de raliser rapidement un cube en utilisant trois rectangles et en leur appliquant des transformations de manire entirement visuelle.
ZAM 3D
10
Malheureusement, le code cr pour le cube ne semblait pas compatible avec XamlPad ou Visual Studio. Ce genre de problme sera vraisemblablement corrig pour la version dnitive du produit. Il est en effet difficile pour un concepteur tiers de raliser un logiciel destin un environnement qui est encore en mutation.
10.4 ZAM 3D
ZAM 3D, de la socit Electric Rain, est un outil compltement orient 3D. Il offre une panoplie de formes 3D prdnies ainsi que la cration et le positionnement de spot et de camra par simple drag and drop. Vous aurez galement avec cet outil la possibilit de dnir des animations grce la gestion des lignes de temps. Le rsultat de votre travail peut tre sauv en format XAML soit sous forme dune page de code soit sous forme dune ressource que vous pourrez inclure dans vos dveloppements.
10
10.5 Checklist
Dans ce chapitre, nous avons parcouru les outils les plus connus actuellement et nous avons vu comment ils peuvent ou ne peuvent pas nous aider. Les fonctionnalits essentielles sont :
j
j j j
lassistance au dveloppement avec Visual Studio et son extension pour WinFX ; le travail de design avec Interactive Designer et Aurora Designer ; la composition 3D avec ZAM 3D ; le XAML dans le monde du graphisme avec Graphic Designer.
Ch apit re
11 Le dessin
11
Le dessin
Dans linformatique moderne, le visuel a pris une trs grande importance. Cest pourquoi, plutt que limiter les possibilits de laffichage des images prdnies, XAML intgre des fonctionnalits de dessin relativement avances. Contrairement aux fonctions de dessin souvent rencontres jusqualors, il sagit non pas de bitmap mais bien de vectoriel. Le langage offre en fait toutes les fonctions ncessaires la cration dimages vectorielles 2D ou 3D et leur animation. Ce qui en fait une plate-forme ouverte galement au monde de la CAO, par exemple, et va permettre assez facilement de mlanger du contenu trs riche en terme de dessin avec du contenu plus classique.
11.1 Le dessin en 2D
XAML ne nous offre pas seulement les possibilits de raliser des crans composs de contrles divers ; nous pouvons galement raliser des dessins. Il nous offre une gamme de classe relativement complte allant du dessin 2D la 3D. Toutefois, pour bien dessiner, il faut avant tout savoir dessiner. Lobjectif nest pas ici de vous apprendre dessiner mais il sagit seulement de vous montrer quelques possibilits offertes par XAML avec des ralisations trs simples. Pour commencer, voyons tout dabord comment tracer une ligne. Ce qui se fait naturellement avec la balise Line.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" Height="122" Width="491"> <Canvas> <Line X1="150" Y1="50" X2="150" Y2="80" StrokeThickness="2" Stroke="Blue"/> </Canvas> </Page>
Le dessin en 2D
11
Comme vous pouvez le constater, pour tracer une ligne vous devez dnir le point dorigine aux attributs X1 et Y1 et le point de destination avec X2 et Y2. Lorigine des coordonnes correspond au coin suprieur gauche du conteneur, dans ce cas le Canvas. Lattribut Stroke xe la couleur du trait alors que StrokeThickness en xe la largeur. Ces deux derniers attributs sont obligatoires si vous dsirez voir le rsultat. XAML dispose aussi de formes gomtriques. Lellipse est une de ces formes.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" Height="122" Width="491"> <Canvas> <Line X1="150" Y1="50" X2="150" Y2="80" StrokeThickness="2" Stroke="Blue"/> <Ellipse Canvas.Top="30" Canvas.Left="120" Height="10" Width="12" StrokeThickness="2" Stroke="Blue" Fill="LightBlue"/> <Ellipse Canvas.Top="30" Canvas.Left="165" Height="10" Width="12" StrokeThickness="2" Stroke="Blue" Fill="LightBlue"/> </Canvas> </Page>
La balise Ellipse trace une ellipse dont les dimensions sont xes par les attributs Height et Width. Le positionnement de lellipse diffre de celui de la ligne mais est plus conforme ce que nous avions utilis jusquici puisquil faut utiliser les proprits attaches du conteneur; ici de Canvas. La proprit Fill permet de remplir le fond dune forme.
11
Le dessin
Pour tracer un cercle, il suffit de tracer une ellipse dont les deux dimensions sont gales. Partant de ce principe, XAML na pas intgr de classe Cercle.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" Height="122" Width="491"> <Canvas> <Line X1="150" Y1="50" X2="150" Y2="80" StrokeThickness="2" Stroke="Blue"/> <Ellipse Canvas.Top="30" Canvas.Left="120" Height="10" Width="12" StrokeThickness="2" Stroke="Blue" Fill="LightBlue"/> <Ellipse Canvas.Top="10" Canvas.Left="90" Height="120" Width="120" StrokeThickness="2" Stroke="Blue"/> </Canvas> </Page>
Le dessin en 2D
11
<Point X="70" Y="0"/> <Point X="20" Y="120"/> <Point X="120" Y="120"/> </Polygon.Points> </Polygon> <Polyline Stroke="Yellow" StrokeThickness="5"> <Polyline.Points> <Point X="70" Y="120"/> <Point X="20" Y="50"/> <Point X="120" Y="20"/> <Point X="108" Y="40"/> <Point X="120" Y="20"/> </Polyline.Points> </Polyline> </Canvas> </Page>
Avec la classe Polygon, vous pouvez tracer nimporte quelle gure. La liste des points fournit les diffrents sommets du polygone. La classe Polyline est trs similaire mais permet de raliser des formes ouvertes. Les points fournis sont non plus les sommets mais simplement des points de passage relis par des lignes droites. En dehors des gures de base, qui sont le moyen le plus simple de dessiner, il est galement possible de tracer des formes complexes en utilisant un chemin. Ce chemin sera une succession de segments de formes diffrentes. Dans un premier exemple, limitons le chemin un segment en forme darc.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" Height="122" Width="491">
11
Le dessin
<Canvas> <Line X1="150" Y1="50" X2="150" Y2="80" StrokeThickness="2" Stroke="Blue"/> <Ellipse Canvas.Top="30" Canvas.Left="120" Height="10" Width="12" StrokeThickness="2" Stroke="Blue" Fill="LightBlue"/> <Ellipse Canvas.Top="30" Canvas.Left="165" Height="10" Width="12" StrokeThickness="2" Stroke="Blue" Fill="LightBlue"/> <Ellipse Canvas.Top="10" Canvas.Left="90" Height="120" Width="120" StrokeThickness="2" Stroke="Blue"/> <Path Stroke="Blue" StrokeThickness="2"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="120,100"> <ArcSegment Size="10,5" Point="180,100"/> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </Canvas> </Page>
Les segments sont rassembls pour former une gure. Lattribut SartPoint de la balise PathFigure permet de dnir le point de dpart de la gure. Ensuite, les segments dnissent le point darrive suivant du trait. Cest pour cela que
320 Le guide du codeur
Le dessin en 2D
11
lon parle de chemin et non dune collection de formes. Les autres attributs du segment permettent de dnir la forme que le trait va prendre. Dans le cas dun arc, cest lattribut Size qui va dnir la courbure. Bien sr nous pouvons appliquer les techniques danimation vues prcdemment pour animer notre dessin.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" Height="122" Width="491"> <Page.Triggers> <EventTrigger RoutedEvent="Page.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="oeil1" Storyboard.TargetProperty= "(Ellipse.Fill).(SolidColorBrush.Color)" From="LightBlue" To="Red" Duration="00:00:7" AutoReverse="True" /> <SizeAnimation Storyboard.TargetName="bouche" Storyboard.TargetProperty="Size" From="100,5" To="10,5" Duration="00:00:7" AutoReverse="True" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Page.Triggers> <Canvas> <Line X1="150" Y1="50" X2="150" Y2="80" StrokeThickness="2" Stroke="Blue"/> <Ellipse Canvas.Top="30" Canvas.Left="120" Height="10" Width="12" StrokeThickness="2" Stroke="Blue" Fill="LightBlue"/> <Ellipse Name="oeil1" Canvas.Top="30" Canvas.Left="165" Height="10" Width="12" StrokeThickness="2" Stroke="Blue" Fill="LightBlue"/> <Ellipse Canvas.Top="10" Canvas.Left="90" Height="120" Width="120" StrokeThickness="2" Stroke="Blue"/> <Path Stroke="Blue" StrokeThickness="2"> <Path.Data>
Le guide du codeur 321
11
Le dessin
<PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="120,100"> <ArcSegment x:Name="bouche" Size="10,5" Point="180,100"/> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </Canvas> </Page>
Il existe toute une panoplie de segments utilisables : ArcSegment, BezierSegment, LineSegment, PolyBezierSegment, PolyLineSegment, PolyQuadraticBezierSegment, QuadraticBezierSegment.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" Height="122" Width="491"> <Canvas> <Line X1="150" Y1="50" X2="150" Y2="80" StrokeThickness="2" Stroke="Blue"/> <Ellipse Canvas.Top="30" Canvas.Left="120" Height="10" Width="12" StrokeThickness="2" Stroke="Blue" Fill="LightBlue"/> <Ellipse Name="oeil1" Canvas.Top="30" Canvas.Left="165" Height="10" Width="12" StrokeThickness="2" Stroke="Blue" Fill="LightBlue"/> <Ellipse Canvas.Top="10" Canvas.Left="90" Height="120" Width="120" StrokeThickness="2" Stroke="Blue"/> <Path Stroke="Blue" StrokeThickness="2"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="120,100"> <ArcSegment x:Name="bouche" Size="10,5" Point="180,100"/> </PathFigure> <PathFigure StartPoint="120,18"> <ArcSegment Size="10,5" Point="140,13"/> <BezierSegment Point1="140,15" Point2="150,25" Point3="180,20"/> <LineSegment Point="170,0"/>
Le dessin en 3D
11
<PolyLineSegment Points="167,10,164,0,161,10,158,0,155,10,152,0,149,10, 146,0,143,10,140,0,137,11,134,0,131,13,128,0,125,16, 122,0,120,18"> </PolyLineSegment> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </Canvas> </Page>
PathGeometry nest pas la seule balise que vous puissiez placer dans le nud Path.Data. Vous pouvez par exemple utiliser LineGeometry, RectangleGeometry ou encore EllipseGeometry. Ces classes sont trs semblables aux formes
correspondantes dont nous avons dj parl except quelles ont besoin dune autre classe comme Path pour pouvoir tre affiches.
11.2 Le dessin en 3D
XAML ne se contente pas de dessiner en deux dimensions mais est galement capable de dessiner en trois dimensions. Attention, pour pouvoir utiliser ces fonctionnalits, il est ncessaire de possder des notions de dessin en trois dimensions. XAML vous fournit en effet les instructions adquates mais il est ncessaire de connatre les techniques spciques ce domaine dactivit. Cest pourquoi nous nous limiterons quelques notions de base et un exemple simple. Tout dabord, pour raliser des lments en 3D, vous devez dnir un conteneur spcique, il sagit de Viewport3D. Il sera alors ncessaire de dnir deux parties distinctes. Dune part la camra, qui dtermine la projection 3D sur la
Le guide du codeur 323
11
Le dessin
surface 2D, cest--dire langle de vue sur le modle, dautre part le modle lui-mme. Dans lexemple, le modle est compos de deux sous-modles : tout dabord un clairage. Celui-ci va permettre de dnir un spot lumineux qui va avoir pour effet de modier lclairage (les couleurs) du contenu selon langle avec lequel il est prsent. Par exemple, dans le cas dun cube, la face dirige vers le spot sera plus lumineuse. Ensuite, nous dnissons le contenu rel de la scne : ici un cube. Bien sr, vous pouvez multiplier les objets prsents et mme placer plusieurs spots. Pour dnir la camra, nous allons utiliser la balise PrespectiveCamera et dnir langle de vue grce aux proprits LookDirection et UpDirection. Lattribut Position dnit la position de la camra dans la scne. Les positions et les directions sont donnes sous forme dun point 3D (classe Point3D), cest--dire sous forme dun systme de coordonnes sur trois axes, X et Y tant les axes habituels alors que Z donne la profondeur. Si Z vaut 0, nous retrouvons le plan 2D. Pour dnir le spot, nous allons utiliser la balise DirectionalLight. Ici, le spot est dni dans le mme sens que la projection de manire faire ressortir la face avant. La couleur de la lumire est blanche pour conserver toute sa clart la scne. Le cube lui-mme est construit en deux parties ; dune part le cube, dni en utilisant la balise MeshGeometry3D et en dterminant les points de passage, dautre part la surface afficher sur la forme ainsi dnie. Nous afficherons ici une simple surface bleue. Vous pourriez tout aussi facilement afficher une image.
<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <DockPanel> <Viewport3D> <Viewport3D.Camera> <PerspectiveCamera LookDirection="5,-2,-3" UpDirection="3,1,-5" Position="-5,2,3"/> </Viewport3D.Camera> <ModelVisual3D> <ModelVisual3D.Children> <ModelVisual3D> <ModelVisual3D.Content> <DirectionalLight Color="White" Direction="5,-3,-2" /> </ModelVisual3D.Content> </ModelVisual3D> <ModelVisual3D> <ModelVisual3D.Content> <GeometryModel3D>
324 Le guide du codeur
Le dessin en 3D
11
<GeometryModel3D.Geometry> <MeshGeometry3D Positions="-0.5 ,-0.5,0.5 0.5,-0.5,0.5 -0.5,0.5,0.5 0.5,-0.5,0.5 0.5,0.5 ,0.5 -0.5,0.5,0.5 -0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5 ,-0.5 0.5,0.5,0.5 0.5,0.5,-0.5 -0.5,0.5,-0.5 -0.5,0.5 ,-0.5 0.5,0.5,-0.5 -0.5,-0.5,-0.5 0.5,0.5,-0.5 0.5,-0.5 ,-0.5 -0.5,-0.5,-0.5 -0.5,-0.5,-0.5 0.5,-0.5,-0.5 -0.5 ,-0.5,0.5 0.5,-0.5,-0.5 0.5,-0.5,0.5 -0.5,-0.5,0.5 0.5 ,-0.5,0.5 0.5,-0.5,-0.5 0.5,0.5,0.5 0.5,-0.5,-0.5 0.5,0.5 ,-0.5 0.5,0.5,0.5 -0.5,-0.5,-0.5 -0.5,-0.5,0.5 -0.5,0.5 ,-0.5 -0.5,-0.5,0.5 -0.5,0.5,0.5 -0.5,0.5,-0.5"/> </GeometryModel3D.Geometry> <GeometryModel3D.Material> <DiffuseMaterial> <DiffuseMaterial.Brush> <SolidColorBrush Color="Blue" Opacity="1.0" /> </DiffuseMaterial.Brush> </DiffuseMaterial> </GeometryModel3D.Material> </GeometryModel3D> </ModelVisual3D.Content> </ModelVisual3D> </ModelVisual3D.Children> </ModelVisual3D> </Viewport3D> </DockPanel> </Page>
11
Le dessin
Si vous modiez par exemple la position de la camra en remplaant -5 par -8, vous lloignez ainsi de la scne. Le rsultat est que le cube se dplace vers le bas et vers la droite mais aussi que sa taille se rduit.
Par contre en transformant le 3 en 8 dans la balise UpDirection, vous allez modier langle de vue.
Checklist
11
vous de dplacer la camra pour obtenir ce que vous dsirez. Bien sr, vous pouvez raliser des animations en modiant ces diffrents paramtres.
11.3 Checklist
Les points essentiels qui ont t vus dans ce chapitre sont :
j j
j j
le dessin en 2D avec les formes comme Ellipse, Rectangle, Polygone ; le dessin en 2D en utilisant des suites de segments comme ArcSegment, LineSegment, BezierSegment ; lanimation de dessin en 2D ; les bases du dessin en 3D avec Viewport3D, PerspectiveCamera, DirectionalLight, et MeshGeometry3D.
Ch apit re
12
Pour parfaire notre matrise de XAML, il est maintenant temps de raliser un exercice complet rcapitulant un grand nombre de notions vues parfois en les abordant sous un aspect lgrement diffrent. Nous simulerons galement une situation de travail collaboratif entre programmeur et designer. Nous prendrons comme exemple une calculatrice. Cest une application dont le modle mtier est simple mais qui offre des possibilits de design nombreuses. Cest justement ce quil nous faut. Le fait de choisir une application simple nimplique pas un certain respect des bonnes pratiques. Nous dcouperons donc notre application en deux couches. Nous ne dvelopperons pas de couche de persistance des donnes, qui napporterait rien ltude du XAML. La premire partie de lapplication sera ralise par le programmeur, qui va raliser sa couche mtier. Notre couche se limite une classe qui modlise la calculatrice. Lobjectif ntant pas ltude de la modlisation, nous allons faire rapide et simple. Pour faire plaisir ceux, nombreux, qui prfrent C# mais aussi pour vous dmontrer quil ny a aucune diffrence dans XAML quand il est utilis avec C# plutt que VB.NET, nous raliserons, vous laurez compris, le code .NET avec C#. En premier, il faut crer une application WinFX Windows. Vous pouvez choisir un autre modle mais vous devrez alors adapter la balise root du XAML et la dnition de la classe dans le code associ.
using System; using System.Collections.Generic; using System.Text; namespace Calculatrice { class CalcBase {
Le membre terme1 est destin recevoir le rsultat affich sur la calculatrice. Pour maintenir lintgrit du systme, cette valeur ne peut tre modie que par la classe elle-mme. Cest pourquoi la proprit qui y donne accs est en lecture seule.
private decimal terme1; public decimal Terme1 { get { return terme1; } }
12
Le membre terme2 est destin recevoir la valeur qui est entre en vue de raliser une opration. Nous aurions pu aussi la remplacer par des paramtres dans les mthodes.
private decimal terme2; public decimal Terme2 { get { return terme2; } set { terme2 = value; } }
Le membre memoire est destin recevoir la valeur stocke dans la mmoire de la calculatrice. Laccs ce membre se fait uniquement via des mthodes. Il nest donc pas expos lextrieur.
private decimal memoire;
12
public void Multiplication() { terme1 *= terme2; terme2 = 0; } public void Division() { if (terme2 != 0) { terme1 /= terme2; terme2 = 0; } }
La mthode AjoutMemoire modlise lutilisation de la touche M+. Remarquez que cest le rsultat qui est mis en mmoire.
public void AjoutMemoire() { memoire += terme1; }
La mthode RestitueMemoire modlise lutilisation de la touche MR. La valeur mmoire est restitue dans le deuxime terme de lopration.
public void RestitueMemoire() { terme2 = memoire; }
12
En bonne pratique, ce stade, nous devrions crire les tests unitaires que nous aurions d prvoir lavance. Exceptionnellement, comme il napporte rien lapprentissage XAML, nous allons les oublier et passer directement la couche de prsentation.
<Window x:Class="Calculatrice.Window1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Calculatrice" Height="365" Width="455" >
Pour rendre notre calculatrice un peu originale, nous allons utiliser une zone pour le rsultat et une autre pour le terme. Notez que terme2 est plus petit que rsultat, cela permet de garder de la place pour dautres informations.
<Label Grid.Row="0" Name="resultat" Grid.ColumnSpan="4" Margin="5,5,5,5" Content="0" BorderBrush="Black" BorderThickness="1" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" /> <Label Grid.Row="1" Name="terme2" Grid.Column="1" Grid.ColumnSpan="3"
Le guide du codeur 333
12
Nous aurons galement besoin dafficher un indicateur signalant quand une donne est stocke dans la mmoire et allons aussi afficher loprateur qui a t slectionn. Pour cela nous allons utiliser la cellule laisse libre par terme2.
<WrapPanel Grid.Row="1"> <Label Name="memoireActive" Grid.Column="0" Margin="5,5,5,5" Content="" VerticalContentAlignment="Center" VerticalAlignment="Center" Width="40" /> <Label Grid.Row="1" Name="operateur" Grid.Column="0" Margin="5,5,5,5" Content="" VerticalContentAlignment="Center" VerticalAlignment="Center" /> </WrapPanel>
Il nous reste maintenant dnir les boutons pour les diffrentes touches. Pour chacun dentre eux, nous devrons associer une mthode lvnement Click. Nous dnirons ultrieurement les mthodes dans la classe.
<Button Grid.Row="2" Grid.Column="0" Content="MC" Click="clickOnMC"/> <Button Grid.Row="2" Grid.Column="1" Content="MR" Click="clickOnMR"/> <Button Grid.Row="2" Grid.Column="2" Content="M+" Click="clickOnMemoirePlus"/> <Button Grid.Row="2" Grid.Column="3"
334 Le guide du codeur
12
Content="+" Click="clickOnPlus"/> <Button Grid.Row="3" Grid.Column="0" Content="1" Click="clickOn1"/> <Button Grid.Row="3" Grid.Column="1" Content="2" Click="clickOn2"/> <Button Grid.Row="3" Grid.Column="2" Content="3" Click="clickOn3"/> <Button Grid.Row="3" Grid.Column="3" Content="-" Click="clickOnMoins"/> <Button Grid.Row="4" Grid.Column="0" Content="4" Click="clickOn4"/> <Button Grid.Row="4" Grid.Column="1" Content="5" Click="clickOn5"/> <Button Grid.Row="4" Grid.Column="2" Content="6" Click="clickOn6"/> <Button Grid.Row="4" Grid.Column="3" Content="*" Click="clickOnMultiplication"/> <Button Grid.Row="5" Grid.Column="0" Content="7" Click="clickOn7"/> <Button Grid.Row="5" Grid.Column="1" Content="8" Click="clickOn8"/> <Button Grid.Row="5" Grid.Column="2" Content="9" Click="clickOn9"/> <Button Grid.Row="5" Grid.Column="3" Content="/" Click="clickOnDivision"/>
Le guide du codeur 335
12
<Button Grid.Row="6" Grid.Column="0" Content="C" Click="clickOnC"/> <Button Grid.Row="6" Grid.Column="1" Content="0" Click="clickOn0"/> <Button Grid.Row="6" Grid.Column="2" Content="." Click="clickOnPoint"/> <Button Grid.Row="6" Grid.Column="3" Content="=" Click="clickOnEgal"/> </Grid> </Window>
Maintenant que le code XAML est crit, il nous reste complter le code .NET associ.
using using using using using using using using using using using System; System.Collections.Generic; System.Text; System.Windows; System.Windows.Controls; System.Windows.Data; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Imaging; System.Windows.Shapes;
namespace Calculatrice { /// <summary> /// Interactions logiques pour Window1.xaml /// </summary> public partial class Window1 : Window {
12
InitializeComponent(); }
Les cinq mthodes suivantes provoquent le calcul et changent loprateur pour la prochaine opration.
private void clickOnEgal(object sender , RoutedEventArgs e) { operate(); operateur.Content = ""; } private void clickOnPlus(object sender , RoutedEventArgs e) { operate(); operateur.Content = "+"; } private void clickOnDivision(object sender , RoutedEventArgs e) { operate(); operateur.Content = "/"; } private void clickOnMoins(object sender , RoutedEventArgs e) { operate(); operateur.Content = "-"; } private void clickOnMultiplication(object sender , RoutedEventArgs e) { operate(); operateur.Content = "*"; }
Nous avons ensuite les mthodes lies aux boutons concernant la mmoire.
12
private void clickOnMR(object sender , RoutedEventArgs e) { calc.RestitueMemoire(); refreshValues(); } private void clickOnMC(object sender , RoutedEventArgs e) { calc.EffaceMemoire(); memoireActive.Content = ""; } private void clickOnMemoirePlus(object sender , RoutedEventArgs e) { calc.AjoutMemoire() ; memoireActive.Content = "M"; }
Les clics sur les boutons 0 9 ainsi que le point provoquent uniquement une modication du label terme2.
private void clickOn1(object sender , RoutedEventArgs { addDigit("1"); } private void clickOn2(object sender , RoutedEventArgs { addDigit("2"); } private void clickOn3(object sender , RoutedEventArgs { addDigit("3"); } private void clickOn4(object sender , RoutedEventArgs { addDigit("4"); } private void clickOn5(object sender , RoutedEventArgs { addDigit("5"); } private void clickOn6(object sender , RoutedEventArgs e)
e)
e)
e)
e)
e)
12
{ addDigit("6"); } private void clickOn7(object sender , RoutedEventArgs e) { addDigit("7"); } private void clickOn8(object sender , RoutedEventArgs e) { addDigit("8"); } private void clickOn9(object sender , RoutedEventArgs e) { addDigit("9"); } private void clickOn0(object sender , RoutedEventArgs e) { addDigit("0"); } private void clickOnPoint(object sender , RoutedEventArgs e) { addDigit(","); }
Problme de localisation Le programme est prvu non pas pour tous les environnements mais uniquement pour une conguration avec la virgule dcimale.
private void addDigit(string car) { if (terme2.Content.ToString() == "0") { terme2.Content = car; } else { terme2.Content += car; } }
12
La mthode suivante dtermine quelle opration doit tre demande notre objet mtier.
private void operate() { calc.Terme2 = Convert.ToDecimal(terme2.Content); switch(operateur.Content.ToString()) { case "+": { calc.Addition(); break; } case "-": { calc.Soustraction(); break; } case "/": { calc.Division(); break; } case "*": { calc.Multiplication(); break; } default: { if (calc.Terme2 != 0) { calc.EntreeNouvelleValeur(); } break; } } refreshValues(); } private void refreshValues() { resultat.Content = calc.Terme1.ToString(); terme2.Content = calc.Terme2.ToString(); } } }
Notre code est maintenant termin. Si nous passons en mode design, nous recevrons lcran suivant (ici lcran prsent sous Visual Studio 2005 Team Edition).
12
m Figure 12-2 : La calculatrice dans son design dorigine Le guide du codeur 341
12
Le programmeur a dvelopp la calculatrice en lui donnant une interface sombre mais parfaitement fonctionnelle. Il peut maintenant passer la main au designer, qui va amliorer la prsentation mais sans devoir intervenir dans les mcanismes. Pour nous, il sagira dun changement de rle. Dans cette phase, nous ninterviendrons plus que sur le code XAML. La premire tape consistera changer le fond dcran ainsi qu donner au cadre Windows un aspect bote doutils. Nous allons utiliser les proprits WindowStyle et Background de la class Window.
<Window x:Class="Calculatrice.Window1" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Calculatrice" Height="365" Width="455" WindowStyle="ToolWindow" > <Window.Background > <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="Blue" Offset="0" /> <GradientStop Color="White" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Window.Background>
Comme fond, nous avons ralis un dgrad bleu dans la diagonale de la fentre.
12
<Label Grid.Column="0" Name="memoireActive" Margin="5,5,5,5" Content="" VerticalContentAlignment="Center" VerticalAlignment="Center" Width="40" TextBlock.FontSize="24" TextBlock.FontWeight="UltraBlack" TextBlock.Foreground="Red" /> <Label Grid.Row="1" Name="operateur" Grid.Column="0" Margin="5,5,5,5" Content="" VerticalContentAlignment="Center" VerticalAlignment="Center" TextBlock.FontSize="24" TextBlock.FontWeight="UltraBlack" TextBlock.Foreground="White" />
Passons maintenant quelque chose de plus consistant, la prsentation des boutons. Pour modier cette dernire, nous allons utiliser un style. Le style sera automatiquement appliqu tous les boutons. La prsentation du bouton est compltement transforme et remplace par un contrle Border dont le fond est ralis avec un dgrad radial. La balise ContentPresenter permet de grer le texte contenu. Le code suivant doit tre insr aprs la balise de n Window.Background.
<Window.Resources> <Style TargetType="{x:Type Button}"> <Setter Property="Button.Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border BorderThickness="2" CornerRadius="25"
12
Width="100" Height="40"> <Border.Background> <RadialGradientBrush > <RadialGradientBrush.GradientStops> <GradientStop Color="LavenderBlush" Offset="0" /> <GradientStop Color="SlateGray" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Border.Background> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.FontWeight="Medium" TextBlock.FontSize="12" /> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Window.Resources>
Aprs les boutons, il est temps de sattaquer au changement des Label. Nous allons nouveau utiliser un style mais nous ne pourrons cette fois lappliquer automatiquement car seuls deux Label doivent tre modis. Nous utiliserons donc un style nomm. Le code suivant doit tre insr la n du nud contenant les ressources de
Window.
12
<Style x:Key="Affichage"> <Setter Property="Label.Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Label}"> <Border CornerRadius="25"> <Border.Background> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop x:Name="debut" Color="LightGray" Offset="0" /> <GradientStop x:Name="fin" Color="White" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.Background> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" TextBlock.FontSize="14" TextBlock.FontWeight="UltraBlack"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
Nous devons maintenant spcier au niveau des Label resultat et terme2 quils doivent utiliser ce nouveau style. Pour cela, il suffit dajouter dans la balise lattribut suivant :
Style="{StaticResource Affichage}"
12
La prsentation commence dsormais prendre forme. Nous allons maintenant raliser quelques petites nitions gadgets pour totalement personnaliser notre interface. Comme vous allez le voir, les dtails sont souvent aussi les lments les plus coteux en temps de mise en uvre. Lide de ce qui va suivre est de mettre en avant le bouton sur lequel lutilisateur est positionn. La taille du texte affich va tre agrandie pour le bouton sur lequel la souris est positionne. Au lieu de se contenter dun simple passage dun tat lautre, nous allons raliser un effet de fondu. Pour raliser cela, nous aurons videmment besoin dutiliser les triggers et les animations.
<Window.Resources> <Style TargetType="{x:Type Button}"> <Setter Property="Button.Template"> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.FontWeight="Medium" TextBlock.FontSize="12" x:Name="contentString" />
Nous devons nommer lobjet ContentPresenter car nous allons lui appliquer des transformations.
</Border> <ControlTemplate.Triggers>
Le trigger est compos de deux parties, une qui sera dclenche lorsque la valeur passe true, lautre, lorsque la valeur devient autre, en loccurrence false.
<Trigger.EnterActions > <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="contentString" Storyboard.TargetProperty= "(TextBlock.FontSize)" From="12" To="24" Duration="0:0:0.5"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions>
346 Le guide du codeur
12
Pour aller plus loin dans cette mise en vidence, nous allons galement faire passer le poids du caractre de Medium UltraBlack et inversement. Pour cela, nous devons modier le trigger prcdemment dni en y ajoutant une nouvelle animation lentre et la sortie. Le trigger dentre devient maintenant :
<Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="contentString" Storyboard.TargetProperty="(TextBlock.FontSize)" From="12" To="24" Duration="0:0:0.5"/>
Il sagit dune proprit qui doit recevoir une valeur statique dune structure. Nous devons donc utiliser les classes ObjectAnimationUsingKeyFrames et DiscreteObjectKeyFrame.
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentString" Storyboard.TargetProperty="(TextBlock.FontWeight)" > <DiscreteObjectKeyFrame
Le guide du codeur 347
12
Pour terminer, nous allons ajouter un effet sonore. Un clic sera mis lorsque les boutons de la calculatrice seront utiliss. Plutt quajouter cela dans le style, nous allons ajouter un trigger au niveau de la grille. Il sagira dun Event Trigger plac grce la proprit RoutedEvent sur lvnement Button.Click.
348 Le guide du codeur
Checklist
12
Nous sommes maintenant au bout de cet exercice. Comme vous avez pu le constater, le fait davoir utilis C# na rien chang au niveau XAML. Pour sa part, le designer na aucun moment eu besoin daccder au code .NET.
12.1 Checklist
Dans le cadre de cet exercice, les notions principales vues ou revues sont :
j j j
lutilisation dune grille pour positionner les contrles ; la gestion des vnements ; lutilisation des styles ;
Le guide du codeur 349
12
j j
j j
la ralisation des dgrads avec les classes de type GradientBrush ; la modication de la prsentation dun contrle en utilisant Control Template et ControlPresenter ; lutilisation des triggers et particulirement en utilisant EnterActions et ExitActions ; lutilisation des triggers de type EventTrigger ; lutilisation des animations et tout particulirement des animations sur des proprits de type object et des valeurs de type statique.
Ch apit re
13 Annexes
XAML sur le Web ...................................... Glossaire .................................................. Schma dhritage des diffrentes classes Visual ........................................... Rsum des classes et des attributs utiliss ... Classes autorises dans la zone internet ....... Liste des touches de raccourcis pour les commandes ddition ...................... Liste des classes par catgories .................. Liste des couleurs prdnies ......................
13
Annexes
Toujours sur MSDN, vous pourrez retrouver lincontournable aide en ligne. Le lien donn pointe sur Microsoft France mais, lheure actuelle, la documentation est toujours en anglais.
13
Si vous rencontrez des problmes avec WPF et que vous vous dbrouilliez en anglais, vous pouvez utiliser le Forum officiel.
Noubliez pas lautre site sur le Framework 3.0. Il recle un grand nombre dexemples complets sur les diffrentes techniques de WinFX. Malgr son adresse, il sagit bel et bien dun site made in Microsoft.
13
Annexes
Vous pouvez aussi retrouver WPF en vido avec Channel 9. Sur ce site, vous retrouverez des interviews et des confrences sur le sujet. Cest en gnral dans ces interviews ou dans les blogs des membres de lquipe de dveloppement que vous trouverez les informations les plus rcentes.
En ce qui concerne les blogs, il ny a pas de lien particulier, vous dutiliser la fonction de recherche. Vous pouvez par exemple essayer de chercher sur XAML ou encore WPF.
13
Heureusement, Microsoft France met galement notre disposition un nombre important dinformations depuis son site. Le principal site de Microsoft France parlant du sujet est le site ddi Windows Vista.
Ne ratez pas galement les Webcast en franais qui vous y sont proposs. Attention, pour visualiser ces Webcast, une inscription est obligatoire !
13
Annexes
Dans les deux sites cits ci-dessus, vous verrez souvent apparatre le nom de Mitsu Furuta, relation technique avec les dveloppeurs. Son blog est incontournable pour rester inform de lactualit.
Microsoft nest pas le seul fournir de linformation sur le sujet. Les sites communautaires sont aussi une bonne source dinformations. Les articles que vous y trouverez sont souvent plus adapts pour un dbutant ou plus cibls une problmatique particulire. Ils offrent en plus gnralement un forum o vous pourrez poser vos questions. Le premier dentre eux que je voudrais citer est Developpez.com. Bien quil ny ait pas de rubrique spcique WinFX, vous y retrouverez des articles intressants crits par les membres de la rdaction et par exemple un trs bel article de Thomas Lebrun (http://morpheus.developpez.com/ windows-presentation-foundation/). Le forum est trs frquent et, si vous avez des questions, vous y obtiendrez trs certainement la rponse. De nombreux blogs vous tiendront inform de lactualit informatique en gnral et donc de celle lie XAML aussi. Vous y trouverez galement un espace TV o vous pourrez entre autres visionner les Devdays 2006, dans lesquels il a t abondamment question de WPF.
13
Le site Asp-Php.net a quant lui cr une rubrique part entire pour la technologie XAML. Cette rubrique est encore peu fournie, gageons quelle va stoffer au l du temps et deviendra rapidement une trs bonne source dinformation.
13
Annexes
Si vous voulez avoir un aperu rapide de ce qui existe sur le Web concernant XAML, vous pouvez vous rendre sur le site Dotnet-news.com et faire une recherche sur XAML. Bien sr, la liste ne sera pas exhaustive mais, toutefois, les principaux sites communautaires y sont rfrencs.
En ce qui concerne les sites communautaires anglophones, nous retrouvons le trs classique Code Project, o vous pourrez dores et dj trouver un grand nombre de ressources.
Glossaire
13
Mais nhsitez pas vous rendre sur le site de XAMLShare, beaucoup plus prometteur encore en terme de partage de ressources. Il regorge dj de code trs intressant dont vous pourrez vous inspirer pour rsoudre les problmes que vous rencontrerez.
Cette liste nest videmment pas exhaustive et est de plus susceptible dvoluer fortement avec le temps. Toutefois, ces adresses devraient vous permettre dune part de suivre lactualit lie XAML, qui va trs probablement rester trs abondante jusqu la sortie de Visual Studio 2007 et du Framework 3.0, et dautre part de trouver des articles et des exemples ainsi quune assistance de la communaut qui ira croissante avec le temps et lexprience des uns et des autres. Quant moi, mon site se trouve ladresse jab.developpez.com.
13.2 Glossaire
Dans ce glossaire, vous trouverez la dnition de termes rencontrs dans ce livre mais galement de termes que vous rencontrerez dans laide de WinFX et qui semblaient pertinents dexpliquer.
13
Annexes
ensemble de fonctions et/ou de classes permettant dinteragir avec une autre application. Windows pouvant tre considr comme une application, il possde son propre API.
ASP.NET : Technologie de Microsoft faisant partie du Framework .NET et destine construire des applications web. Lapplication est excute sur le serveur et gnre du contenu HTML qui est envoy vers le client. Le client doit uniquement disposer dun navigateur. La logique du programme peut tre crite dans nimporte quel langage .NET comme C# ou VB.NET. Assembly : Un assembly est un ensemble de chiers dploy comme une unit et compil en un bloc. Gnralement, les notions dassembly et de dll se confondent. Attribut : Il sagit dune proprit dune classe ou, dans le cadre XML, dune proprit du nud XML. Balise : Une balise est un lment permettant de structurer un chier XML dans
notre cas. Il existe deux types de balises : une balise ouvrante et une balise fermante.
BAML : Abrviation anglaise de Binary Application Markup Language. Objet binaire obtenu aprs compilation dun chier XAML. Classe : Cest un ensemble de proprits et de mthodes regroupes dans une mme entit et qui sont en relation avec un mme concept. Une classe est une entit abstraite qui sert de dnition pour les objets. On peut faire le rapprochement entre les concepts de classe et dobjet et les concepts de type de donnes et de donne. CLR : Abrviation anglaise de Common Language Runtime. Cest le moteur dexcution des applications .NET. En effet, aprs compilation, le code .NET est transform en code intermdiaire MSIL et non en code natif. Code-Behind : Code .NET (VB.NET, C#...) contenant la classe qui implmente
dexploitation.
Code non manag : Code excut directement par le systme dexploitation. Il
Glossaire
13
ensemble de points de contrle. Par exemple, la courbe cubique de Bezier est dnie par les extrmits et deux points de passage.
Data binding : Le data binding, liaison aux donnes en franais, est le terme technique gnralement utilis lorsquun mcanisme est mis en place pour raliser une liaison automatique entre la source de donnes (quelle soit un chier ou un objet mtier) et le contrle correspondant dans linterface utilisateur. Ce mcanisme est normalement pris en charge par le langage utilis, en loccurrence ici le Framework .NET. vnement : En programmation, un vnement est un signal envoy et qui peut
tre intercept et trait par du code qui se met lcoute de cet vnement. Le code ainsi associ sera excut quand ce signal est mis. Il est gnralement associ une action comme un clic de souris. Outre ceux dj existants, vous pouvez crer vos propres vnements.
Fixed Document : Format de document qui reprsente celui-ci exactement comme lauteur la dcid. Flow Document : Format de document qui reprsente celui-ci de faon optimiser la lisibilit. Laffichage sajuste lenvironnement. Framework : Ensemble de librairies de classes, de types de donnes et de tout
langage correspondant ce que vous avez dj tap, soit directement soit au travers dune liste. Le but de lIntelliSense est de faciliter le travail du dveloppeur.
Interpolation linaire : Dans le cadre de ce livre, il sagit dune mthode de
transition entre deux tats ralise par un taux de changement constant pour chaque priode de temps. La transition emprunte le chemin le plus court.
13
Annexes
compilateur .NET. Quel que soit le langage que vous utilisez (VB.NET, C#...), le rsultat sera du MSIL. Le MSIL sera son tour compil par le JIT (just in time compiler) pour tre transform en code natif et excut.
Nud : Un nud en XML est un ensemble compris entre une balise ouvrante et la balise fermante correspondante. Objet : Un objet est la matrialisation dune classe. Si voiture est une classe, votre voiture est un objet de la classe voiture. Proprit : Une proprit est une variable spciquement associe un objet. Proprit attache : Une proprit attache est une proprit qui peut tre
attache nimporte quel objet dpendant de linstance de la classe o elle est dnie. Pour permettre cela, la classe doit contenir un accesseur statique (Get et Set) pour cette proprit attache. Attention, il ne faut pas en dduire que la valeur est unique pour la classe ! Chaque objet qui utilise cette proprit conserve sa valeur particulire.
Resource : Ensemble dinformations non excutable mais ncessaire lexcution du programme. Template : Mot anglais utilis dans le vocabulaire technique et dont la traduction habituelle est modle. Le template peut reprsenter un modle au sens le plus strict du mot, par exemple en ce qui concerne les .dot dans MS-Word. Dans lenvironnement XAML comme dans dautres, il dcrit linterface utilisateur pour lobjet auquel il est associ, ce qui permet de sparer contenu et prsentation. Il ne faut pas confondre template et style. Le style permet de prciser des spcications de linterface comme la couleur ou la taille alors que le template permet de dnir linterface elle-mme. Transformation affine : Transformation linaire suivie dune translation. Transformation linaire : Transformation par rotation, changement dchelle ou
oblique.
Trigger : Mot technique anglais signiant dclencheur. Initialement issu du monde des bases de donnes, il est galement utilis dans XAML. Un trigger est une petite procdure qui sera dclenche automatiquement lorsque certaines conditions dnies en mme temps que le trigger sont rencontres. Les mcanismes sont diffrents, mais le concept est assez semblable aux vnements.
13
URI : Uniform Resource Identifier. Il sagit de limplmentation de la RFC2396 de lInternet Engineering Task Force. WINFX : WinFX est un nouvel ensemble dAPI destin remplacer les anciennes API Windows. Originalement cr pour Windows Vista, il sera galement port sur Windows XP. WPF : Abrviation de Windows Presentation Foundation, prcdemment connu sous le nom dAvalon ; il sagit dun moteur daffichage graphique pour Windows qui intgre entre autres nativement la 3D. WPF fait partie de WinFX. Il comprend galement un langage dclaratif, XAML. XML : Abrviation des termes anglais eXtended Markup Langage ou Extensible Markup Language selon les sources. Il sagit dun langage de description de
donnes souvent utilis pour la transmission dinformation ou le stockage de faible volume. Comme le HTML, cette norme est hrite de SGML.
13
Annexes
Canvas DockPanel Grid StackPanel WrapPanel Image MediaElement Page PageFunctionBase TextBlock ViewPort3D Shape Ellipse Line Path Polyline Polygon Rectangle Popup FixedPage PageContent ToolBarTray
13
Control ContentControl ButtonBase Button ToggleButton CheckBox RadioButton RepeatButton HeaderedContentControl Expander GoupBox ToolBar Frame Label ScrollViewer ToolTip Window NavigationWindow FlowDocumentScrollViewer ItemsControl Selector ComboBox ListBox ListView TabControl TreeView DocumentViewerBase DocumentViewer FlowdocumentPageViewer Thumb GridSplitter ItemsControl MenuBase TabControl TextBoxBase RichTextBox TextBox RangeBase Slider PasswordBox
13
Annexes
ContentElement FrameworkContentElement FixedDocument FlowDocument TextElement Block List Paragraph Section Table Inline AnchoredBlock Figure Floater LineBreak Run Span Hyperlink ListItem TableCell TableRow TablerowGroup TableColumn
Freezable Animatable
13
Brush SolidColorBrush GradiantBrush LinearGradientBrush RadialGradientBrush TileBrush ImageBrush PathFigure PathSegment ArcSegment BezierSegment LineSegment PolyBezierSegment PolyLineSegment QuadraticBezierSegment PolyQuadraticBezierSegment Pen Timeline AnimationTimeline ColorAnimationBase ColorAnimation ColorAnimationUsingKeyFrame DoubleAnimationBase DoubleAnimation DoubleAnimationUsingKeyFrame TimelineGroup ParallelTimeline Storyboard Material DiffuseMaterial Model3D Light DirectionalLight Geometry3D MeshGeometry3D GradientStop Camera ProjectionCamera PerstpectiveCamera GeneralTransform Transform RotateTransform ScaleTransform SkewTransform MatrixTransform TranslateTransform DubleKeyFrame SplineDoubleKeyFrame
13
Annexes
Dnit les radiant X et Y dterminant les caractristiques de la courbure Point darrive Dnit le sens de la courbure depuis le point de dpart. Les valeurs possibles sont : Clockwise et Counterclockwise. Indique si larc dpasse 180.
IsLargeArc
Classe BezierSegment
Classe BezierSegment Attribut Utilit
Dnit le premier point de contrle du segment Dnit le second point de contrle du segment Dnit le troisime point de contrle du segment
Classe Border
Classe Border Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Menu contextuel associ ce cadre Facteur darrondissement des coins Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch.
13
IsEnabled
Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Peut galement sappliquer aux lments ListBoxItem. Marges autour du cadre Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Style appliquer Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
Width
Classe Button
Classe Button Attribut Utilit
Background BorderBrush BorderThickness Content FontFamily FontSize FontStretch FontStyle FontWeight Foreground Height
Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Texte affich Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur
13
Annexes
HorizontalAlignment
Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch.
HorizontalContentAlignment Alignement horizontal du texte dans le contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. IsCancel IsDefault IsEnabled MaxHeight MaxWidth MinHeight MinWidth Name RenderTransform TabIndex ToolTip VerticalAlignment
Indique sil sagit du bouton associ la touche [Echap] Indique sil sagit ou non du bouton par dfaut. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Position dans lordre de dplacement avec la touche de tabulation Info-bulle associe au bouton Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Alignement vertical du texte dans le contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
VerticalContentAlignment
Width
Classe Canvas
Classe Canvas Attribut Utilit
Background Height
13
HorizontalAlignment
Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
IsEnabled
Width
Position par rapport au bord suprieur Position par rapport au bord gauche Position par rapport au bord infrieur Position par rapport au bord droit
Pour plus dinformations sur les attributs attachs reportez-vous page 57.
Classe CheckBox
Classe CheckBox Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Texte affich
13
Annexes
Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Alignement horizontal du texte dans le contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si la case est coche ou non. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Dtermine sil sagit dune case cocher 2 ou 3 tats Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Alignement vertical du texte dans le contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
HorizontalContentAlignment
IsChecked IsEnabled IsThreeState MaxHeight MaxWidth MinHeight MinWidth Name RenderTransform VerticalAlignment
VerticalContentAlignment
Width
13
Classe ColorAnimation
Classe ColorAnimation Attribut Utilit
Permet de raliser automatiquement lanimation en sens inverse la n. Dure de lanimation Couleur initiale Permet la rptition automatique de lanimation. Il existe trois types de rptition : IterationCount, RepeatDuration et Forever. Couleur nale
To
Classe ComboBox
Classe ComboBox Attribut Utilit
Background BorderBrush BorderThickness ComboBoxItem FontFamily FontSize FontStretch FontStyle FontWeight Foreground Height HorizontalAlignment
Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Valeurs contenues dans la ListBox. Chaque valeur est contenue dans un nud enfant ListBoxItem. Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Alignement horizontal du texte dans le contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le texte est ditable ou si la valeur doit tre imprativement choisie dans la liste.
HorizontalContentAlignment
IsEditable
13
Annexes
IsEnabled
Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Peut galement sappliquer aux lments ComboBoxItem. Met la zone dencodage en lecture seule. Sapplique ComboBoxItem. Dtermine si la valeur est slectionne ou non. Permet de dsactiver ou de ractiver la possibilit de rechercher dans la liste. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Dtermine lindex de llment slectionn. Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Alignement vertical du texte dans le contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
IsReadOnly IsSelected IsTextSearchEnabled MaxHeight MaxWidth MinHeight MinWidth Name RenderTransform SelectedIndex VerticalAlignment VerticalContentAlignment Width
Classe DiffuseMaterial
Classe DiffuseMaterial Attribut Utilit
Dnit la couleur dambiance de la texture Dnit la couleur de la texture Dnit le contenu de la texture
Classe DirectionalLight
Classe DirecionalLight Attribut Utilit
Color Direction
13
Classe DockPanel
Classe DockPanel Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
IsEnabled
Width
Dock
Indique o doit avoir lieu le docking. Les valeurs possibles sont Top, Bottom, Left et Right.
Classe DocumentViewer
Classe DocumentViewer Attribut Utilit
Dtermine si les bords autour du document doivent tre affichs Dnit lespace entre deux pages Dnit le zoom
13
Annexes
Classe DoubleAnimation
Classe DoubleAnimation Attribut Utilit
Permet de raliser automatiquement lanimation en sens inverse la n. Dure de lanimation Valeur initiale Permet la rptition automatique de lanimation. Il existe trois types de rptition : IterationCount, RepeatDuration et Forever. Valeur nale
To
Classe DoubleAnimationUsingKeyFrames
Classe DoubleAnimationUsingKeyFrames Attribut Utilit
Permet de raliser automatiquement lanimation en sens inverse la n. Pour postposer le dbut de lanimation Dure de lanimation Permet la rptition automatique de lanimation. Il existe trois types de rptition : IterationCount, RepeatDuration et Forever.
Classe Ellipse
Classe Ellipse Attribut Utilit
Hauteur de lellipse Largeur de lellipse Dnit le fond de lellipse Largeur du trait Dnit le contenu du trait. Gnralement la couleur.
Lellipse est positionne en utilisant les attributs attachs du conteneur. Exemple: Canvas.Top.
376 Le guide du codeur
13
Classe EventTrigger
Classe EventTrigger Attribut Utilit
RoutedEvent
Classe Expander
Classe Expander Attribut Utilit
Dtermine le sens de lexpansion Titre Si cet attribut est false, lExpander et son contenu (sauf mention contraire) est dsactiv Dtermine si le contenu est affich ou cach Nom de linstance
Classe Figure
Classe Figure Attribut Utilit
Background BorderBrush BorderThickness FontFamily FontSize FontStretch FontStyle FontWeight Foreground Height HorizontalAnchor
Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur de la gure Dtermine la position horizontale de lancre. Les valeurs possibles sont ContentRight, ContentLeft, ContentCenter, PageRight, PageLeft, PageCenter, ParagraphRight et ParagraphLeft
13
Annexes
Dplacement horizontal de la gure par rapport son ancre. La valeur peut tre positive ou ngative Fixe les marges autour de la zone. Nom de linstance Alignement du texte. Les valeurs possibles sont Left, Rigth, Height,
Justify
VerticalAnchor
Dtermine la position verticale de lancre. Les valeurs possibles sont ContentTop, ContentBottom, ContentCenter, PageTop, PageBottom, PageCenter et
ParagraphTop
VerticalOffset Width
Dplacement vertical de la gure par rapport son ancre. La valeur peut tre positive ou ngative Largeur de la gure
Classe FixedPage
Classe FixedPage Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Alignement horizontal de la page dans son contenant Fixe les marges autour du texte. Hauteur maximum Largeur maximum Hauteur minimum
13
Largeur minimum Nom de linstance Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Alignement vertical de la page dans son contenant Largeur
VerticalAlignment Width
Class FixedDocument
Classe FixedDocument Attribut Utilit
Pages
Classe Floater
Classe Floater Attribut Utilit
Background BorderBrush BorderThickness FontFamily FontSize FontStretch FontStyle FontWeight Foreground HorizontalAlignment Margin Name TextAlignment Width
Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Alignement de la zone dans la ligne. Les valeurs possibles sont Left, Right et Center Fixe les marges autour de la zone. Nom de linstance Alignement du texte. Les valeurs possibles sont Left, Rigth, Height, Justify Largeur de la zone
13
Annexes
Classe FlowDocument
Classe FlowDocument Attribut Utilit
Background FontFamily FontSize FontStretch FontStyle FontWeight Foreground MaxPageHeight MaxPageWidth MinPageHeight MinPageWidth Name PageHeight PageWidth TextAlignment
Dtermine la couleur mais aussi le contenu du fond Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur maximum dune page Largeur maximum dune page Hauteur minimum dune page Largeur minimum dune page Nom de linstance Hauteur dune page Largeur dune page Alignement du texte. Les valeurs possibles sont Left, Rigth, Height,
Justify
Classe GradientStop
Classe GradientStop Attribut Utilit
Color Offset
Couleur utiliser pour le dgrad Position relative ou prend effet la nouvelle couleur. Valeur entre 0 et 1
Classe Grid
Classe Grid Attribut Utilit
Background ColumnDefinitions
Dtermine la couleur mais aussi le contenu du fond Dnition des colonnes. Contient des lments ColumnDefinition.
13
Height HorizontalAlignment
Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Dnition des lignes. Contient des lments RowDefinition. Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
IsEnabled
Width
Numro de la ligne Numro de la colonne Nombre de lignes regroupes Nombre de colonnes regroupes
Classe GridSplitter
Classe GridSplitter Attribut Utilit
Colonne o est plac le GridSplitter. Nombre de colonnes sur lesquelles stant le GridSplitter. Ligne o est plac le GridSplitter.
Le guide du codeur 381
13
Annexes
Nombre de lignes sur lesquelles stant le GridSplitter. Alignement horizontal utilis surtout avec
ResizeDirection="Rows"
Dnit le sens. Vertical si la valeur est Columns et horizontal pour l valeur Rows Dtermine si le bord est directement dplac ou si une prvisualisation est dabord effectue
Classe GridView
Classe GridView Attribut Utilit
AllowsColumnReorder Columns
Les valeurs possibles sont True et False. Autorise ou non lutilisateur dplacer les colonnes Collection dobjet GridViewColumn dnissant les colonnes du GridView
Classe GridViewColumn
Classe GridViewColumn Attribut Utilit
Dnit la proprit de lobjet associ qui doit tre affich dans cette colonne. Titre de la colonne Largeur de la colonne
Classe Hyperlink
Classe Hyperlink Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Police daffichage Taille de la police daffichage Espacement des caractres
13
Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Nom de linstance Adresse de destination Texte affich
Classe Image
Classe Image Attribut Utilit
Height HorizontalAlignment IsEnabled MaxHeight MaxWidth MinHeight MinWidth Name RenderTransform Source VerticalAlignment Width
Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Source de limage Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
Classe ImageBrush
Classe ImageBrush Attribut Utilit
AlignmentX AlignmentY
Alignement horizontal. Les valeurs possibles sont : Left, Center et Right Alignement vertical. Les valeurs possibles sont : Top, Center et Bottom.
13
Annexes
Chemin et nom du chier contenant limage. Les valeurs possibles sont : None, Stretch, Uniform,
UniformToFill
Classe Label
Classe Label Attribut Utilit
Background BorderBrush BorderThickness Content FontFamily FontSize FontStretch FontStyle FontWeight Foreground Height HorizontalAlignment
Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Texte affich Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch.
HorizontalContentAlignment Alignement horizontal du texte dans le contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. MaxHeight MaxWidth MinHeight MinWidth Name
Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance
13
RenderTransform VerticalAlignment
Transformation appliquer Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Alignement vertical du texte dans le contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
VerticalContentAlignment Width
Classe Line
Classe Line Attribut Utilit
X1 Y1 X2 Y2 StrokeThickness Stroke
Coordonne horizontale du point de dpart Coordonne verticale du point de dpart Coordonne horizontale du point darrive Coordonne verticale du point darrive Largeur du trait Dnit le contenu du trait. Gnralement la couleur.
Classe LinearGradientBrush
Classe LinearGradientBrush Attribut Utilit
EndPoint GradientStop
Point ou sarrte le dgrad Collection des points de contrle pour le dgrad. chaque point de contrle, vous pourrez changer les paramtres tels que la couleur Point de dpart pour le dgrad
StartPoint
Classe LineSegment
Classe LineSegment Attribut Utilit
Point
Point darrive
13
Annexes
Classe ListBox
Classe ListBox Attribut Utilit
Background BorderBrush BorderThickness FontFamily FontSize FontStretch FontStyle FontWeight Foreground Height HorizontalAlignment
Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch.
HorizontalContentAlignment Alignement horizontal du texte dans le contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. IsEnabled
Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Peut galement sappliquer aux lments ListBoxItem. Sapplique ListBoxItem. Dtermine si la valeur est slectionne ou non. Valeurs contenues dans la ListBox. Chaque valeur est contenue dans un nud enfant ListBoxItem. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Dtermine le mode de slection. Les valeurs possibles sont Single, Multiple, Extend Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch.
IsSelected ListBoxItem MaxHeight MaxWidth MinHeight MinWidth Name RenderTransform SelectionMode VerticalAlignment
13
VerticalContentAlignment
Alignement vertical du texte dans le contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
Width
Classe ListView
Classe ListView Attribut Utilit
Hauteur de la ListView Source des donnes inclues dans la ListView Dnit la prsentation des donnes en utilisant un
DataTemplate
Classe Menu
Classe Menu Attribut Utilit
Hauteur de la barre de menu Collection dobjet MenuItem qui dtermine les lments du menu Nom de linstance Alignement de la barre de menu dans son conteneur
Classe MenuItem
Classe MenuItem Attribut Utilit
Header IsChecked
13
Annexes
IsEnable Name
Classe MeshGeometry3D
Classe MeshGeometry3D Attribut Utilit
Positions
Classe NavigationWindow
Classe NavigationWindow Attribut Utilit
Background CanGoBack CanGoForward DataContext FontFamily FontSize FontStretch FontStyle FontWeight Height HorizontalAlignment
Dtermine la couleur mais aussi le contenu du fond Le retour arrire est possible Le renvoi vers lavant est possible Contexte pour la liaison aux donnes Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Marges autour du contrle Hauteur maximum Largeur maximum Hauteur minimum
IsEnabled
13
Largeur minimum Nom de linstance Offre des services pour naviguer entre les pages Transformation appliquer Collection des ressources utilisables dans la page Adresse URI de la page afficher dans la fentre Titre de la page Collection de trigger associs la fentre Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur Position de la fentre
Width WindowStartupLocation
Classe ObjectDataProvider
Classe ObjectDataProvider Attribut Utilit
Paramtres transmettre au constructeur Nom doit tre appele de la mthode qu Liste des paramtres qui doivent tre transmis la mthode Type de lobjet qui doit tre cr Instance utilise comme source
Classe Page
Classe Page Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Contexte pour la liaison aux donnes Police daffichage Taille de la police daffichage
13
Annexes
Height HorizontalAlignment
Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Marges autour du contrle Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Offre des services pour naviguer entre les pages Transformation appliquer Collection des ressources utilisables dans la page Titre de la page Collection de trigger associs la page Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur Hauteur de la fentre Titre de la fentre Largeur de la fentre
IsEnabled
Margin MaxHeight MaxWidth MinHeight MinWidth Name NavigationService RenderTransform Ressources Title Triggers VerticalAlignment
Classe PageContent
Classe PageContent Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Contexte pour la liaison aux donnes Hauteur
13
HorizontalAlignment IsEnabled
Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Marges autour du contrle Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Collection des ressources utilisables dans la page Fichier xaml charger dans le contenu de la page Titre de la page Collection de trigger associs au contrle Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
Margin MaxHeight MaxWidth MinHeight MinWidth Name RenderTransform Ressources Source Title Triggers VerticalAlignment
Width
Classe Paragraph
Classe Paragraph Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Demande un saut de page avant le paragraphe Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Garder le paragraphe sur une mme page
13
Annexes
Garder le paragraphe sur la mme page que le suivant Marges autour du paragraphe Nom du paragraphe Texte contenu dans le paragraphe Alignement du texte. Les valeurs possibles sont Left, Rigth, Height, Justify Indentation de la premire ligne
Classe Path
Classe Path Attribut Utilit
Largeur du trait Dnit le contenu du trait. Gnralement la couleur. Dnit le remplissage Contient un objet de type Geometry qui reprsente une forme complexe ralise avec diffrentes gures.
Classe PathFigure
Classe PathFigure Attribut Utilit
StartPoint Segments
Point de dpart de la gure Collection de segments successifs pour utiliss pour former la gure. Les segments peuvent tre de type ArcSegment, BezierSegment, LineSegment, PolyBezierSegment, PolyLineSegment, PolyQuadraticBezierSegment, QuadraticBezierSegment.
Classe Pen
Classe Pen Attribut Utilit
Thickness DashStyle
13
Brush Color
Classe PerspectiveCamera
Classe PerspectiveCamera Attribut Utilit
Participe dterminer langle de vue en indiquant a direction Dnit la position de la camra dans lespace 3D Participe dterminer langle de vue en indiquant a direction
Classe Polygon
Classe Polygon Attribut Utilit
Collection des points dterminant les sommets Largeur du trait Dnit le contenu du trait. Gnralement la couleur. Dnit le remplissage du polygone
Classe Polyline
Classe Polyline Attribut Utilit
Collection des points de passage reli par des lignes Largeur du trait Dnit le contenu du trait. Gnralement la couleur.
Casse PolylineSegment
Casse PolylineSegment Attribut Utilit
Points
13
Annexes
Classe Popup
Classe Popup Attribut Utilit
Classe RadialGradientBrush
Classe RadialGradientBrush Attribut Utilit
GradientStops
Collection des points de contrle pour le dgrad. chaque point de contrle, vous pourrez changer les paramtres tels que la couleur
Classe RadioButton
Classe RadioButton Attribut Utilit
Background BorderBrush BorderThickness Content FontFamily FontSize FontStretch FontStyle FontWeight Foreground GroupName Height HorizontalAlignment
Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Texte affich Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Nom du groupe dans lequel est inclus ce RadioButton Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch.
13
HorizontalContentAlignment Alignement horizontal du texte dans le contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. IsChecked IsEnabled MaxHeight MaxWidth MinHeight MinWidth Name RenderTransform VerticalAlignment
Dtermine si la case est coche ou non. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Alignement vertical du texte dans le contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
VerticalContentAlignment
Width
Classe Rectangle
Classe Rectangle Attribut Utilit
Hauteur de lellipse Largeur de lellipse Radiant en X utilis pour arrondir les coins Radiant en X utilis pour arrondir les coins Dnit le fond de lellipse Largeur du trait Dnit le contenu du trait. Gnralement la couleur.
Le rectangle est positionn en utilisant les attributs attachs du conteneur. Exemple: Canvas.Top.
13
Annexes
Classe RotateTransform
Classe RotateTransform Attribut Utilit
Dtermine langle de rotation en degr Modie la coordonne X du point centrale de la rotation Modie la coordonne Y du point centrale de la rotation
Classe RepeatButton
Voir aussi la classe Button page 368.
Renvoi
Classe RepeatButton Attribut Utilit
Type de curseur pour la souris Dlai avant de commencer les rptitions Intervalle entre deux appels lvnement Click.
Classe ScaleTransform
Classe ScaleTransform Attribut Utilit
Dplace horizontalement lobjet Dplace verticalement lobjet Dtermine le facteur de multiplication horizontal Dtermine le facteur de multiplication vertical
Classe ScrollViewer
Classe ScrollViewer Attribut Utilit
Nom de linstance Dtermine comment la barre de dlement doit tre gre. Les valeurs possibles sont Disabled, Visible, Hidden et Auto.
13
VerticalScrollBar Visibility
Dtermine comment la barre de dlement doit tre gre. Les valeurs possibles sont Disabled, Visible, Hidden et Auto.
Classe Section
Classe Section Attribut Utilit
Background BreakPageBefore FontFamily FontSize FontStretch FontStyle FontWeight Foreground Margin Name TextAlignment
Dtermine la couleur mais aussi le contenu du fond Demande un saut de page avant le paragraphe Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Marges autour du paragraphe Nom de la section Alignement du texte. Les valeurs possibles sont Left, Rigth, Height,
Justify
Classe Setter
Classe Setter Attribut Utilit
Property Value
Classe SkewTransform
Classe SkewTransform Attribut Utilit
AngleX AngleY
Angle de rotation sur laxe horizontal Angle de rotation sur laxe vertical
13
Annexes
CenterX CenterY
Dtermine la position centrale horizontale de la transformation Dtermine la position centrale verticale de la transformation
Classe Slider
Classe Slider Attribut Utilit
AutoToolTipPlacement AutoToolTipPrecision Background BorderBrush BorderThickness Cursor Delay Foreground Height HorizontalAlignment Interval IsEnabled
Position du tooltip automatique Nombre de dcimales affiches dans le tooltip automatique Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Type de curseur pour la souris Dlai avant de commencer les rptitions Couleur du texte Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Intervalle entre deux incrmentations. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Peut galement sappliquer aux lments ListBoxItem. Permet laffichage dune zone Dtermine si la valeur slectionne est automatiquement ajuste un repre Incrment lors du changement de valeur via un click sur le contrle Hauteur maximum Valeur maximale Largeur maximum Hauteur minimum Valeur minimale
13
MinWidth Name Orientation RenderTransform SelectionEnd SelectionStart TickFrequency TickPlacement Ticks Value VerticalAlignment Width
Largeur minimum Nom de linstance Dtermine lorientation horizontale ou verticale Transformation appliquer Indique la valeur maximale de la zone affiche Indique la valeur minimale de la zone affiche Espacement entre les repres Position des repres visuels Liste des valeurs pour les repres visuels Valeur indique par le curseur Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
Classe SolidColorBrush
Classe SolidColorBrush Attribut Utilit
Color Transform
Dtermine la Dtermine la couleur mais aussi le contenu du fond Dnit la transformation appliquer
Classe SplineDoubleKeyFrame
Classe SplineDoubleKeyFrame Attribut Utilit
KeyTime Value
Classe StackPanel
Classe StackPanel Attribut Utilit
Background
13
Annexes
Height HorizontalAlignment
Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
IsEnabled
Width
Classe StoryBoard
Classe StoryBoard Attribut attach Utilit
TargetName TargetProperty
Nom de lobjet qui est anim Nom de la proprit qui subit lanimation
Classe Style
Classe Style Attribut Utilit
X:Key
Nom du style. Ce nom est utilis par les contrles souhaitant appliquer le style. Il sagit de la mthode de nommage utilise pour les ressources. Type de contrle. Le style est automatiquement appliqu tous les contrles de ce type.
TargetType
13
Classe Table
Classe Table Attribut Utilit
Couleur du bord Largeur du bord Collection dobjets TableColumn qui dnissent les colonnes Contient un objet de type TableRowGroup et qui contient les lignes de la table
Classe TableCell
Classe TableCell Attribut Utilit
Block.TextAlignment ColumnSpan
Alignement du texte dans la cellule Nombre de colonnes sur lesquels stend cette cellule
Classe TableColumn
Classe TableColumn Attribut Utilit
Background Width
Classe TableRow
Classe TableRow Attribut Utilit
Background
Classe TabControl
Classe TabControl Attribut Utilit
Background BorderBrush
13
Annexes
Epaisseur du bord Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch.
HorizontalContentAlignment Alignement horizontal du texte dans le contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. IsEnabled
Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Le TabControl contient un ensemble de TabItem
Header ne fait pas partie de la classe TabControl mais bien de la classe TabItem. Il reprsente le texte affich
dans longlet.
VerticalAlignment
Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Alignement vertical du texte dans le contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
VerticalContentAlignment
Width
Classe TabItem
Classe TabIem Attribut Utilit
Header
13
Classe TextBlock
Classe TextBox Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Fixe les marges autour du texte. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Texte affich Alignement du texte. Les valeurs possibles sont Left, Rigth, Height,
Justify
TextTrimming
Gre le comportement en bout de contrle. Les valeurs possibles sont None, WordEllipsis,
CharacterEllipsis
TextWrapping
Gre le comportement en bout de ligne. Les valeurs possibles sont NoWrap, Wrap et WrapWithOverflow. Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
VerticalAlignment
Width
13
Annexes
Classe TextBox
Classe TextBox Attribut Utilit
AcceptsReturn AcceptsTab Background BorderBrush BorderThickness CharacterCasing FontFamily FontSize FontStretch FontStyle FontWeight Foreground Height HorizontalAlignment
Autorise le retour la ligne impos dans le contenu. Doit tre True ou False Autorise lutilisation des tabulations dans le contenu. Doit tre True ou False. Dtermine la couleur mais aussi le contenu du fond Couleur du bord. Epaisseur du bord Case du contenu. Les valeurs possibles sont Upper,
Lower
Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Couleur du texte Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch.
HorizontalContentAlignment Alignement horizontal du texte dans le contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. IsEnabled IsReadOnly MaxHeight MaxLength MaxLines MaxWidth MinHeight MinLines MinWidth
Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Dtermine si le contrle est en lecture seule ou non. Les valeurs possibles sont True ou False. Hauteur maximum Nombre maximum de caractres Nombre de lignes maximal affiches Largeur maximum Hauteur minimum Nombre de lignes minimal affiches Largeur minimum
13
Nom de linstance Transformation appliquer Texte affich Dtermine le comportement dans le cas o le contenu atteint lextrmit du contrle. Les valeurs possibles sont NoWrap, Wrap,
WrapWthOverflow
VerticalAlignment
Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Alignement vertical du texte dans le contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
VerticalContentAlignment
Width
Classe Toolbar
Classe Toolbar Attribut Utilit
Dtermine dans quelle bande de la ToolBarTray doit tre positionn la ToolBar Dtermine lordre de la ToolBar dans la bande Hauteur de la barre doutils Largeur de la barre doutils
Classe ToolbarTray
Classe ToolbarTray Attribut Utilit
Autorise ou non le dplacement des barres doutils au sein de la ToolBarTray Dtermine lorientation. Les valeurs possibles sont Vertical et Horizontal Dnit le fond
13
Annexes
Classe TranslateTransform
Classe TranslateTransform Attribut Utilit
X Y
Classe TreeView
Classe TreeView Attribut Utilit
Background Height Items Margin MaxHeight MaxWidth MinHeight MinWidth Name Width
Dni le fond du contrle. Typiquement la couleur. Hauteur Collection de TreeViewItems contenant la hirarchie des nuds contenu dans le TreeView. Dni les marges autour du contrle Hauteur maximum du Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Largeur
Classe TreeViewItem
Classe TreeViewItem Attribut Utilit
Dni le titre du noeud Dni la source des donnes contenues dans le noeud. Dni la forme des donnes affiches.
Classe Trigger
Classe Trigger Attribut Utilit
Property
13
Setters Value
Collection dobjets Setter qui seront appliqus lorsque le trigger est activ. Valeur de la proprit dnie avec lattribut Property et qui dclenche le trigger.
Classe ViewBox
Classe ViewBox Attribut Utilit
Hauteur Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Largeur Dni la manire dont le contenu sera tendu. Les valeurs possibles sont : Fill, None, Uniform,
UniformToFill
StretchDirection
Dtermine le sens de ltirement. Les valeurs possibles sont : Both, DownOnly, UpOnly
Classe Viewport3D
Classe Viewport3D Attribut Utilit
Contient un objet de type Camera qui gre la projection du contenu en 3 dimensions Hauteur Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Largeur
13
Annexes
Classe Window
Classe Window Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Contexte pour la liaison aux donnes Police daffichage Taille de la police daffichage Espacement des caractres Style de la police. Italic, Normal, Oblique Epaisseur des traits Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Marges autour du contrle Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Collection des ressources utilisables dans la page Titre de la page Collection de triggers associs la fentre Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur Position de la fentre
IsEnabled
Margin MaxHeight MaxWidth MinHeight MinWidth Name RenderTransform Ressources Title Triggers VerticalAlignment Width WindowStartupLocation
13
Classe WrapPanel
Classe WrapPanel Attribut Utilit
Dtermine la couleur mais aussi le contenu du fond Hauteur Alignement horizontal du contrle. Les valeurs possibles sont Left, Rigth, Center, Stretch. Dtermine si le contrle est actif ou non. Les valeurs possibles sont True ou False. Les contrles enfants sont galement dsactivs. Hauteur maximum Largeur maximum Hauteur minimum Largeur minimum Nom de linstance Transformation appliquer Alignement vertical du contrle. Les valeurs possibles sont Top, Bottom, Center, Stretch. Largeur
IsEnabled
Classe XmlDataProvider
Classe XmlDataProvider Attribut Utilit
X:Key Source
13
Annexes
Layout
j j j j j j j
Controls
j j j j j j j j j j j j j j
Border Button ComboBox Frame Hyperlink Label Menu Page Popup. (Limit la zone daffichage du navigateur.) ScrollBar ScrollViewer TextBox Thumb ToolTip
Les classes de dessin 2D et 3D Les classes grant les animations MediaElement (audio et vido) Glyphs Path Image
13
Autres
j j j
Les classes assurant le data binding Les classes assurant la navigation Les classes relatives aux styles
AlignCenter AlignJustify AlignLeft AlignRight Backspace CorrectSpellingError DecreaseFontSize DecreaseIndentation Delete DeleteNextWord DeletePreviousWord EnterLineBreak EnterParagraphBreak IgnoreSpellingError IncreaseFontSize IncreaseIndentation MoveDownByLine MoveDownByPage MoveDownByParagraph MoveLeftByCharacter MoveLeftByWord MoveRightByCharacter MoveRightByWord MoveToDocumentEnd
[Ctrl]+[E] [Ctrl]+[J] [Ctrl]+[L] [Ctrl]+[R] [Retour}arrire] [-] [Ctrl]+ [Ctrl]+[Maj]+[T] [Delete] [Ctrl]+[Suppr] [Ctrl]+[}Retour}arrire] [Shift]+[Entre] [Entre] [-] [Ctrl]+OemCloseBrackets [Ctrl]+[T] [Bas] [Page}suivante] [Ctrl]+[Bas] [Gauche] [Ctrl]+[Gauche] [Droite] [Ctrl]+[Droite] [Ctrl]+[]
Le guide du codeur 411
13
Annexes
MoveToDocumentStart MoveToLineEnd MoveToLineStart MoveUpByLine MoveUpByPage MoveUpByParagraph SelectDownByLine SelectDownByPage SelectDownByParagraph SelectLeftByCharacter SelectLeftByWord SelectRightByCharacter SelectRightByWord SelectToDocumentEnd SelectToDocumentStart SelectToLineEnd SelectToLineStart SelectUpByLine SelectUpByPage SelectUpByParagraph TabBackward TabForward ToggleBold ToggleBullets ToggleInsert ToggleItalic ToggleNumbering ToggleSubscript ToggleSuperscript ToggleUnderline
[Ctrl]+[Dbut] [] [Dbut] [Haut] [Page}prcdente] [Ctrl]+[Haut] [Maj]+[Bas] [Maj]+[}Page}prcdente] [Ctrl]+[Maj]+[Bas] [Maj]+[Gauche] [Ctrl]+[}Maj]+[Gauche] [Maj]+[Droite] [Ctrl]+[}Maj]+[Droite] [Ctrl]+[}Maj]+[] [Ctrl]+[}Maj]+[Home] [Maj]+[] [Maj]+[Dbut] [Maj] +[Haut] [Maj] +[}Page}prcdente] [Ctrl]+[}Maj] +[Haut] [Maj] +[Tab] [Tab] [Ctrl]+[B] [Ctrl]+[}Maj]+[L] [Insrer}] [Ctrl]+[I] [Ctrl]+[}Maj]+[N] [Ctrl]+OemPlus [Ctrl]+[}Maj]+OemPlus [Ctrl]+[U]
13
Border BulletDecorator Canvas DockPanel GridView GridSplitter GridView GroupBox Panel Separator StackPanel WrapPanel Viewbox
Boutons
j j j
Menus
j j j
Listes de choix
j j j
13
Annexes
Selection de valeurs
j j
CheckBox Slider
Navigation
j j j j
Informations utilisateurs
j j j j j j
Documents
j j j j
Edition de texte
j j j
Multimdia
j j
Image MediaElement
13
AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenrod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen DarkOrange DarkOrchid
13
Annexes
DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue Firebrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold Goldenrod Gray Green GreenYellow Honeydew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon
13
LightBlue LightCoral LightCyan LightGoldenrodYellow LightGray LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquamarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin Name
13
Annexes
NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenrod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray
13
Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Transparent Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen
Ch apit re
14
Index
14
Index
A
AcceptsReturn, 40 AcceptsTab, 40 Alignement, 25 Horizontal, 26 Vertical, 26 AlignmentX, 52 AlignmentY, 52 Angle, 220 AngleX, 221 AngleY, 221 Animation, 241, 346 Annotation, 282 AnnotationService, 283 Application, 133 ApplicationDenition, 134 ArcSegment, 322, 368 Attribut, 14 Aurora Designer, 310
Border, 47, 368 BorderBrush, 23 BorderThickness, 23 Bouton, 46 Dfaut, 47 Dlai, 112 Echap, 47 Intervalle, 112 Rptition, 112 Bouton radio (voir RadioButton), 102 BreakPageAfter, 256 BreakPageBefore, 256 Brush, 243 Bulle dinformation, 106 Bulle Info-bulle, 106 Bullet, 260 BulletDecorator, 259 Button, 369 ByteAnimation, 241
B
Background, 28, 342 Balise, 14 Barre doutils, 183 Contrle, 184 Dbordement, 188 Flottante, 188 Orientation, 187 Barre de statut, 281 Barres de dlement, 77 BeginStoryboard, 242 BeginTime, 246 BezierSegment, 322, 368 Binding (voir Liaison), 195 Blocks, 280 Bold, 34 Bord, 47 Mobile, 66
422 Le guide du codeur
C
Cadre, 47 Arrondir, 48 CanGoBack, 149 CanGoForward, 149 Canvas, 56, 370 Bottom, 59 Left, 57 Right, 59 Top, 57 Case cocher (voir CheckBox), 100 CenterY, 221 Cercle, 318 CharacterCasing, 40 CheckBox, 100, 371 Coche, 101 tat indtermin, 101 CIDER, 290 Click, 139
Index
14
Collection, 15 ColorAnimation, 243, 373 ColSpan, 66 ColumnDenitions, 62 Columns, 273 ColumnSpan, 63 ComboBox, 98, 373 ditable, 99 ComboBoxItem, 98 Connexion, 193 ConstructorParameters, 216 Content, 23 ContentElement, 366 ContentPresenter, 234 ContentSite, 234 Control, 364 ControlTemplate, 234 Coordonnes, 56 Systme de coordonnes, 60 CornerRadius, 48 Couleur, 28
Dock, 74 Document Charger, 279 Imprimer, 280 Sauver, 279 DocumentViewer, 254, 375 DoubleAnimation, 244, 376 DoubleAnimationUsingKeyFrames, 245, 376 DynamicResource, 225
E
Echelle, 221 Ellipse, 317, 376 EllipseGeometry, 323 EndPoint, 230 Evnement, 139 EventTrigger, 245, 348, 377 ExpandDirection, 120 Expander, 118, 377 Express Application, 142
D
DataContext, 194, 207, 209 DataSet, 192 Liaison, 194 DataTable, 201 DataTemplate, 209, 214 Dboguer, 298 Debug, 298 Dcoration, 35 Dlement, 77 Delay, 112, 115 Dsactiv, 58 DiffuseMaterial, 374 DirectionalLight, 324, 374 DisplayMemberPath, 202, 234 Dock, 74 DockPanel, 72, 375
F
Fentre navigable, 157 Figure, 270, 377 Fill, 317 FixedDocument, 250, 379 FixedPage, 378 Floater, 270, 379 FlowDocument, 254, 380 FlowDocumentPageViewer, 264 FlowDocumentReader, 264 FlowDocumentScrollViewer, 261 Focusable, 235 Font, 27 FontFamily, 27 FontSize, 27
Le guide du codeur 423
14
Index
FontStrech, 28 FontWeight, 28 Foreground, 28 Frame, 88, 153 Framework 3.0, 13 Freezable, 366 Fusion De colonnes, 63 De lignes, 63
HorizontalAlignment, 26 HorizontalAnchor, 268 HorizontalContentAlignment, 25 HorizontalScrollBarVisibility, 43, 78 HTML, 166 Hyperlink, 382
I
IIS, 141 Image, 48, 383 Fond, 50 ImageBrush, 51, 383 ImageSource, 49 Imprimer, 280 XAMLPad, 18 Inclinaison, 221 Info-bulle, 106 Int32Animation, 241 IntelliSense, 19 Interactive Designer, 306 Interval, 112, 115 IsCancel, 47 IsChecked, 101-102, 173 IsDefault, 47 IsEditable, 99 IsEnabled, 43, 58, 65, 95, 172 IsExpanded, 120 IsFocused, 241 IsMouseOver, 241 IsReadOnly, 43, 95 IsSelected, 94, 111 IsSnapToTickEnabled, 115 IsTextSearchEnabled, 100 IsThreeState, 101 Italic, 34 ItemSource, 209 ItemsPresenter, 235, 237 ItemTemplate, 209
G
GoBack, 149, 161 GoForward, 149 Gradient Linaire, 230 Radial, 230 GradientStop, 229, 380 GradientStops, 230 Graphic Designer, 303 Grid, 61, 380 Column, 62 ColumnSpan, 63 Row, 62 GridSplitter, 66, 381 GridView, 211, 382 GridViewColumn, 382 Grille, 61 Bord mobile, 66 Fusion de colonnes, 63 Fusion de lignes, 63 GroupBox, 105 Header, 106 GroupName, 103
H
Header, 106, 120 Height, 24, 49
424 Le guide du codeur
Index
14
J
JavaScript, 166
M
Majuscule impose, 40 Marge, 33 Margin, 33 MarkerOffset, 259 MarkerStyle, 258 Matrice, 222 MaxHeight, 25, 64 MaxLength, 40 MaxLines, 42 MaxWidth, 25, 92 MediaElement, 126 MediaTimeLine, 127 Menu, 170, 387 Action, 173 Contextuel, 178, 226 Dynamique, 176 Inactif, 172 Sparateur, 172 Menu contextuel Partage, 226 MenuItem, 170, 387 MeshGeometry3D, 324, 388 MethodName, 217 MethodParameters, 217 MinHeight, 25 MinLines, 42 Minuscule impose, 40 MinWidth, 25 Mosaque, 51 Mot de passe, 46 MouseMove, 246
K
KeyTime, 246
L
Label, 22-23, 384 Bord, 23 Content, 23 LargeChange, 115 Liaison DataSet, 194 Objet business, 203 Line, 316, 385 LinearGradientBrush, 230, 385 LineBreak, 38 LineGeometry, 323 LineSegment, 322, 385 List, 257 ListBox, 92, 386 Mode de slection, 94 Valeur par dfaut, 92, 94-95 ListBoxItem, 92 Liste, 92 ListView, 208, 387 DataTemplate, 209 ItemTemplate, 209 Loaded, 194, 242 LoadedBehavior, 126 Location, 35 LookDirection, 324
N
Name, 29 Namespace, 151 Namespaces, 16 Navigate, 148
Le guide du codeur 425
14
Index
Navigateur Internet, 140, 142 NavigationService, 147 NavigationWindow, 157-158, 388 Nud XML, 14 Nom dun contrle, 29 Note, 283
O
ObjectDataProvider, 207, 214, 389 ObjectInstance, 217, 389 ObjectType, 216 Offset, 229 Onglet, 109 OnReturn, 149 Ordre, 88 Des tabulations, 88 Orientation, 187
Police (voir Font), 27 XAMLPad, 18 PolyBezierSegment, 322 Polygon, 318, 393 Polyline, 318, 393 PolyLineSegment, 322, 393 PolyQuadraticBezierSegment, 322 Popup, 123, 394 Position, 324 PrespectiveCamera, 324 PrintDialog, 279 Projet, 132 Property, 227, 239 Proprit attache, 57
Q
QuadraticBezierSegment, 322
P
Page, 135, 143, 389 Statique, 146 PageContent, 250, 390 PageFunction, 151 Paragraph, 254, 391 Parent, 164 PART_ContentHost, 233 Password, 46 PasswordBox, 46 Path, 321, 392 PathFigure, 320, 392 PathGeometry, 323 Pen, 35, 392 PerspectiveCamera, 393 Photo, 48 PlacementRectangle, 123 PlacementTarget, 123 Point3D, 324
426 Le guide du codeur
R
RadialGradientBrush, 230, 237, 394 RadioButton, 102, 394 Groupe, 103 Slection, 102 RadioButtonList, 103 Rectangle, 318, 395 RectangleGeometry, 323 RenderTransform, 220 RepeatButton, 112, 396 ResizeDirection, 66 ResizeMode, 136 Ressource, 223 Dynamique, 225 Nom, 224 Statique, 225 Utilisation, 224 RichTextBox, 275 Root, 16
Index
14
RotateTransform, 220, 396 Rotation, 220 RoutedEvent, 245, 348 RowDenitions, 62 RowSpan, 66
S
SartPoint, 230, 320 ScaleTransform, 221, 245, 396 ScaleX, 221 ScaleY, 221 ScrollViewer, 77, 396 Section, 257, 397 Scurit, 141 SelectedIndex, 92 SelectedValue, 234 SelectedValuePath, 234 SelectionMode, 94 Setter, 227, 397 ShowInTaskbar, 138 ShowPageBorders, 254 ShowsNavigationUI, 148 ShowsPreview, 67 Size, 321 SizeToContent, 136 SkewTransform, 221, 397 Slider, 114, 398 SolidColorBrush, 224, 244, 399 SoundPlayerAction, 349 Source, 209, 252 De donnes, 192 SplineDoubleKeyFrame, 245, 399 StackPanel, 70, 399 StartIndex, 259 StartupUri, 133 StaticResource, 225 StatusBar, 282 StatusBarItem, 281 Storyboard, 127, 241, 400
Stretch, 52, 121 StretchDirection, 121 Stroke, 317 StrokeThickness, 317 Style, 227, 400 Complex, 229 Hritage, 231 TargetType, 228 Surlignement, 283 Systme de coordonnes, 60
T
TabControl, 110, 401 TabIndex, 88 TabItem, 110, 402 Table, 257, 273, 401 TableCell, 273, 401 TableColumn, 273, 401 TableRow, 273, 401 TableRowGroup, 273 Taille, 24 TargetName, 242 TargetType, 228 Template, 232 TextAlignment, 33, 258 TextBlock, 30, 403 TextBox, 38, 404 Dsactive, 44 Lecture seule, 43 Passage la ligne, 40 Tabulation, 40 TextDecoration, 35 Texte Coupure automatique, 31 Dcoration, 35 Gras, 34 Incomplet, 32 Italique, 34 Soulign, 34
Le guide du codeur 427
14
Index
TextRange, 279 TextTrimming, 32 TextWrapping, 32, 40 TickFrequency, 114 Ticks, 114 TileMode, 51 Title, 135 ToolBar, 183, 405 ToolBarTray, 186, 405 ToolTip, 107 Topmost, 138 Transformation Echelle, 221 Matrice, 222 Oblique, 221 Rotation, 220 TranslateTransform, 245, 406 TreeView, 212, 406 TreeViewItem, 406 Trigger, 127, 139, 346, 406 EventTrigger, 245, 348, 377
Stretch, 121 StretchDirection, 121 Viewport, 51 Viewport3D, 323, 407 Visibility, 176 Visual, 279, 363 Visual Studio, 290
W
WBA, 140, 142 Width, 24, 49 Win32, 13 Window, 135, 408 WindowHeight, 146 Windows Presentation Fundation, 13 WindowsStartupLocation, 135 WindowState, 136 WindowStyle, 137, 342 WindowWidth, 146 WinFX, 13 Wizard, 158 WPF, 13 WPF/E, 165 WrapPanel, 68, 409 Wrapping, 31, 41
U
UIElement, 279 Underline, 34 Uniform, 407 UnloadedBehavior, 126 UpDirection, 324
X
X Key, 227 TypeArguments, 151 X1, 317 X2, 317 XAMLPad, 17 Auto Parse, 18 Cacher le code, 18 Imprimer, 18 Police, 18
V
Value, 230, 246 VerticalAlignment, 26, 64, 170 VerticalAnchor, 268 VerticalContentAlignment, 25 VerticalPageSpacing, 254 VerticalScrollBarVisibility, 43, 78 ViewBox, 121, 407
428 Le guide du codeur
Index
14
Refresh, 18 Zoom, 18 XML, 14 Attribut, 14 Balise, 14 Nud, 14 XmlDataProvider, 207, 409 Source, 209 XPath, 209 XmlStreamStore, 285 XPath, 209
Y
Y1, 317 Y2, 317
Z
ZAM 3D, 313 Zoom, 254
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes