Windows Presentation Foundation

Windows Presentation Foundation : La nouvelle gnration dinterfaces graphiques

Windows Presentation Foundation : La nouvelle gnration dinterfaces graphiquesAvec larriv de Windows VISTA, on assiste lapparition des nouvelles technologies qui lui sont lies. Que ce soit au niveau affichage (avec Windows Presentation Foundation) ou bien communication (avec Windows Communication Foundation), en passant par le systme de fichier (Windows File System, WinFS), beaucoup de choses changent. Cet article a pour but de vous parler de Windows Presentation Foundation, le systme graphique qui sera inclut dans Windows VISTA.

Thomas LEBRUN http://morpheus.developpez.com

1


1. Windows Presentation Foundation : Quest-ce-que cest ?Windows Presentation Foundation (WPF), anciennement connu sous le nom de code Avalon, est le nouveau systme daffichage graphique de Microsoft Windows, et devrait tre intgr directement dans Microsoft Windows VISTA. WPF fait partie de WinFX, un nouvel ensemble dAPI entirement manages qui seront introduites dans Microsoft Windows VISTA pour remplacer les API Windows actuelles. Voici une image qui vous permettra, je lespre, de bien comprendre larchitecture de WPF :

WPF repose sur 4 grands axes : 1. Une approche unifie de linterface utilisateur, des documents et des animations : WPF a pour but de devenir un Framework de prsentation unifi, qui intgre et gre toutes les parties dune interface utilisateur (animations, images, contrles, etc..). 2. Un moteur de composition bas sur des vecteurs intgrs : WPF utilise un moteur dexcution (Runtime) de composition afin dexpdier les requtes de rendu de linterface graphique au bon composant logiciel ou matriel, par exemple les APIs Windows ou votre carte vido compatible DirectX. WPF utilise donc toute la puissance de votre ordinateur, au travers de votre carte graphique, et plus prcisment de Direct3D, pour vous fournir un affichage vectoriel. Thomas LEBRUN http://morpheus.developpez.com

2


3. Un modle de programmation dclarative : WPF tente de rduire lcart quil existe entre le dveloppement Web et le dveloppement dapplications Windows, en apportant la puissance de la programmation dclarative (le XAML) au dveloppement dinterfaces graphiques Windows, ce qui mne une sparation distincte entre le rle du designer et celui du dveloppeur. Les designers sont donc directement impliqus dans le dveloppement des applications. 4. Une facilit de dploiement : WPF permet aux administrateurs de dployer et grer les applications de manires scurises.

Concrtement, Windows Presentation Foundation vous permettra de dvelopper des applications intuitives au design innovant.


3


2. Les pr-requisPour pouvoir utiliser une application WinFX, il ne vous faut rien de plus que le Runtime WinFX. La CTP de Fvrier 2006 de ce Runtime est disponible cette adresse : http://www.microsoft.com/downloads/details.aspx?FamilyId=F51C4D96-9AEA-474F-86D3172BFA3B828B&displaylang=en Si vous souhaitez pouvoir dvelopper des applications WinFX, il va vous falloir plusieurs choses : 1. Tout dabord, il vous faut le Runtime WinFX. L encore, la version de Fvrier 2006 est disponible : http://www.microsoft.com/downloads/details.aspx?FamilyId=F51C4D96-9AEA474F-86D3-172BFA3B828B&displaylang=en 2. Un outil de dveloppement : mme si vous pouvez tout faire la main, et compiler en ligne de commande, je vous recommande vivement dutiliser un IDE (Integrated Development Environment ou Environnement de Dveloppement intgr, en franais) qui vous permettra de bnficier des fonctionnalits comme le glisser/dposer de composants, etc.Pour cela, je vous recommande Visual Studio 2005. A noter que les versions Express de Visual Studio sont disponibles ici : http://msdn.microsoft.com/vstudio/express/default.aspx. Pour rappel, les versions Express sont des versions de Visual Studio qui sont limites un seul langage qui possdent des fonctionnalits rduites mais largement suffisantes. 3. A prsent, il vous faut tlcharger et installer le SDK de Windows. Celui-ci contient des API qui vous seront ncessaires pour vos dveloppements, ainsi que de la documentation, des exemples et des outils. La version de Fvrier 2006 du SDK de Windows peut-tre tlcharge ici : http://www.microsoft.com/downloads/details.aspx?FamilyId=9BE1FC7F-0542-47F188DD-61E3EF88C402&displaylang=en 4. Une des choses dont vous aurez probablement besoin (mais cela nest pas obligatoire), est un ensemble doutils de dveloppement pour WinFX. Ces outils sont, par exemple, des Template de projet pour Visual Studio, lintellisense XAML dans Visual Studio, etc A noter quun des outils prsents dans ce package nest autre que Cider, le designer dinterface graphique de WPF ! (On notera que mme si le produit est toujours en dveloppement, on peut tout fait commencer lutiliser pour se faire une ide de ce quil donnera une fois termin). Pour tlcharger et installer ces outils de dveloppement (ou tout du moins la version de Fvrier 2006), rendez-vous cette adresse : http://www.microsoft.com/downloads/details.aspx?FamilyId=AD0CE56ED7B6-44BC-910D-E91F3E370477&displaylang=en 5. Enfin, si vous travaillez avec Windows Worflow Foundation (un ensemble constitu dun modle de programmation, dun moteur de workflow et doutils pour dvelopper rapidement des applications de workflow sur Windows), alors vous voudrez sans doute installer, en plus, les extensions de Visual Studio 2005 pour Windows Workflow Foundation. La version de Fvrier 2006 de ce package est tlchargeable sur le site de Microsoft : http://www.microsoft.com/downloads/details.aspx?FamilyId=A2151993-991D-4F58A707-5883FF4C1DC2&displaylang=en


4


