ALL DOT.BLOG

Tome 7

XAML Tout Profil

Olivier Dahan odahan@gmail.com

Tout Dot.Blog mis jour par thme sous la forme de livres PDF gratuits ! Reproduction, utilisation et diffusion interdites sans lautorisation de lauteur

www.e-naxos.com Formation Audit Conseil Dveloppement

XAML (Windows Store, WPF, Silverlight, Windows Phone), C#

Cross-plateforme Windows / Android / iOS - Xamarin

UX Design

http://www.e-naxos.com/blogwww.e-naxos.com

P a g e 1 | 435

Table des matires

Prsentation du Tome 7 - XAML ................................................................................................... 16

XAML .......................................................................................................................................................... 17

XAML Les bases .................................................................................................................................. 21

Introduction la premire partie du livre ................................................................................ 21

10 bonnes raisons de choisir XAML ............................................................................................ 22

Introduction : Choisir XAML ? ................................................................................................... 23

Raison 1 : Le modle de contenu riche ................................................................................. 26

Raison 2 : La liaison aux donnes ............................................................................................ 28

Raison 3 : les DataTemplates .................................................................................................... 35

Raison 4 : Le templating des contrles ................................................................................. 39

Raison 5 : Les triggers et le VisualStateManager ............................................................... 51

Raison 6 : Les Styles ...................................................................................................................... 58

Raison 7 : Les validations ............................................................................................................ 62

Raison 8 : Le graphisme .............................................................................................................. 74

Raison 9 : Desktop et Web ......................................................................................................... 81

Raison 10 : Tout le reste ! ........................................................................................................... 81

Conclusion ....................................................................................................................................... 82

9 raisons de plus d'utiliser XAML ! .............................................................................................. 83

Raison 1 ............................................................................................................................................ 83

Raison 2 ............................................................................................................................................ 84

Raison 3 ............................................................................................................................................ 84

Raison 4 ............................................................................................................................................ 84

Raison 5 ............................................................................................................................................ 84

Raison 6 ............................................................................................................................................ 84

Raison 7 ............................................................................................................................................ 84

Raison 8 ............................................................................................................................................ 84

Raison 9 ............................................................................................................................................ 85

Conclusion ....................................................................................................................................... 85

Les proprits de dpendance et les proprits attaches ............................................... 85

P a g e 2 | 435

Quest-ce ? ....................................................................................................................................... 86

Des proprits avant tout .......................................................................................................... 87

et des dpendances ................................................................................................................. 87

Et les proprits attaches ? ...................................................................................................... 88

Comment a marche ?................................................................................................................. 89

Proprit de dpendance ou proprit attache ? ........................................................... 93

Le BINDING Xaml Matriser sa syntaxe et viter ses piges ......................................... 115

Rfrences ...................................................................................................................................... 116

Code Source .................................................................................................................................. 117

Prambule ...................................................................................................................................... 118

Le Binding Xaml : Ange ou Dmon ? ................................................................................... 118

Le Binding ...................................................................................................................................... 120

Les dangers du Binding............................................................................................................. 145

Dboguer le Binding .................................................................................................................. 147

Conclusion ..................................................................................................................................... 216

StringFormat : une simplification trop peu utilise ............................................................. 217

De Silverlight Windows Phone 8 et WinRT .................................................................... 217

Le code la Papa......................................................................................................................... 218

StringFormat la rescousse .................................................................................................... 218

Support multi langue ................................................................................................................. 219

Le mini langage dans le mini langage dun langage ...................................................... 221

Dautres rfrences ..................................................................................................................... 223

Conclusion ..................................................................................................................................... 223

L'Element Binding ............................................................................................................................ 224

Mthode 1 dite lancienne ............................................................................................ 225

Mthode 2 dite du certifi ................................................................................................ 225

Mthode 3 dite XAML ........................................................................................................ 228

Contrainte de proprits (Coercion)......................................................................................... 229

La Contrainte de valeur (value coercion) ............................................................................ 229

Coercition et proprits CLR ................................................................................................... 230

P a g e 3 | 435

Coercition et proprits de dpendances .......................................................................... 233

WinRT et Silverlight ne supportent pas la coercition ..................................................... 235

Les mauvaises rponses au problme ................................................................................. 236

Une solution ? ............................................................................................................................... 240

Conclusion ..................................................................................................................................... 243

Custom Control vs UserControl ................................................................................................. 244

A lorigine .................................................................................................................................... 244

Composants visuels crer non visuellement .............................................................. 245

Apparition de la dualit ............................................................................................................ 246

Et Dieu cra la flemme ........................................................................................................... 247

et Microsoft Blend ............................................................................................................... 248

Lintrt de crer des Custom Controls plutt que des User Controls ? ................ 249

La cration visuelle des Custom Controls .......................................................................... 255

Conclusion ..................................................................................................................................... 262

Ecrire un UserControl composite ............................................................................................... 263

Command Link quoi cela ressemble ? ............................................................................. 263

Crer le UserControl ................................................................................................................... 264

Crer le look .................................................................................................................................. 264

Utiliser les behaviors .................................................................................................................. 267

Le code ............................................................................................................................................ 269

Le fonctionnel ............................................................................................................................... 270

Conclusion ..................................................................................................................................... 273

La mer, les proprits de dpendance et les user controls... .......................................... 273

La base du UserControl ............................................................................................................. 275

Hritage et proprit de dpendance ................................................................................. 275

La Solution ..................................................................................................................................... 277

Ouf ! ................................................................................................................................................. 279

Ecrire des Behaviors (composants comportementaux) ..................................................... 279

Qu'est qu'un Behavior ? ............................................................................................................ 279

