Windows Presentation Foundation

Windows Presentation Foundation : La nouvelle gnration dinterfaces graphiques

Avec 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. 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
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.
2. Les pr-requis
Pour 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
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 :
<Window x:Class="DemosWPF.Window1" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Title="DemosWPF" Height="768" Width="1024" WindowStartupLocation="CenterScreen" >
Dans cet exemple, on voit bien la dclaration des espaces de nom

xmlns: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"
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 :
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.
- 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 :
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
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 :
<Button Name="m_BoutonMirroir" VerticalAlignment="Top" HorizontalAlignment="Center" Width="200" Height="100"> <Image Source="{Binding Source=Images/WinFX.jpg}" /> </Button>
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 ressources
Chaque 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.
<Grid> <! Dans les ressources de la grille --> <Grid.Resources> <! On definit un style, qui sera appliqu au type dfinit On dfinit la proprit modifier et la valeur lui appliquer --> <!
11
Windows Presentation Foundation : La nouvelle gnration dinterfaces graphiques On modifie le style, la couleur, etc.. de la police --> <Style TargetType="{x:Type Button}" x:Key="MonStyleDePolice"> <Setter Property="Button.FontStyle" Value="Italic" /> <Setter Property="Button.FontWeight" Value="Bold" /> <Setter Property="Button.Foreground" Value="Red" /> </Style> </Grid.Resources> </Grid >
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 styles
Nous 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.
<TextBlock Text="Un bouton avec une police personnalise" /> <Button Style="{StaticResource MonStyleDePolice}" Content="Bouton avec Police Personnalise" />
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 :
<! Style bas sur un autre --> <Style TargetType="{x:Type Button}" x:Key="MonStyleHerite" BasedOn="{StaticResource MonStyleDePolice}"> <Setter Property="Button.Foreground" Value="Green" /> </Style>
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 :
<TextBlock Text="Un bouton avec un style hrit" /> <Button Style="{StaticResource MonStyleHerite}" Content="Bouton Perso avec Style Hrit" />
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 templates
Les 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 :
<TextBlock Text="Un bouton avec un template personnalis" /> <Button Template="{StaticResource MonTemplateDeBouton}"
13
Et voici le template qui lui est associ :

<ControlTemplate TargetType="{x:Type Button}" x:Key="MonTemplateDeBouton"> <Grid> <Ellipse Width="135" Height="65"> <Ellipse.Fill> <SolidColorBrush Color="Black" /> </Ellipse.Fill> </Ellipse> <ContentPresenter /> </Grid> </ControlTemplate>
Comme vous pouvez le voir, on utilise un lment de type ControlTemplate pour dfinir le template, autrement dit la faon dont notre contrle sera affich : simple non ? Voici, pour vous donner un aperu, le rsultat de ce template :
Nous aurions galement pu passer par un style pour dfinir la proprit Template de notre contrle :
<Style TargetType="{x:Type Button}"> <Setter Property="Template" /> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}" x:Key="MonTemplateDeBouton"> <Grid> <Ellipse Width="135" Height="65"> <Ellipse.Fill> <SolidColorBrush Color="Black" /> </Ellipse.Fill> </Ellipse> <ContentPresenter /> </Grid> </ControlTemplate> </Setter.Value> </Style>
Je vous pargne la capture dcran, tant donn quelle donne le mme rsultat que la capture prcdente ;) Les DataTemplates sont utilises pour dfinir une reprsentation visuelle dun objet de donnes. On peut donc dire que les DataTemplates permettent une application dafficher lcran des objets non-visuels, autrement dit des objets de donnes.
14
Voyons cela en exemple : Prenons la classe MyPhoto :

class MyPhoto { private int m_IdPhoto; public int IdPhoto { get { return m_IdPhoto; } set { m_IdPhoto = value; } } private string m_SourcePhoto; public string SourcePhoto { get { return m_SourcePhoto; } set { m_SourcePhoto = value; } } }
Comme vous pouvez le constatez, cette classe ne comporte aucun lment visuel. Nous allons donc utiliser un DataTemplate pour dfinir la faon dont les lments de type MyPhoto devront tre affichs :
<DataTemplate DataType="{x:Type m:MyPhoto}"> <Image Source="{Binding Filename}" /> </DataTemplate>
Ainsi, nous dfinissons le fait que tous les lments de types MyPhoto doivent tre affichs sous forme dune image, qui aura sa source binde (lie) la proprit Filename de notre source de donnes. La consquence de ceci est simple : ds quun objet de type MyPhoto sera dtect dans votre application, cest ce template qui sera appliqu cet objet. Attention tout de mme : Pour pouvoir raliser bien cette opration, il nous a fallut mapper le type MyPhoto au XAML, au moyen de lattribut xmlns :
<Window x:Class="DemosWPF.Window1" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation Title="DemosWPF" Height="768" Width="1024" xmlns:m="clr-namespace:DemosWPF" >
e. Les triggers
Les Triggers sont utiliss conjointement avec les styles et les templates, afin de raliser des applications proposant des interactions riches et dynamiques.
15
Voici la rgle qui vous permet de comprendre les Triggers : Les Triggers sont activs lorsquune condition spcifique devient vraie.
Il faut galement savoir que WPF vous permet de vrifier trois choses dans les conditions dun trigger : o une Property Dependency (utilisation de Trigger) o une proprit .NET (utilisation de DataTrigger) o un vnement (utilisation dEventTrigger) Dans le cas des deux premires conditions, le trigger est dclench lorsque la proprit spcifie est modifie. Dans le dernier cas, le trigger est dclenche lorsque lvnement indiqu survient (par exemple, le clic sur un bouton) Pour modifier la valeur dune proprit, dans un trigger, vous devez l encore utiliser llment Setter :
<! On utilise un Trigger sur ce style pour faire en sorte de changer la couleur du fond lorsque la souris est sur le bouton --> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Button.Background" Value="Red" /> </Trigger> </Style.Triggers>
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 :
<! On utilise un Trigger sur ce style pour faire en sorte de changer la couleur du fond lorsque la souris est sur le bouton --> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Button.Background" Value="Red" /> </Trigger> <Trigger Property="IsFocused" Value="True"> <Setter Property="Button.Foreground" Value="Green" /> </Trigger> </Style.Triggers>
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 :
<MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="True" /> <Condition Property="IsFocused" Value="True" /> </MultiTrigger.Conditions> <Setter Property="Button.Foreground" Value="Black" /> </MultiTrigger>
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 :
<DataTrigger Binding="{Binding Path=IdPhoto}" Value="1"> <Setter Property="Button.Foreground" Value="Yellow" /> </DataTrigger>
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 :
<Button Name="m_BoutonRotation" VerticalAlignment="Top" Margin="0,20,812,0" Content="Rotation" Width="75" Height="23"> <Button.Triggers> <! Lors du clic sur le bouton --> <EventTrigger RoutedEvent="Button.Click"> <EventTrigger.Actions> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </ Button >
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 storyboards
Les 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 :