3. Les outils pour dvelopper des applications WPF a. Le XAML :Le XAML (eXtensible Application Markup Language) est un modle de programmation dclarative .NET. Cest donc un langage bas sur le XML (eXtensible Markup Language), qui fonctionne sur le principe de la srialisation de graphe dobjets. Comme beaucoup de langage .Net, on y retrouve donc : Des espaces de nom (namespaces en anglais), Des classes, Des proprits, Un mapping des vnements (Appel dans le code XAML et dfinition dans le code C#, VB.NET, etc), Etc Une chose importante savoir : XAML est un langage de description qui nest pas ddi WPF ! Pour vous permettre de mieux visualiser ce quest le XAML, voici un bout de code :

Dans cet exemple, on voit bien la dclaration des espaces de nomxmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

Ainsi que la dclaration de la classe :x:Class="DemosWPF.Window1"

Quant aux proprits, elles correspondent tout simplement aux attributs des lments du code XAML. Par exemple, lattribut Title de llment Window correspond tout simplement la proprit Title de la classe Window.Title="DemosWPF"


5


Il est galement bon de savoir que tout ce que vous dveloppez avec du code XAML peuttre redvelopp avec du code, comme le montre cette image :

b. Cider :Cider est le nom de code du designer dinterface graphique de WPF. Celui-ci, toujours en version Beta, sera inclu dans Orcas (nom de code de la prochaine version de Visual Studio). Comme la plupart des designers dinterface graphique, Cider offre la possibilit dutiliser le glisser/dposer (Drag&Drop) pour placer vos composants (boutons, labels, listbox, etc.) au sein de votre formulaires. Voici quelques captures dcran de Cider ( ce jour) et des diffrents contrles qui sont dores et dj pris en charge : La fentre principale :


6


La fentre des contrles utilisables :

La fentre de Proprits :

Cider apparat donc comme un outil la fois simple et trs puissant, qui vous permet de dvelopper, rapidement, des interfaces graphiques complexes.

c. La gamme Expression :Nous lavons vu prcdemment, un des objectifs de WPF est de permettre une meilleure collaboration entre les designers et les dveloppeurs. Pour cela, Microsoft a sortit une nouvelle gamme de produits : la gamme Expression. Cette gamme est compose de trois logiciels destins, principalement, aux designers et aux graphistes :

- Expression Graphic Designer (nom de code : Acrylic) : Cest un logiciel ax plus particulirement sur le traitement dimages vectorielles ou bitmap.


7


- Expression Interactive Designer (nom de code : Sparkle) : Il vous permettra de crer des applications simples, innovantes et esthtiques, avec une pointe dinteractivit.

- Expression Web Designer (nom de code : Quartz) : Grce cet outil, vous serez en mesure de crer et dvelopper des sites Web bass sur les standards.

Voici dailleurs plusieurs aperus de Sparkle : La fentre principale :


8


Une partie de lespace de travail :

Une autre partie de lespace de travail :

Et un aperu de la fentre principale (vue du code) :

Pour plus dinformations, visitez le site Web de la gamme Expression : http://www.microsoft.com/products/expression/fr/default.mspx. Thomas LEBRUN http://morpheus.developpez.com

9


4. Dvelopper des applications WPF a. Les contrles WPF :De manire gnrale, les contrles sont utiliss pour visualiser des donnes et pour permettre lutilisateur dinteragir avec lapplication. Comme souvent, les contrles WPF possdent des proprits, des vnements et des mthodes. On retrouve beaucoup de contrles standards dans WPF : les boutons, les labels, les textbox, etc Bien sur, la grande nouveaut des contrles WPF est quils peuvent contenir nimporte quoi : on a donc la possibilit de personnalis compltement le rendu dun contrle WPF. En effet, ce sont des lments fonctionnels auquels on applique un style et quil est possible de combiner avec dautres grce au systme de template. Par exemple, le bout de code suivant permet dinsrer simplement une image dans un bouton :

Voici une image montrant le rsultat de ce bout de code :

On a russi personnaliser un bouton de faon trs simple et avec trs peu de lignes de code ; ce qui nous aurait pris beaucoup plus de temps si nous avions du faire la mme chose en C# ou en VB.NET, dans une application WindowsForms classique. Afin de bien comprendre comment fonctionnent les contrles WPF, je vous recommande de regarder cette image (extraite des slides de la PDC 2005) :


10


Ici, vous avez une description complte de larchitecture des contrles, dans Windows Presentation Foundation. Voyons cela plus en dtails : Laffichage, sous WPF, est donc gr par deux threads : le premier soccupe de crer les lments primitifs qui vont servir laffichage, tandis que le deuxime se charge de les afficher lcran. Le premier thread est entirement manag et le deuxime est natif ! On voit donc que tous les contrles WPF sont en fait constitus dautres contrles. Par exemple, une ListBox nest quun StackPanel accompagn dun SrollViewer. On peut donc dcomposer chaque contrle WPF sous forme de graphes dobjets, jusqu' obtenir un ensemble de donnes qui seront affiches lcran.

La proprit Content des contrles WPF remplace la proprit Text des contrles classiques , mais vous permet bien plus. En effet, cest grce cette proprit Content, qui est mappe sur les enfants dun nud XAML, que vous allez pouvoir faire ce que vous voulez avec votre contrle : ajouter une image, une vido, etc. Vous allez mme pouvoir aller plus loin. En effet, si vous tudiez bien cette proprit, vous vous rendrez compte quelle est de type object. Ainsi, vous avez la possibilit de lui assigner nimporte quel objet (objet mtier, etc..).

b. Les ressourcesChaque composant WPF possde une proprit Resources qui, comme son nom lindique, permet de dfinir les ressources qui lui seront associes. Par ressources, on entend beaucoup de choses : o les styles (dfinissent lapparence dun contrle), o les templates (permettent de dfinir comment afficher les donnes affectes un contrle), o les animations o les transformations (rotation, etc) Ces ressources vous permettent davoir accs et donc de rutiliser des objets dfinis pour lensemble de votre application Voici un exemple dans lequel on dfinit, dans les ressources dune Grid, le style qui sera appliqu des contrles de type Button. Si vous ne comprenez pas ce code, ne vous inquitez pas : nous y reviendrons plus en dtails juste aprs, dans la partie traitant des Styles.

Ainsi, on se rend compte que les ressources de nos contrles peuvent facilement tre assimiles aux fichiers CSS des applications Web : bien que toujours interne notre application, on externalise tout ce qui concerne le design/lapparence pour se concentrer uniquement sur les fonctionnalits. Il nest plus ncessaire de spcifier, pour chaque type de contrle, le style ou le template appliquer : en passant par les ressources, vous pouvez dfinir un style (ou un template) spcifique chaque type de contrle, et lappliquer lors de la dclaration de ceux-ci.

c. Les stylesNous lavons vu prcdemment : les styles permettent de dfinir lapparence de vos contrles. Nous avons galement vu comment dfinir un style : Au moyen de llment Style, on indique que lon veut dfinir un style. Ensuite, cest trs simple : il ne nous reste plus qu utiliser des Setter, qui vont nous servir dfinir la proprit modifier (grce la proprit Property) et la valeur lui attribuer (proprit Value). Et voil, partir de ce moment l, il ne vous reste plus qu attribuer, un de vos contrles, le style que vous venez de dfinir. Pour cela, il vous faut juste lier la proprit Style de votre contrle au style que vous venez de crer.

Notez bien que pour trouver quel style on veut se lier, nous devons : o utiliser lattribut Key de notre style o utiliser lattribut TargetType, qui nous permet dindiquer pour quel type de contrle ce style sera valable. Voyons voir ce que cela donne, en image :

Lexemple ici nest pas des plus pertinents, mais il a lavantage de vous permettre de bien vous rendre compte du rendu de lapplication du style notre bouton.


12


Autre point important : Vous avez la possibilit de crer un style partir dun autre style, ce qui a lnorme avantage de vous permettre de ne pas refaire plusieurs fois le mme travail et de pouvoir partir sur une base dj existante. Pour cela, il vous faudra utiliser lattribut BasedOn, lors de la dclaration de votre style, et lui indiquer le style sur lequel vous souhaitez vous baser. Voyons un exemple :

Dans cet extrait de code, on voit bien que lon redfinit un style, qui porte la cl MonStyleHerite, et qui se base sur notre style prcdemment dfinit, MonStyleDePolice. Le code qui utilise ce style, tout ce quil y a de simple :

L encore, le rsultat est rapidement visible, la preuve en image :

On peut donc affirmer que les styles, dans WPF, savrent trs utiles et trs puissants et permettent de raliser des applications dont vous pouvez entirement modifier le design/lapparence.

d. Les templatesLes Templates sont utiliss pour dcrire la structure visuelle dun contrle. Pour cela, les contrles WPF prsentent la proprit Template, qui vous permettra donc dassocier un template, que vous avez dfinit, un contrle. Pour appliquer un template, la syntaxe est la mme que pour appliquer un style :

Dans cet exemple, nous ajoutons un Trigger qui sera dclench lorsque la proprit IsMouseOver passera vrai. Dans ce cas, on change la proprit Background de notre bouton, pour la faire passer rouge. Bien entendu, vous avez la possibilit dutiliser plusieurs Triggers dans un style, ceci afin de permettre la modification de multiples proprits lors du changement des valeurs de diffrentes proprits :


16


Vous pouvez galement ajouter des triggers qui ne sexcuteront que sous certaines conditions. Pour cela, vous devez utiliser un MultiTrigger, dans lequel vous spcifier, dans llment Conditions, les diffrentes conditions qui doivent tre remplies pour que votre trigger sexcute :

Dans cet exemple, on sassure que les proprits IsMouseOver et IsFocused sont bien vrais. Si ces deux conditions sont bien remplies, alors on change la proprit Foreground de notre bouton. Prenez garde ne pas oublier que ces types de triggers ne sexcutent que si toutes les conditions sont vrifies : dans le cas contraire, le trigger ne fonctionnera pas. Aprs avoir vu les triggers de proprits, attardons nous un instant sur les triggers de donnes (DataTriggers) pour voir quel point ils peuvent savrer pratiques. En effet, si les triggers de proprits ne peuvent effectuer de vrifications que sur les Property Dependencies , les DataTriggers ont la possibilit de pouvoir effectuer des vrifications sur nimporte quelle proprit dun objet .NET. Tout comme les DataTemplate, les DataTriggers sont utiliss avec les objets non visuels : ils peuvent donc vrifier les proprits de nimporte quel objet .NET non visuel . Reprenons notre classe MyPhoto et imaginons, par exemple, que lon souhaite effectuer une action lorsque lidentifiant dune photo est gal une valeur donne. Dans ce cas, on ne peut pas utiliser de Trigger simple, pour la simple et bonne raison que MyPhoto nest pas un objet que lon peut reprsenter visuellement : la proprit IdPhoto (qui sert connaitre lidentifiant) est donc une proprit qui, elle aussi, ne peut tre dfinie visuellement. Par consquent, si lon souhaite faire une vrification sur une proprit de ce type, il nous faut utiliser un DataTrigger. Cette notion pouvant paraitre complique, voici un exemple qui vous aidera, je lespre, mieux comprendre de quoi il sagit :

Dans cet exemple de DataTrigger, on fait un test sur la proprit IdPhoto de notre source de donnes. On teste, en effet, si la valeur de cette proprit est gale un. Dans ce cas, on fait changer la couleur du texte de notre bouton. On voit tout de suite que, si les triggers de proprits agissent sur le style, lapparence des objets, les triggers de donnes eux agissent sur le contenu des objets. Thomas LEBRUN http://morpheus.developpez.com

17


Le dernier point quil nous reste voir propos des triggers concerne les EventTriggers, autrement dit les triggers qui sont dclenchs suite un vnement. En effet, ds quun vnement survient, tel que lvnement Click dun bouton, un EventTrigger est dclench en rponse cet vnement. Pour bien comprendre cela, voyons un exemple simple :

Que se passe-t-il dans ce bout de code ? La rponse est simple : on commence par dclarer un bouton, de manire dclarative (cest-dire avec du code XAML), puis on dfinit certaines de ses proprits. Ensuite, on ajoute la collection de Triggers de ce bouton, un nouveau trigger, qui surviendra lors de lvnement Button.Click, autrement dit lors du clic sur le bouton. Dans ce trigger, on dfinit ce quil va se passer (autrement dit, on indique la ou les actions effectuer), au moyen de llment Actions de notre trigger. Nous allons prsent voir un autre lment important dans lutilisation des EventTriggers, les StoryBoards.

f. Les storyboardsLes StoryBoards sont des lments XAML qui vous permettent de dfinir un ensemble dactions. On peut donc dire que les Storyboards sont un ensemble danimations/transformations, qui vous offre la possibilit de pouvoir dfinir le temps que doivent durer vos animations, la proprit modifier sur votre objet, etc. Bref, les StoryBoards vous permettent un paramtrage complet de vos animations.


18


Attardons nous maintenant sur deux proprits intressantes de llment StoryBoard : La proprit TargetName : Cette proprit est utilise pour dfinir la cible, autrement dit lobjet, que lon dsire manipuler. Il peut sagir dun lment, dune rotation, etc La proprit TargetProperty Cette proprit, quand elle, est utilise pour indiquer, sur notre cible, quelle est la proprit que lon souhaite manipuler : un angle, une taille, etc.

Afin de bien comprendre ces deux proprits, voici un exemple :

On a donc repris le code utilis prcdemment, mais nous y avons ajout plusieurs lments : un lment BeginStoryboard, utilis pour dmarrer un Storyboard un lment Storyboard, qui servira indiquer que lon souhaite dclarer un nouveau Storyboard Dans la dclaration de notre lment Storyboard, nous avons utilis les deux proprits vues juste avant, afin dindiquer avec quel objet nous dsirons travailler, et plus prcisment quelle proprit de cet objet nous allons modifier lors de lexcution de notre Storyboard. Bien entendu, llment Storyboard possde dautres proprits intressantes, que nous allons voir tout de suite : o AutoReverse : Indique si, une fois arriv la fin du StoryBoard, lanimation doit revenir sa position initiale, o BeginTime : Indique quel moment le StoryBoard doit dmarrer, o Duration : Vous permet de spcifier combien de temps doit durer votre animation Thomas LEBRUN http://morpheus.developpez.com 19


Bien sr, il existe dautres proprits mais le but de cet article nest pas de vous en faire la liste. Maintenant que nous avons vu quoi servent les StoryBoards, nous allons voir quels sont les lments quil est commun dutiliser afin danimer vos boutons, TextBox, etc Vous pouvez utiliser, pour cela, des animations et des transformations, que nous allons voir un peu plus en dtails maintenant.

g. Les animationsDans vos applications WPF, vous avez la possibilit dutiliser des animations, qui vous permettront danimer vos contrles. Par exemple, vous allez pouvoir faire en sorte que pendant 10 secondes, la taille dun bouton augmente, etc. Bref, les possibilit offertes par les animations WPF sont normes, et ne doivent pas tre ngliges si vous voulez raliser des applications au design et linteraction utilisateur innovante ! Pour manipuler un lment, et plus prcisment la proprit dun lment, vous devez utiliser les deux proprits que nous avons vues prcdemment : TargetName et TargetProperty. Voici un exemple, trs simple, danimation :

Ici, on utilise une DoubleAnimation pour modifier la valeur de la proprit Width de notre contrle nomm m_BoutonAnime. On notera au passage lutilisation de la proprit SpeedRatio, qui vous permet de spcifier quelle vitesse doit sexcuter votre animation. Voici une liste des diffrentes animations possibles que vous pouvez utiliser dans vos applications WPF : o ByteAnimation : Ce type danimation vous permet danimer la valeur dune proprit de type Byte, o ColorAnimation : Vous permet danimer la valeur dune proprit de type Color, o DoubleAnimation : Est utilis pour animer la valeur dune proprit de type Double, o Etc L encore, la quantit danimation possible est incroyablement longue : cest pourquoi je ne vous en montre que quelques-unes.


20


Nous allons maintenant voir les KeyFrames, qui peuvent tre utiliss avec vos animations. Les KeyFrames sont utiliss pour dfinir des tapes lors de votre animation. En effet, vous allez pouvoir dfinir une animation qui dure, au total, 10 secondes, et indiquer quune animation doit se produire 2 secondes, une autre animation doit tre dclenche 7 secondes, etc. Tout cela, en utilisant des KeyFrames, sorte de point darrt de vos animations. Voyons une animation qui utilise les KeyFrames :

Etudions cette animation dun peu plus prs : Nous utilisons une DoubleAnimationUsingKeyFrame, cest--dire une animation dans laquelle nous allons pouvoir spcifier des tapes intermdiaires. Sur cette animation, nous spcifions une LinearDoubleKeyFrame, qui vous permet danimer la valeur dune proprit de type Double, suivant une interpolation linaire. Nous prcisons, pour cette tape, la valeur qui doit tre atteinte (dans notre cas 360), au moyen de lattribut Value. Enfin, grce lattribut KeyTime, on indique que cette valeur doit tre attente au bout de la valeur indique (ici, deux secondes). Comme vous pouvez le voir, les KeyFrames sont relativement simples utiliser. Et, dans une animation qui utilise les KeyFrames, rien ne nous empche dutiliser plusieurs tapes en mme temps :

Maintenant, si vous voulez utiliser plusieurs animations en mme temps, vous serez tentez dcrire quelque chose comme cela :

Ici, rien de bien extraordinaire : on dclare deux DoubleAnimation, on affecte la valeur de leurs attributs et on regarde le rsultat. A la fin de la premire animation, la deuxime se lance, ce qui parait logique. Mais comment faire si vous souhaitez lancer les deux animations en mme temps, en parallle ? La rponse, qui nest pas vidente premire vue, passe par lutilisation dun objet que nous navons pas encore vu dans cet article : un ParallelTimeline.


21


Grce au ParallelTimeline, vous avez la possibilit denglober des animations qui sexcuteront en parallle. Voyons ce que cela donne, si on reprend lexemple prcdent :

A premire vue, pas de grandes diffrences, mis part lutilisation de llment ParallelTimeline. Cependant, si vous excutez ce bout de code, vous vous apercevrez que les deux animations saniment en mme temps, et que la seconde nattend pas la fin de la premire pour pouvoir dmarrer.

Maintenant que nous avons vu les animations, et leur fonctionnement, jetons un il sur les transformations.

h. Les transformationsLes transformations sont lautre lment que vous pouvez utiliser si vous souhaitez donner plus de vie vos applications. Il existe plusieurs types de transformation. On peut, par exemple, citer : o les TranslateTransform o les RotateTransform o les ScaleTransform o les MatrixTransform o les SkewTransform o les TransformGroup Voyons cela dun peu plus prs ... Les TranslateTransform, tout dabord, sont utilises pour translater un objet. On indique donc la position en X et la position en Y que notre objet doit avoir, par rapport son point de dpart, et on assiste ainsi son dplacement. Voici un petit exemple :


22


Comme celui-ci nest sans doute pas trs parlant, voici une capture dcran du rsultat :

Plutt sympa non ? ;)

