LesContrlesWPF

JulienDOLLON

LesContrlesWPF[07/01/09]

Sommaire
1 2 Introduction.....................................................................................................................................3 Lescontrlesdebase...................................................................................................................... 4 2.1 GestiondutexteenWPF......................................................................................................... 4 TextBlock......................................................................................................................... 4 TextBox............................................................................................................................ 6 RichTextBox..................................................................................................................... 7

2.1.1 2.1.2 2.1.3 2.2 2.3

Boutons...................................................................................................................................8 Gestiondeformulaires............................................................................................................ 9 CheckBox......................................................................................................................... 9 RadioButton................................................................................................................... 10 ComboBox..................................................................................................................... 10

2.3.1 2.3.2 2.3.3 2.4

Listesethirarchiesdedonnes........................................................................................... 12 ListView......................................................................................................................... 12 TreeView........................................................................................................................ 13

2.4.1 2.4.2 3

Lescontrlescomplexes............................................................................................................... 14 3.1 Leslmentsprincipaux........................................................................................................ 14 Menu............................................................................................................................. 14 ToolBaretStatusBar...................................................................................................... 20

3.1.1 3.1.2 3.2

Leslmentssecondaires ...................................................................................................... 21 TabControl..................................................................................................................... 21 Expander........................................................................................................................ 23

3.2.1 3.2.2 4

Lescontrlesutilisateurs............................................................................................................... 25 4.1 4.2 QuestcequunUserControl?.............................................................................................. 25 CrationpaspasdunUserControl..................................................................................... 26 InterfaceGraphique...................................................................................................... 26 CodeBehind.................................................................................................................. 29 RutilisationdunUserControl...................................................................................... 31

4.2.1 4.2.2 4.2.3 5

Conclusion.....................................................................................................................................31

DotnetFranceAssociation

LesContrlesWPF[07/01/09]

1 Introduction
Aprs avoir vu comment disposer nos contrles dans une fentre en WPF et les diffrents panels qui existent, nous allons voir quels sont les contrles propos par WPF, comment les utiliser etcequilsnouspermettentdefaire? Maispourcommencerquestcequuncontrle? Un contrle cest tout simplement un objet du Framework .NET. Il est donc fournit par le Framework, ce qui va nous permettre de gagner normment de temps. Vous vous rendrez compte quelaplupartdecescontrlestaientdjprsentaveclesWinForms. En revanche il faut garder lesprit quun contrle est avant toute chose un objet, un lment dune fentre qui va permettre lutilisateur de cette dernire dinteragir avec la couche mtier de notreapplication. CechapitreestextrmementimportantcarilendcouleraleschapitressurlesTemplates,trs importantenWPF,etlacrationdenosproprescontrles. Pour finir, de nombreux dveloppeurs ont tendance faire de plus en plus abstraction de lIHM et se concentrer sur la couche mtier. En revanche il faut garder lesprit que moins lIHM serafaciledutilisationmoinslesfonctionnalitsmtierdevotreapplicationserontfaciledaccs! Cest pourquoi je vous invite tre attentif et connatre lutilit de chacun des contrles qui vousserontprsenticidefaonpouvoirvarieretchoisirleboncontrlelemomentvenu.

DotnetFranceAssociation

LesContrlesWPF[07/01/09]

2 Lescontrlesdebase
2.1 GestiondutexteenWPF
NousverronsdanscettepartielescontrlesquipermettentlamanipulationdetexteenWPF. Vous noterez en revanche que nous ne parlerons pas du label, tout simplement car il na pas changavecWPF. TextBlock Un TextBlock ou System.Windows.Controls.TextBlock est un contrle destin tre lgeretparconsquentafficherdepetitesquantitsdetexte. Un TextBlock peut contenir toute les proprits de contenu de type Inlines, c'estdire Bold, Italic,Hyperlinketc. Pour ce premire exemple nous verrons comment dclarer un TextBlock en XAML et en C# maisparlasuitenousconserveronsseulementleXAML.
<!--XAML--> <TextBlock Name="DFTextBlock" Margin="10,10,10,10" TextWrapping="Wrap" Height="170" Width="215"> <Bold>Dotnet-France</Bold> formez vous pour passer vos <Italic>certifications</Italic> </TextBlock>

2.1.1