<Button Name="m_BoutonRotation" VerticalAlignment="Top" Margin="0,20,812,0" Content="Rotation" Width="75" Height="23"> <Button.Triggers> <! Lors du clic sur le bouton --> <EventTrigger RoutedEvent="Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <! On ajoute un storyboard qui visera MyObject et plus particulirement la proprit MyProperty --> <Storyboard Storyboard.TargetName="MyObject" Storyboard.TargetProperty="MyProperty"> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </ Button >
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 animations
Dans 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 :
<DoubleAnimation SpeedRatio="5" Storyboard.TargetName="m_BoutonAnime" Storyboard.TargetProperty="Width" From="0" To="200" />
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 :
<DoubleAnimationUsingKeyFrames SpeedRatio="5" Storyboard.TargetName="m_BoutonAnime" Storyboard.TargetProperty="Width" Duration="0:0:10"> <LinearDoubleKeyFrame KeyTime="0:0:2" Value="360" /> </DoubleAnimationUsingKeyFrames>
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 :
<DoubleAnimationUsingKeyFrames SpeedRatio="5" Storyboard.TargetName="m_BoutonAnime" Storyboard.TargetProperty="Width" Duration="0:0:10"> <LinearDoubleKeyFrame KeyTime="0:0:2" Value="360" /> <LinearDoubleKeyFrame KeyTime="0:0:6" Value="500" /> </DoubleAnimationUsingKeyFrames>
Maintenant, si vous voulez utiliser plusieurs animations en mme temps, vous serez tentez dcrire quelque chose comme cela :
<DoubleAnimation SpeedRatio="5" Storyboard.TargetName="m_BoutonAnime" Storyboard.TargetProperty="Width" From="0" To="200" /> <DoubleAnimation SpeedRatio="5" Storyboard.TargetName="m_BoutonAnime" Storyboard.TargetProperty="Height" From="0" To="200" />
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 :
<ParallelTimeline> <DoubleAnimation SpeedRatio="5" Storyboard.TargetName="m_BoutonAnime" Storyboard.TargetProperty="Width" From="0" To="200" /> <DoubleAnimation SpeedRatio="5" Storyboard.TargetName="m_BoutonAnime" Storyboard.TargetProperty="Height" From="0" To="200" /> </ParallelTimeline>
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 transformations
Les 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 :
<Button Name="m_BoutonMirroir" /> <Rectangle Name="RectangleMirroir"> <Rectangle.RenderTransform> <TranslateTransform X="100" Y="200" /> </Rectangle.RenderTransform> </Rectangle>
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 :
<Button Name="m_BoutonMirroir" /> <Rectangle Name="RectangleMirroir"> <Rectangle.RenderTransform> <RotateTransform CenterX="5" CenterY="5" Angle="70" /> </Rectangle.RenderTransform> </Rectangle>
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 :
<Button Name="m_BoutonMirroir" /> <Rectangle Name="RectangleMirroir"> <Rectangle.RenderTransform> <ScaleTransform ScaleX="1" ScaleY="-0.5" /> </Rectangle.RenderTransform> </Rectangle>
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 :
<Button Name="m_BoutonMirroir" /> <Rectangle Name="RectangleMirroir"> <Rectangle.RenderTransform> <MatrixTransform Matrix="1 2 2 1 1 1" /> </Rectangle.RenderTransform> </Rectangle>
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
<Button Name="m_BoutonMirroir" /> <Rectangle Name="RectangleMirroir"> <Rectangle.RenderTransform> <SkewTransform AngleX="20" /> </Rectangle.RenderTransform> </Rectangle>
Vous permet dobtenir ce rsultat :
25
Inversement, ce bout de code :