Les RotateTransform sont des transformations qui vous permettent de raliser, comme vous le devinez surement, des rotations. L encore, un bout de code et une image seront plus explicites quun long roman :

Comme vous pouvez le voir, il vous suffit de spcifier les coordonnes en X et en Y du point de rotation. Ensuite, grce lattribut Angle, vous spcifier de quelle valeur vous voulez effectuer la rotation de votre contrle.


23


Les ScaleTransform vous offrent la possibilit deffectuer des redimensionnements de contrles. Pour cela, vous devez spcifier, au moyen des attributs CenterX et CenterY, les coordonnes en X et en Y de la transformation. Vous pouvez galement indiquer le facteur de redimensionnement en X et en Y, au moyen des attributs ScaleX et ScaleY. Lavantage dutiliser ces attributs est de pouvoir faire en sorte que votre transformation subisse galement une rotation, bien que cela ne soit pas le but principal de ce type de transformation. Pour cela, il vous suffit simplement de spcifier une valeur ngative pour les attributs correspondant aux facteurs de redimensionnement Voyons cela en exemple :

Le rsultat de cette transformation est visible sur limage suivante :

Ici, nous avons utilis un ScaleY ngatif pour faire en sorte que notre rectangle soit invers.

Les MatrixTransform vous permettent, quand elles, de crer des transformations personnalises, non fournies par les TranslateTransform, RotateTransform, etc Une matrice 3x3 est utilise pour les transformations dans un plan deux dimensions. Voici par exemple le rsultat dune transformation de type MatrixTransform :


