Introduction À WPF

IntroductionWPF
JulienDOLLON
DotnetFranceAssociation

2 IntroductionauWPFv.1.0[02/02/09]
Sommaire
1 Introduction.....................................................................................................................................3
1.1 AvantWPF...............................................................................................................................3
1.2 PourquoiWPF..........................................................................................................................3
2 Lesplusetlesmoins........................................................................................................................4
2.1 LesavantagesdeWPF.............................................................................................................4
2.1.1 UtilisationduGPU...........................................................................................................4
2.1.2 Sparationcode/design.................................................................................................4
2.1.3 PluspuissantquelesWinForms......................................................................................5
2.2 Lesinconvnients....................................................................................................................5
2.2.1 Manquedinteroprabilit..............................................................................................5
2.2.2 Manquedematurit.......................................................................................................5
2.2.3 Toutestrefaire.............................................................................................................5
3 Notionsdebases.............................................................................................................................7
3.1 Lesoutils..................................................................................................................................7
3.2 Systmedexploitationscompatibles......................................................................................7
4 LintrtduXAML............................................................................................................................9
4.1 PourquoiXAML?.....................................................................................................................9
4.2 Exemple...................................................................................................................................9
5 Premierprojet...............................................................................................................................13
5.1 Crationdunprojet..............................................................................................................13
5.2 Crationduneressource......................................................................................................15
5.2.1 UtilisationduneressourceStatique.............................................................................16
5.2.2 UtilisationduneressourceDynamique........................................................................16
6 Conclusion.....................................................................................................................................18

1 Introduction
Pour la plupart des utilisateurs, une application est juste et tout simplement une fentre qui
souvreetquileurpermetdinteragiraveclordinateur.Maispourledveloppeur,lagestiondecette
fentrenestpasforcmentdesplussimples.Eneffetilfautchoisirunelibrairieadapte,
Pour ce qui est de .Net, on a le choix entre les WinForms, et depuis la sortie du Framework
.Net 3.0 (2006) avec Windows Vista: WPF; Mme si comme on pourra le voir, ce dernier complte
davantage les composants WinForms. On va pouvoir voir dans ce premier chapitre dintroduction
WPF,enquoiconsisteWPF,cequilnousapporteetcommentlutiliser.
1.1 AvantWPF
Comme on a pu lnoncer prcdemment, WPF est trs rcent tant donn quil est apparu
avecleFramework.Net3.0.AvantnousnavionsquelesWinForms.
Les WinForms, cest le nom donn la partie du Framework .Net, responsable de la partie
interface utilisateur (GUI). Pour ceux dentre vous qui avez dj dvelopp avec le langage Visual
Basic6,lesWinFormsapparaissentsimilairesauxFormsdecemmelangage,toutenayantapport
leurlotdavantages.Eneffet,ellessonttrsfacilesprendreenmainettrsorientobjet.
1.2 PourquoiWPF
AlasortiedeWindowsVista,onvoitapparaitredeseffets3Detenmmetempslasortiedu
.Net Framework 3.0. Pourquoi? On sest aperu que les WinForms ntaient pas vraiment adapts
(pour de nombreuses raisons techniques telles quelles ne sont pas forcment des plus aises
personnaliser).Ellesposentgalementunproblmeauniveaudutravailcollaboratifentredesigners
et dveloppeurs, et bien dautres sur lesquelles nous aurons loccasion de revenir dans de futurs
chapitres.
Onverratoutaulongdenoschapitres,queWPFapportesonlotdenouveautsquifacilitent
le design de la GUI. Par exemple, on peut citer les graphismes vectoriels, la transparence par
pixel,lesanimations,ladaptationlarsolution,lesupportdestemplatesdedatabinding(onaura
loccasiondyrevenirdansleschapitresfuturs),etbiendautres

