Création d’une application à l’aide de Visual Studio et de WPF

Création d’un nouveau projet

Pour créer un nouveau projet, lancez Visual Studio, puis sélectionnez Fichier / Nouveau / Projet.

Sélectionnez ensuite Application WPF dans Visual C#.

Donnez un nom à votre projet, et notez l’emplacement qui contiendra les sources du projet ainsi que les binaires générés.

Après avoir validé, observez l’écran et identifiez les différentes zones de votre projet : le Designer, le xaml associé au designer, l’arborescence des différents éléments de votre projet.

Parcourez également le menu pour voir tout ce que vous avez à disposition. Notamment :

  • Affichage, pour voir toutes les fenêtres à votre disposition. Liste d’erreurs contient les erreurs générées par la compilation. Sortie affiche des messages d'état relatifs à diverses fonctionnalités de l'environnement de développement intégré (IDE)

  • Projet, pour ajouter des éléments à votre projet (nouveau fichier de code, nouvelle fenêtre…). Pour voir les propriétés de celui-ci également, nous y reviendrons plus tard.

  • Générer, avec construire vos binaires. Quelle est la différence entre Générer, Regénérer ? Quelle est l’utilité de Nettoyer ?

Revenez aux propriétés du projet :

Dans Application, nous pouvons définir le nom de l’assembly et du namespace par défaut.

L’assembly est caractérisée par :

  • Son nom

  • Un numéro de version

  • Un identificateur de culture, qui permet par exemple de définir le séparateur décimal pour les nombres

  • Une clé publique, qui permet aux programmes utilisant cette assembly de vérifier qu’il s’agit de celle qu’ils ont référencée

Le namespace permet de regrouper un ensemble de classes dans un « groupement ».

Nous pouvons également choisir le Framework cible. Une application construite avec la Framework 4.5 ne pourra tourner que sur une machine où est installé ce framework. Ce n’est pas comme en C++ ou un éxécutable peut inclure les dlls dont il a besoin. En .Net, un programme ira chercher les assemblys nécessaires dans le GAC, qui est noatmment peuplés par les installations du Framwork .Net

Et le type de sortie permet de choisir si notre application sera pourvue au non d’une IHM, s’il s’agit d’un .exe ou d’une .dll

Dans Générer, nous pouvons choisir la configuration et la plateforme cible :

Quelles sont les différences entre Debug et Release ? Quel mode choisir lorsque l’on code ? Et quand on doit livrer une application à un client ?

Qu’est-il préférable de choisir comme platforme cible ? x86, x64 ou anyCPU ?

Une fois vérifiées les propriétés du projet, revenez au code. Générez votre projet, vérifiez la fenêtre de sortie, puis démarrez-le en debug.

Stoppez l’exécution. Vous revenez à votre code.

 

Ajout d’éléments graphiques

 A l’aide du designer, ajoutez un élément Button sur votre fenêtre :

Vérifiez la fenêtre du code xaml juste en dessous, que voyez-vous ?

Allez maintenant dans les propriétés du bouton (raccourci : F4). Naviguez parmi les propriétés pour voir ce qui est disponible. Vous pouvez tester des modifications (couleur, taille, marges, alignement, etc…) et observer l’effet sur le xaml.

Mettez la propriété Width du bouton sur auto. Qu’observez-vous ? Changer le texte qui apparait sur le bouton. Qu’observez-vous ?

Tentez maintenant d’ajouter un nouvel bouton sur votre fenêtre. Que se passe-t-il ?

 

Pour découper proprement notre fenêtre, supprimez le bouton, puis ajoutez un élément Grid. Faites en sorte qu’elle prenne tout l’espace disponible dans la fenêtre. Partagez là maintenant en 2 lignes et 3 colonnes.

Ajoutez maintenant dans cette grille les éléments suivants :

  • 2 TextBlock (qui seront sur la 1ère colonne)

  • 2 TextBox (qui seront sur la 2ème colonne)

  • 2 Button (qui seront sur la 3ème colonne)