Crer un Behavior ........................................................................................................................ 280

P a g e 4 | 435

Un Behavior Exemple : RotateBehavior ............................................................................... 281

Le code exemple .......................................................................................................................... 283

Conclusion ..................................................................................................................................... 287

Un Behavior ajoutant un effet de rflexion (avec WriteableBitmap) ............................ 288

Behavior Collection ......................................................................................................................... 290

My Behavior Collection ............................................................................................................. 290

Portabilit ....................................................................................................................................... 290

Les behaviors ................................................................................................................................ 291

Le code ............................................................................................................................................ 293

Conclusion ..................................................................................................................................... 293

Utiliser des diteurs de valeurs dans les behaviors ............................................................ 294

Conclusion ..................................................................................................................................... 296

Xaml : lier des boutons radio une proprit Int ou Enum ............................................ 296

Le cas dutilisation ....................................................................................................................... 296

Le problme .................................................................................................................................. 297

Les convertisseurs sont nos amis .......................................................................................... 299

Que faut-il convertir ? ................................................................................................................ 300

Le rle des paramtres des convertisseurs ........................................................................ 300

La rversibilit ............................................................................................................................... 301

Le code XAML ............................................................................................................................... 302

Le code du convertisseur .......................................................................................................... 303

Et avec un Enum ? ....................................................................................................................... 304

Conclusion ..................................................................................................................................... 304

Deux rgles pour programmer XAML ...................................................................................... 305

Programmation par Templates .............................................................................................. 305

Programmation par Properties ............................................................................................... 307

Conclusion ..................................................................................................................................... 309

Style ou Template ? ........................................................................................................................ 309

Les Templates ............................................................................................................................... 309

Les Styles ........................................................................................................................................ 309

P a g e 5 | 435

Pourquoi cette confusion entre styles et templates ? ................................................... 310

Un Template dans un Style ...................................................................................................... 310

La cassure du templating ......................................................................................................... 311

Docteur Template Binding ....................................................................................................... 312

Retour au Style ............................................................................................................................. 312

Un Template qui a du Style ! ................................................................................................... 313

Conclusion ..................................................................................................................................... 313

Le DataTemplateSelector .............................................................................................................. 314

DataTemplateSelector ............................................................................................................... 314

Comment fait WPF ? .................................................................................................................. 316

Emuler la fonction WPF sous Silverlight et Windows Phone 7/8 ............................... 319

Code Exemple ............................................................................................................................... 322

Conclusion ..................................................................................................................................... 323

La Grid cette inconnue si populaire... ....................................................................................... 324

La Grid ............................................................................................................................................. 325

Conclusion ..................................................................................................................................... 338

Mise en page dynamique et transitions .................................................................................. 338

La mise en page dynamique ................................................................................................... 339

Donner vie au cycle de vie de linformation ...................................................................... 340

Le Design, un gadget ? .............................................................................................................. 341

Et XAML ? ....................................................................................................................................... 342

Un peu darchologie ! .............................................................................................................. 342

Lhistoire prsente (an 2013) ................................................................................................... 346

Plus fou ? ........................................................................................................................................ 355

Conclusion ..................................................................................................................................... 356

Les Pixel shaders (effets bitmap) ......................................................................................................... 356

Les Pixel Shaders ......................................................................................................................... 357

Composer des effets pixel shaders ........................................................................................... 359

Conclusion ..................................................................................................................................... 360

Largeur de DataTemplate et Listbox ........................................................................................ 360

P a g e 6 | 435

Masques dopacit (OpacityMask) ............................................................................................ 363

Une scne de jeu ......................................................................................................................... 363

Crer des transparences ........................................................................................................... 364

Pas seulement pour les jeux ! ................................................................................................. 364

OpacityMask ................................................................................................................................. 364

Quelques astuces ........................................................................................................................ 365

The sky is the limit ! .................................................................................................................... 366

Contrles et zone cliquable, astuce... .................................................................................................. 366

Un contrle trs basique pour commencer ....................................................................... 366

Ca se complique... ....................................................................................................................... 366

Qu'est-ce qu'il se passe ? ......................................................................................................... 367

Mais comment rgler le problme ? .................................................................................... 367

Une "fausse" brosse .................................................................................................................... 367

Xaml Dynamique ............................................................................................................................. 368

Blend et les ressources de Design ............................................................................................. 370

Design-Time Resource Dictionary ......................................................................................... 370

Hard ou Soft ? ................................................................................................................................... 371

La ListBox Hard et la ListBox Smooth .................................................................................. 371

Smooth Scrolling vs Rough Scrolling ................................................................................... 373

To be optimized or not to be ? .............................................................................................. 373

La souplesse de Xaml, lintelligence de Blend et la ruse du dveloppeur .............. 373

Un monde presque parfait ....................................................................................................... 375

Un peu dalatoire dans les mouvements .............................................................................. 376

La tremblante du bouton ......................................................................................................... 376

Utiliser un gnrateur de nombre alatoire ...................................................................... 377

Dautres utilisations .................................................................................................................... 378

Dautres liens................................................................................................................................. 378

Conclusion ..................................................................................................................................... 379

Lequel est le plus fonc : Gray ou DarkGray ? ...................................................................... 379

La taille du cul des vaches ........................................................................................................ 379

P a g e 7 | 435

Une histoire plus vraie qu'on le pense ................................................................................ 379

Les couleurs sous XAML ........................................................................................................... 380

Et le cul des vaches ? .................................................................................................................. 381

Des origines encore plus lointaines ...................................................................................... 382

Un gris plus fonc que le gris fonc ..................................................................................... 382

Incroyable non ? .......................................................................................................................... 383