2 Lesplusetlesmoins
Commenimportequelletechnologie,WPFadesavantagescommedesinconvnients,mme
ces derniers sont malgr tout trs restreints, comme on va pouvoir le voir dans les chapitres qui
suivront.
2.1 LesavantagesdeWPF
2.1.1 UtilisationduGPU
Un des principaux changements avec WPF cest lutilisation du GPU. Bref rappel de base, le
GPUestenfaitleprocesseurgraphiqueprsentsurvotrecartegraphique.
Le fait que WPF utilise le GPU change normment de choses. En effet cela permet de
dlguer une partie du travail habituellement dlgu au microprocesseur (CPU), au processeur
graphiquequivasechargerdelamanipulationdedonnesgraphiques.CenestpasvotreGPUquiva
sechargerdestraitementsconditionnels...Nonpasquilnepuissepaslefaire,maistoutsimplement
parcequilnestpasoptimispourdetelstraitements.
Les GPU tant de plus en plus puissant et nos applications de plus en plus jolies et par
consquentlourdesVouscomprendrezquelefaitqueWPFutiliseleGPUnestpasinutiletoutau
contraire.
2.1.2 Sparationcode/design
Vous avez souvent d vous en rendre compte, lorsque vous dveloppez une application en
collaborationavecdesdesignersetdautresdveloppeurs,unproblmemajeurvaseposer.Eneffet
pourcustomiservotreapplication,votredesignerdevraavoirdescomptencesendveloppement,il
vadevoirconnatrelesobjetsdevotreapplicationetlesfonctionnalitsdesWinFormsVouslaurez
comprisaufinalvousallezdevoiradaptertoutavousmme
XAML
Designer
Composant WPF
Langage .NET
Dveloppeur
Blend Visual Studio
CestlqueWPFvouspermetdejustementsparerencouchesvotreapplication.Sivousavez
unecertaineexprienceendveloppement,vousavezsurementlhabitudedorsetdjdesparer
votre application manuellement en plusieurs couches, comme par exemple avec le modle logiciel
MVC.
WPFvasechargerdesparerlecodedesignerducodebehind(classedarrireplan).C'est
direqueledesignervapouvoirtravaillersurledesigndelapplication,viaunlangagecommunbas

surduXMLquiestleXAMLquonvapouvoirvoirparlasuite.Quantaudveloppeurdesonctvia
le code behind il va pouvoir travailler sur la couche mtier. Cela va permettre une meilleure
productivitetunsupportdelapplicationplusfacileparlasuite.
2.1.3 PluspuissantquelesWinForms
Mmesiaupremierabord,WPFpeutchoquerparlasparationcode/designetauxcontrles
galement sensiblement diffrents, WPF offre plus de possibilits comme on a pu le voir et plus de
puissance.
C'estdire que par exemple grce WPF et Expression Blend on va pouvoir mettre en place
desanimationspournotreapplication,defaonvraimenttrssimpleettrsrapide.Cela augmente
dunepartlaproductivitdudveloppeur,celledudesigneretpourfinirlergonomiedelapplication
pourlutilisateurfinal.
De plus on peut parler de la puissance de WPF au niveau du Data Binding (liaisons de
donnes). En effet le Data Binding est un mcanisme puissant. Nous verrons plus en dtail en quoi
consisteleDataBindingplusendtail.
2.2 Lesinconvnients
2.2.1 Manquedinteroprabilit
Le principal problme de WPF reste le mme que les WinForms c'estdire linteroprabilit
de ce dernier. En effet on ne peut pas, dans ltat actuel des choses, faire du WPF sous linux sous
Mac OS ou dautres systmes Le seul portage de .NET fait sur les autres systmes reste mono (je
vousinviteconsulterlescoursdemonodedotnetfrance)etmononesupporteactuellementpasle
WPF.
On peut dire que cela est appel changer dans le temps, car quand on regarde du ct de
Silverlight,quiestlquivalentdeWPFpourlesapplicationsweb.NET,onpeutremarquerquily
aunportageralisquisappelleMoonlightDonc,suivre.
2.2.2 Manquedematurit
Egalement on peut citer un inconvnient normal qui est le manque de maturit de WPF. En
effet,WPFestarrivavecleFramework.NET3.0.Cestunetechnologiequiaactuellementplusde2
ans (depuis 2006). Ainsi, les communauts concernant WPF restent peu dveloppes, et les
entreprisescommencentpeinesepencherdessus.
Heureusement,nouspensonsquecetinconvnientseraamendisparatredansletemps.
2.2.3 Toutestrefaire
Enfin,onpeutdirequelamigrationdesapplicationsWinFormsactuellerestecomplexe.