Comme vous pouvez le voir rien de sorcier cela reste similaire ce quon a vu prcdemment danslecourssurlelayoutWPFauniveaudeladclarationenXAML. CommevouspouvezlevoirlintrieurdenotreTextBlockonautilisdeuxpropritsdetype InlinesBoldetItalic. PourcequiestdeladclarationenC#:
//C# TextBlock textBlock1 = new TextBlock(); textBlock1.TextWrapping = TextWrapping.Wrap; textBlock1.Name = "DFTextBlock"; Thickness myThickness = new Thickness(); myThickness.Bottom = 10; myThickness.Left = 10; myThickness.Right = 10; myThickness.Top = 10; textBlock1.Margin = myThickness; textBlock1.Height = 170; textBlock1.Width = 215; textBlock1.FontWeight = FontWeights.UltraBold; textBlock1.Text = "Dotnet-France formez vous pour passer vos certifications"; this.Content = textBlock1;

DotnetFranceAssociation

LesContrlesWPF[07/01/09]

VB Dim textBlock1 As New TextBlock() textBlock1.TextWrapping = TextWrapping.Wrap textBlock1.Name = "DFTextBlock" Dim myThickness As New Thickness() myThickness.Bottom = 10 myThickness.Left = 10 myThickness.Right = 10 myThickness.Top = 10 textBlock1.Margin = myThickness textBlock1.Height = 170 textBlock1.Width = 215 textBlock1.FontWeight = FontWeights.UltraBold textBlock1.Text = "Dotnet-France formez vous pour passer vos certifications" Me.Content = textBlock1

Onarriveaursultatsuivant:

DotnetFranceAssociation

LesContrlesWPF[07/01/09] 2.1.2 TextBox Un TextBox ou System.Windows.Controls.TextBox est un contrle qui offre la possibilit dentrer du texte simple dans vos applications WPF. Il fonctionne pratiquement de la mme manire quavec les WinForms, le dpaysement ne sera donc pas total: nous allons juste rajouterunenotiondXAML. VoicicommentondclareunetextboxenXAML:
<!--XAML--> <TextBox Height="23" Name="DFTextBox" MaxLength="12" Width="120"> Dmo </TextBox>

Dans notre exemple vous pouvez voir quon peut limiter le nombre de caractres que peut contenir la Textbox, trs pratique dans un formulaire ou on a besoin par exemple dune rfrence avecunnombredecaractresbiendfinis. Comme on le verra tout lheure une Textbox requiert moins de ressources quune RichTextBox en revanche elle ne permet pas autant de choses. La Textbox permet tout de mme davoir accs aux fonctionnalits de vrification orthographique en temps rel et un menu contextuel.

DotnetFranceAssociation

LesContrlesWPF[07/01/09] 2.1.3 RichTextBox Une RichTextBox ou System.Windows.Controls.RichTextBox est un contrle ddition avancquiproposeplusdefonctionnalitquelaTextBox. En effet, comme on a pu le voir, les fonctionnalits proposes par une Texbox restent tout de mme limites. La RichTextBox va possder les mmes fonctionnalits de base quune Textbox avec en plus la possibilit de mettre en forme notre texte ou encore avoir du contenu tel que des images destableauxetc.,toutcelafaitunpeupenserauxWYSIWYG. VoicicommentdclareruneRichTextBoxenXAML:
<!--XAML--> <RichTextBox SpellCheck.IsEnabled="True" Language="en-us" Height="100" Name="DFRichTextBox" Width="200" />

Comme vous pouvez le voir ici, nous avons dcid dimplmenter notre RichTextBox loption decorrectionorthographiquequipeutsavrertretrspratique. Pourcefaire,nousavonsutilislapropritSpellCheck.IsEnabledquonadfiniTruepuison a spcifi la langue grce la proprit Language. Ainsi en deux temps trois mouvements on a une entretexteaveccorrectionorthographiquedansnotreprogramme. Etvoicilersultat:

DotnetFranceAssociation

LesContrlesWPF[07/01/09]

2.2 Boutons
notre Nous allons maintenant baser notre tude sur un contrle de base mais trs important dans application, ce contrle est bien sr le bouton en WPF
System.Windows.Controls.Button.

Concrtement,leboutonvapermettrevotreutilisateurdexcuterlactionencoursdefaon explicite. Pour crer un bouton, rien de trs difficile, tout en continuant dans notre lanc sur du code XAML,voicicommentsedrouleladclarationdunboutonenXAML:
<!--XAML--> <Button Height="50" Name="DFButton" Width="150">Exit</Button>

EtvoicileRsultat:

On ne se penchera pas ici sur la gestion des vnements lis ce bouton car comme nonc prcdemment les vnements sont le sujet des chapitres suivants que je vous invite donc consulter.

