Comment : créer une application WPF C#

  • Article

Mise à jour : novembre 2007

Cette rubrique 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 C# Express. 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. L'emplacement de l'éditeur XAML est indiqué dans l'illustration ci-dessous.

Éditeur XAML

Fenêtre XAML

Cet exemple vous montre comment créer votre propre application manuscrite, qui vous permet de dessiner des images.

Dans cette section, 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.

lien vers la vidéo Pour une présentation vidéo, consultez la page Vidéo : Comment créer une application WPF C#.

Pour créer une application WPF

  1. Dans le menu Fichier, cliquez sur Nouveau projet.

    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# Express sont listés dans cette boîte de dialogue.

  2. Cliquez sur Application WPF.

  3. Renommez votre application en Tampon encreur.

  4. Cliquez sur OK.

    Visual C# Express crée un dossier pour votre projet dont le nom est tiré du titre du projet, puis il affiche votre nouvelle fenêtre WPF, nommée Window1, en mode concepteur. Vous pouvez passer en mode code à tout moment. Pour ce faire, cliquez avec le bouton droit sur l'aire du concepteur ou la fenêtre de code et sélectionnez Afficher le code. L'éditeur XAML s'affiche par défaut sous le concepteur, mais vous pouvez afficher le balisage XAML en mode plein écran. Pour ce faire, cliquez avec le bouton droit sur l'aire du concepteur et cliquez sur Afficher le code XAML.

    La fenêtre WPF que vous voyez en mode concepteur est une représentation visuelle de la fenêtre qui s'ouvrira au lancement de votre application. En mode concepteur, 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.

  5. Si la fenêtre Propriétés ne s'affiche pas, dans le menu Affichage, cliquez sur FenêtrePropriétés. 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.

  6. 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 Propriétés.

  7. Renommez le titre de la fenêtre WPF en Tampon encreur.

  8. 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 avez également la possibilité de modifier directement le balisage XAML en ajoutant un attribut Background et en lui affectant la valeur Background="Brown".

  9. Pour ouvrir la Boîte à outils, cliquez sur le menu Affichage, puis sur Boîte à outils.

  10. 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.

  11. 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.

  12. Cliquez sur OK pour ajouter le contrôle InkCanvas à la Boîte à outils.

  13. Faites glisser un contrôle InkCanvas de la Boîte à outils vers la fenêtre WPF.

  14. Définissez les propriétés suivantes du contrôle InkCanvas dans la fenêtre Propriétés :

    Propriété

    Valeur

    Width

    Auto

    Hauteur

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Marge

    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 au moment de l'exécution.

  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 Clear au texte.

    <Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="button1" VerticalAlignment="Bottom"
    Width="75">Clear</Button>

  18. Sélectionnez button2 et modifiez le balisage XAML comme indiqué dans le balisage ci-dessous. Ce balisage affecte Close au texte.

    <Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="button2" VerticalAlignment="Bottom" Width="75"
    Click="ButtonCloseClicked">Close</Button>

    L'application WPF doit ressembler à l'application Tampon encreur de l'illustration suivante.

    Application Ink WPF

    Application Ink WPF

Pour créer des gestionnaires d'événements

  1. Double-cliquez sur Effacer, puis ajoutez le code suivant au gestionnaire d'événements Click généré :

        this.inkCanvas1.Strokes.Clear();

  2. Revenez en mode Concepteur. Pour ce faire, cliquez avec le bouton droit sur l'éditeur de code, puis cliquez sur Concepteur.

  3. Double-cliquez sur Fermer, puis ajoutez le code suivant au gestionnaire d'événements Click généré :

        this.Close();

  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.

  6. Cliquez sur Fermer pour quitter l'application.

Voir aussi

Tâches

Comment : créer un projet d'application WPF

Comment : créer une application console C#

Comment : créer des applications Windows Forms C#

Autres ressources

Création de votre première application Visual C#