Cest pourquoi, le dveloppeur qui souhaite migrer son application WinForms vers WPF, va
devoir revoir et recrer toute sa GUI. Pour peu de vouloir utiliser les spcificits de WPF, il faudra
galementquilrevoitsonarchitecture,notammentpourlutilisationduDataBinding.


3 Notionsdebases
3.1 Lesoutils
SivousavezdveloppdesapplicationsutilisantlesWindowsFormauparavant,vousavezdu
utiliserVisualStudio.WPFbousculeunpeucettehabitudeaveclintroductionduXAML.Dornavant
vous allez pouvoir grer dune part la partie graphique de votre application avec nimporte quelle
applicationgrantleXAML,etdautrepartlapartiecodeavecvotreIDEprfr.
Pourcrirececours,nousutilisonsdeuxlogicielsconseillsparMicrosoft:VisualStudio2008
Sp1 pour crire le code de gestion de lapplication, et Expression Blend 2 Sp1 pour la partie
graphique.
Visual Studio est un environnement de dveloppement complet propos par Microsoft. A
lheureounouscrivonscechapitre,vouspouvezvousprocurerVisualStudio2008danssesversions
Standard, Professionnelle et Team System. Si vous possdez une version antrieure Visual Studio
2008,sachezquelesupportnatifdeWPFnestpasimplant.
Pour pouvoir dvelopper dans de bonnes conditions, nous vous conseillons dinstaller le Sp1
du Framework 3.5 incluse dans le SP1 de Visual Studio, qui amliore grandement le designer
dapplication embarqu, et amliore de 20 45% les performances de vos applications WPF, sans
modifierunelignedecode.
SivousnepouvezpasvousprocurerVisualStudio2008,vouspouvezvousrabattresurVisual
C#Expressdisponiblegratuitementcetteadresse:http://www.microsoft.com/express/vcsharp/
Si Visual Studio 2008 gre parfaitement bien le dveloppement dapplications avec les
langages C#, le VB.NET et le XAML, il est cependant trop simple pour le cot graphique. Pour
comblercemanque,MicrosoftadveloppExpressionBlend,delasuitelogicielleExpression.
ExpressionBlend,estlorigineunoutilpermettantdecrerdesgraphiquesvectoriels.Ilat
tenduloccasiondelasortiedeWPFafindegrerleXAMLnativement.GrceExpressionBlend,
un graphiste peut travailler directement sur une solution Visual Studio sans toucher une seule ligne
de code. Expression Blend gre galement la cration danimations totalement en XAML. Pour ce
cours,nousavonsutilisExpressionBlend2Sp1quigreWPFetSilverlight2.
Sachez enfin que vous pourrez utiliser nimporte quel logiciel du march permettant
dexportervostravauxenXAML,laplacedExpressionBlend.Parexemple,ilexistedorsetdjdes
extensionsMayavouspermettantdexporterdesmodles3DenXAML.
3.2 Systmedexploitationscompatibles
Les applications WPF fonctionnent sur toutes les machines dotes du Framework .NET 3.0.
ParmilessystmesdexploitationsupportantceFrameworkvoustrouvez:
WindowsXPServicePack2ouultrieur
WindowsServer2003ServicePack1ouultrieur
WindowsVista
WindowsServer2008

Note:ApartirdeWindowsVista,leFramework.NET3.0estinstallpardfaut.
Cela tant dit, nous vous conseillons dinstaller le Framework .NET 3.5 Sp1, afin de bnficier
delamliorationdeperformancesapportes.