DotnetFranceAssociation

LesContrlesWPF[07/01/09]

2.3 Gestiondeformulaires
Nous allons continuer notre dcouverte des contrles de WPF par celle des contrles de formulaires. Un formulaire est clairement ce qui va proposer lutilisateur un espace de saisi dans linterface de votre programme, cet espace de saisi nest bien sr pas limit des contrles comme les Textbox ou Richtextbox mais peut aussi tre des CheckBox, RadioButton ou encore ComboBox commeonpourralevoirdanscettepartie. CheckBox Les CheckBox ou System.Windows.Controls.Checkbox sont utilis dans une application gnralementpourprsenteruneoptionlutilisateurquilpeutactiveroudsactiver.LesCheckBox peuventavoirparcontre3tats:activ,dsactivetindtermin. Vous pouvez utiliser une CheckBox seule, comme par exemple pour que lutilisateur dcide de se loger automatiquement Ou plusieurs pour la mme question comme par exemple pour un moteurderechercheimmobilierouonchoisiraitderechercherunevillaavec2OU3chambres. VoicicommentenXAMLondclareuneCheckBox:
<!--XAML--> <CheckBox Height="16" Name="DFCheckBox1" Margin="79,0,79,102"> Clibataire </CheckBox> <CheckBox Height="16" Name="DFCheckBox2" Margin="79,0,79,50"> Divorc </CheckBox>

2.3.1

Comme on peut lobserver rien de trs compliqu encore une fois, voici le rsultat que nous donnececode:

Pour exploiter en C# une TextBox il suffit dutiliser la mthode IsChecked qui renvoie un boolen,truesicochfalsedanslecascontraire.

DotnetFranceAssociation

10

LesContrlesWPF[07/01/09] 2.3.2 RadioButton Pour continuer sur les contrles de formulaires on va tudier maintenant le RadioButton ou System.Windows.Controls.RadioButton.Lebutdunradioboutonestdedonnerlechoixetun seul et unique choix parmi un ensemble de propositions/options. En effet, on ne peut slectionner quunseulRadioButtonlafois. Cest la seule convergence quil y a entre la CheckBox et le Radiobutton. En effet on va continuerdutiliserlamthodeIsCheckedpourvrifiersileRadioButtonestslectionnoupas. Gnralement pour ce type de slection nous apprcions utiliser un StackPanel, et ce sera loccasiondemettreenpratiqueconcrtementlechapitreprcdentsurlelayoutWPF. VoicicommentondclaredesRadioButtons.EnXAML:
<!--XAML--> <Window x:Class="WPFDotnetFrance.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid> <StackPanel> <RadioButton GroupName="sexe">Homme</RadioButton> <RadioButton GroupName="sexe">Femme</RadioButton> </StackPanel> <StackPanel HorizontalAlignment="Center"> <RadioButton GroupName="age">Mineur</RadioButton> <RadioButton GroupName="age">Majeur</RadioButton> </StackPanel> </Grid> </Window>

Comme vous pouvez le voir on a sparer deux groupes de Textbox grce la proprit GroupName qui va nous permettre donc davoir deux groupes diffrent de RadioButton donc ici on vapouvoirdiresionestuneFemmeouunHommeETsionestmineuroumajeur. Voicilersultat:

2.3.3 ComboBox Nous allons poursuivre en vous prsentant le ComboBox ou System.Windows.Controls.Combobox. Un ComboBox est un contrle qui va nous permettre dafficherunelistedroulantedunclicoudelamasquerdelammefaon. VoicienXAMLcommentonpeutdfiniruneComboBox: DotnetFranceAssociation

11

LesContrlesWPF[07/01/09]

<!--XAML--> <Window x:Class="WPFDotnetFrance.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid> <ComboBox Height="20" Margin="54,105,57,0" VerticalAlignment="Top"> <ComboBoxItem>Livre</ComboBoxItem> <ComboBoxItem>Film</ComboBoxItem> <ComboBoxItem>Logiciel</ComboBoxItem> <ComboBoxItem>Musique</ComboBoxItem> </ComboBox> </Grid> </Window>

Comme vous pouvez le voir cest assez facile, nous allons utiliser une balise principal ComboBox laquelle nous allons passer les proprits habituelles c'estdire Height, Width Margin etc.EtdanscettedernirenousallonsajouterlesbalisesComboBoxItemquivontnouspermettrede dfinirunitemdansnotrecomboboxtoutsimplement. Voicilersultatfinal:

