Procédure pas à pas : explorer l'IDE Visual Studio avec C++ ou Visual Basic

Article
02/28/2013

En suivant cette procédure pas-à-pas, vous vous familiariserez avec la plupart des outils, boîtes de dialogue et concepteurs que vous pouvez utiliser lorsque vous développez des applications avec Visual Studio.Vous allez créer une application « Hello, World » simple, concevoir l'interface utilisateur, ajouter du code et déboguer des erreurs, alors que vous en apprenez plus sur l'utilisation de l'environnement de développement intégré (IDE).

Cette rubrique contient les sections suivantes :

Configurer l'IDE

Créer une application simple

Déboguer et tester l'application

[!REMARQUE]

Cette procédure pas à pas est basée sur l'édition Professional de Visual Studio 2012.Il est possible que pour certains des éléments de l'interface utilisateur, votre copie de Visual Studio affiche des noms ou des emplacements différents.Ces éléments dépendent de l'édition de Visual Studio dont vous disposez et des paramètres que vous utilisez.Pour plus d'informations sur les paramètres, consultez Paramètres Visual Studio.

Configurer l'IDE

Lorsque vous démarrez Visual Studio pour la première fois, vous devez choisir une combinaison de paramètres qui applique un ensemble de personnalisations prédéfinies à l'IDE.Chaque combinaison de paramètres a été conçue pour vous faciliter le développement d'applications.

Figure 1 : Boîte de dialogue Choisir les paramètres d'environnement par défaut

Boîte de dialogue Choisir les paramètres d'environnement par défaut

Pour cette procédure pas-à-pas, les Paramètres de développement généraux sont appliqués. La quantité de personnalisation minime à ainsi appliquée à l'IDE.Vous pouvez modifier la combinaison de paramètres à l'aide de l'Assistant Importation et exportation de paramètres.Pour plus d'informations, consultez Comment : modifier les paramètres de sélection.

Après avoir ouvert Visual Studio, vous pouvez identifier les fenêtres Outil, les menus et barres d'outils et l'espace de la fenêtre principale.Les fenêtres Outil sont ancrées sur les côtés gauche et droit de la fenêtre d'application. Lancement rapide, la barre de menus et la barre d'outils standard sont situés en haut.La page de démarrage est située au centre de la fenêtre d'application.Lorsqu'une solution ou un projet est chargé, les éditeurs et les concepteurs apparaissent dans cet espace.Lorsque vous développez une application, vous passez la majeure partie de votre temps dans cette zone centrale.

Figure 2 : IDE de Visual Studio

IDE avec paramètres généraux appliqués

Vous pouvez personnaliser davantage Visual Studio. Vous pouvez par exemple modifier le type de police et la taille utilisée pour le texte dans l'éditeur ou le thème de couleur appliqué à l'IDE à l'aide de la boîte de dialogue Options.Selon la combinaison de paramètres appliquée, certains éléments de cette boîte de dialogue peuvent ne pas apparaître automatiquement.Vous pouvez vous assurer que toutes les options possibles s'affichent en sélectionnant la case à cocher Afficher tous les paramètres.

Figure 3 : Boîte de dialogue Options

Boîte de dialogue Options, avec l'option Afficher tous les paramètres

Dans cet exemple, vous changerez le thème de couleur « clair » de l'IDE par « sombre ».

Pour modifier le thème de couleur de l'IDE

Ouvrez la boîte de dialogue Options.
Modifiez le Thème de couleur par Foncé, puis cliquez sur OK.

Dans Visual Studio, les couleurs devraient correspondre à l'image suivante :

IDE avec application du thème foncé

Le thème de couleur utilisé dans le reste de cette procédure pas à pas est le thème clair.Pour plus d'informations sur la personnalisation de l'IDE, consultez Personnalisation de l'environnement de développement.

Créer une application simple

Créer le projet