4 LintrtduXAML
4.1 PourquoiXAML?
Le XAML (eXtensible Application Markup Language) est un langage dclaratif bas sur la
syntaxe du XML. Il permet grce des balises et des attributs de crer trs facilement des objets.
Pourcela,lecompilateurXAMLsechargededclareretdfinirdesobjetsdynamiquementgrceaux
balises(quivalentdesclasses)etauxattributs(quivalentsauxproprits)XAML.
Malgr sa syntaxe simple, le XAML permet de restituer des graphiques vectoriels, ou des
modles3Daisment.Lespossibilitsgraphiquessontdoncinfinies.
Ilexistequelquesrgleslmentaires,issuesdelasyntaxeduXML,quilvousfaudrarespecter
sivousfaitesduXAML:
Respecterlacasse.
Lesbalisesouvertesdoiventtrerefermessanssechevaucher.
Chaque attribut doit obligatoirement avoir une valeur inscrite entre guillemets ou
apostrophes.
Note:VoirladfinitionduneimagevectoriellesurWikipediapourmieuxcomprendre:
http://fr.wikipedia.org/wiki/Image_vectorielle
4.2 Exemple
Nous allons tudier ensemble un court exemple, afin de voir quoi ressemble la syntaxe du
XAML. Nous allons simplement crer un bouton accompagn dun texte. Pour linstant, lexemple
pour but de vous familiariser avec le XAML, nous nallons pas entrer dans une description dtaille
ducode.
Sinouscompilonsetexcutonscecode,voicilersultat:
<! XAML- - >
<Wi ndow x: Cl ass=" Wpf . Wi ndow1"
xml ns=" ht t p: / / schemas. mi cr osof t . com/ wi nf x/ 2006/ xaml / pr esent at i on"
xml ns: x=" ht t p: / / schemas. mi cr osof t . com/ wi nf x/ 2006/ xaml "
Ti t l e=" Wi ndow1" Hei ght =" 300" Wi dt h=" 300" >
<Gr i d>
<But t on Wi dt h=" 150" Hei ght =" 150" >Bout on</ But t on>
<Text Bl ock Text =" Hel l o Dot net - Fr ance ! "
Font Si ze=" 26"
Font Fami l y=" Vi val di "
Hor i zont al Al i gnment =" Cent er "
For egr ound=" Cr i mson" / >
</ Gr i d>
</ Wi ndow>

Dtaillonslecodeparmorceaux:
Ce bout de code permet dinstancier une nouvelle fentre. Celleci aura comme titre
Window1,dunehauteurde300pixels,etdunelargeurde300pixels.Lesvaleursdesattributsxmlns
et xmlns:x rfrencent deux espaces de nom, qui contiennent la plupart des balises du XAML. Ces
deuxvaleursserontncessairespourinstanciercorrectementnosdiffrentsobjets.
Dans le bloc de code suivant, nous commenons voir lesquisse dun bouton et un block de
texte.Cesdeuxcontrles sontcontenusdansunlmentGrid. Mmesinous reviendronssurcette
balisedansunprochaincours,sachezquelleserticideconteneurdiverscontrles.
<! XAML- - >

<! XAML- - >
<Gr i d>
Font Si ze=" 26"
</ Gr i d>
<! XAML- - >
<Wi ndow x: Cl ass=" Wpf . Wi ndow1"
</ Wi ndow>

Dansnotregridnousavonstoutdabordnotrebouton,crsimplementenajoutantlabalise
Button,auquelonpassediversattributs,icilahauteuretlalargeur.Lavaleurentrelesdeuxbalises
ButtoncorresponddanslecasprsentlavaleurdelattributContent.Nousaurionsdoncpucrire
cetexemple:
Note:SidanslecasduboutonlavaleurentrelesbalisescorrespondlattributContent,cenestpas
lecaspourtouteslesbalises.
EnfinnousavonscruncontrleTextBlock,quivaafficherHelloDotnetFrance!avecla
policeVivaldi,detaille26etdecouleurCrimson.
Danscetexemple,nousavonscrquatreobjetsdiffrents,unefentre,unegrille(grid),un
bouton,etuntextblockenXAML.Pourvousconvaincredelasimplicitetdupratiquedecemorceau
decode,nousallonsconvertirintgralementnotrecode,enC#:
<! XAML
Font Si ze=" 26"
<! XAML- - >
<But t on Wi dt h=" 150" Hei ght =" 150" Cont ent =" Bout on" / >