24


Comme vous pouvez le constater, cette transformation est particulire, dans le sens o il sagit la fois dune rotation et dun basculement du rectangle. Cela nest pas possible autrement quen passant par une MatrixTransform. A titre informatif, voici le code source de cette transformation :

Les MatrixTransform vous offrent donc la possibilit dutiliser des transformations complexes dans vos applications. Cela vous donne, par consquent, la possibilit de navoir presque plus aucune limite ! Cependant, ce sont des objets relativement complexes utiliser et, moins demployer des outils (tels que Sparkle), vous risquez de passer beaucoup de temps sur la cration dune MatrixTransform.

Un autre type de transformation qui est disponible dans WPF est la SkewTransform. Ce type de transformation est utilis pour faire pivoter votre contrle suivant un ou deux axes : laxe des X et laxe des Y. Grce lattribut AngleX, vous allez pouvoir spcifier le degr dinclinaison de votre contrle, par rapport laxe des Y. Inversement, lattribut AngleY vous permet de dfinir le degr dinclinaison de votre contrle, par rapport laxe des X. Petites dmonstrations : Ce code

Vous permet dobtenir ce rsultat :


25


Inversement, ce bout de code :

Vous donne ceci, comme rsultat :

Bien entendu, rien ne vous empche dutiliser les deux axes (X et Y) pour appliquer votre transformation :