<Button Name="m_BoutonMirroir" /> <Rectangle Name="RectangleMirroir"> <Rectangle.RenderTransform> <SkewTransform AngleY="20" /> </Rectangle.RenderTransform> </Rectangle>
Vous donne ceci, comme rsultat :
Bien entendu, rien ne vous empche dutiliser les deux axes (X et Y) pour appliquer votre transformation :
<Button Name="m_BoutonMirroir" /> <Rectangle Name="RectangleMirroir"> <Rectangle.RenderTransform> <SkewTransform AngleX="20" AngleY="20" /> </Rectangle.RenderTransform> </Rectangle>
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 :
<Button Name="m_BoutonMirroir" /> <Rectangle Name="RectangleMirroir"> <Rectangle.RenderTransform> <ScaleTransform ScaleX="1" ScaleY="-0.5" /> <SkewTransform AngleX="20" AngleY="20" /> </Rectangle.RenderTransform> </Rectangle>
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.
<Button Name="m_BoutonMirroir" /> <Rectangle Name="RectangleMirroir"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="-0.5" /> <SkewTransform AngleX="20" AngleY="20" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle>
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 3D
Lune 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 :

<!-On ajoute une camra pour la vue 3D --> <Viewport3D Focusable="True" ClipToBounds="True" Name="ViewPortLisBox3D"> <Viewport3D.Camera> <PerspectiveCamera FarPlaneDistance="50" UpDirection="0,1,0" NearPlaneDistance="1" Position="0.0,2.5,10.0" LookDirection="0.0,-2.5,-9.0" FieldOfView="45" /> </Viewport3D.Camera> </Viewport3D>
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 :
<Viewport3D Focusable="True" ClipToBounds="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> <AmbientLight Color="Red" /> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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 :
<Viewport3D Focusable="True" ClipToBounds="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> <DirectionalLight Color="Yellow" Direction="1.0,0.0,0.0" /> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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 :
<Viewport3D Focusable="True" ClipToBounds="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> <PointLight Color="Yellow" Range="10" Position="0.0,2.5,10.0" /> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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 :
<Viewport3D Focusable="True" ClipToBounds="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> <SpotLight Color="Yellow" Direction="0,1,0" OuterConeAngle="5" InnerConeAngle="50" Position="0.0,2.5,10.0" /> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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 :
<Viewport3D Focusable="True" ClipToBounds="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> <ScreenSpaceLines3D Color="Blue" Thickness="2.0" Points="2.0, 2.3, 0.0, -2.0, 2.3, 0.0" /> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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 :
<Viewport3D Focusable="True" ClipToBounds="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> < Model3DGroup> <ScreenSpaceLines3D Color="Blue" Thickness="2.0" Points="2.0, 2.3, 0.0, -2.0, 2.3, 0.0" /> <ScreenSpaceLines3D Color="Red" Thickness="2.0" Points="2.0, -2.0, 0.0, -2.0, -2.0, 0.0" /> <ScreenSpaceLines3D Color="Yellow" Thickness="2.0" Points="-3.15, 2.0, 0.0, -3.5, -2.0, 0.0" /> <ScreenSpaceLines3D Color="Green" Thickness="2.0" Points="3.15, 2.0, 0.0, 3.5, -2.0, 0.0" /> </Model3DGroup> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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 :
<Viewport3D Focusable="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> <GeometryModel3D> <GeometryModel3D.Transform> <TranslateTransform3D OffsetX="2" OffsetY="0" OffsetZ="0" /> </GeometryModel3D.Transform> </GeometryModel3D> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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 :
<Viewport3D Focusable="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> <GeometryModel3D> <GeometryModel3D.Transform> <RotateTransform3D> <RotateTransform3D.Rotation> <AxisAngleRotation3D Angle="60" Axis="0,10,0" /> </RotateTransform3D.Rotation> </RotateTransform3D> </GeometryModel3D.Transform> </GeometryModel3D> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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. La
premire 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 :
<Viewport3D Focusable="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> <GeometryModel3D> <GeometryModel3D.Transform> <ScaleTransform3D CenterX="10" CenterY="20" CenterZ="5" ScaleX="0.5" ScaleY="0.5" ScaleZ="0.5" /> </GeometryModel3D.Transform> </GeometryModel3D> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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 :
<Viewport3D Focusable="True" Name="ViewPortLisBox3D"> <ModelVisual3D> <ModelVisual3D.Content> <GeometryModel3D> <GeometryModel3D.Transform> <Transform3DGroup> <RotateTransform3D> <RotateTransform3D.Rotation> <AxisAngleRotation3D Angle="60" Axis="0,10,0" /> </RotateTransform3D.Rotation> </RotateTransform3D> <ScaleTransform3D CenterX="10" CenterY="20" CenterZ="5" ScaleX="0.5" ScaleY="0.5" ScaleZ="0.5" /> </Transform3DGroup> </GeometryModel3D.Transform> </GeometryModel3D> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
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 binding
Pour 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 :
<Grid> <Grid.DataContext> // </Grid.DataContext> </Grid>
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 :
<Grid> <Grid.Resources> <XmlDataProvider Source="http://blog.developpez.com/xmlsrv/rss.php?blog=9" x:Key="MyXmlRssSource" /> </Grid. Resources > </Grid>
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 !
<Grid> <Grid.DataContext> <Binding Source="{StaticResource MyXmlRssSource}" XPath="/rss/channel" /> </Grid.DataContext> </Grid>
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 :
<Grid> <Grid.Resources> <XmlDataProvider Source="http://blog.developpez.com/xmlsrv/rss.php?blog=9" x:Key="MyXmlRssSource" /> <! On dfinit un DataTemplate pour notre ListBox: On choisit donc la faon dont seront afficher les donnes On utilise un TextBlock dont la proprit Text est binde l'lment title car le context de la ListBox, dans le DataTEmplate, est la collection d'item --> <DataTemplate x:Key="MyListBoxItemTemplate"> <TextBlock Text="{Binding XPath=title}" /> </DataTemplate> </Grid. Resources > <Grid.DataContext> <Binding Source="{StaticResource MyXmlRssSource}" XPath="/rss/channel" /> </Grid.DataContext> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.4*" /> <ColumnDefinition Width="0.6*" /> </Grid.ColumnDefinitions> <DockPanel Grid.Column="0"> <! On indique la source de donnes de notre ListBox et son ItemTemplate --> <ListBox ItemsSource="{Binding XPath=item}" ItemTemplate="{StaticResource MyListBoxItemTemplate}" x:Name="MyListBoxOfRss" IsSynchronizedWithCurrentItem="True" SelectedIndex="0" /> </DockPanel> <DockPanel Grid.Column="1"> <! Le DataContext de notre TextBlock correspond l'item slectionn dans la ListBox Et on binde le texte sur le description de cet lment. --> <TextBlock DataContext="{Binding ElementName=MyListBoxOfRss, Path=SelectedItem}" Text="{Binding XPath=description}" x:Name="TextBlocDescription" /> </DockPanel> </Grid>
38
Voyons maintenant un autre objet fort utile lorsque vous faites du Databinding : lObjectDataProvider. Cet objet propose les mmes fonctionnalits, et mme bien plus, que lObjectDataSource, disponible dans le Framework .NET 2.0. En effet, grce lui, vous allez pouvoir dfinir un objet comme tant la source de vos donnes, mais vous allez galement pouvoir : o passer des paramtres au constructeur de votre objet (celui utilis comme source de donnes) o vous lier une mthode (qui peut, ou non, prendre des paramtres) o remplacer lobjet qui sert de source de donnes o crer lobjet servant de source de donnes de faon asynchrone Avant dallez plus loin dans les dtails, voici un exemple, simple, de dclaration dun ObjectDataProvider :
<ObjectDataProvider ObjectType="{x:Type m:MyPhoto}" x:Key="MyPhotoDSO" />
(Jai repris, pour cet exemple, la classe MyPhoto que jai introduit lors de la partie 4D). Avec ce code, nous dfinissons une source de donnes, qui sappellera MyPhotoDSO, et, au moyen de lattribut ObjectType, nous dfinissons le type des donnes utiliser comme source (dans notre cas, des donnes de type MyPhoto). Etudions donc maintenant, dun peu plus prs, les fonctionnalits avances offertes par cet objet. Commenons par la plus simple : la possibilit de passer des paramtres au constructeur de votre objet. Pour cela, il faut passer par lattribut ConstructorParameters de votre ObjectDataProvider :
<ObjectDataProvider ObjectType="{x:Type m:MyPhoto}" x:Key="MyPhotoDSO" /> <ObjectDataProvider.ConstructorParameters> <s:Int32>1</s:Int32> <s:String>Ma Photo</s:String> </ObjectDataProvider.ConstructorParameters> </ObjectDataProvider>
Avec cet attribut, qui est en fait une collection, vous pouvez spcifier lensemble de paramtres passer votre constructeur, en indiquant leur type (Int32, String, Float, etc). A noter que le type des paramtres est prcd du namespace s. Pour rappel, cet espace de nom est dclar lors de la dclaration de notre lment Window :
<Window x:Class="DemosWPF.Window1" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Title="DemosWPF" Height="768" Width="1024" WindowStartupLocation="CenterScreen" xmlns:s="clr-namespace:System;assembly=mscorlib" >
39
Pour utiliser cet ObjectDataProvider, cela se fait de faon trs simple :