Lexemple parle de luimme, le XAML nous fait vraiment gagner en simplicit, et ce mme
sur un exemple simple. Cela tant, vous pouvez avoir besoin de crer certains objets en C#, notez
donc que tout ce qui est faisable en XAML est faisable en C#, en VB.NET et dans tous les langages
managsgrsparleFramework.NETengnral.

/ / C#
usi ng Syst em;
usi ng Syst em. Col l ect i ons. Gener i c;
usi ng Syst em. Li nq;
usi ng Syst em. Text ;
usi ng Syst em. Wi ndows. Cont r ol s;
usi ng Syst em. Wi ndows;
usi ng Syst em. Wi ndows. Medi a;

namespace Wpf
{
cl ass Exempl e
{
[ STAThr ead]
publ i c st at i c voi d Mai n( st r i ng[ ] ar gs)
{
But t on b = new But t on( ) ;
b. Cont ent = " Bout on" ;
b. Wi dt h = 150;
b. Hei ght = 150;

Text Bl ock t ext = new Text Bl ock( ) ;
t ext . Text = " Hel l o Dot net - Fr ance ! " ;
t ext . Font Si ze = 26;
t ext . Font Fami l y = new Font Fami l y( " Vi val di " ) ;
t ext . Hor i zont al Al i gnment = Hor i zont al Al i gnment . Cent er ;
t ext . For egr ound = Br ushes. Cr i mson;

Gr i d gr i l l e = new Gr i d( ) ;
gr i l l e. Chi l dr en. Add( b) ;
gr i l l e. Chi l dr en. Add( t ext ) ;

Wi ndow wi ndow = new Wi ndow( ) ;
wi ndow. Ti t l e = " Wi ndow1" ;
wi ndow. Hei ght = 300;
wi ndow. Wi dt h = 300;
wi ndow. Cont ent = gr i l l e;

Appl i cat i on app = new Appl i cat i on( ) ;
app. Run( wi ndow) ;
}
}
}

5 Premierprojet
5.1 Crationdunprojet
PourcequiestdelacrationdeprojetWPFcelanedivergepastropdelacrationdeprojet
WinFormsclassique:
DanslemenudeVisualStudio:Fichier>Nouveau>ProjetouleraccourciclavierCtrl+Shift+N
EnsuitevousavezlechoixentreplusieurstypesdeprojetsWPF:

Comme vous pouvez le voir, les applications WPF et Windows Forms sont regroups dans le
mmemenucarlebutfinalrestelemme.
Nousavons4typesdeprojetWPFdisponiblesquisont:
WPFApplication
WPFBrowserApplication
WPFCustomControlLibrary
WPFUserControlLibrary
Une Application WPF est donc tout simplement une application WPF basique gnraliste,
commeonauraitcruneapplicationWindowsForms.
Vous pouvez galement crer un projet de type WPF Browser Application, qui est en fait un
projet XBAP. Comme on le verra dans un chapitre ultrieur, XBAP est une application WPF
sexcutantdansunnavigateurWeb.
On peut crer un projet de type WPF User Control Library qui est tout simplement une
bibliothquedecontrlesutilisateurspourWPF.
Pourfinir,onaaussilapossibilitdecrerunprojetdetypeWPFCustomControlLibrary,qui
vouspermettradtendrelesfonctionnalitsduncontrleWPFdjexistant.
Doncicionslectionnera WPFApplicationbasiqueDonnezunnomvotreProjetetcliquez
surOK,vousdevriezarriversuruneinterfacecommelasuivante:

