Création d'une application de dessin à l'aide de WPF

Article
08/21/2008

Mise à jour : novembre 2007

Dans cette leçon, vous apprendrez à créer une application WPF (Windows Presentation Foundation) qui permet de dessiner des images. La création d'une application WPF ressemble à celle d'une application Windows Forms. Faites glisser des contrôles de la Boîte à outils vers l'aire de conception puis écrivez du code pour gérer les événements des contrôles.

lien vers la vidéo Pour une présentation vidéo, consultez la page Vidéo : création d'une application de dessin à l'aide de WPF.

Essayez !

Pour créer une application WPF

Dans le menu Fichier, cliquez sur Nouveau projet.

La boîte de dialogue Nouveau projet s'affiche. Les types d'applications par défaut pouvant être créés à l'aide de Visual Basic Express sont listés dans cette boîte de dialogue.
Sélectionnez Application WPF comme type de projet.
Remplacez le nom de votre application par Tampon encreur, puis cliquez sur OK.

Visual Basic Express crée un dossier pour votre projet. Le dossier a le même nom que le titre de projet. Visual Basic Express affiche également votre nouvelle fenêtre WPF, intitulée Window1, en mode Design. Vous pouvez passer dans l'éditeur de code à tout moment en cliquant avec le bouton droit sur l'aire de conception puis en cliquant sur Afficher le code. Par défaut, l'éditeur XAML est affiché sous le concepteur, mais vous pouvez consulter la vue XAML en plein écran en cliquant avec le bouton droit sur l'aire de conception, puis en cliquant sur Afficher le code XAML.

Pour concevoir l'interface utilisateur

Si vous ne pouvez pas voir la fenêtre Propriétés, dans le menu Affichage, cliquez sur Fenêtre Propriétés. Les propriétés du formulaire ou du contrôle sélectionné sont listées dans cette fenêtre. Vous pouvez modifier les valeurs de propriété existantes dans cette fenêtre.
Modifiez la taille de la fenêtre WPF en affectant à la propriété Height la valeur 550 et à la propriété Width la valeur 370 dans la fenêtre Propriétés.
Modifiez la propriété de titre de la fenêtre WPF Tampon encreur.
Changez la couleur de la propriété Background de la fenêtre WPF en marron. Pour ce faire, cliquez sur Brown dans la zone déroulante et appuyez sur Entrée.

Remarque :

Vous pouvez modifier directement la balise XAML en ajoutant un attribut Background et en lui affectant la valeur Brown: Background="Brown"
Pour ouvrir la boîte à outils, dans le menu Affichage, cliquez sur Boîte à outils.
Cliquez avec le bouton droit sur la boîte à outils, puis cliquez sur Choisir les éléments.

La boîte de dialogue Choisir des éléments de boîte à outils s'affiche.
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 afin qu'une coche apparaisse dans la case à cocher.
Cliquez sur OK pour ajouter le contrôle InkCanvas à la boîte à outils.
Faites glisser un contrôle InkCanvas depuis la boîte à outils vers l'aire de conception.
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

Margins

9, 9, 9, 68
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 au moment de l'exécution.
Faites glisser deux contrôles Button vers la fenêtre WPF, en les positionnant sous le contrôle InkCanvas. Placez button1 à gauche et button2 à droite.
Sélectionnez button1 et modifiez la balise XAML en mode XAML tel qu'indiqué dans la balise suivante. Cette balise affecte à la propriété Text la valeur Clear.
```
<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="Button1" VerticalAlignment="Bottom" 
    Width="75">Clear</Button>
```
Sélectionnez button2 et modifiez la balise XAML tel qu'indiqué dans la balise suivante. Cette balise affecte à la propriété Text la valeur Close.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
L'application WPF doit ressembler à l'application Tampon encreur de l'illustration suivante.

Application WPF Tampon encreur

Remarque :
Vous pouvez modifier directement la balise XAML en ajoutant un attribut Background et en lui affectant la valeur Brown: Background="Brown"

Propriété	Valeur
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margins	9, 9, 9, 68

Pour ajouter du code aux gestionnaires d'événements pour les boutons

Double-cliquez sur Effacer, puis ajoutez le code suivant au gestionnaire d'événements Click généré :
```
    Me.InkCanvas1.Strokes.Clear() 
```
Retournez en mode Design en cliquant avec le bouton droit sur l'éditeur de code et en cliquant sur Concepteur.
Double-cliquez sur Fermer, puis ajoutez le code suivant au gestionnaire d'événements Click généré :
```
    Me.Close()
```
Appuyez sur F5 pour exécuter le projet.
Lorsque l'application démarre, dessinez une image dans le contrôle InkCanvas. Si vous faites une erreur, vous pouvez cliquer sur Effacer pour recommencer.
Cliquez sur Fermer pour quitter l'application.

Étapes suivantes

Dans cette leçon, vous avez appris à créer une application de dessin à l'aide de WPF.

Dans la section suivante, vous apprendrez à utiliser les outils de Visual Basic pour trouver et corriger les erreurs (appelées généralement bogues) présentes dans un programme.

Leçon suivante : Qu'est-ce qui s'est mal passé ? Recherche et résolution des erreurs à l'aide du débogage