Quels outils et quelle chane graphique XAML ? ................................................................. 383

Tour d'horizon des outils .......................................................................................................... 384

Partons de la fin ........................................................................................................................... 385

Etc ! ................................................................................................................................................... 387

Sauts de ligne dans un Content.............................................................................................. 388

Conclusion ..................................................................................................................................... 389

SVG to Xaml ...................................................................................................................................... 389

Dessiner des horloges, un peu de trigonomtrie ! ............................................................. 390

La multi-slection dans les ListBox ........................................................................................... 393

Styles Cascads (BasedOn Styles) .............................................................................................. 394

Un peu de design avec Blend ..................................................................................................... 396

Lexemple ....................................................................................................................................... 397

Les trucs .......................................................................................................................................... 397

Le planisphre .............................................................................................................................. 399

Conclusion ..................................................................................................................................... 401

138 sons gratuits pour vos applications ................................................................................. 402

Limportance du son .................................................................................................................. 402

Des sons rsolument lectroniques ..................................................................................... 403

Un choix adapt aux cas les plus frquents....................................................................... 404

Conception et copyrights ......................................................................................................... 404

Le fichier Zip .................................................................................................................................. 405

Animations, Sons, Synchronisation, Ease in/out sous Blend ........................................... 405

AnimatableSoundPlayer. Ou comment synchroniser du son sur une animation .... 408

AnimatableSoundPlayer............................................................................................................ 409

P a g e 8 | 435

Dtection de touches clavier multiples ................................................................................... 413

La classe KeyLogger ................................................................................................................... 415

Problmatique .............................................................................................................................. 415

Solution ........................................................................................................................................... 415

Le code ............................................................................................................................................ 415

Conclusion ..................................................................................................................................... 420

Dtecter les touches Alt, Ctrl .................................................................................................. 420

XML/XAML pretty printer gratuit ............................................................................................... 421

XAML pour WPF ................................................................................................................................... 423

WPF et le focus dentre ............................................................................................................... 423

A lancienne ................................................................................................................................... 423

A la page......................................................................................................................................... 424

Modern UI pour WPF ..................................................................................................................... 424

mahapps.metro ............................................................................................................................ 425

Le designer cest vous ! ............................................................................................................. 425

Des styles et des contrles ...................................................................................................... 425

O trouver mahapps.metro ..................................................................................................... 426

Conclusion ..................................................................................................................................... 426

Un menu gratuit Tuile pour WPF ou comment se donner un air Windows 8 en

bureau classique ........................................................................................................................... 426

Un menu tuile............................................................................................................................ 427

Paramtrable et personnalisable ........................................................................................... 428

La construction du Menu ......................................................................................................... 428

Les difficults ................................................................................................................................ 428

Les entres de menu .................................................................................................................. 429

Le reste, cest dans le code :-) ................................................................................................. 430

Conclusion ..................................................................................................................................... 430

Des transitions de page la Windows 8 pour WPF (et Silverlight) ............................... 431

Ah Modern UI ! ............................................................................................................................. 431

Un conteneur Anim .................................................................................................................. 432

P a g e 9 | 435

Et le control Anim ? .................................................................................................................. 432

Le principe ..................................................................................................................................... 432

Le cadeau ....................................................................................................................................... 433

Conclusion ..................................................................................................................................... 433

Avertissements ..................................................................................................................................... 434

E-Naxos ................................................................................................................................................... 434

Table des Figures

Figure 1 - Projet Wpf10-1 ......................................................................................................................................................... 27

Figure 2 - La classe Synthtiseur ............................................................................................................................................ 29

Figure 3 - Projet Wpf10-2 ......................................................................................................................................................... 31

Figure 4 - La page 2 avec ses trois sliders........................................................................................................................... 33

Figure 5 - Le Tooltip en action ................................................................................................................................................ 37

Figure 6 - Projet Wpf10-3 ......................................................................................................................................................... 37

Figure 7 - Projet Wpf10-4 ......................................................................................................................................................... 40

Figure 8 - Projet Wpf10-4b ...................................................................................................................................................... 41

Figure 9 - projet Wpf10-4c ....................................................................................................................................................... 42

Figure 10 - La cration d'un Data Binding sous Blend .................................................................................................. 44

Figure 11 - la cration d'un Data Template sous Blend ................................................................................................ 45

Figure 12 - L'onglet Ressources sous Blend ........................................................................................................................ 46

Figure 13 - Le panneau Objets et Animations de Blend ................................................................................................ 46

Figure 14 -Cration d'un template (mode copie) ............................................................................................................. 48

Figure 15 - Cration d'une ressource de style ................................................................................................................... 49

Figure 16 - Affichage de la ProgressBar relooke par templating ............................................................................. 51

Figure 17 - Projet Wpf10-5 ...................................................................................................................................................... 54

Figure 18 - Le cadre "dtail" n'est pas actif ........................................................................................................................ 56

Figure 19 - Le VisualStateManager sous Blend ................................................................................................................ 57

Figure 20 - La cration d'un nouveau dictionnaire de ressources ............................................................................. 59

Figure 21 - Projet Wpf10-6 ...................................................................................................................................................... 62

Figure 22 - Comportement par dfaut d'une rgle de validation .............................................................................. 65

Figure 23 - L'effet du template de validation personnalis .......................................................................................... 68

Figure 24 - Amlioration du template de validation ...................................................................................................... 69

Figure 25 - projet Wpf10-7 ...................................................................................................................................................... 70

Figure 26 - La prise en charge de la rgle de validation mtier ................................................................................. 71

Figure 27 - ZAM3D en action .................................................................................................................................................. 76