DotnetFranceAssociation

12

LesContrlesWPF[07/01/09]

2.4 Listesethirarchiesdedonnes
ListView La ListView va vous permettre dordonner et classer des donnes dans une liste la manire decequelonpeuttrouverdanslexplorateurderpertoiredeWindows. On utilise gnralement le contrle ListView avec le Data Binding qui permet de lier des donnes un contrle trs simplement. Comme nous navons pas vu comment utiliser le Data Bindingpourlinstant,nousallonsnouscontenterdunexemplesommaire. Afin dutiliser une ListView, il faut pralablement la dclarer dans votre fichier XAML, puis ensuitemodelersonpatron,basedeGridView.VoiciunexempledeListView:
<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" Width="300" Height="300"> <ListView Name="MyListView"> <ListView.View> <GridView> <GridViewColumn Width="150" Header="Column 1" /> <GridViewColumn Width="150" Header="Column 2" /> </GridView> </ListView.View> </ListView> </Window>

2.4.1

Nous venons donc de crer une ListView que nous avons dclar avec les balises ListView, et nous lui avons donn un nom. Ensuite, nous indiquons entre les balises ListView.View le patron de nosListView. LesbalisesGridViewpermettentdedlimiterlagrillequenousallonsdessinerdanslaListView. AlintrieurnoustrouvonsdeuxbalisesGridViewColumnquivontnouspermettredlafoisnommer chaquecolonne,maisaussideremplirchaquelignegrceauDataBinding.Nousauronsloccasionde vous montrer comment remplir une ListView ou tout autre contrle dans le chapitre ddi au Data Binding. Sinouscompilonsnotreexemple,nousavonsbienfaireuneListViewvide:

DotnetFranceAssociation

13

LesContrlesWPF[07/01/09] 2.4.2 TreeView TreeView va vous permettre un peu la manire de ListView dordonner des donnes, mais cettefoiscinonplusdansuneliste,maispluttdansunehirarchie. LutilisationdeTreeViewressembleunpeuceluideListView,maisillavantagedeproposer dimbriquerplusieursitemsafindecrervosarbres.UnTreeViewsecomposedonctoutsimplement deTreeViewItemauquelondfinitunevaleurlattributHeader.VoiciunexempledeTreeView:
<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" Width="300" Height="300"> <TreeView> <TreeViewItem Header="Gaa"> <TreeViewItem Header="Titans"> <TreeViewItem Header="Hyprion" /> <TreeViewItem Header="Cronos" /> </TreeViewItem> <TreeViewItem Header="Dieux"> <TreeViewItem Header="Zeus" /> <TreeViewItem Header="Dmter" /> </TreeViewItem> </TreeViewItem> </TreeView> </Window>

Cequidonne:

DotnetFranceAssociation

14

LesContrlesWPF[07/01/09]

3 Lescontrlescomplexes
3.1 Leslmentsprincipaux
Menu Si on ne devait retenir quun seul contrle complexe, on choisirait coup sr Menu. En effet, celuicivanouspermettredecrerlesbarresdemenustraditionnellesquelonretrouvedanstoutes lesapplicationsquevousconnaissez(Fichier,Edition,Affichage)ainsiquedesmenuscontextuels,le toutgrcequelquesbalisesXAML. Pourcrerunmenu,nousallonsutiliserprincipalementdeuxclasses,MenuetMenuItem. La classe Menu nous permet de grouper un ensemble de MenuItem afin de composer notre menu. La Classe MenuItem drive du type Windows.Controls.HeaderedItemsControl et nous permetainsidutiliserdeuxpropritsindispensable:Header etItems Header va nous permettre dindiquer le titre du menu, par exemple, le traditionnel Fichier, Item elle permet dindiquer tous les enfants de ce menu, on va y retrouver donc Ouvrir,Enregistreretc. Note: Pour donner une valeur Item, vous pouvez par dfaut lindiquer dans les balises ouvranteetfermantedevotreMenuItem.Gnralement,enXAML,oncritdoncjamaislaproprit Item.EnC#ouVB.NET,vousdevrezparcontrelutiliser. VoyonsmaintenantunpremierexempledutilisationdeMenuItem,celuidunepetitebarrede Menu:
<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" Width="300" Height="300"> <Grid x:Name="LayoutRoot"> <MenuItem Header="Fichier"> <MenuItem Header="Nouveau" /> <MenuItem Header="Ouvrir" /> <MenuItem Header="Enregistrer" /> </MenuItem> </Grid> </Window>