Et observer ce que cela donne :

Comme vous limaginez surement, on peut trs vite arriver crer des transformations qui donneront vos applications un style plutt impressionnant ;)


26


Pour finir les transformations, il ne me reste plus qua vous parler des TransformGroup. Pour comprendre de quoi il sagit, essayer tout simplement ce bout de code :

Si vous compilez ceci, vous devriez avoir ce message :The 'Transform' object already has a child and cannot add 'SkewTransform'. 'Transform' can accept only one child

Ainsi que cet avertissement :The element 'Rectangle.RenderTransform' in namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation' has invalid child element 'SkewTransform' in namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation'.

En effet, vous ne pouvez pas utiliser deux transformations simultanment de cette faon. Pour pouvoir le faire, vous devrez utiliser (vous lavez compris je suppose), les TransformGroup.

Et l, plus de problmes ! Vous pouvez utiliser un, deux, trois, etc bref, autant de transformations que vous voulez, tant que celles-ci sont comprises dans un TransformGroup.


27


i. WPF et la 3DLune des grandes forces de WPF est de pouvoir utiliser non seulement des objets 2D, mais galement des objets en 3D (trois dimensions). Vous allez donc pouvoir utiliser dans vos applications des objets qui, habituellement, ne sont utilisables quen deux dimensions (par exemple, une image, une ListBox, etc) Note : Travailler avec des objets en trois dimensions nest pas une chose aise et ncessite quelques connaissances pralables sur le sujet. Je vais tenter de rendre cette partie la plus simple et la plus claire possible, mais nhsitez surtout pas consulter la documentation du SDK (Software Development Kit) pour de plus amples informations, plus techniques sur le sujet.

Lobjet qui va nous permettre de mettre un peu plus de dimension dans nos applications est un objet particulier, le Viewport3D, qui fonctionne comme une fentre classique, mais en trois dimensions. Avant de commencer, voici une image qui va vous permettre de comprendre comment visualiser les axes des coordonnes X, Y et Z, dans un plan en trois dimensions, par rapport un plan en deux dimensions :

Parce quune mme scne en trois dimensions semble diffrente suivant le point de vue (autrement dit la position) de celui qui la regarde, vous devez, au moyen de la classe Camera, spcifier ce point de vue pour une scne 3D. Vous allez pouvoir spcifier, pour une Camera, sa position dans le plan en trois dimensions, sa direction, son champ de vision (il sagit dun angle), et un vecteur qui dfinit le haut de la scne. Le schma suivant vous permettra de mieux comprendre de quoi il sagit :


28


Ici, on saperoit que la camra est centre sur laxe des Z, quelle regarde dans la direction inverse de laxe des Z (donc dans la direction Z), et que le haut de la scne est dfinit +Y.

Vous pouvez utiliser plusieurs types de Camera mais nous allons en voir deux plus en dtails : o la PerspectiveCamera o lOrthograficCamera La PerspectiveCamera, tout dabord, nous permet de dfinir une camra qui se projette autour de la scne. Le schma ci-dessus reprsente justement le dessin dune PerspectiveCamera. LOrthograficCamera, quand elle, dfinit une projection orthogonale dun modle en trois dimensions, vers une surface visuelle en deux dimensions. Ce type de camra est trs similaire la PerspectiveCamera : en effet, l encore vous allez pouvoir spcifier une direction, un point de vue, etc.Cependant, LOrthograficCamera dfinit une vue dont les cots sont parallles au lieu dune vue dont les cots finissent par se rejoindre en un point. Pour bien comprendre cette notion, observez le dessin suivant :

Dans le premier cas, les cubes sont aligns, grce une OrthograficCamera, de faon ce quils soient tous parallles. Dans le deuxime cas, on voit bien que, laide dune PerspectiveCamera, on a dispos les cubes de faon ce que ceux-ci ne soient pas parallles. Pour vous en convaincre, regardez cette image, qui vous montre bien que, dans un cas, les deux traits ne se rejoindront jamais (utilisation dune OrthograficCamera), tandis que dans le deuxime cas, ils ne tarderont pas se croiser (utilisation dune PerspectiveCamera) :

Pour faire simple, retenez quavec une OrthograficCamera, la distance dun objet ninflue pas sur sa taille lcran. Maintenant que nous avons vu la thorie, voyons un peu la pratique, pour apprendre comment utiliser (entre autre) les Viewport3D ainsi que les Camera.


29


Considrez le bout de code suivant :

Ici, on se contente dajouter une camra, de type PerspectiveCamera, notre application. Comme vous le devinez rapidement, lattribut Position nous sert indiquer, dans le plan en trois dimensions, les coordonnes de notre camra. Lattribut LookDirection, quand lui, nous permet de dfinir la direction dans laquelle notre camra doit regarder. UpDirection vous offre la possibilit dindiquer o se situe le haut de la scne, tandis que FieldOfView est utilis pour dfinir le champ de vision, de la camra, en degr. FarPlaneDistance et NearPlaneDistance ont des rles bien particuliers. NearPlaneDistance est en effet charg de dfinir la distance qui spare la camra du plan le plus proche de la scne. A linverse, FarPlaneDistance est utilis pour dfinir la distance entre la camra et le plan le plus loign de la scne. Voici un petit aperu de ce que vous pouvez obtenir : pour lexemple, jai utilis un composant particulier, une ListBox dans laquelle on peut stocker des vidos et o les lments sont disposs autour dun cylindre. Je vous laisse apprcier le rsultat :


30