Figure 28 - Exportation XAML d'un projet 3D sous ZAM3D ......................................................................................... 77

Figure 29 - L'intgration de la source 3D dans une page WPF sous Blend (Projet Wpf10-8) ......................... 78

Figure 30 - Animation de l'objet 3D (timeline et story-board sous Blend) ............................................................. 79

Figure 31 - Une application WPF utilisant la 3D ............................................................................................................. 80

P a g e 10 | 435

Figure 32 - Cration d'un TextBlock ..................................................................................................................................... 90

Figure 33 - Animation d'une proprit attache .............................................................................................................. 95

Figure 34 - Cration d'un UserControl Jauge .................................................................................................................. 100

Figure 35 - La conception visuelle du contrle ............................................................................................................... 100

Figure 36 - La proprit de notre contrle sous Blend ................................................................................................. 106

Figure 37 - La proprit manipule en XAML sous VS ................................................................................................. 107

Figure 38 - L'animation de la jauge .................................................................................................................................... 109

Figure 39 - Cration de l'animation sous Blend ............................................................................................................. 110

Figure 40 - Schma de principe du Binding ..................................................................................................................... 122

Figure 41 - Exemple de Binding minimaliste ................................................................................................................... 123

Figure 42 - Le mode OneTime .............................................................................................................................................. 126

Figure 43 - Le mode OneWay ............................................................................................................................................... 126

Figure 44 - le mode TwoWay ................................................................................................................................................ 127

Figure 45 - Convertisseur de valeur en action ................................................................................................................ 140

Figure 46 - Excution de test avec bogue de binding ................................................................................................... 157

Figure 47 - Point d'arrt XAML de dbogue de Binding .............................................................................................. 160

Figure 48 - Fentre de sortie Visual Studio avec erreur de binding ........................................................................ 160

Figure 49 - Binding direct ....................................................................................................................................................... 164

Figure 50 - binding sur une proprit ................................................................................................................................ 164

Figure 51 - Accs une sous proprit du DataContext ............................................................................................. 166

Figure 52 - Element Binding .................................................................................................................................................. 166

Figure 53 - StringFormat en US ............................................................................................................................................ 172

Figure 54 - ContentStringFormat ......................................................................................................................................... 175

Figure 55 - ContentStringFormat corrig .......................................................................................................................... 175

Figure 56 - Binding XML ......................................................................................................................................................... 182

Figure 57 - Binding XML depuis un fichier en ressource ............................................................................................. 183

Figure 58 - Binding sur le rsultat d'une requte Linq To XML ................................................................................. 186

Figure 59 - Binding to Self ...................................................................................................................................................... 187

Figure 60 TemplatedParent Binding ............................................................................................................................... 188

Figure 61 - Binding sur recherche d'anctre .................................................................................................................... 189

Figure 62 - Binding sur recherche d'anctre avec niveau de profondeur .............................................................. 191

Figure 63 - Binding PreviousData ....................................................................................................................................... 193

Figure 64 - Template Binding Cration du template sous Blend .......................................................................... 200

Figure 65 - Template binding - application du template 1/2 .................................................................................... 201

Figure 66 -Template binding - application du template 2/2 ..................................................................................... 201

Figure 67 - Template binding - Essai de changement de Background .................................................................. 202

Figure 68 - Template binding - cration du lien sous Blend ...................................................................................... 203

Figure 69 - Le bouton correctement templat ................................................................................................................ 203

Figure 70 - Le Collection Binding......................................................................................................................................... 206

Figure 71 - Priority Binding - 1/3 ........................................................................................................................................ 209

Figure 72 - Priority Binding - 2/3 ........................................................................................................................................ 209

Figure 73 - Priority Binding - 3/3 ........................................................................................................................................ 209

Figure 74 - Element binding en action .............................................................................................................................. 224

Figure 75 - Exemple de coercion de valeurs .................................................................................................................... 237

Figure 76 - Visuel d'un Command Link ............................................................................................................................. 263

file:///D:/EnCours/AllDotBlog/AllDotBlogXAML.docx%23_Toc376109059

P a g e 11 | 435

Figure 77 - Cration d'un UserControl sous Blend ........................................................................................................ 264

Figure 78 - Dfinition du visuel d'un UserControl ......................................................................................................... 265

Figure 79 - Icne pour Command Link .............................................................................................................................. 265

Figure 80 - Finalisation du visuel du UserControl ......................................................................................................... 266

Figure 81 - L'aspect du Command Link ............................................................................................................................. 266

Figure 82 - Animation et Timelime ..................................................................................................................................... 267

Figure 83 - Mise en place des behaviors ........................................................................................................................... 268

Figure 84 - les proprits de notre UserControl sous Blend ....................................................................................... 269

Figure 85 - Capture cran de l'animation "la mer" ....................................................................................................... 274

Figure 86 - Capture cran du RotateBehavior ................................................................................................................ 281

Figure 87 - RotateBehavior sous Blend .............................................................................................................................. 282

Figure 88 - Proprits du RotateBehavior sous Blend .................................................................................................. 282

Figure 89 - Capture du behavior de rflexion visuelle ................................................................................................. 289

Figure 90 - CustomPropertyValueEditor ........................................................................................................................... 294

Figure 91 - Exemple de fiche saisie avec boutons radios lis un Int .................................................................... 297

Figure 92 - capture cran - Appliquer un flou en temps rel .................................................................................... 358

Figure 93 - capture cran - Flou appliqu, palette dplace ..................................................................................... 358

Figure 94 - Composition des effets visuels ....................................................................................................................... 360

Figure 95 - Liste avec items templats non cadrs ........................................................................................................ 361

