Bien démarrer : Savoir maîtriser Visual StudioGetting started: Getting around in Visual Studio

Savoir maîtriser Microsoft Visual StudioGetting around in Microsoft Visual Studio

Revenons au projet que nous avons créé précédemment et voyons comment s’y retrouver dans l’environnement de développement intégré (IDE) de Microsoft Visual Studio.Let's now get back to the project that we created earlier, and look at how you might find your way around the Microsoft Visual Studio integrated development environment (IDE).

Si vous êtes développeur Xcode, l’affichage par défaut ci-dessous vous semblera probablement familier, notamment avec les fichiers sources dans le volet gauche, l’éditeur (soit l’interface utilisateur, soit le code) dans le volet central, et les contrôles et leurs propriétés dans le volet droit.If you are an Xcode developer, the default view below should be familiar, with source files in the left pane, the editor (either the UI or source code) in the center pane, and controls and their properties in the right pane.

environnement de développement xcode

L’apparence de Microsoft Visual Studio est similaire mais, dans l’affichage par défaut, les contrôles apparaissent sur le côté gauche à l’intérieur de la boîte à outils.Microsoft Visual Studio looks very similar, although the default view has the controls on the left side in the Toolbox. Les fichiers sources figurent dans l’Explorateur de solutions sur le côté droit, et les propriétés sous Propriétés dans le volet Explorateur de solutions, comme ceci :The source files are in the Solution Explorer on the right side, and properties are in Properties under the Solution Explorer pane, like this:

environnement de développement visual studio

Même si cela peut sembler un peu surprenant, vous serez peut-être heureux d’apprendre que, dans Visual Studio, vous pouvez réorganiser les volets de façon à placer les fichiers sources à gauche, et la boîte à outils à droite.If this feels a little alien to you, you'll be pleased to know you can rearrange the panes in Visual Studio to place the source files on the left of the screen and the toolbox on the right. En fait, vous pouvez cliquer sur la barre de titre d’un volet, puis la faire glisser pour repositionner celui-ci. Visual Studio affiche une zone ombrée, indiquant où le volet sera ancré quand vous aurez relâché le bouton.In fact, you can click and drag the title bar of any pane to reposition it, and Visual Studio will display a shaded box telling you where it will be docked once you release it. De nombreux volets affichent également une icône de punaise dans la barre de titre.Many panes also have a small drawing pin icon in their title bar. Celle-ci vous permet d’épingler le volet là où il se trouve.This allows you to pin the panel as-is, locking it in place. En le désépinglant, vous pouvez le réduire pour économiser de l’espace, ce qui est utile si votre moniteur est de taille relativement petite.Unpin the pane, and it can be collapsed to save space: useful if your monitor is on the smaller side. Si vous faites une fausse manœuvre (ne vous inquiétez pas, nous sommes tous passés par là), sélectionnez Rétablir la disposition de fenêtre dans le menu Fenêtre pour remettre de l’ordre.If you mess things up (don't worry, we've all done it), select Reset Window Layout from the Window menu to restore order.

Ajout de contrôles, définition de leurs propriétés et réponse aux événementsAdding controls, setting their properties, and responding to events

À présent, ajoutons quelques contrôles à votre projet.Let's now add some controls to your project. Nous allons ensuite changer certaines de leurs propriétés et écrire un code pour répondre à l’un des événements du contrôle.We'll then change some of their properties, and write some code to respond to one of the control's events.

Pour ajouter des contrôles dans Xcode, vous ouvrez le fichier .xib ou la table de montage séquentiel souhaités, puis glissez-déplacez des contrôles tels qu’un bouton rectangulaire arrondi ou une étiquette, comme illustré ci-dessous :To add controls in Xcode, you open up the desired .xib file or the Storyboard and then drag and drop controls, such as aRound Rect Button or a Label, as shown below:

conception de l’interface utilisateur dans xcode