<DataTemplate DataType="{x:Type m:MyPhoto}"> <Image Source="{Binding Source={StaticResource MyPhotoDSO}, Path=SourcePhoto}" /> </DataTemplate>
Ici, on cr un DataTemplate, qui nous servira dfinir comment nous devons afficher les lments de type MyPhoto. On indique que ces lments doivent tre affichs dans un contrle de type Image, dont la source est lie notre source de donnes, nomme MyPhotoDSO et plus particulirement, la proprit SourcePhoto. Et voila ! A partir de l, vous avez spcifi que vous vouliez utiliser un objet de type MyPhoto, et plus prcisment lobjet qui a comme proprit lidentifiant ayant pour valeur 1 et la description, avec comme valeur Ma photo . Ainsi, lors de la liaison ( Binding ), on ne va afficher quune photo, celle dont les paramtres ont t passs en paramtre.
Voyons maintenant la possibilit qui nous est offerte, par lObjectDataProvider, de nous lier ( binder ) une commande. L encore, nous allons devoir utiliser plusieurs attributs particuliers : o MethodName, prend en paramtre le nom de la mthode laquelle vous voulez vous lier. Autrement dit, vous spcifier ici le nom de la mthode, sur votre objet, que vous voulez excuter. o ObjectInstance, vous permet dindiquer linstance, en cours dexcution, avec laquelle vous voulez travailler. o MethodParameters, reprsente la collection de paramtres que vous pouvez, ventuellement, passer votre mthode. Pour concrtiser cette thorie, reprenons notre classe MyPhoto et ajoutons-y une mthode qui va afficher les informations sur la photo dont lidentifiant est pass en paramtre:
public void DisplayPhotoInformations(int Id) { // Juste pour la dmo: Ne pas refaire if (Id == 1) { Console.WriteLine("Photo n: {0}", this.IdPhoto); Console.WriteLine("Description: {0}", this.SourcePhoto); } }
Voyons comment nous pouvons nous lier cette mthode. Pour cela, il nous faut crer un autre ObjectDataProvider :
<ObjectDataProvider ObjectInstance="{StaticResource MyPhotoDSO}" MethodName="DisplayPhotoInformations" x:Key="MyPhotoDSOMethod"> <ObjectDataProvider.MethodParameters> <s:Int32>1</s:Int32> </ObjectDataProvider.MethodParameters> </ObjectDataProvider>
40
Ici, nous crons un ObjectDataProvider, nomm MyPhotoDSOMethod, qui va appeler la mthode DisplayPhotoInformations, de notre objet MyPhotoDSO. Pour utiliser cet objet nouvellement cr, voici comment nous pouvons faire :
<Label Content="{Binding Source={StaticResource MyPhotoDSOMethod}}" />
Cest simple, rapide mais efficace !
Voyons prsent la troisime fonctionnalit de cet objet : le remplacement de lobjet utilis comme source de donnes. Imaginez ce scnario : Vous avez votre disposition une ListBox dont la source de donnes est lie une collection dimages. Comment pourriez-vous faire pour changer le type des lments de votre source de donnes, et utiliser des chaines des caractres la place des images ? Une solution serait de crer deux sources de donnes (une pour les images et une pour les chaines de caractres), et de slectionner lune ou lautre selon vos besoins. Mais la solution la plus lgante est trs certainement dutiliser un ObjectDataProvider et de modifier, dynamiquement, la valeur de sa proprit ObjectType. En effet, si celle-ci est modifie, votre ObjectDataProvider sera aussitt averti que la source de donnes changer et se mettra jour automatiquement.
Pour finir cette partie, nous allons voir, rapidement, comment nous pourrions faire pour crer notre objet, source de donnes, de faon asynchrone. Vous aurez sans doute remarquez lun des attributs possibles de lObjectDataProvider :
IsAsynchronous="True"
Celle-ci vous permet dindiquer si vous dsirez que le chargement de vos donnes se droule dans le mme thread que votre application, ou bien dans un thread diffrent. A noter que, par dfaut, lObjectDataProvider est synchrone et le XmlDataProvider est asynchrone.
Note : Je nai trait ici quune partie du DataBinding avec Windows Presentation Foundation. Le domaine est tellement vaste quil mriterait un article (ou un livre) lui tout seul. Cependant, si vous voulez plus de dtails sur lObjectDataProvider, et le DataBinding, en gnral, avec Windows Presentation Foundation, je ne peux que vous conseiller le site Web de Beatriz Costa : http://www.beacosta.com et plus particulirement ce message, qui traite spcifiquement de lObjectDataProvider : http://www.beacosta.com/2006/03/why-should-iuse-objectdataprovider.html
41
k. Textes et documents
Le support du texte et des documents a compltement t remani dans Windows Presentation Foundation. Ce que lon peut appeler le Framework de Texte de WPF supporte dsormais : o des animations de texte qui utilisent au mieux les matriaux compatible DirectX o utilisation optimise de la technologie ClearType o laffichage indpendant de la rsolution o lutilisation de lUnicode pour tous les textes o etc. Bien entendu, cette liste nest pas exhaustive : beaucoup dautres fonctionnalits sont supportes et fournies par WPF. Pour inclure du texte dans vos applications, vous avez accs de nombreuses APIs, telles que les Labels, les TextBox, les TextBlock, etc. Ces lments sont les lments de base de linterface utilisateur, et offrent un moyen simple et rapide dutiliser du texte. Ils possdent des proprits telles que FontFamily, FontSize et FontStyle, qui vous permettent de dfinir, prcisement, la police utiliser :
<TextBlock FontFamily="Lucida Console" FontStyle="Oblique" FontSize="15" Text="TextBloc de test" />
Au travers de ce bout de code, nous avons dfinit le type de police utiliser (Lucida Console), le style appliquer (Oblique) et la taille de la police (15). Le rsultat, en image :
Comme indiqu juste ci-dessus, WPF supporte, de faon amliore, la technologie ClearType. Cette technologie, dveloppe par Microsoft, permet damliorer la lisibilit et la lecture de texte, sur les crans LCD (Liquid Crystal Display), tels que les crans dordinateurs portables, les crans de Pocket PC ou bien certains crans plats. Je vous pargnerai ici les dtails (complexes) de limplmentation et du fonctionnement de la technologie ClearType, mais sachez quune des amliorations quelle apporte dans Windows Presentation Foundation est lanti-aliasing par rapport laxe des Y . ClearType, lorsquelle est utilis avec GDI (Graphic Device Interface) sans lanti-aliasing via laxe Y, offre une meilleure rsolution sur laxe des X. Cest bien sur linverse lorsque vous utiliser la technologie de lanti-aliasing suivant laxe des Y.
42
Pour voir une dmonstration, regarder ces images : sur celles de droite, les contours sont lisses, limage est nette. On a donc utilis ClearType, dans notre application WPF, pour cette image :
Grande nouveaut galement : vous avez galement accs aux classes FlowDocumentReader, FlowDocumentPageViewer, FlowDocumentScrollViewer et FlowDocument. Celles-ci vous permettent dafficher et de formater du contenu en utilisant des fonctions avances ; telle que la pagination et les colonnes. Vous avez galement accs, grce lutilisation de ces classes, la fonction de recherche, ainsi quau zoom sur votre document. Voici un exemple dutilisation de ces contrles :
<FlowDocumentReader> <FlowDocument> <Paragraph> Paragraphe Normal </Paragraph> <Paragraph FontSize="25"> Paragraphe avec une taille de 25 </Paragraph> <Paragraph> <Bold> <Italic>Paragraphe en gras et italique</Italic> </Bold> </Paragraph> <Paragraph> <LineBreak /> Paragraphe avec un LineBreak (Saut de ligne) juste avant </Paragraph> <Section> <Paragraph> Une section qui inclut un paragraphe </Paragraph> </Section> <Paragraph TextIndent="25"> Paragraphe avec un indentation, pour le Texte, de 25 </Paragraph> </FlowDocument> </FlowDocumentReader>
43
Vous avez galement la possibilit dutiliser des dcorations pour vos textes. La classe TextDecoration est en effet l pour vous permettre dutiliser des ornements visuels sur vos textes. Il y a quatre types de dcoration de texte disponibles, que je vais vous reprsenter grce cette image :
Pour spcifier o la dcoration doit apparatre, utilisez la proprit Location de votre objet de type TextDecoration. Pour dfinir lapparence de votre dcoration, il vous faut passer par la proprit Pen. Voici un bout de code vous expliquant comment mettre en application notre dcoration :
<TextBlock FontSize="30"> Ceci est une simple dcoration <TextBlock.TextDecorations> <! On indique que la dcoration voulue est situe au dessus du texte --> <TextDecoration Location="OverLine" PenThicknessUnit="FontRecommended"> <TextDecoration.Pen> <Pen Brush="YellowGreen" Thickness="1" /> </TextDecoration.Pen> </TextDecoration> </TextBlock.TextDecorations> </TextBlock>
Comme vous le voyez, il suffit dajouter une TextDecoration la collection nomme TextDecorations, et le tour est jou. Voici une image du rsultat de la dcoration prcdente :
Bien entendu, vous ntes pas limit une seule dcoration. Comme je vous lai dit, TextDecorations est une collection donc, ce titre, vous pouvez en ajouter autant que vous voulez, pour avoir, par exemple, quelque chose comme cela :
44
Le code qui a servit crer ces deux dcorations est le suivant :

<TextBlock FontSize="30"> Ceci est une riche dcoration <TextBlock.TextDecorations> <! On indique que la dcoration voulue est situe au dessus et dessous du texte --> <TextDecoration Location="OverLine" PenThicknessUnit="FontRecommended"> <TextDecoration.Pen> <Pen Brush="Blue" Thickness="1" /> </TextDecoration.Pen> </TextDecoration> <TextDecoration Location="Underline" PenThicknessUnit="FontRecommended"> <TextDecoration.Pen> <Pen Brush="BlueViolet" Thickness="2" /> </TextDecoration.Pen> </TextDecoration> </TextBlock.TextDecorations> </TextBlock>
Enfin, sachez que rien ne vous empche dappliquer, vos textes, des styles un peu plus labors : nous allons en effet voir la technique utilise pour raliser des dgrads de couleurs. Note : Les dgrads de couleurs seront vus ici avec les dcorations de texte, mais sachez que rien ne vous empche de les utiliser ailleurs dans vos applications WPF, comme par exemple pour crer des fonds dgrads, etc comme le montre cette image :
45
Lorsque lon y rflchit bien, un dgrad de couleur, quest ce que cest ? Une couleur de dbut, une couleur de fin puis on affiche toutes les couleurs du spectre qui sont comprises entre nos deux bornes. Et bien cest ce que WPF nous permet de faire, et cela de faon trs simple :
<TextBlock FontSize="30"> Ceci est une trs riche dcoration <TextBlock.TextDecorations> <! On indique que la dcoration voulue est un trait de soulignement --> <TextDecoration Location="Underline" PenThicknessUnit="FontRecommended"> <TextDecoration.Pen> <Pen Thickness="1.5"> <Pen.Brush> <LinearGradientBrush Opacity="0.5" StartPoint="0,0.5" EndPoint="1,0.5"> <LinearGradientBrush.GradientStops> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Pen.Brush> <! Pour afficher des pontills --> <Pen.DashStyle> <DashStyle Dashes="2"/> </Pen.DashStyle> </Pen> </TextDecoration.Pen> </TextDecoration> <TextDecoration Location="Underline" PenThicknessUnit="FontRecommended"> <TextDecoration.Pen> <Pen Brush="BlueViolet" Thickness="2" /> </TextDecoration.Pen> </TextDecoration> </TextBlock.TextDecorations> </TextBlock>
Ici, nous utilisons un LinearGradientBrush, sur lequel nous prcisons les coordonnes du point de dpart (via lattribut StartPoint) ainsi que les coordonnes du point darrive (au moyen de lattribut EndPoint). Nous prcisons galement quelle doit tre lopacit du trait qui sera trac, grce lattribut Opacity. Concrtement, nous ne faisons que dire : Je veux tracer un trait, qui doit aller du point A (0, 0.5) au point B (1, 0.5), en tant visible 50% . Ensuite, nous utilisons des GradientStops, qui nous servirons dfinir quelle couleur doit tre applique lorsque lon se situe sur la position indique. Pour terminer, nous dfinissons le style de trait que nous voulons utiliser, via llment DashStyle. Thomas LEBRUN http://morpheus.developpez.com 46
Le rsultat est parlant de lui-mme :
On a bien un trait en pointill, situ en dessous du texte, qui commence en jaune et qui se termine en rouge ! Bien sur, rien ne vous empche de rajouter, selon vos besoins, dautres GradientStops.
Tout ce que lon a vu propos des rotations de contrles WPF est galement valable pour le texte. Ainsi, le code suivant ne pose aucun problme :
<TextBlock FontSize="15"> Un texte transform <TextBlock.RenderTransform> <RotateTransform Angle="20" /> </TextBlock.RenderTransform> <LineBreak /> <LineBreak /> </TextBlock>
Et fournit le rsultat suivant :
Pour les animations, cest la mme chose ! Ce qui a t vu pour les contrles fonctionne tout fait pour le texte :
<TextBlock FontSize="15"> Un texte avec une animation <TextBlock.RenderTransform> <RotateTransform Angle="0" x:Name="RotationTextBlock" /> </TextBlock.RenderTransform> <TextBlock.Triggers> <EventTrigger RoutedEvent="TextBlock.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="RotationTextBlock" Storyboard.TargetProperty="Angle" From="0.0" To="360" Duration="0:0:3" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </TextBlock.Triggers> </TextBlock>
47
Dans cet exemple, nous ne faisons quappliquer une transformation de type RotateTransform, autrement dit une rotation, un lment de type TextBlock. Ainsi, lorsque la souris passera sur le TextBlock, nous allons faire varier la proprit Angle de la rotation, pour la faire passer de 0 360 (autrement dit, lui faire faire un tour complet) en 3 secondes.
Bien entendu, WPF vous donne la possibilit dappliquer, votre texte, des effets grce la classe TextEffect. Cette classe vous permet, en effet, de prendre le texte qui est dans une chane de caractres et de le considrer comme sil sagissait dun ou plusieurs groupes de lettres. Vous aller donc pouvoir appliquer des transformations, animations, etc un ou plusieurs groupes de caractres, compos de une plusieurs lettres.
<TextBlock FontSize="25"> Texte avec un caractre anim <TextBlock.TextEffects> <TextEffect PositionStart="12" PositionCount="1"> <TextBlock.Transform> <RotateTransform Angle="0" x:Name="RotationLettreTextBlock" /> </TextBlock.Transform> </TextEffect> </TextBlock.TextEffects> <TextBlock.Triggers> <EventTrigger RoutedEvent="TextBlock.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="RotationLettreTextBlock " Storyboard.TargetProperty="Angle" From="0.0" To="360" Duration="0:0:3" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </TextBlock.Triggers> </TextBlock>
Nous avons donc dfinit un effet, et plus prcisment une RotateTransform, qui sera appliqu un groupe de caractres. Pour dfinir la position de dpart de ce groupe de caractres, nous utilisons la proprit PositionStart de lobjet TextEffect. La proprit PositionCount nous permet simplement de savoir combien de caractres nous servirons composer ce groupe.
Vous avez galement la possibilit dappliquer des effets de relief vos textes, grce aux classes DropShadowBitmapEffect et OutterShadowBitmapEffect. Notez cependant que lutilisation de ces classes entrainera la dsactivation de la technologie ClearType, au sein de vos applications WPF.
48
5. WPF /E
Vous lavez vu jusqu' maintenant, Windows Presentation Foundation vous permet de raliser des applications au design novateur, et cela en quelques minutes seulement. Mais le but de Microsoft ne sarrte pas l. En effet, leur objectif est de pouvoir faire en sorte que les applications WPF puissent sexcutent sur un maximum de plateformes possibles. Pour cela, ils ont cr WPF /E (Windows Presentation Foundation /EveryWhere). Il sagit dun sous-ensemble de WPF, qui permet dexcuter des applications WPF sur nimporte quel type de plateforme (PC, Mac, Pocket PC, Smartphone, etc..). Microsoft cible en effet Opra, FireFox et Internet Explorer sur Windows, mais galement Safari et FireFox sur Mac. Une version pour Linux et Solaris est galement envisage. Pour arriver ce rsultat, il vous faut crer des applications de type XAML Browser Application, autrement dit des applications qui sexcuteront dans un navigateur Internet. Car, en effet, si lon y rflchit bien, quel est le seul type dapplications quil est possible dexcuter la fois sous Windows, Linux mais encore Solaris, Pocket PC, etc. La rponse est bien sur vidente : il sagit des applications Web. Au travers de ce chapitre, je vais donc vous parler, un peu plus en dtails, de WPF /E. Les bases tant maintenant tablies, nous savons que WPF /E est un sous-ensemble de WPF, qui a pour objectif de fournir des applications Web tirant parti de toute la puissance de WinFX : On peut donc esprer, maintenant, des applications Web aussi jolies que des applications Windows. A noter : Vous ne pouvez pas, dans vos applications WPF /E, utiliser de contrles en 3D. Avant de rentrer plus dans les dtails, laissez moi vous montrer quelques images pour dcouvrir un aperu dapplications WPF /E :
Sur cette premire image, lauteur de lapplication a cr une horloge dont les aiguilles sont animes. Lhorloge est transparente, ce qui nous permet de voir limage utilise en arrireplan. Au passage, notez le navigateur Web qui a t utilis pour la dmonstration Thomas LEBRUN http://morpheus.developpez.com
49
Regardez prsent cette capture dcran :
Ici, nous avons affaire un outil de visualisation vectoriel, qui permet lutilisateur de zoomer et de faire pivoter limage. Pour finir, il ne me reste plus qu vous montrer cette copie de XAMLPad pour les applications WPF /E. Il sagit dune application DHTML qui incorpore le plugin de navigation Internet WPF /E, et qui interprte le XAML qui a t saisi dans la zone de texte :
Le rendu de toutes ces images donne limpression que ces applications ont t ralises laide de Flash ou dune technologie semblable mais pourtant, il sagit bien dapplications Web utilisant le moteur graphique de WinFX : Windows Presentation Foundation.
50
Voyons prsent, un peu plus en dtails, comment fonctionnent les applications de type XAML Browser Application, autrement dit les applications WPF que vous allez excuter dans un navigateur Web.
Premire chose savoir, qui peut paratre logique mais quil est bon de rappeler : les applications WPF /E sont des applications disponibles en ligne uniquement ! Ensuite, vous aurez sans doute remarqu quil ny a pas dinstallation, lorsque vous excutez une application de ce type. En effet, cela passe par un dploiement ClickOnce, transparent pour lutilisateur, et qui naffiche aucune entre dans le menu Dmarrer ou bien dans le panneau Ajout/Suppression de programmes :
Nous avons vu que lexcution de ces applications se fait au travers dun navigateur Web : il suffit donc davoir un navigateur Web compatible, ainsi que le Runtime WinFX, pour pouvoir excuter des applications WPF /E. Du ct scurit, tout galement t prvu : en effet, les applications sexcutent dans un contexte scuris, ce qui nous permet de ne pas avoir davertissement de scurit.
Pour pouvoir faire fonctionner toute cette mcanique, il nous manque un lment important : le JavaScript. Cest lui qui reprsente le lien qui servira connecter lapplet WPF /E la page Web. WPF /E ne possde pas son propre moteur JavaScript. Au lieu de cela : o il expose des proprits et des mthodes au JavaScript qui est dans le navigateur o il dclenche des vnements que le JavaScript peut manipuler.
51
L encore, une image rcapitulative de larchitecture de WPF /E sera la bienvenue pour vous permettre dassimiler toutes notions :
Voici, par exemple, le code dune simple application WPF /E :

<Grid> <TextBlock FontSize="35" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0"> Bienvenue dans cette application WPE /F </TextBlock> <Button Content="Cliquez ici" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.Row="1"> <Button.RenderTransform> <RotateTransform Angle="0" x:Name="MyButtonTransform" /> </Button.RenderTransform> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="MyButtonTransform" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:3" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button> </Grid>
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 :
<html xmlns="http://www.w3.org/1999/xhtml" > <head></head> <body> <script type="text/xaml" id="WpfeControl1Xaml"> <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle x:Name="myRect" Fill="orange" Width="100" Height="100" Canvas.Top="10" Canvas.Left="10"/> </Canvas> </script> <script language="javascript" type="text/javascript"> 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); } </script> <div> <input id="textbox" type="text" value="Orange"/> <button onclick="clickHandler()">Change Color</button><br /> <embed id="WpfeControl1" height="312px" width="354px" SourceElement="WpfeControl1Xaml" BackgroundColor="White" type="application/xcp-plugin"/> </div> </body> </html>
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,
<?Mapping XmlNamespace="wfi" ClrNamespace="System.Windows.Forms.Integration"?> <?Mapping XmlNamespace="wf" ClrNamespace="System.Windows.Forms"?>
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 :
<Window x:Class="DemosWindowsFormsHost.Window1" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:wfi="clrnamespace:System.Windows.Forms.Integration;assembly=WindowsFormsInteg ration" xmlns:wf="clrnamespace:System.Windows.Forms;assembly=System.Windows.Forms" xmlns:s="clr-namespace:System;assembly=mscorlib" > <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.4*" /> <RowDefinition Height="0.6*" /> </Grid.RowDefinitions> <Label Content="Ceci est un Label WPF !" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" /> <Grid Grid.Row="1"> <wfi:WindowsFormsHost> <wf:ListBox> <wf:ListBox.Items> <s:String>ListBox WindowsForms !</s:String> <s:String>C'est cool</s:String> </wf:ListBox.Items> </wf:ListBox> </wfi:WindowsFormsHost> </Grid> </Grid> </Window>
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 :
<UserControl x:Class="DemosElementHost.MyWPFUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <ListView Grid.Column="0"> <ListViewItem> 1er lment </ListViewItem> <ListViewItem> 2me lment </ListViewItem> <ListViewItem> 3me lment </ListViewItem> </ListView> <TextBlock Grid.Column="1"> TextBlock WPF :) </TextBlock> <ComboBox Grid.Column="2" Height="150" Width="150" VerticalAlignment="Center" HorizontalAlignment="Center"> <ComboBoxItem> 1er Item </ComboBoxItem> <ComboBoxItem> 2me Item </ComboBoxItem> <ComboBoxItem> 3me Item </ComboBoxItem> </ComboBox> /Grid> </UserControl>
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
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
Ou la ligne, suivant le type de projet que vous avez crez:

<Import Project="$(MSBuildBinPath)\Microsoft.VisualBasic.targets" />
Puis, rajoutez la ligne suivante juste aprs:

<Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets" />
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

Windows Presentation Foundation

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Windows Presentation Foundation

Transféré par

Droits d'auteur :

Formats disponibles

Windows Presentation Foundation : La nouvelle gnration dinterfaces graphiques