Figure 96 - Liste avec items templats et cadrs ............................................................................................................ 361

Figure 97 - capture de scne de jeu fictif utilisant les masques d'opacit ............................................................ 363

Figure 98 - Application d'un masque d'opacit .............................................................................................................. 365

Figure 99 - capture du programme de test XAML Dynamique ................................................................................. 368

Figure 100 - Ajout d'un dictionnaire de ressources sous Blend ................................................................................ 370

Figure 101 - capture - listes "hard" et "smooth" position de dpart ....................................................................... 372

Figure 102 - capture - dplacement "smooth" de la liste de droite ........................................................................ 372

Figure 103 - Crer un ItemsPanelTemplate ..................................................................................................................... 374

Figure 104 - Mode modification de Template sous Blend .......................................................................................... 375

Figure 105 - capture -Insertion d'un retour la ligne dans le Content d'une CheckBox ................................ 389

Figure 106 - Dessiner des horloges ..................................................................................................................................... 391

Figure 107 - Cercle trigonomtrique et Radians ............................................................................................................ 391

Figure 108 - Cercle trigonomtrique .................................................................................................................................. 392

Figure 109 - Gloubiboulga et MultiSlection ................................................................................................................... 394

Figure 110 - Exemple de styles "based on" ....................................................................................................................... 395

Figure 111 - Un peu de design.............................................................................................................................................. 397

Figure 112 - Le logo original ................................................................................................................................................. 398

Figure 113 - Le vaisseau spatial va dcoller !.................................................................................................................. 403

Figure 114 - Simulation d'un oscilloscope ........................................................................................................................ 405

Figure 115 - capture de l'application exemple utilisant du son synchronis l'animation ........................... 409

Figure 116 - capture de l'application exemple dtection mutlti touche ................................................................ 414

Figure 117 - Exemple de contrles Metro / Modern UI ................................................................................................ 425

Figure 118 - Exemple du menu tuile pour XAML ....................................................................................................... 427

P a g e 12 | 435

Table des exemples XAML

XAML 1 - Binding simple .......................................................................................................................................................... 30

XAML 2 - Binding sur des listes .............................................................................................................................................. 30

XAML 3 - Trigger de Binding ................................................................................................................................................... 32

XAML 4 - Element Binding ....................................................................................................................................................... 32

XAML 5 - Navigation .................................................................................................................................................................. 33

XAML 6 - Multi-Binding ............................................................................................................................................................. 34

XAML 7 - Instanciation de convertisseur ............................................................................................................................. 34

XAML 8 - Spcification du champ dans un Binding ........................................................................................................ 35

XAML 9 - Item Template ........................................................................................................................................................... 36

XAML 10 - DataTemplate ......................................................................................................................................................... 38

XAML 11 - Dtournement d'une barre de progression .................................................................................................. 41

XAML 12 - Templating des items d'une liste ..................................................................................................................... 53

XAML 13 - DataTrigger ............................................................................................................................................................. 55

XAML 14 - Dictionnaire de ressources et styles ................................................................................................................ 60

XAML 15 - Dfinition d'une brosse ........................................................................................................................................ 60

XAML 16 - Dfinition d'un style.............................................................................................................................................. 61

XAML 17 - Validation des saisies par dfaut ..................................................................................................................... 65

XAML 18 - Personnalisation de l'affichage des erreurs de validation ...................................................................... 68

XAML 19 - Personnalisation des rgles de validation des donnes ........................................................................... 73

XAML 20- Proprit jointes ...................................................................................................................................................... 91

XAML 21 - Animation de proprit ....................................................................................................................................... 94

XAML 22 - Databinding sur un champ nomm d'un objet .......................................................................................... 96

XAML 23 - Dfinition d'un UserControl ............................................................................................................................. 101

XAML 24 - Databinding avec StringFormat ..................................................................................................................... 108

XAML 25 - Instanciation d'un objet timer ......................................................................................................................... 125

XAML 26 - Espace de nom local ........................................................................................................................................... 125

XAML 27 - Binding TextBox et objet timer ....................................................................................................................... 125

XAML 28 - Binding avec Trigger de type Explicit ........................................................................................................... 129

XAML 29 - Instanciation d'un convertisseur de valeur ................................................................................................. 139

XAML 30 - Utilisation d'un convertisseur de valeur ...................................................................................................... 140

XAML 31 - Utilisation d'un convertisseur dfini comme Singleton.......................................................................... 144

XAML 32 - Binding simple ...................................................................................................................................................... 163

XAML 33 - Cration d'instances de tout type en ressources locales........................................................................ 164

XAML 34 - Utilisation d'un convertisseur de valeur avec paramtre ...................................................................... 171

XAML 35 - Fixer la culture dans un binding .................................................................................................................... 174

XAML 36 - ContentStringFormat ......................................................................................................................................... 175

XAML 37 - TargetNullValue pour grer les NULL dans un binding avec format ............................................... 176

XAML 38 - Utilisation d'un convertisseur multiples valeurs ................................................................................... 180

XAML 39 - Binding multiples valeurs sans convertisseur de valeur .................................................................... 180

XAML 40 - XmlDataProvider ................................................................................................................................................. 181

XAML 41 - Listbox lie une source XML par XPath .................................................................................................... 181

XAML 42 - ObjectDataProvider ............................................................................................................................................ 184

XAML 43 - Templating et Binding Relatif ......................................................................................................................... 188

P a g e 13 | 435

XAML 44 - Binding Relatif ...................................................................................................................................................... 189

XAML 45 - Binding Relatif avec FindAncestor ................................................................................................................. 190

XAML 46 - MultiBinding et Binding Relatif de type PreviousData ........................................................................... 195