Lorsque vous créez une application dans Visual Studio, vous créez d'abord un projet et une solution.Pour cet exemple, vous allez créer une solution Windows Presentation Foundation.

Pour créer le projet WPF

Création d'un nouveau projet.Dans la barre de menus, sélectionnez Fichier, Nouveau, Projet.

Vous pouvez également taper Nouveau projet dans la zone Lancement rapide pour effectuer la même opération.
Choisissez le modèle d'application WPF Visual Basic ou Visual C#, puis nommez le projet HelloWPFApp.

OR

Le projet et la solution HelloWPFApp sont créés et les fichiers apparaissent dans l'Explorateur de solutions.Le Concepteur WPF affiche un mode Design et une vue XAML pour MainWindow.xaml en mode Fractionné.(Pour plus d'informations, consultez Concepteur WPF pour les développeurs Windows Forms).Les éléments suivants apparaissent dans l'Explorateur de solutions :

Figure 5 : Eléments du projet

Explorateur de solutions avec fichiers HelloWPFApp chargés

Après avoir créé le projet, vous pouvez le personnaliser.Dans la fenêtre Propriétés, vous pouvez afficher et modifier les options des éléments du projet, des contrôles et d'autres éléments d'une application.À l'aide des propriétés d'un projet et des pages de propriétés, vous pouvez afficher et modifier les options des projets et des solutions.

Pour modifier le nom de MainWindow.xaml

Dans la procédure suivante, vous donnerez à MainWindow un nom plus spécifique.Dans l'Explorateur de solutions, sélectionnez MainWindow.xaml.Vous devez voir la fenêtre Propriétés pour ce fichier sous la fenêtre.Si vous ne voyez pas la fenêtre Propriétés, sélectionnez MainWindow.xaml dans l'Explorateur de solutions, ouvrez le menu contextuel (en cliquant avec le bouton droit) et sélectionnez Propriétés.Remplacez la propriété Nom de fichier par Greetings.xaml.

L'Explorateur de solutions indique que le nom de fichier est maintenant Greetings.xaml et que le nom de MainWindow.xaml.vb ou MainWindow.xaml.cs est maintenant Greetings.xaml.vb ou Greetings.xaml.cs.
Dans l'Explorateur de solutions, ouvrez Greetings.xaml en mode Concepteur et sélectionnez la barre de titre de la fenêtre.
Dans la fenêtre Propriétés, remplacez la valeur de la propriété Title par Greetings.

Attention

Cette modification provoque une erreur que vous apprendrez à déboguer et à corriger à une étape ultérieure.

Attention
Cette modification provoque une erreur que vous apprendrez à déboguer et à corriger à une étape ultérieure.

La barre de titre de MainWindow.xaml indique maintenant Greetings.

Créer l'interface utilisateur

Nous allons ajouter trois types de contrôles à cette application : un contrôle TextBlock, deux contrôles RadioButton et un contrôle Button.

Pour ajouter un contrôle TextBlock

Ouvrez la fenêtre Boîte à outils.Vous devez le trouver à gauche de la fenêtre Concepteur.Vous pouvez également l'ouvrir dans le menu Afficher ou en tapant Ctrl+Alt+X.
Dans la Boîte à outils, recherchez le contrôle TextBlock.
Ajoutez un contrôle TextBlock dans l'espace de conception et centrez le contrôle près du haut de la fenêtre.

Votre fenêtre doit ressembler à l'illustration suivante :

Figure 7 : Fenêtre Greetings avec le contrôle TextBlock

Contrôle TextBlock sur le formulaire Greetings

Le balisage XAML doit ressembler à ce qui suit :

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

Pour personnaliser le texte du bloc de texte

Dans la vue XAML, localisez la balise de TextBlock, puis remplacez l'attribut Text : Text=”Select a message option and then choose the Display button.”
Si le TextBlock ne se développe pas pour s'ajuster en mode Design, agrandissez le contrôle TextBlock afin qu'il affiche l'ensemble du texte.
Enregistrez les modifications apportées.