Vous avez galement la possibilit dilluminer votre scne, cest--dire de rendre certaines surfaces de votre scne visible. Pour cela, il vous faut utiliser des objets de la classe Ligth, tel que : o AmbientLigth, qui fournit une lumire ambiante, utilise pour illuminer tous les objets de la scne, quelque soit leur position ou leur orientation :

o DirectionalLigth, qui illumine la scne comme une source lumineuse distante. La direction des lumires est indique via lattribut Direction, qui est un vecteur 3D :

o PointLigth, qui est utilis pour illuminer un point de votre scne. Les objets de la scne seront illumins en fonction de leur position et de leur distant. Lattribut Range est utilis pour spcifi partir de quelle distance la lumire na plus deffet :

o SpotLigth, qui hrite de PointLigth, projette une lumire via un cne, dont vous dfinissez la taille du point de dpart et celle du point darrive :


31


Un autre objet fort utile, lorsque vous fate de la 3D, est le ScreenSpaceLine3D. Cet objet vous permet de crer des polygones en trois dimensions. Utilis correctement, il peut vous permettre de dessiner beaucoup de figure gomtrique :

Ici, nous utilisons un ScreenSpaceLine3D pour crer une simple ligne, de couleur bleue. Avec lattribut Thickness, nous dfinissons lpaisseur du trait qui sera utilis pour afficher notre ligne. Lattribut Points nous permet de dfinir les points de notre figure.

Maintenant, si vous souhaitez pouvoir utiliser plusieurs lments pour animer vos objets en trois dimensions, vous allez tre oblig dutiliser un Model3DGroup : < Model3DGroup>

Dans cet exemple, on utilise un Model3DGroup pour insrer, dans notre application, quatre ScreenSpaceLine3D qui nous serviront tracer des traits.

Maintenant que nous avons vu comment fonctionne la 3D dans WPF, comment limplmenter et comment utiliser certains des objets disponibles pour rendre votre application un peu plus relle , nous allons voir diffrentes techniques pour effectuer des transformations sur vos objets 3D.


32


Nous avons dj vu, dans les chapitres prcdents, quil existe plusieurs objets pouvant servir effectuer des transformations sur votre objets 2D : o les TranslateTransform o les RotateTransform o les ScaleTransform o les MatrixTransform o les SkewTransform o les TransformGroup Et bien sachez que certaines de ces transformations sont galement disponible pour les objets en 3 dimensions : o les TranslateTransform3D o les RotateTransform3D o les ScaleTransform3D o les MatrixTransform3D o les Transform3DGroup Vous laurez compris, nous allons nous attarder sur certaines de ces modifications, afin de vous permettre de comprendre leur comportement et leur utilisation, mme si celles-ci sont trs semblables leur quivalent en deux dimensions. Les TranslateTransform3D sont utilises pour permettre vos objets 3D deffectuer des translations dans le plan trois dimensions. Regarder cette image pour vous permettre de comprendre de quoi il sagit :

On a donc bien un dplacement, une translation de lobjet, suivant les axes X, Y et Z. Illustrons cet exemple par un bout de code :


33


Les TranslateTransform3D possdent plusieurs attributs, dont les attributs OffsetX, OffsetY, et OffsetZ, qui nous permettent dindiquer quelles seront les coordonnes de notre objet, aprs la translation. A noter que la transformation MatrixTransform3D est galement disponible, et quelle permet de spcifier des transformations plus prcises, car vous indiquez vous-mme la matrice exacte de points que votre transformation doit appliquer votre objet.

Jetons maintenant un il sur les RotateTransform3D, qui vous permettront deffectuer, sur vos objets 3D, des rotations. Dans ce type de transformation, il est commun de spcifier laxe et langle de rotation. Vous utilisez, pour cela, une Rotation3D et plus prcisment, la proprit Rotation de cette classe :

Comme vous pouvez le constater, laxe de rotation est dfinit ici au moyen de la proprit Axis, qui prend en paramtre un ensemble de 3 points servant indiquer les coordonnes de notre axe. La proprit Angle permet de spcifier langle de rotation de notre axe. Voici une image pour vous donner un aperu du rsultat possible :

Les ScaleTransform3D vous offrent la possibilit dappliquer des agrandissements et des rductions, vos objets en trois dimensions. Voici, par exemple, limage dun cube, sur lequel on a appliqu deux ScaleTransform3D. Lapremire sert agrandit le cube, et la deuxime est utilis pour rduire la taille de notre objet.


34


Pour appliquer une transformation de type ScaleTransform3D, vous devez spcifier la valeur des axes X, Y et Z partir dun point central. Voyons, par exemple, le code qui a t utilis pour gnrer le cube le plus petit :

Si vous voulez multiplier les transformations sur des objets 3D, vous devez utiliser des Transform3DGroup. Ceux-ci vous permettent de manipuler, une plusieurs transformations, en mme temps. Voici un petit exemple, qui reprend lutilisation dune RotateTransform3D et dune ScaleTransform3D :


35