XAML 47 - Trigger de DataTemplate .................................................................................................................................. 198

XAML 48 - Template Binding ................................................................................................................................................ 204

XAML 49 - Default binding .................................................................................................................................................... 206

XAML 50 - Priority Binding .................................................................................................................................................... 212

XAML 51 - Mauvais code Xaml ............................................................................................................................................. 218

XAML 52 - StringFormat ......................................................................................................................................................... 218

XAML 53 - StringFormat paramtr ................................................................................................................................... 219

XAML 54 - Exemples de formatage par StringFormat .................................................................................................. 221

XAML 55 - StringFormat et les nombres ........................................................................................................................... 222

XAML 56 - Element Binding ................................................................................................................................................... 229

XAML 57 - Exemple de dfinition de Style dans un dictionnaire de ressources .................................................. 260

XAML 58- Dfinition des DataTemplates de l'exemple ................................................................................................ 316

XAML 59 - Cration de la ressource locale pour le Selector....................................................................................... 318

XAML 60 - Utilisation du TemplateSelector dans une ListView ................................................................................ 318

XAML 61 - Grid, placement simple Capture cran..................................................................................................... 326

XAML 62 - Code Xaml du placement simple dans une Grid ...................................................................................... 327

XAML 63 - Dfinition des colonnes d'une Grid ............................................................................................................... 331

XAML 64 - Taille automatique de colonne d'une Grid - capture cran ................................................................. 332

XAML 65 - Colonnes de Grid en taille automatique ..................................................................................................... 332

XAML 66 - Colonnes de Grid en mode "toile" ............................................................................................................... 333

XAML 67 - Colonnes de Grid en mode proportionnel .................................................................................................. 333

XAML 68 - Colonnes de Grid automatiquement proportionnelles .......................................................................... 333

XAML 69 - Effet visuel de MaxWidth et MawHeight dans les colonnes d'une Grid ........................................... 334

XAML 70 - MaxWidth et MinWidth dans les colonnes d'une Grid ........................................................................... 334

XAML 71 - Mlanger les dfinitions de colonnes dans une Grid .............................................................................. 335

XAML 72 - Importante du mode "auto" dans les dfinitions de colonnes de Grid ............................................. 335

XAML 73 - Placement hors cellules ..................................................................................................................................... 336

XAML 74 - Placement hors cellules via un ColumnSpan ............................................................................................ 336

XAML 75 - Visual State Manager dans Blend .................................................................................................................. 343

XAML 76 - Easin et Easout sous Blend ............................................................................................................................... 344

XAML 77 - Rglage d'une fonction de ease sous Blend ............................................................................................... 345

XAML 78 - Accs au FluidLayout sous Blend ................................................................................................................... 346

XAML 79 - Accder aux LayoutStates ................................................................................................................................. 347

XAML 80 - Les LayoutStates sous Blend, rglages des animations .......................................................................... 348

XAML 81 - Effet des LayoutStates - capture cran......................................................................................................... 349

XAML 82 - Pixel Shaders sous Blend ................................................................................................................................... 350

XAML 83 - Catpure d'une transition par Pixel Shader ................................................................................................. 351

XAML 84 - Capture FluidMoveBehavior ............................................................................................................................ 352

XAML 85 - Rglage du FluidMoveBehavior ...................................................................................................................... 353

XAML 86 - Les animations du FluidMoveBehavior ........................................................................................................ 354

XAML 87 - Effet d'un FluidMoveBehavior ......................................................................................................................... 355

XAML 88 - Correction du cadrage des items templats .............................................................................................. 362

P a g e 14 | 435

XAML 89 - Dfinition d'une couleur 24 bit RGB ............................................................................................................. 380

XAML 90 - Dfinition d'une couleur 32 bit ARGB .......................................................................................................... 380

XAML 91 - Notation d'une couleur en scRGB .................................................................................................................. 381

XAML 92 - couleurs nommes .............................................................................................................................................. 381

XAML 93 - Schma de la chane graphique XAML ........................................................................................................ 384

XAML 94 - Insertion d'un saut de ligne dans une proprit Content...................................................................... 388

XAML 95 - Dfinition d'un style pour la classe Button................................................................................................. 395

XAML 96 - Dfinition d'un style "based on" pour la classe Button .......................................................................... 396

XAML 97 - Autre dfinition de style utilisant "based on" ............................................................................................ 396

XAML 98 - Utilisation du FocusManager........................................................................................................................... 424

Table des exemples de Code

Code 1 - Tooltip ............................................................................................................................................................................ 28

Code 2 - Initialisation d'un DataContext ............................................................................................................................ 30

Code 3 - ValidationRule ............................................................................................................................................................ 72

Code 4 - Proprit attache ..................................................................................................................................................... 89

Code 5 - Dfinition d'une proprit de dpendance ..................................................................................................... 102

Code 6 - Proprit CLR sur proprit de dpendance .................................................................................................. 103

Code 7 - Gestion du changement de valeur d'une proprit de dpendance ..................................................... 104

Code 8 - Callback de validation sur proprit de dpendance ................................................................................. 104

Code 9 - Lancement d'une animation ............................................................................................................................... 110

Code 10 - Dclaration d'une proprit jointe .................................................................................................................. 111

Code 11 - Dclarations internes du framework pour les proprits jointes ......................................................... 112

Code 12 - Hritage de valeur d'une proprit de dpendance ................................................................................. 113

Code 13 - Dfinition d'un objet timer ................................................................................................................................ 124

Code 14 - Mise jour d'une proprit binde en Explicit ........................................................................................... 129

Code 15 - Exemple de convertisseur de valeur ............................................................................................................... 138