Vous ajouterez ensuite deux contrôles RadioButton au formulaire.

Pour ajouter des cases d'option

Dans la Boîte à outils, recherchez le contrôle RadioButton.
Ajoutez deux contrôles RadioButton à l'aire de conception et déplacez-les afin qu'ils apparaissent côte à côte sous le contrôle TextBlock.

Votre fenêtre doit se présenter comme suit :

Figure 8 : RadioButtons dans la fenêtre Greetings.
Dans la fenêtre Propriétés du contrôle RadioButton de gauche, affectez à la propriété Nom (propriété en haut de la fenêtre Propriétés) la valeur RadioButton1.
Dans la fenêtre Propriétés du contrôle RadioButton de droite, remplacez la valeur de la propriété Name par RadioButton2, puis enregistrez les modifications.

Vous pouvez maintenant afficher du texte pour chaque contrôle RadioButton.La procédure suivante met à jour la propriété Contenu d'un contrôle RadioButton.

Pour ajouter un texte à afficher pour chaque case d'option

Dans l'aire de conception, ouvrez le menu contextuel de RadioButton1, choisissez Modifier le texte, puis entrez Hello.
Ouvrez le menu contextuel de RadioButton2, choisissez Modifier le texte, puis entrez Goodbye.

Le dernier élément de l'interface utilisateur que vous ajouterez est un contrôle Button.

Pour ajouter le contrôle bouton

Dans la Boîte à outils, recherchez le contrôle Button, puis ajoutez-le dans l'aire de conception, sous les contrôles RadioButton.
Dans la vue XAML, remplacez la valeur de Contenu du contrôle Button Content=”Button” par Content=”Display”, puis enregistrez les modifications.

La balise doit ressembler à l'exemple suivant : <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

Votre fenêtre doit ressembler à l'illustration suivante.

Figure 9 : Interface utilisateur finale de Greetings

Formulaire Greetings avec des étiquettes de contrôle

Ajouter du code au bouton d'affichage

Lorsque cette application s'exécute, un message s'affiche une fois qu'un utilisateur choisit une case d'option et choisit ensuite le bouton Afficher.Un message s'affiche pour Hello et un autre pour Goodbye.Pour créer ce comportement, vous ajouterez du code à l'événement Button_Click dans Greetings.xaml.vb ou Greetings.xaml.cs.

Ajoutez le code pour afficher des boîtes de message

Dans l'aire de conception, double-cliquez sur le bouton Afficher.

Greetings.xaml.vb ou Greetings.xaml.cs s'ouvre, avec le curseur dans l'événement Button_Click.Vous pouvez également ajouter un gestionnaire d'événements associé à un clic comme suit :

Pour Visual Basic, le gestionnaire d'événements doit ressembler à ceci :
```
Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)

End Sub
```
Pour Visual C#, le gestionnaire d'événements doit ressembler à ceci :
```
private void Button_Click_1(object sender, RoutedEventArgs e)
{

}
```

Pour Visual Basic, entrez le code suivant :

If RadioButton1.IsChecked = True Then
    MessageBox.Show("Hello.")
Else RadioButton2.IsChecked = True
    MessageBox.Show("Goodbye.")
End If

Pour Visual C#, entrez le code suivant :

if (RadioButton1.IsChecked == true)
{
    MessageBox.Show("Hello.");
}
else
{
    RadioButton2.IsChecked = true;
    MessageBox.Show("Goodbye.");
}

Enregistrez l'application.

Déboguer et tester l'application

Vous déboguerez ensuite l'application pour rechercher les erreurs et tester l'affichage correct des deux boîtes de message.Pour plus d'informations, consultez Génération d'une application WPF (WPF) et Débogage WPF.

Erreurs de recherche et de correctif

Dans cette étape, vous trouverez l'erreur que nous avons provoquée précédemment en modifiant le nom du fichier XAML de la fenêtre principale.