3.1.1

DotnetFranceAssociation

15

LesContrlesWPF[07/01/09] Acestadel,sivouscompilez,vousverrezsafficherunnormeboutonFichieravecunepetite flche son extrmit droite. De plus, si vous cliquez sur le bouton, rien ne se passera. Nous allons rajouter maintenant les balises Menu dont nous avons parl plus haut afin denglober tous nos MenuItem en une entit unique. Nous en profitons galement pour rajouter un second MenuItem: Edition:
<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" Width="300" Height="300"> <Grid x:Name="LayoutRoot"> <Menu> <MenuItem Header="Fichier"> <MenuItem Header="Nouveau" /> <MenuItem Header="Ouvrir" /> <MenuItem Header="Enregistrer" /> </MenuItem> <MenuItem Header="Edition"> <MenuItem Header="Annuler" /> <MenuItem Header="Copier" /> <MenuItem Header="Coller" /> </MenuItem> </Menu> </Grid> </Window>

Acestade,notreexemplecommenceressemblerunebarredemenu:

Nous ne sommes cela dit pas tout fait satisfait de son apparence, nous allons y remdier en utilisant un layout vu au chapitre prcdent: DockPanel. Voici lapparence que va prendre notre menu si nous le collons tout en haut de notre fentre, et que nous rajoutons une zone de texte en dessous:

DotnetFranceAssociation

16

LesContrlesWPF[07/01/09]

<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" Width="300" Height="300"> <Grid x:Name="LayoutRoot"> <DockPanel> <Menu DockPanel.Dock="Top"> <MenuItem Header="Fichier"> <MenuItem Header="Nouveau" /> <MenuItem Header="Ouvrir" /> <MenuItem Header="Enregistrer" /> </MenuItem> <MenuItem Header="Edition"> <MenuItem Header="Annuler" /> <MenuItem Header="Copier" /> <MenuItem Header="Coller" /> </MenuItem> </Menu> <TextBlock /> </DockPanel> </Grid> </Window>

Nousavonsfinalementunmenucorrectementdessin.

DotnetFranceAssociation

17

LesContrlesWPF[07/01/09] Maintenant que nous avons vu le cas de la barre de menu, nous allons examiner un exemple demenucontextuel.Nousallonsrestertrssuccinctlexemplereprenantdanslensemblelesnotions vuprcdemment.
<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" Width="300" Height="300"> <Grid x:Name="LayoutRoot"> <DockPanel> <Menu DockPanel.Dock="Top"></Menu> <TextBlock x:Name="TextContent" ContextMenuOpening="MAJ_Delete_Item"> <TextBlock.ContextMenu> <ContextMenu> <MenuItem Header="Ajouter"> <MenuItem x:Name="AjouterMot" Header="Mot" Click="AjouterMot_Click" /> <MenuItem x:Name="AjouterPhrase" Header="Phrase" Click="AjouterPhrase_Click" /> </MenuItem> <MenuItem x:Name="Delete" Header="Effacer" Click="Delete_Click"/> </ContextMenu> </TextBlock.ContextMenu> </TextBlock> </DockPanel> </Grid> </Window>

NousavonsdoncsousnotreprcdentmenuajoutunTextBlock.Nousluidonnonsunnom, etluifaisonssouscrirelvnementContextMenuOpeningquivanouspermettredexcuterune mthodelouverturedumenucontextuel. AlintrieurdeceTextBlock,nousavonslesbalisesTextBlock.ContextMenuquipermettent dassocierunmenucontextuelceTextBlock.Lorsqueloncliquerasurleboutondroitlintrieur, notremenusouvrira.EnfinnousencapsulonsnosMenuItemdanslesbalisesContextMenu,dela mmemanirequepourlabarredeMenu. VousremarquerezquenousavonsdonndesnomsetsouscritauxvnementsClickdenos MenuItemafindajouterunpeudinteractivitcemenu.Vousdevrezdfinirlecomportementde touteslesmthodesappelesdanslefichierC#ouVB.NETassocivotreXAML.Voiciunexemple enC#:

DotnetFranceAssociation

18

LesContrlesWPF[07/01/09]

//C# public partial class Window1 : Window { public Window1() { this.InitializeComponent(); } private void Delete_Click(object sender, RoutedEventArgs e) { if (TextContent.Text != "") TextContent.Text = ""; } private void AjouterMot_Click(object sender, RoutedEventArgs e) { TextContent.Text += "Bonjour "; } private void AjouterPhrase_Click(object sender, RoutedEventArgs e) { TextContent.Text += "Je m'appelle Paul. "; } private void MAJ_Delete_Item(object sender, RoutedEventArgs e) { Delete.IsEnabled = (TextContent.Text != ""); } }