Code 16 - Cration d'un point d'accs global tous les convertisseurs ................................................................ 142

Code 17 - Accs un convertisseur de valeur global ................................................................................................... 142

Code 18 - Dfinition d'un convertisseur de valeur sous la forme dun Singleton .............................................. 143

Code 19 - Configuration d'une trace de dbogue WPF ............................................................................................... 150

Code 20 - Faux convertisseur de valeur pour aider au dbogue d'un binding ................................................... 152

Code 21 - Dfinition d'une classe de test simple ........................................................................................................... 154

Code 22 - Faux Mvvm avec DataContext sur this .......................................................................................................... 155

Code 23 - Initialisation d'une liste d'objets de test ........................................................................................................ 155

Code 24 - Dfinition d'un binding erron ......................................................................................................................... 159

Code 25 - Convertisseur de valeur Double vers Int ....................................................................................................... 168

Code 26 - Convertisseur de valeur avec paramtre ...................................................................................................... 170

Code 27 - Correction gnrique de l'erreur de localisation du framework .NET ................................................ 173

Code 28 - Dfinition d'une classe de test exposant 2 proprits .............................................................................. 178

Code 29 - Dfinition d'un convertisseur de valeurs multiples ................................................................................... 179

Code 30 - Source de donnes via LINQ to XML .............................................................................................................. 185

Code 31 - Source de donnes de test alatoire............................................................................................................... 194

P a g e 15 | 435

Code 32 - Multi convertisseur avec diffrentiel de donnes ....................................................................................... 197

Code 33 - Mettre en vidence les proprits de binding ............................................................................................. 212

Code 34 - Correction du problme de localisation ........................................................................................................ 220

Code 35 - Un code correct mais pas utile ......................................................................................................................... 226

Code 36 - Une proprit CLR avec contrle des valeurs ............................................................................................. 231

Code 37 - Dfinition dune proprit de dpendance .................................................................................................. 234

Code 38 - TemplateVisualState ............................................................................................................................................ 255

Code 39 - TemplatePart .......................................................................................................................................................... 256

Code 40 - OnApplyTemplate ................................................................................................................................................. 258

Code 41 - Une proprit de dpendance .......................................................................................................................... 270

Code 42 - Mthode de navigation du UserControl ....................................................................................................... 272

Code 43 - Binding par code ................................................................................................................................................... 278

Code 44 - RotateBehavior ...................................................................................................................................................... 286

Code 45 - Utilisation de l'attribut CustomPropertyValueEditor ............................................................................... 295

Code 46 - Utilisation du convertisseur de valeur avec paramtre ........................................................................... 302

Code 47 - Code du convertisseur de valeur ..................................................................................................................... 303

Code 48 - Sticky Note, capture ............................................................................................................................................. 306

Code 49 - Le code du DataTemplate Selector ................................................................................................................. 317

Code 50 - Simulation d'un DataTemplateSelector ........................................................................................................ 320

Code 51 - Crer des lments XAML par leur nom de classe .................................................................................... 369

Code 52 - Placer un lment sur un cercle ...................................................................................................................... 393

Code 53 - Extrait du code de SynchedSoundPlayer ...................................................................................................... 411

Code 54 - Code du KeyLogger .............................................................................................................................................. 419

Code 55 - Dtection des touches "modificateurs" .......................................................................................................... 421

Code 56 - Exemple d'excution de PrettyXML ................................................................................................................. 422

Code 57 - Prise de Focus par code ...................................................................................................................................... 423

Code 58 - Ecoute de "OnLoaded" ........................................................................................................................................ 424

P a g e 16 | 435

Prsentation du Tome 7 - XAML

Bien quissu principalement des billets et articles crits sur Dot.Blog au fil du temps, le

contenu de ce PDF a entirement t ractualis et rorganis lors de la cration du

prsent livre lautomne 2013. Il sagit dune version indite corrige et jour qui

tient compte des volutions les plus rcentes autour de XAML, apparition et fin de

Silverlight, naissance de WinRT, continuit de WPF, variations entre Windows Phone 7

et Windows Phone 8. Bien que largement inspir des billets de Dot.Blog le prsent

Tome est celui qui a demand le plus de travail la fois par sa taille et par la

rorganisation des thmes, la rcriture et la mise en conformit des informations

pour en faire non pas un recueil de textes morts mais bien un nouveau livre

totalement dactualit ! Un norme bonus par rapport au site Dot.Blog ! Plus dun

mois et demi de travail a t consacr la ractualisation du contenu. Corrections du

texte mais aussi des graphiques, des pourcentages des parts de march voques le

cas chant, contrle des liens, et mme ajouts plus ou moins longs, cest une

vritable dition spciale diffrente des textes originaux toujours prsents dans le

Blog !

Cest donc bien plus quun travail de collection - dj long - des billets qui vous est

propos ici, cest un vrai nouveau livre sur XAML qui offre une vision jour sa date

de parution. Mieux, aucun livre franais ni mme amricain ne traite de XAML sous un

tel angle. Ce livre contient parfois dautres mini livres, comme celui sur le Binding

XAML. Aucun texte existant nest all si loin sur un tel sujet ma connaissance et ce

nest quun exemple parmi prs de 440 pages A4 et 113 000 mots ! Le standard est

denviron 250 mots par pages pour un livre. Cest bien un livre gratuit denviron 452

pages sans les illustrations (et elles sont nombreuses) qui vous est offert (donc plus

proche de 500 pages) ! On considre quun roman comporte 40.000 mots, le prsent

livre quivaut ainsi prresque 3 romans Et ce nest quun Tome parmi la dizaine

publie dans la srie ALL DOT BLOG !

