Module au choix : Programmation .NET / C# 2ATEL A.
U 2020-2021
WINDOWS PRESENTATION FOUNDATION (WPF)
TP : Création d’une première application WPF
(Application manuscrite pour dessiner des images)
Ce TP a pour objectif de vous montrer comment créer une application Windows
Presentation Foundation (WPF) simple et vous familiariser avec l'environnement de
développement intégré (IDE, Integrated Development Environment) de Visual Studio 2015
C#). Comme pour les applications Windows Forms, vous pouvez concevoir des applications
WPF en faisant glisser des contrôles de la Boîte à outils vers une aire de conception. L'IDE
des projets WPF propose non seulement un concepteur, une fenêtre Propriétés et une Boîte
à outils, mais également une fenêtre qui contient du XAML. Le sigle XAML (eXtensible
Application Markup Language) désigne un langage qui permet de créer une interface
utilisateur.
Dans ce TP, vous allez apprendre à effectuer les tâches suivantes :
créer une application WPF ;
basculer entre le mode code et le mode concepteur ;
modifier les propriétés de la fenêtre WPF ;
utiliser l'éditeur XAML ;
ajouter un contrôle System.Windows.Controls.InkCanvas ;
ajouter un contrôle System.Windows.Controls.Button.
créer des gestionnaires d'événements pour les contrôles.
Pour créer une application WPF
1. Dans le menu Fichier, cliquez sur Nouveau projet.
2. La boîte de dialogue Nouveau projet s'affiche. Les différents types d'applications par
défaut pouvant être créés par Visual C# sont listés dans cette boîte de dialogue.
3. Cliquez sur Application WPF.
Hadj Massaoud Lobna 1/6
Module au choix : Programmation .NET / C# 2ATEL A.U 2020-2021
4. Renommez votre application en DessinerWPF.
5. Visual C# crée un dossier pour votre projet dont le nom est tiré du titre du projet,
puis il affiche votre nouvelle fenêtre WPF, en mode Design. Vous pouvez passer en
mode code à tout moment. Pour ce faire, cliquez avec le bouton droit sur l’espace
alloué au Design et sélectionnez View Code. L'éditeur XAML s'affiche par défaut sous
le Design.
6. La fenêtre WPF que vous voyez en mode Design est une représentation visuelle de la
fenêtre qui s'ouvrira au lancement de votre application. En mode Design, vous
pouvez faire glisser divers contrôles de la Boîte à outils vers la fenêtre WPF. Une fois
que vous avez fait glisser un contrôle vers la fenêtre WPF, Visual C# crée
automatiquement du code qui positionnera correctement le contrôle au moment de
l'exécution du programme.
7. Si la fenêtre Propriétés ne s'affiche pas, dans le menu View, cliquez sur Properties
Window. Les propriétés de la fenêtre WPF ou du contrôle actuellement sélectionné
sont listées dans cette fenêtre. Vous pouvez y modifier les valeurs existantes.
8. Modifiez la taille de la fenêtre WPF
en affectant la valeur 550 à la
propriété Height et en affectant la
valeur 370 à la propriété Width dans
la fenêtre Properties
Hadj Massaoud Lobna 2/6
Module au choix : Programmation .NET / C# 2ATEL A.U 2020-2021
9. Renommez le titre de la fenêtre
WPF en Dessiner.
10. Changez la couleur de la propriété
Background de la fenêtre WPF en
marron. Pour ce faire, cliquez sur
Brown dans la zone Brushes et
appuyez sur Entrée.
Vous avez également la possibilité de modifier directement le balisage XAML en ajoutant un
attribut Background et en lui affectant la valeur Background="Brown".
11. Faites glisser un contrôle InkCanvas de la Boîte à outils vers la fenêtre WPF. Si ce
contrôle n’apparaît pas dans la Boîte à outils vous devriez l’ajouter en sélectionnant
Choose Items
Hadj Massaoud Lobna 3/6
Module au choix : Programmation .NET / C# 2ATEL A.U 2020-2021
12. Dans l'onglet Composants WPF de la boîte de dialogue choisir des éléments de boîte
à outils, faites défiler la liste jusqu'à InkCanvas et sélectionnez-le. Faites défiler la
liste jusqu'à InkCanvas, sélectionnez-le et cochez la case à cocher.
13. Cliquez sur OK pour ajouter le contrôle InkCanvas à la Boîte à outils.
14. Définissez les propriétés suivantes du contrôle InkCanvas dans la fenêtre Propriétés :
Propriété Valeur
Width Auto
Height Auto
HorizontalAlignment Stretch
VerticalAlignment Stretch
Margin 9, 9, 9, 68
15. Passez la couleur du contrôle InkCanvas à jaune en affectant à sa propriété
Background la valeur LightYellow. La couleur d'arrière-plan du contrôle InkCanvas
apparaîtra en jaune clair.
Hadj Massaoud Lobna 4/6
Module au choix : Programmation .NET / C# 2ATEL A.U 2020-2021
16. Faites glisser deux contrôles Button dans la fenêtre WPF sous le contrôle InkCanvas.
Positionnez button1 à gauche et button2 à droite.
17. Sélectionnez button1 et modifiez le balisage XAML en mode XAML comme indiqué
dans le balisage ci-dessous. Ce balisage affecte Effacer au texte.
<Button x:Name="beffacer" Content="Effacer" HorizontalAlignment="Left" Margin="85,0,0,24"
VerticalAlignment="Bottom" Width="75" Height="23"/>
18. Sélectionnez button2 et modifiez le balisage XAML comme indiqué dans le balisage
ci-dessous. Ce balisage affecte Fermer au texte.
<Button x:Name="bfermer" Content="Fermer" HorizontalAlignment="Right" Margin="0,0,72,24"
VerticalAlignment="Bottom" Width="75" Height="23"/>
19. L'application WPF doit ressembler à l'application Tampon encreur de l'illustration
suivante :
Hadj Massaoud Lobna 5/6
Module au choix : Programmation .NET / C# 2ATEL A.U 2020-2021
Pour créer des gestionnaires d'événements
Vous allez maintenant intercepter les clics effectués sur les boutons
1. Double-cliquez sur Effacer, puis ajoutez le code suivant au gestionnaire
d'événements Click généré :
2. Revenez en mode Design. Pour ce faire, cliquez avec le bouton droit sur l'éditeur de
code, puis cliquez sur Design.
3. Double-cliquez sur Fermer, puis ajoutez le code suivant au gestionnaire
d'événements Click généré :
4. Appuyez sur F5 pour exécuter le projet.
5. Lorsque l'application s'ouvre, dessinez une image dans le contrôle InkCanvas. Si vous
faites une erreur, vous pouvez cliquer sur Effacer pour recommencer ou Cliquez sur
Fermer pour quitter l'application.
Hadj Massaoud Lobna 6/6