VB Partial Public Class Window1 Inherits Window Public Sub New() Me.InitializeComponent() End Sub Private Sub Delete_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) If TextContent.Text <> "" Then TextContent.Text = "" End If End Sub Private Sub AjouterMot_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) TextContent.Text += "Bonjour " End Sub Private Sub AjouterPhrase_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) TextContent.Text += "Je m'appelle Paul. " End Sub Private Sub MAJ_Delete_Item(ByVal sender As Object, ByVal e As RoutedEventArgs) Delete.IsEnabled = (TextContent.Text <> "") End Sub End Class

DotnetFranceAssociation

19

LesContrlesWPF[07/01/09]

Le code nest pas bien compliqu, remarquez juste la mthode MAJ_Delete_Item qui rend disponibleounonleboutonEffacerselonlecontenudenotreTextBlock.

DotnetFranceAssociation

20

LesContrlesWPF[07/01/09] 3.1.2 ToolBaretStatusBar La cration dune barre doutils et dune barre de statut est vraiment simple en WPF. Vous disposez pour cela de deux classes: Toolbar et StatusBar drivant toutes les deux de System.Windows.Controls.ItemsControldontellesrcuprentlapropritItems. Item est une collection dobjets de type object, vous pouvez donc englober dans vos barres nimportequelobjet,quecesoitunbouton,uneimageouunslider. Voyons tout de suite un exemple dutilisation, nous allons crer une fentre contenant nos deuxbarresdockeenhautetenbas.
<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" Width="300" Height="300"> <Grid x:Name="LayoutRoot"> <DockPanel> <Menu DockPanel.Dock="Top"></Menu> <ToolBar DockPanel.Dock="Top"> <Button Content="Selectionner Tout" /> <Separator /> <Slider Width="150" /> <Separator /> <CheckBox>Debug</CheckBox> </ToolBar> <StatusBar DockPanel.Dock="Bottom"> <ProgressBar Width="150" Value="50" /> </StatusBar> <TextBlock /> </DockPanel> </Grid> </Window>

Cequinousdonnesimplement:

Le code XAML ne reprsente, comme vous le voyez, aucune difficult, on englobe simplement lescontrlesentrelesbalises<StatusBar/>ou<ToolBar/>.Difficiledefaireplussimple.

DotnetFranceAssociation

21

LesContrlesWPF[07/01/09]

3.2 Leslmentssecondaires
TabControl TabControl va nous permettre de crer des onglets que vous pouvez retrouver couramment dansWindowsetdiversautresapplications. Tout comme les barres vu prcdemment, TabControl drive de ItemsControl, vous pouvez doncutilisertouslesobjetsquevoussouhaitezafinderemplirvosonglets.Gnralement,onremplit nosTabControlavecdesTabItem. TabItem drive de HeaderedContentControl, dont il reprend les proprits Header (pour le titre de longlet) et Content (pour le contenu de longlet). Ces deux proprits acceptent tout type dobjetmais nesontpasdescollections!Vousdevrezdoncutiliserun Layoutsivousvoulez disposer plusieurscontrlesdansleContentouleHeader. VoyonstoutdesuiteunexemplesimpledelutilisationdesTabControl.
<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" Width="300" Height="300"> <Grid x:Name="LayoutRoot"> <TabControl> <TabItem Header="Proprits"> <StackPanel> <CheckBox>Autoriser l'criture</CheckBox> <CheckBox>Enregistrer aussi en PDF</CheckBox> <Separator /> <TextBlock>Taille de compression :</TextBlock> <Slider Width="150" /> </StackPanel> </TabItem> <TabItem Header="Avanc"> <CheckBox>Activer le mode Avanc ?</CheckBox> </TabItem> </TabControl> </Grid> </Window>

3.2.1

Cequidonne:

DotnetFranceAssociation

22

LesContrlesWPF[07/01/09] L encore le code ne reprsente pas une norme difficult, lexemple ressemble beaucoup au premier Menu que nous avons produit plus haut. Attention de ne pas confondre TabControl et TabItemceladit. Remarque: Par dfaut, le premier TabItem est toujours affich en premier. Il est possible de changercelaenmettantTruelattributIsSelectedduTabItemafficherenpremier.

DotnetFranceAssociation