Astuce : cliquez les titres pour aller lire sur Dot.Blog larticle original et ses

commentaires, vous pourrez dailleurs vous amuser comparer les textes et prendre la

mesure des modifications ! Tous les autres liens Web de ce PDF sont fonctionnels,

nhsitez pas les utiliser (certains sont cachs, noms de classe du Framework par

exemple, mais ils sont fonctionnels, promenez votre souris).

P a g e 17 | 435

XAML

eXtensible Application Markup Language

Prononcer Zammel

XAML est un langage de description de mise en page utilisant un formalisme XML.

Les balises indiquent les instances de classes crer, les attributs fixant les

paramtres de ces instances. XAML se lit de haut en bas, quand une balise en

contient une autre la

premire est le

parent visuel de

linstance cre par la

seconde.

XAML a t cr pour

le framework de

cration

dapplications dites

riches WinFX qui deviendra officiellement .NET 3.0 associ WPF lors de la sortie

de Windows Vista.

Cet OS mal aim en raison de son exprience utilisateur assez lourde a fait quelque

peu capoter lentre en scne triomphale de WPF et XAML, avance pourtant

extraordinaire puisque XAML est un systme de description dUI entirement

vectoriel en 2D et 3D grant le data Binding et particulirement bien taill pour faire

face au dfi la fois des nouvelles interfaces, de limportance de lUX et du

support de tous les form-factors (le vectoriel tant sur ce point larme absolue).

Le dsamour de Vista a terni ce qui aurait d tre un raz-de-mare tellement XAML

et WPF associs .NET btissent une plateforme puissante pour dvelopper des

logiciels modernes. Cela tait vrai en 2006 la sortie de WPF 3.0 et cela reste vrai

avec WPF 4.5 sorti en 2012 tel point que XAML lui-mme est aujourdhui intgr

lOS au sein de WinRT sous Windows 8.x et suivants. Il se glisse mme au cur de

Windows Phone. Une nouvelle version de WPF serait en prparation dailleurs.

WPF/E, comprendre WPF Everywhere - cest--dire WPF Partout sera plus connu

sous le nom de Silverlight. Version allge de WPF, Silverlight utilise le principe dun

plugin pour browser Internet qui offre une portabilit transparente du mme code

P a g e 18 | 435

sous PC et Mac. Les normes avantages de Silverlight sur HTML font que sa

popularit deviendra vite suprieure WPF regard avec un peu de mfiance

lpoque par beaucoup de DSI qui ne comprenaient pas alors le changement de

paradigme quannonait XAML pour les applications, mme de bureau. En revanche

la mode de Flash sur le Web rendra plus vidente ladoption de Silverlight au sein des

mmes entreprises pour leurs Intra ou Extra Net.

Hlas Silverlight ne rsistera pas la fois la haine de Jobs ct Apple pour Flash et

les plugins de ce type, et celle de C#/XAML par Sinofsky ct Microsoft. HTML 5 ny

est pour rien dans tout a, car au moment o lui aussi croyait devenir universel ce

sont les units mobiles qui ont boulevers le march rendant les applications natives

les vraies reines de ce nouveau monde conqurir. Silverlight aurait pu tre la

technologie de ce dernier, Microsoft a dcid de la garder pour Windows Phone

uniquement.

En disparaissant Silverlight laisse un grand vide car aucune technologie vectorielle de

ce niveau nest disponible pour le Web. Toutefois il aura particip rendre plus

populaire XAML.

La fin de Silverlight en tant que plugin universel a nanmoins laiss XAML se

rpandre sur Windows Phone et sur WinRT o il est le meilleur choix pour crer des

applications sophistiques.

Mieux, la fin de Silverlight pourrait bien marquer le retour de WPF !

Car si Windows Phone et WinRT utilisent XAML, il sagit de plateformes dont le parc

est encore trs restreint ce jour. Pour balayer large il nexiste que WPF.

Car WPF est la seule plateforme moderne permettant de dvelopper des logiciels

sans contrainte, sans les taxes du Windows Store et surtout pouvant fonctionner sur

quasiment 100% du parc Windows.

Seul WPF peut couvrir les 31 % de Windows XP + les 4 % de Vista + les 47 % de

Windows 7 + les 9 % de Windows 8.x, soit 91 % du parc Windows fin 2013.

Cela cre une situation bien particulire, Microsoft dun ct axant toute sa

communication sur un OS qui pse moins de 10 % du parc plus dun an aprs sa

sortie, de lautre des entreprises et des utilisateurs ayant des besoins rels en total

dconnexion technique avec WinRT.

P a g e 19 | 435

On comprend alors la frilosit des dcideurs face un OS qui a du mal convaincre,

mme sur tablette ou smartphone, mis en place par un directeur qui a t mis la

porte (Sinofsky) sous les offices dun PDG (Ballmer) qui lui-mme a t pouss vers la

sortie mais qui est toujours l (jusquen aot 2014 au maximum)

Quels seront les dcisions du prochain PDG de Microsoft ? Quelles ruptures comme

celle de Silverlight ou de Windows Phone 7 devront-elles tre subies ? Personne nen

sait rien du tout. Et le doute engendre la peur lgitime de se tromper. Et cette

dernire engendre limmobilisme.

Pendant ce temps (perdu en choix discutables et en luttes intestines chez Microsoft)

Android a pris 80% du march des units mobiles, mais cest une autre

histoire (mme si elle nous oblige penser le dveloppement en cross-plateforme,

voir le Tome 5 de ALL DOT BLOG) !

La seule certitude qui merge de tout cela est que sous environnement Microsoft

XAML et C# restent des valeurs sres pour couvrir 100% du p