En jouant sur les propriétés d’alignement et de Width, les éléments doivent rester disposés de la même manière les uns par rapport aux autres si vous redimensionnez la fenêtre :

 

Compilez et testez.

 

Gestion des évènements

 Vous allez maintenant intercepter les clics effectués sur les boutons. Pour ceci, retournez dans les propriétés du bouton A -> B, vous verrez un petit éclair en haut à droite de la fenêtre :

Cliquez dessus, vous avez accès à tous les évènements disponibles pour cet élément.

Donnez un nom de fonction pour l’évènement Click : ButtonABClick. Visual créé alors la fonction, qu’il va falloir remplir.

Remplissez la fonction avec la ligne de code suivante :

MessageBox.Show("You just clicked Button A -> B");

Compilez, lancez, et cliquez sur le bouton A -> B pour voir ce qu’il se passe. Stoppez le programme.

Retournez dans le code de la fonction ButtonABClick, passez votre souris sur MessageBox et sur Show. Vous verrez des tooltips apparaitre donnant des informations sur la classe et sur la fonction.

Faites maintenant F12 (Go to Definition) sur MessageBox. Visual vous ouvre un fichier sur lequel vous pouvez voir :

  • Le nom de l’assembly qui contient cette classe. Comment se nomme cette assembly ? Vous pouvez également voir son chemin sur le disque. Vous pourrez vérifier que cette assembly se trouve bien dans les Références de votre projet (dans l’explorateur de solutions). Sans cela, vous ne pourriez pas utiliser cette classe.

  • Le nom du namespace qui contient cette classe. Quel est-il ? Si vous retournez dans votre fichier de code MainWindow.xaml.cs, vous pouvez voir ce nom de namespace utilisé avec un using en haut du fichier. Cela évite d’avoir à écrire :

System.Windows.MessageBox.Show

Le using dispense d’avoir à écrire le nom du namespace devant la classe.

  • Les méthodes disponibles pour cette classe. En vous aidant des tooltips et du F12, réécrivez le code MessageBox.Show en choisissant une des autres surcharges de Show pour que la fenêtre ressemble à ceci (caption Attention, icône de warning, bouton OK en bas à droite)

Compilez, testez.

Réalisez la même opération (événements, méthode à coder) pour le bouton B-> A.

Nous allons maintenant avoir besoin d’identifier chaque TextBox pour y avoir accès dans le code behind (fichier .xaml.cs)

Attribuez l’identifiant TextBoxA à la TextBox de la 1ère ligne, TextBoxB à celle de la seconde lligne, en passant par le xaml. Quelle est l’attribut que vous avez utilisé ?

Remplacez le code ButtonABClick  par celui-ci :

       privatevoid ButtonABClick(object sender, RoutedEventArgs e)

       {

           TextBoxB.Text = TextBoxA.Text;

       }

Faites de même pour ButtonBAClick, en adaptant bien évidemment.

Compilez, et testez. Expliquez pourquoi on a accès aux attributs TextBox dans notre code C#, alors qu’ils sont définis dans le xaml. Expliquez ce que fait le code des méthodes appelées par les clics.

 

DataBinding

 Plutôt que de passer par les clics de boutons pour synchroniser le texte entre les 2 TextBox, on veut le faire automatiquement, en temps réel. Ecrivez le code nécessaire, en passant uniquement par le xaml.

Compilez, et testez.

 

Ajouter maintenant un nouveau projet dans votre solution, que vous nommerez Calculator.

L’écran aura l’apparence suivante :

C’est un enchainement horizontal de contrôles graphiques. Quel élément allez-vous utiliser pour les contenir ?

Les contrôles sont trop rapprochés les uns des autres. Vous définirez un Style pour mettre des marges qui seront utilisées par tous les contrôles. Le Style doit être centralisé. On souhaite que l’application ressemble à ceci :