Pour démarrer le débogage et rechercher l'erreur

Démarrez le débogueur en sélectionnant Déboguer, puis Démarrer le débogage.

Une boîte de dialogue s'affiche, indiquant qu'une exception IOException s'est produite : Impossible de localiser la ressource « mainwindow.xaml ».
Sélectionnez le bouton OK, puis arrêtez le débogueur.

Nous avons renommé Mainwindow.xaml en Greetings.xaml au début de la procédure, mais la solution pointe toujours sur Mainwindow.xaml en tant qu'URI de démarrage de l'application. C'est pourquoi le projet ne peut pas démarrer.

Pour spécifier Greetings.xaml comme l'URI de démarrage

Dans l'Explorateur de solutions, ouvrez le fichier App.xaml (dans le projet C#) ou le fichier Application.xaml (dans le projet Visual Basic) en mode XAML (il ne peut pas être ouvert en mode Design).
Modifiez StartupUri="MainWindow.xaml" par StartupUri="Greetings.xaml", puis enregistrez les modifications.

Démarrez à nouveau le débogueur.Vous devez voir la fenêtre Greetings de l'application.

Pour déboguer avec des points d'arrêt

En ajoutant des points d'arrêt, vous pouvez tester le code pendant le débogage.Vous pouvez ajouter des points d'arrêt en choisissant Déboguer, Basculer le point d'arrêt dans la barre de menus ou en cliquant dans la marge de gauche de l'éditeur à côté de la ligne de code, à l'emplacement où vous voulez que l'arrêt se produise.

Pour ajouter des points d'arrêt

Ouvrez Greetings.xaml.vb ou Greetings.xaml.cs, puis sélectionnez la ligne suivante : MessageBox.Show("Hello.")
Ajoutez un point d'arrêt à partir du menu en sélectionnant Déboguer, puis Basculer le point d'arrêt.

Un cercle rouge apparaît à côté de la ligne de code dans la bordure gauche de la fenêtre de l'éditeur.
Sélectionnez la ligne suivante : MessageBox.Show("Goodbye.").
Appuyez sur la touche F9 pour ajouter un point d'arrêt, puis sur la touche F5 pour démarrer le débogage.
Dans la fenêtre Greetings, sélectionnez la case d'option Hello, puis sélectionnez le bouton Afficher.

La ligne MessageBox.Show("Hello.") est mise en surbrillance en jaune.Dans la partie inférieure de l'IDE, les fenêtres Automatique, Variables locales et Espion sont ancrées ensemble sur le côté gauche. Les fenêtres Pile des appels, Points d'arrêt, Commande, Immédiat et Sortie sont ancrées ensemble sur le côté droit.
Dans la barre de menus, choisissez Déboguer, Pas à pas sortant.

L'application reprend l'exécution et une boîte de message affiche le mot « Hello ».
Sélectionnez OK sur la boîte de message pour la fermer.
Dans la fenêtre Greetings, sélectionnez la case d'option Goodbye, puis sélectionnez le bouton Afficher.

La ligne MessageBox.Show("Goodbye.") est mise en surbrillance en jaune.
Appuyez sur la touche F5 pour continuer le débogage.Lorsque la boîte de message s'affiche, cliquez sur le bouton OK sur la boîte de message pour la fermer.
Appuyez sur les touches MAJ+F5 pour arrêter le débogage.
Dans la barre de menus, choisissez Débogage, Désactiver tous les points d'arrêt.

Générer une version Release de l'application

Maintenant que vous avez vérifié que tout fonctionne, vous pouvez préparer une version Release de l'application.

Pour nettoyer les fichiers solution et générer une version Release

Sélectionnez Build, puis Nettoyer la solution pour supprimer les fichiers intermédiaires et les fichiers de sortie créés pendant les générations précédentes.
Changez la configuration de build pour HelloWPFApp de Debug à Release.
Générez la solution.