Comme vous pouvez le voir, linterface que nous procure Visual studio pour du WPF est
similairecellequelonauraitobtenupourunprojetWinFormsbasique,partlafentredocksurle
basavecleCodeXAMLdontonapuparlercidessus,vanouspermettredemodlisernotrefentre.
EneffetcommeonaaussipulevoirprcdemmentenWPF,onsparelecodebehind(C#)du
codedesigner(XAML).ilestnormalqueledesigner,quivacustomisernotrefentre,proposelecode
XAML.
5.2 Crationduneressource
Tout dabord, pour faire un petit rcapitulatif, une ressource dune application peuttre une
icne,uneimage,fichiersmultimdiaetc.
DepuisWPF,ilexisteunnouveautypederessourcespcifiqueWPF.Eneffetcesressources
sontenfaitdesobjetsstocksdansdesdictionnairesderessources.Celapeuttredescouleurs,des
dgrads
Pour commencer nous allons utiliser notre projet cr prcdemment cr, et nous allons
ouvrirdansnotreconcepteurlefichierWindow1.xaml
EnsuitedansnotrediteurXAMLdenotrefentrenousallonsentrerlecodesuivant:

Onnevapasexpliciterpluscecodesource,ilyanormmentderessourcesquiexistentmais
cequiresteinchangcestlacrationdecesressources,cestcequiestleplusimportantici.Ilvous
suffit de placer votre ressource comme vous pouvez le voir entre
<Wi ndow. Resour ces></ Wi ndow. Resour ces>.
5.2.1 UtilisationduneressourceStatique
On va maintenant voir comme on va faire pour utiliser ces ressources. Je ne vais pas
mattarder sur ce quest une ressource statique pour le moment, vous comprendrez par la suite la
diffrenceentreuneressourcestatiqueetdynamique.
Vousallezvoirquelutilisationdecesressourcesnousrappellelutilisationdefeuillesdestyle
CSS.
Ainsi,commeonpeutlobserver,nousavonsjustespcifilapropritbackgrounddenotre
bouton,laressourceutiliserpourlacolorationdufondetletourestjou.
5.2.2 UtilisationduneressourceDynamique
La diffrence quil y a entre une ressource WPF dynamique et statique est tout simplement
que lorsquune ressource est dynamique, elle sera automatiquement charge chaque fois quelle
estmodifie.
Pourcequiestdeladclarationdelaressource,pasdechangement:
<! - - XAML- - >
<Wi ndow x: Cl ass=" WPFDot net Fr anceCour se. Wi ndow1"

<Wi ndow. Resour ces>
<Sol i dCol or Br ush x: Key=" Backgr oundBr ush" Col or =" Azur e" / >
</ Wi ndow. Resour ces>

<But t on Mar gi n=" 10" Paddi ng=" 10" Backgr ound=" {St at i cResour ce
Backgr oundBr ush}" >
My But t on
</ But t on>
</ Wi ndow>
<! - - XAML- - >

</ Wi ndow>

Vouslaurezcompris:dansnotreexemplecelanechangepasgrandchose,ilfaudraitpluttse
placer dans une optique ou nos ressources sont des images ou du contenu, qui aura tendance
changerdurantlecycledeviedevotreapplication.

<! - - XAML- - >

<But t on Mar gi n=" 10" Paddi ng=" 10" Backgr ound=" {Dynami cResour ce
Backgr oundBr ush}" >
My But t on
</ But t on>
</ Wi ndow>

6 Conclusion
Dans cette brve introduction, nous avons vu quelques notions lmentaires du WPF. Elles
vousserontutilesafindemieuxapprhenderlesprochainesnotions.
Nousallonsvoirdansleprochainchapitrecomment crernospremirespetitesapplications,
enutilisantdiversconteneursetcontrlesdebase.Veillezdoncinstallertouslesoutilsncessaires
audveloppementWPFavantd'endbuterlalecture.
Pour un complment d'information pour vos dbuts WPF, vous pouvez consulter les
documents publis par Microsoft sur le MSDN : http://msdn.microsoft.com/fr
fr/library/ms742119.aspx.

Introduction À WPF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Introduction À WPF

Hochgeladen von

Copyright:

Verfügbare Formate

IntroductionWPF

<! XAML- - >

Das könnte Ihnen auch gefallen