Tentons une opération similaire dans Visual Studio.Let's do something similar in Visual Studio. Dans la boîte à outils, faites glisser le contrôle Bouton, puis déposez-le dans l’aire de conception du fichier MainPage.xaml.From the Toolbox, drag the Button control, and then drop it onto the MainPage.xaml file's design surface.

Faites de même avec le contrôle TextBlock, afin qu’il se présente comme suit :Do the same with the TextBlock control, so it looks like this:

conception de l’interface utilisateur dans visual studio

Contrairement à Xcode, qui masque les informations de disposition et de liaison à l’intérieur d’un fichier .xib ou d’une table de montage séquentiel, Visual Studio vous incite à modifier les fichiers XAML utilisés pour stocker ces détails. Il s’agit d’un langage riche, modifiable et déclaratif de type XML.Unlike Xcode, which hides the layout and binding information inside a .xib or Storyboard file, Visual Studio encourages you to edit the XAML files used to store these details it its rich, editable, declarative, XML-like language. Pour plus d’informations sur le langage XAML (Extensible Application Markup Language), voir Vue d’ensemble du langage XAML.For more info about Extensible Application Markup Language (XAML), see XAML overview. Pour l’instant, sachez que tous les éléments affichés dans le volet Conception sont définis dans le volet XAML.For now, know that everything displayed in the Design pane is defined in the XAML pane. Le volet XAML permet un contrôle précis si nécessaire et, quand vous en saurez davantage à ce sujet, vous pourrez rapidement développer manuellement un code d’interface utilisateur.The XAML pane allows for fine control where necessary, and as you learn more about it, you can quickly develop user interface code manually. Quoi qu’il en soit, pour le moment, concentrons-nous simplement sur les volets Conception et Propriétés.For now, however, let's focus on just the Design and Properties panes.

Modifions les détails du bouton.Let's change the button's details. Comme vous le savez, pour modifier le nom du bouton dans Xcode, vous devez modifier la valeur du champ Titre dans son panneau de propriétés.As you will know, to change the button's name in Xcode, you would change the value of the Title field in its properties panel.

Lorsque vous utilisez Visual Studio vous procédez de manière très similaire.When using Visual Studio you do something very similar. Dans le volet Conception, appuyez sur le bouton afin de positionner le focus sur celui-ci.In the Design pane, tap the button to give it focus. Ensuite, dans le volet Propriétés, modifiez la valeur de Contenu de « Bouton » en « Appuyez ici ».Then in the Properties pane, alter the Content value from "Button" to "Press Me". Enfin, mettez à jour le nom du contrôle de bouton, en remplaçant la valeur de Name « <Sans nom> » par « myButton », comme illustré ici :Next, update the name of the button control, by changing the Name value from "<No Name>" to "myButton", as shown here:

fenêtre des propriétés du bouton dans visual studio

Écrivons maintenant un code pour changer le contenu du contrôle TextBlock en « Hello, World! »Now, let's write some code to change the TextBlock control's contents to "Hello, World!" après que l’utilisateur a appuyé sur le bouton.after the user taps the button.

Dans Xcode, vous pouvez associer un événement à un contrôle en écrivant un code, puis en associant celui-ci au contrôle, souvent en faisant glisser le bouton dans le code source en maintenant la touche Contrôle appuyée, comme suit :In Xcode, you would associate an event with a control by writing code and then associating that code with the control, often by control-dragging the button into the source code, like this:

connexion d’un bouton avec un événement dans xcode

// Swift implementation.

@IBAction func buttonPressed(sender: UIButton) {
    
}

Visual Studio est très semblable.Visual Studio is similar. En haut de la fenêtre Propriétés se trouve un bouton reconnaissable par un éclair.At the top right of Properties is a lightning bolt button. C’est ici que sont répertoriés les événements possibles associés au contrôle sélectionné, comme suit :This is where the possible events associated with the selected control are listed, like this:

liste des événements du bouton dans visual studio