23

LesContrlesWPF[07/01/09] 3.2.2 Expander LExpander est un contrle complexe permettant de crer des zones enroulable au sein de votreprogramme.IldrivetoutcommeTabItemdeHeaderedContentControl,ilenrcupredoncles propritsHeaderetContent. Plus difficile dcrire qu inclure dans vos programmes, nous allons tout de suite passer lexemple.
<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" Width="300" Height="300"> <StackPanel> <Expander Header="Proprits" IsExpanded="True"> <StackPanel> <CheckBox>Autoriser l'criture</CheckBox> <CheckBox>Enregistrer aussi en PDF</CheckBox> <Separator /> <TextBlock>Taille de compression :</TextBlock> <Slider Width="150" /> </StackPanel> </Expander> <Separator /> <Expander Header="Avanc" ExpandDirection="Right"> <CheckBox>Activer le mode Avanc ?</CheckBox> </Expander> </StackPanel> </Window>

NousavonsdonccrdeuxExpandersurlemmemodlequelexemplesurTabControl: Le premier Expander contient un StackPanel contenant luimme divers contrles. Il a pour entte Proprits et possde galement un attribut IsExpanded True lui permettantdtredroulpardfaut. Le Second Expander ne contient quun seul contrle (une checkbox), son entte est Avanc et il possde lattribut ExpandDirection dfinit Right qui permet dindiquerquelExpanderdevrasedroulerversladroite. Cequidonne:

DotnetFranceAssociation

24

LesContrlesWPF[07/01/09] RemarquezlaflcheorienteversladroitedusecondExpander.

DotnetFranceAssociation

25

LesContrlesWPF[07/01/09]

4 Lescontrlesutilisateurs
4.1 QuestcequunUserControl?
Si vous avez connu les WinForms, vous allez tre un peu chamboul par les UserControl en WPF. En effet, alors quauparavant ils servaient tendre nimporte quel contrle pour ladapter, graphiquement on fonctionnellement son application, on va dornavant sparer la partie graphiqueetfonctionnelledenoscontrles. Un UserControl va donc consister en WPF un regroupement de contrles qui nen forment plusquunetdontonpeutmodifierlecomportement. AinsinousallonspouvoircrerparexempleunUserControlquivanousservirdeformulairede Loginafindepouvoirlerutiliserfacilementdansplusieursapplications. Nous naborderons pas dans ce chapitre comment modifier lapparence de notre UserControl, en effet les notions requises la cration dun Custom Control (puisque cest son nom) seront vues danslechapitresuivant.

DotnetFranceAssociation

26

LesContrlesWPF[07/01/09]

4.2 CrationpaspasdunUserControl
Pour la cration de notre UserControl nous allons crer un projet de base WPF. Nous ne reviendrons pas ici sur la cration dun projet, si vous avez un problme ce niveau l nous vous invitonsconsulterleChapitre1dintroductionWPF. 4.2.1 InterfaceGraphique Une fois le projet cr, nous allons maintenant ajouter un nouvel UserControl via linterface graphiquedeVisualStudio:

ConcrtementquevafaireVisualStudio?ToutsimplementouvrirlafentreAddNewItem etpointerleboncomposant.Decefaitvousnaurezplusquluidonnersonnom:

DotnetFranceAssociation

27

LesContrlesWPF[07/01/09]

Commevouspouvezleremarquer,notreUserControldurantladuredececoursseranomm LoginControl. Durant cette premire partie, nous allons nous intresser linterface graphique de notre contrlepuisnousverronsparlasuitelecodebehind.
<!--XAML--> <UserControl x:Class="WPF.LoginControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="300" Width="300"> <Grid> </Grid> </UserControl>

Comme vous pouvez le voir, on utilise la balise <UserControl> au lieu de <Window> lorsque lontravaillesurlesUserControl. MaintenantnousallonsajouterdiverscontrlesnotreUserControlcarcommeonapulevoir prcdemment,unUserControlesttoutsimplementunControlcontenantdautrescontrles. IcilebutestdecrerunUserControldeLoginquicontientunchamploginunchamppassword deslabelsdedescriptionetunboutondevalidation. Voicicequeceladonne:

DotnetFranceAssociation

28

LesContrlesWPF[07/01/09]