Au travers de cette partie, jai tent de vos expliquer les diffrents concepts et mises en uvre sur tout ce qui touche la 3D dans WPF. Comme je vous lai dit au dbut, cette partie est sans doute lun des plus complexes maitriser, surtout si vous nen avez jamais fait auparavant. Cependant, des outils sont l pour vous aider : jai dj cit Sparkle, mais sachez quil existe aussi un outil, dvelopp par ElectricRain (http://www.erain.com), qui se nomme ZAM3D et qui vous permet de raliser, trs simplement, des lments dinterface en trois dimensions. Voici un aperu de linterface de ZAM3D :

Et une image vous montrant le code gnr :


36


j. Le bindingPour comprendre le DataBinding, dans WPF, une notion est importante comprendre et bien matriser : Il sagit du DataContext : dans WPF, ce terme reprsente un concept, qui autorise les lments enfants hriter de linformation de leur lment parent. Voyons un petit exemple : //

De cette faon, tous les lments insrs dans la grille (reprsente par le contrle Grid) auront pour source de donnes lobjet que vous aurez indiqu dans lattribut DataContext. Mme si cela peut vous paraitre complexe pour le moment, je vais tenter de clarifier la chose par la suite, avec dautres exemples un peu plus parlants. Attardons maintenant sur un objet bien pratique pour interroger une source de donnes au format XML : le XmlDataProvider. Voyons directement un exemple, qui sera plus parlant que des dizaines de lignes de texte :

Comme vous pouvez le constater, cet objet est relativement simple utiliser: il vous suffit dindiquer lendroit o se situe la source des donnes, au moyen de lattribut Source, et ventuellement, la requte XPath que vous voulez effectuer, toujours au moyen dun attribut, lattribut XPath. Une fois votre source de donnes dfinie, il ne vous reste plus qu la lier votre grille (ou autre composant). Pour cela, vous allez utiliser lattribut DataContext, que nous avons vu juste avant !

Ici, nous dfinissons que la source de donnes communes tous les enfants de notre grille sera en fait notre source de donnes au format XML.


37


A partir de l, il ne vous reste plus qu lier les proprits qui vous intressent en faisant du Binding (liaison de donnes). Lexemple suivant est suffisament complet et comment pour parler de lui-mme. Je signale simplement quil sagit dun simple lecteur RSS dvelopp en quelques minutes peine : Bienvenue dans cette application WPE /F


52


Et le rsultat obtenu:

Techniquement, vous tre maintenant en mesure de raliser les mmes applications, que ce soit en client lourd (applications Windows) ou en client lger (applications Web). Vous pouvez galement embarquer votre code XAML dans une simple page Web, et lutiliser grce du JavaScript. En voici dailleurs un exemple : function clickHandler() { // Get text input var textbox = document.getElementById("textbox"); // Get the WPF/E plug-in var wpfeControl = document.getElementById("WpfeControl1"); // Get the vector path from inside the WPF/E plug-in var myRect = wpfeControl.GetElementById("myRect"); // Set the value of a property on the path myRect.SetValue("Fill", textbox.value); } Change Color


53


Dans cet exemple, nous encadrons notre code XAML dans une balise script en spcifiant le type adquat : text/xaml. Ensuite, tout passe par du simple JavaScript : o On rcupre le contenu de notre TextBox o Ensuite, on rcupre notre contrle WPF /E o Puis partir de l, toujours laide de JavaScript, on accde aux contrles qui sont lintrieur de notre contrle WPF /E o Et on termine par travailler avec ces contrles, en appelant les mthodes adquates. Ainsi, on a une complte interaction entre notre code XAML et notre code JavaScript ! Aujourdhui, Windows Presentation Fondation /EveryWhere est encore un produit jeune, encore plus que sa version complte Windows Presentation Foundation. Pour preuve, la premire CTP (Community Technology Preview) est prvue pour lt 2006 et la version RTM (Release To Manufacter) est annonce pour lanne 2007. Je nai donc fait que survoler le sujet, en esprant avoir quelque chose de plus vous montrer dans les mois qui viennent.

6. Interoprabilit entre les WindowsForms et WPF :Nous avons, jusqu' maintenant, couvert une trs grande partie de Windows Presentation Foundation. Mme si nous ne nous sommes pas forcment attards sur tous les points, ou bien que nous ne soyons pas forcment rentrs dans des dtails trop complexes, vous avez un bon aperu du type dapplications que nous dvelopperons dans les annes venir. Mais il se peut que certains dentre vous souhaitent utiliser les capacits de Windows Presentation Foundation au sein de leurs applications WindowsForms classiques. Ou bien mme, il est possible, en tant que dveloppeurs dapplications de type Windows Presentation Foundation, vous souhaitiez utiliser des contrles WindowsForms classiques (par exemple, les contrles Calendar ou MonthCalendar, ceux-ci ntant pas disponibles dans WPF). Et bien sachez que cela est possible, grce un projet dont le nom de code est : Crossbow. Crossbow est un projet qui pour but de permettre linteroprabilit entre les WindowsForms et Windows Presentation Foundation. Autrement dit, vous allez pouvoir dvelopper des applications hybrides , mlant la fois WindowsForms et contrles WPF. Concrtement, cela est possible grce deux contrles : WindowsFormsHost et ElementHost. WindowsFormsHost est un contrle WPF qui la capacit de savoir comment hberger un contrle WindowsForms. A linverse, ElementHost est un contrle qui vous permet dintgrer, dans vos applications WindowsForms classiques , des contrles WPF.


54


Chose trs importante retenir : Lorsque vous mettez en place cette linteroprabilit, si vous avez deux contrles WindowsForms sur une page WPF, et que ceux-ci ne sont pas intgrs dans un UserControl, alors vous allez devoir utiliser deux WindowsFormsHost, un pour contrles WindowsForms. Inversement, si dans votre application WindowsForms, vous avez plus dun contrle WPF, vous allez devoir utiliser autant de contrles ElementHost quil y a de contrle WPF.Autrement dit, les contrles WindowsFormsHost et ElementHost sont limits et ne peuvent intgrer quun seul contrle parent.

Ceci tant dit, voyons comment mettre tout cela en pratique !

Commenons par voir comment ajouter un contrle WindowsForms dans une application WPF. La premire chose faire, aprs avoir cr le projet, est dajouter deux rfrences : une System.Windows.Forms (pour pouvoir manipuler des contrles WindowsForms), et lautre WindowsFormsIntegration. Cette deuxime rfrence, qui est disponible via la DLL se trouvant dans le rpertoire C:\Program Files\Reference Assemblies\Microsoft\Avalon\v2.0.50215\ (attention au numro de version qui peut changer suivant la CTP que vous utilisez), est ncessaire car elle contient tout ce dont vous avez besoin pour faire de linteroprabilit WindowsForms WPF. En effet, cette DLL nest pas ajoute de base au projet que vous crez car il sagit toujours, pour le moment, dune Tech Preview , autrement dit dune version de test uniquement.

Une fois les rfrences ajoutes, nous allons devoir indiquer XAML o se situent les classes disponibles dans System.Windows.Forms et System.Windows.Forms.Integration. Pour cela, nous allons utiliser, dans notre XAML, des instructions de mapping,

Ce mapping nous sert dire ceci: Tous les contrles dont le nom commencera par le prfixe indiqu, correspondront des types se trouvant dans lespace de nom spcifi . Thomas LEBRUN http://morpheus.developpez.com

55


A partir de l, il ne vous reste plus qu ajouter vos contrles et vous disposez de deux mthodes pour cela. Premire mthode, en utilisant du code XAML : ListBox WindowsForms ! C'est cool

Deuxime mthode, en utilisant du code .NET (C#, VB.NET, etc) :private void WindowLoaded(object sender, RoutedEventArgs e) { WindowsFormsHost host = new WindowsFormsHost(); System.Windows.Forms.ListBox lb = new System.Windows.Forms.ListBox(); lb.Items.Add("ListBox WindowsForms !"); lb.Items.Add("C'est cool"); host.Children.Add(lb); this.MyGrid.Children.Add(host); }

Ces codes sont suffisament parlant, je ne vais donc pas mattarder sur leur description car je prfre vous parler des avantages et inconvnients de lutilisation de WindowsFormsHost. Thomas LEBRUN http://morpheus.developpez.com

56


Le gros avantage apport par la premire technique est quelle fournit un support complet du XAML. Cependant, il y a deux inconvnients : o les contrles doivent avoir un constructeur par dfaut o il est impossible de dfinir, via le code XAML, les sous-proprits. Il faut passer par le code. Note : Si, la compilation de votre projet, vous avez une erreur propos de la srialisation, et que vous utilisez la CTP de Fvrier de Crossbow, essayez de remplacer la rfrence vers la DLL WindowsFormsIntegration.dll par celle se trouvant ici : C:\Program Files\Microsoft Visual Studio8\Common7\IDE\Cider\WindowsFormsIntegration.dll Voici une capture dcran de ce que vous pouvez obtenir avec, gauche, une ListBox WindowsForms et en haut et droite, un label et un bouton WPF :

Malgr la jeunesse du projet, on peut voir que pas mal de travail a t ralis car, mme si lapplication que je vous montre est trs sobre, rien ne vous empche de faire des choses beaucoup plus complexes. On regrettera toutefois quil ne soit pas possible dutiliser de RenderTransform ni mme danimations. Pour finir, nous allons maintenant vois comment intgrer un contrle WPF dans une application WindowsForms. L encore, pas de mystre : il va y avoir plusieurs tapes et la premire concerne, une fois de plus, lajout des rfrences ncessaires. Ces rfrences sont les suivantes : o PresentationCore, o PresentationFramework, o WindowsBase, o UIAutomationTypes, o UIAutomationProvider,


57


Elles se situent dans le rpertoire C:\Program Files\Reference Assemblies\Microsoft\WinFx\v3.0 (l encore, le numro de version dpend de la version BETA de WinFX que vous utilisez). Dernire rfrence ajouter : WindowsFormsIntegration.

Maintenant que les rfrences ncessaires sont ajoutes, il ne vous reste plus qu dvelopper vos pages (ou contrles) WPF et les intgrer dans votre application WindowsForms, grce lElementHost. Voici une premire dmonstration, simple :private void Form1_Load(object sender, EventArgs e) { System.Windows.Forms.Integration.ElementHost host = new System.Windows.Forms.Integration.ElementHost(); host.Dock = DockStyle.Fill; System.Windows.Controls.Button button = new System.Windows.Controls.Button(); button.Content = "Boutton Windows Presentation Foundation"; button.HorizontalAlignment = System.Windows.HorizontalAlignment.Center; button.VerticalAlignment = System.Windows.VerticalAlignment.Center; host.Controls.Add(button); this.Controls.Add(host); this.Shown += delegate { this.Width++; }; }

Comme vous pouvez le voir, on dclare un ElementHost, puis un bouton WPF. Ensuite, on ajoute notre bouton notre contrle de regroupement (lElementHost) puis on ajoute ce contrle de regroupement la collection de contrle de notre formulaire. La dernire ligne a t rajoute pour viter un bug de la CTP de Fvrier de Crossbow : rien napparait lcran si vous ne modifiez pas la taille de la fentre, lexcution. Du coup,


58


cette ligne permet dincrmenter la taille, sans que cela soit visible lutilisateur, et sans quil se rendre compte de ce problme.

Le rsultat de cette dmonstration est visible sur cette photo :

Vous aurez sans doute du mal le voir, mais le bouton du haut est bien un contrle WindowsForms classique , tandis que le contrle du bas est un bouton WPF.

Bien entendu, vous ntes pas limit lajout de simples contrles sur votre formulaire : vous pouvez tout fait rajouter des contrles utilisateurs, des pages, etc Voyons cela un peu plus en dtails, pour pouvoir conclure ce chapitre. Imaginez par exemple que vous disposez de ce contrle utilisateur, dvelopp en XAML : 1er lment 2me lment 3me lment TextBlock WPF :) 1er Item 2me Item 3me Item /Grid>


59


Ici, rien de bien extraordinaire : notre UserControl est compos dune ListView, dun TextBlock et pour finir, dune ComboBox, le tout regroup dans une Grid.

Maintenant, il faut utiliser un ElementHost pour intgrer notre UserControl sur notre formulaire Windows :using System.Windows.Forms.Integration; ElementHost host2 = new ElementHost(); host2.Dock = DockStyle.Fill; MyWPFUserControl ctrl = new MyWPFUserControl(); host2.Controls.Add(ctrl); this.splitContainer2.Panel2.Controls.Add(host2); this.Shown += delegate { this.Width++; };

L encore, rien de nouveau : on cr une instance dun nouvel ElementHost, puis on y ajoute une nouvelle instance de notre contrle utilisateur. On ajoute ensuite notre instance dElementHost notre formulaire et, lexcution de lapplication, vous vous rendez compte que votre contrle napparait pas lcran (vous devriez mme avoir une erreur de compilation, propos de la mthode InitializeComponents de votre UserControl).

En effet, dans sa version actuelle (Crossbow tant toujours un produit en version BETA) ; il y a une petite manipulation faire sur le fichier de projet de votre application (.csproj ou .vbproj) avant que cela ne fonctionne correctement. Avant de vous donner la solution, je vais vous expliquer pourquoi vous obtenez cette erreur.

Lorsque vous dveloppez une application WPF, le compilateur sait comment il doit parser le XAML, crer sa reprsentation binaire (cest ce que lon appelle le BAML) et gnrer le code correspondant. Cependant, ici, nous dveloppons une application WindowsForms et le modle qui a t utilis pour crer cette application WPF ne connait rien du tout au XAML. Nous allons donc devoir enseigner, notre application WindowsForms, comprendre ce fichier XAML et faire ce quil convient de faire. Pour cela, ditez le fichier de projet et recherchez la ligne : Thomas LEBRUN http://morpheus.developpez.com

60


Ou la ligne, suivant le type de projet que vous avez crez:

Puis, rajoutez la ligne suivante juste aprs:

Grossirement, cette ligne sert indiquer, au systme de compilation, comment gnrer des applications WinFX. Vous indiquez donc que la cible de votre compilation est un assemblage WinFX. Le rsultat est visible sur cette capture dcran :

Nous avons donc toujours nous deux boutons. Sur la partie de gauche, nous avons des contrles WindowsForms et sur la droite, nous avons les mmes types de contrles, mais en version WPF (et intgr dans un UserControl WPF).

Ainsi, mme si la technologie Crossbow est encore jeune, elle semble vraiment avance et permet de raliser, de faon assez simple et rapide, des applications mlant la fois WPF et WindowsForms.

7. Conclusions :Au travers de cet article, jai essay de couvrir un maximum de choses sur Windows Presentation Foundation. Bien sur, il y aurait beaucoup rajouter et/ou complter. Cependant, vous avez dornavant les bases suffisantes pour commencer dvelopper, aujourdhui, les applications que nous utiliserons demain ! Thomas LEBRUN http://morpheus.developpez.com

61

Documents

Windows Presentation Foundation