Pour ajouter du code à l’événement Click du bouton, commencez par sélectionner le bouton dans le volet Conception.To add code for the button's click event, first select the button in the Design pane. Ensuite, cliquez sur le bouton identifié par un éclair, puis double-cliquez sur la zone vide à côté du mot Click.Next, click the lightning bolt button, and double-click the empty box next to the name Click. Visual Studio ajoute ensuite l’événement « myButton _ Click » à la zone de clic , puis ajoute et affiche le gestionnaire d’événements correspondant dans le fichier MainPage.Xaml.cs, comme ceci.Visual Studio then adds the event "myButton_Click" to the Click box, and then adds and displays the corresponding event handler in the MainPage.xaml.cs file, like this.

private void myButton_Click(object sender, RoutedEventArgs e)
{

}

Accrochons à présent le contrôle TextBlock.Let's now hook-up the TextBlock control. Dans Xcode, vous feriez glisser le bouton dans le fichier de code source en maintenant la touche Contrôle appuyée pour associer le contrôle à sa définition, comme suit.In Xcode, you would control-drag the button to the source code file to associate the control with its definition, like this.

association d’une étiquette à sa définition dans xcode

// Swift implentation.

@IBOutlet weak var myLabel : UILabel

Dans Visual Studio, vous n’avez pas besoin d’associer le contrôle, car cela est toujours fait pour vous.In Visual Studio, you don't need associated the control as this is always done for you. Modifions certaines des propriétés :Let's change some of the properties though:

  1. Appuyez sur l’onglet du fichier MainPage.xaml.Tap the MainPage.xaml file tab.
  2. Dans le volet Conception, appuyez sur le contrôle TextBlock.In the Design pane, tap the TextBlock control.
  3. Dans le volet Propriétés, appuyez sur le bouton doté d’une clé à molette pour afficher ses propriétés.In the Properties pane, tap the wrench button to display its properties.
  4. Dans la zone Nom, changez et remplacez « <Sans nom> » par « myLabel ».In the Name box, change "<No Name>" to "myLabel".

fenêtre des propriétés du libellé dans visual studio

Ajoutons maintenant un peu de code à l’événement Click du bouton.Let's now add some code to the button's click event. Pour ce faire, appuyez sur le fichier MainPage.xaml.cs et ajoutez le code suivant au gestionnaire d' _ événements de clic MyButton.To do this, tap the MainPage.xaml.cs file, and add the following code to the myButton_Click event handler.

private void myButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    myLabel.Text = "Hello, World!";
}

Cela est similaire à ce que vous écririez dans Swift :This is similar to what you would write in Swift:

@IBAction func buttonPressed(sender: UIButton) {
    myLabel.text = "Hello, World!"
}

Enfin, pour exécuter l’application, sélectionnez le menu Déboguer, puis sélectionnez Démarrer le débogage (ou appuyez sur F5).Finally, to run the app, select the Debug menu, and then select Start Debugging (or just press F5). Une fois l’application démarrée, cliquez sur le bouton « Appuyez ici ». Le contenu de l’étiquette « TextBlock » est remplacé par « Hello, World! » comme le montre la figure suivante.After the app starts, click the "Press Me" button, and see the label's contents change from "TextBlock" to "Hello, World!", as shown in the following figure.

résultats de l’exécution de la première procédure : Hello, World!

Pour quitter l’application, revenez à Visual Studio, appuyez sur le menu Déboguer, puis sur Arrêter le débogage (ou appuyez simplement sur Maj+F5).To quit the app, return to Visual Studio, tap the Debug menu, and then tap Stop Debugging (or just press SHIFT + F5). Notez que Visual Studio vous permet d’essayer l’application sur différents appareils pour vérifier la manière dont elle s’exécute.Notice that Visual Studio lets you try the app in many different devices, to check how it will perform in each.

Étape suivanteNext step

Mise en route : contrôles communsGetting started: Common Controls