<!--XAML--> <UserControl x:Class="WPF.LoginControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="300" Width="300"> <Grid> <Label Height="28" Margin="91,63,89,0" Name="LoginLabel" VerticalAlignment="Top">Login</Label> <Label Margin="91,143,89,129" Name="PasswordLabel">Password</Label> <TextBox Height="23" Margin="91,97,89,0" Name="LoginTextBox" VerticalAlignment="Top" /> <PasswordBox Height="23" Margin="91,0,89,100" Name="PasswordTextBox" VerticalAlignment="Bottom" /> <Button Height="23" Margin="91,0,89,45" Name="SignInButton" VerticalAlignment="Bottom">Sign In</Button> </Grid> </UserControl>

Touscescontrlesayanttvuprcdemmentvousdevriezcomprendrececodeaisment. Voicilersultat:

DotnetFranceAssociation

29

LesContrlesWPF[07/01/09] 4.2.2 CodeBehind NousallonsmaintenantpasseraucodebehinddenotreUserControl. Dans ce cas lessentiel tait de montrer ce qut un UserControl, comment crer un UserControletfinalementcommentlutiliser.Cestpourquoivouslaurezcomprislecodebehindque nousproposonsestextrmementsimple.Vouspourrezceladittotalementtendrelecomportement devotreUserControlsansrestriction. Lexemple consiste donc simplement grer lvnement Click du bouton SignIn et afficher uneMessageBoxcontenantlutilisateur.
//C# using using using using using using System; System.Collections.Generic; System.Linq; System.Text; System.Windows; System.Windows.Controls;

namespace WPF { /// <summary> /// Interaction logic for LoginControl.xaml /// </summary> public partial class LoginControl : UserControl { public LoginControl() { InitializeComponent(); } private void SignInButton_Click(object sender, RoutedEventArgs e) { MessageBox.Show(LoginTextBox.Text); } } }

DotnetFranceAssociation

30

LesContrlesWPF[07/01/09]

Imports Imports Imports Imports Imports Imports

System System.Collections.Generic System.Linq System.Text System.Windows System.Windows.Controls

Namespace WPF ''' <summary> ''' Interaction logic for LoginControl.xaml ''' </summary> Partial Public Class LoginControl Inherits UserControl Public Sub New() InitializeComponent() End Sub Private Sub SignInButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) MessageBox.Show(LoginTextBox.Text) End Sub End Class End Namespace

Comme vous pouvez le voir il ny a vraiment rien de compliqu au niveau fonctionnel. Mais noubliezpasdelierlvnementClickduboutonlamthodeSignInButton_Click.

DotnetFranceAssociation

31

LesContrlesWPF[07/01/09] 4.2.3 RutilisationdunUserControl Maintenant que nous avons cr notre UserControl, nous allons pouvoir le rutiliser volont dans nos applications. Pour cela, nous allons simplement le rajouter en XAML comme nous laurions faitpournimportequelcontrle:
<!--XAML--> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF.Window1" x:Name="Window" Title="Window1" xmlns:lc="clr-namespace:WPF" Width="300" Height="300"> <Grid> <lc:LoginControl></lc:LoginControl> </Grid> </Window>

Attention toutefois, comme notre User Control nappartient pas au namespace fournit par les .NET Framework, nous allons devoir indiquer notre application de lutiliser. Nous avons donc rajoutlalignesuivantedansnotrebalise<Window>:
<!--XAML--> xmlns:lc="clr-namespace:WPF"

Ainsi,nousfaisonslquivalentdunusingenC#ouImportsenVB.NET. VousdevrezfinalementprfixerlenomdevotreUserControlparlenomdunamespaceXAML. IcinousavonschoisitlcpourLoginControl.

<!--XAML--> <lc:LoginControl></lc:LoginControl>

5 Conclusion
Pour conclure, on a pu voir tout au long de ce chapitre ce qut concrtement un contrle WPF, comment se servir des contrles de base comme les boutons les TextBlocks etc. Mais galement des contrles plus complexes comme les menus ou Expanders. Enfin nous avons vu commentcrercesUserControl. Nous navons pas parl dans ce chapitre des contrles mdias, car mme si cest une partie importanteetunenouveautdeWPF,nousavonsprfrleurddierunchapitrespcial. Nous navons pas dcrit en dtail toutes les proprits de chaque contrle dans ce chapitre pour une raison de place. Afin dapprofondir ltude dun contrle en particulier, et connaitre toutes ses proprits, rendez vous sur la doc MSDN: http://msdn.microsoft.com/fr fr/library/ms752324.aspx Pour largir notre tude de WPF, je vous invite suivre le chapitre suivant qui traitera des Templates,StylesetCustomControl.

DotnetFranceAssociation