Créer une application « Hello, World! »Create a "Hello, World!" (XAML)app (XAML)

Ce didacticiel vous explique comment utiliser XAML et C# pour créer une simple application « Hello World » pour la plateforme Windows universelle (UWP) sur Windows 10.This tutorial teaches you how to use XAML and C# to create a simple "Hello, world" app for the Universal Windows Platform (UWP) on Windows 10. Dans Microsoft Visual Studio, un seul projet vous permet de générer une application qui s’exécute sur n’importe quel appareil Windows 10.With a single project in Microsoft Visual Studio, you can build an app that runs on any Windows 10 device.

Vous allez apprendre à effectuer les opérations suivantes :Here you'll learn how to:

  • créer un projet Visual Studio 10 qui cible Windows 10 et la plateforme Windows universelle (UWP) ;Create a new Visual Studio project that targets Windows 10 and the UWP.
  • écrire du code XAML pour modifier l’interface utilisateur de votre page de démarrage ;Write XAML to change the UI on your start page.
  • exécuter le projet sur l’ordinateur local dans Visual Studio.Run the project on the local desktop in Visual Studio.
  • utilisez un objet SpeechSynthesizer pour faire parler l’application quand vous appuyez sur un bouton.Use a SpeechSynthesizer to make the app talk when you press a button.

Avant de commencer...Before you start...

Notes

Ce didacticiel utilise Visual Studio Community 2017.This tutorial is using Visual Studio Community 2017. Si vous utilisez une autre version de Visual Studio, son aspect peut vous sembler légèrement différent.If you are using a different version of Visual Studio, it may look a little different for you.

Résumé de la vidéoVideo summary

Étape 1 : Créer un projet dans Visual Studio.Step 1: Create a new project in Visual Studio.

  1. Ouvrez Visual Studio.Launch Visual Studio.

  2. Dans le menu Fichier , sélectionnez Nouveau > Projet pour ouvrir la boîte de dialogue Nouveau projet.From the File menu, select New > Project to open the New Project dialog.

  3. Dans la liste de modèles de gauche, ouvrez Installé > Visual C# > Universelle Windows pour afficher la liste des modèles de projet UWP.From the list of templates on the left, choose Installed > Visual C# > Windows Universal to see the list of UWP project templates.

    (Si aucun modèle universel n’apparaît, c’est qu’il vous manque les composants permettant de créer des applications UWP.(If you don't see any Universal templates, you might be missing the components for creating UWP apps. Vous pouvez répéter la procédure d’installation et ajouter la prise en charge UWP en cliquant sur Ouvrir le programme d’installation de Visual Studio dans la boîte de dialogue Nouveau projet.You can repeat the installation process and add UWP support by clicking Open Visual Studio installer on the New Project dialog. Voir Préparation.)See Get set up.)

    Comment répéter la procédure d’installation

  4. Choisissez le modèle Application vide (Windows universel) , puis entrez « HelloWorld » comme Nom.Choose the Blank App (Universal Windows) template, and enter "HelloWorld" as the Name. Sélectionnez OK.Select OK.

    Fenêtre Nouveau projet

Notes

Si vous utilisez Visual Studio pour la première fois, il est possible que la boîte de dialogue Paramètres s’affiche et vous demande d’activer le Mode développeur.If this is the first time you have used Visual Studio, you might see a Settings dialog asking you to enable Developer mode. Le mode développeur est un paramètre qui permet d’accéder à certaines fonctionnalités, telles que l’autorisation d’exécuter des applications directement plutôt qu’uniquement à partir du Store.Developer mode is a special setting that enables certain features, such as permission to run apps directly, rather than only from the Store. Pour plus d’informations, consultez Activer votre appareil pour le développement.For more information, please read Enable your device for development. Pour continuer avec ce guide, sélectionnez le Mode développeur , cliquez sur Oui et fermez la boîte de dialogue.To continue with this guide, select Developer mode , click Yes , and close the dialog.

Boîte de dialogue d’activation du mode développeur

  1. La boîte de dialogue Version cible/Version minimale s’affiche.The target version/minimum version dialog appears. Les paramètres par défaut étant appropriés pour ce didacticiel, sélectionnez OK pour créer le projet.The default settings are fine for this tutorial, so select OK to create the project.

    Capture d’écran de la boîte de dialogue Nouveau projet Windows universel.

  2. Votre nouveau projet s’ouvre en affichant ses fichiers dans le volet Explorateur de solutions , à droite.When your new project opens, its files are displayed in the Solution Explorer pane on the right. Vous devrez peut-être choisir l’onglet Explorateur de solutions à la place de l’onglet Propriétés pour voir vos fichiers.You may need to choose the Solution Explorer tab instead of the Properties tab to see your files.

    Capture d’écran du panneau Explorateur de solutions, avec l’application Hello World (Windows universel) mise en évidence.

Même si le modèle Application vide (Windows universel) est dépouillé, il contient cependant de nombreux fichiers.Although the Blank App (Universal Window) is a minimal template, it still contains a lot of files. Ces fichiers sont indispensables pour toutes les applications UWP en C#.These files are essential to all UWP apps using C#. Ils se trouvent dans tous les projets que vous créez dans Visual Studio.Every project that you create in Visual Studio contains them.

Que contiennent les fichiers ?What's in the files?

Pour afficher et modifier un fichier de votre projet, double-cliquez dessus dans l’ Explorateur de solutions.To view and edit a file in your project, double-click the file in the Solution Explorer. Développez un fichier XAML à la manière d’un dossier pour afficher le fichier de code qui lui est associé.Expand a XAML file just like a folder to see its associated code file. Les fichiers XAML s’ouvrent en mode Fractionné avec l’aire de conception et l’éditeur XAML tous deux affichés.XAML files open in a split view that shows both the design surface and the XAML editor.

Notes

Qu’est-ce que le XAML ?What is XAML? XAML (Extensible Application Markup Language) est le langage utilisé pour définir l’interface utilisateur de votre application.Extensible Application Markup Language (XAML) is the language used to define your app's user interface. Vous pouvez entrer son code manuellement ou le créer avec les outils de conception Visual Studio.It can be entered manually, or created using the Visual Studio design tools. Un fichier .xaml s’accompagne d’un fichier code-behind .xaml.cs qui contient la logique.A .xaml file has a .xaml.cs code-behind file which contains the logic. Ensemble, les fichiers XAML et code-behind forment une classe à part entière.Together, the XAML and code-behind make a complete class. Pour plus d’informations, voir Vue d’ensemble du langage XAML.For more information, see XAML overview.

App.xaml et App.xaml.csApp.xaml and App.xaml.cs

  • App.xaml est le fichier dans lequel vous déclarez les ressources utilisées dans l’application.App.xaml is where you declare resources that are used across the app.
  • App.xaml.cs est le fichier code-behind d’App.xaml.App.xaml.cs is the code-behind file for App.xaml. Comme toutes les pages code-behind, il contient un constructeur qui appelle la méthode InitializeComponent.Like all code-behind pages, it contains a constructor that calls the InitializeComponent method. Ce n’est pas vous qui écrivez la méthode InitializeComponent.You don't write the InitializeComponent method. Elle est générée par Visual Studio et vise essentiellement à initialiser les éléments déclarés dans le fichier XAML.It's generated by Visual Studio, and its main purpose is to initialize the elements declared in the XAML file.
  • App.xaml.cs est le point d’entrée de votre application.App.xaml.cs is the entry point for your app.
  • App.xaml.cs contient par ailleurs des méthodes destinées à gérer l’activation et la suspension de l’application.App.xaml.cs also contains methods to handle activation and suspension of the app.

MainPage.xamlMainPage.xaml

  • MainPage.xaml est le fichier dans lequel vous définissez l’interface utilisateur de votre application.MainPage.xaml is where you define the UI for your app. Vous pouvez y ajouter directement des éléments en utilisant du balisage XAML ou vous pouvez utiliser les outils de conception fournis avec Visual Studio.You can add elements directly using XAML markup, or you can use the design tools provided by Visual Studio.
  • MainPage.xaml.cs est la page code-behind de MainPage.xaml.MainPage.xaml.cs is the code-behind page for MainPage.xaml. Cette page vous permet d’ajouter la logique de votre application et les gestionnaires d’événements.It's where you add your app logic and event handlers.
  • Ces deux fichiers définissent ensemble une nouvelle classe appelée MainPage, qui hérite de l’élément Page, dans l’espace de noms HelloWorld.Together these two files define a new class called MainPage, which inherits from Page, in the HelloWorld namespace.

Package.appxmanifestPackage.appxmanifest

  • Fichier manifeste qui décrit votre application : nom, description, vignette, page de démarrage, etc.A manifest file that describes your app: its name, description, tile, start page, etc.
  • Inclut une liste des dépendances, les ressources et les fichiers que contient votre application.Includes a list of dependencies, resources and files that your app contains.

Ensemble d’images de logoA set of logo images

  • Assets/Square150x150Logo.scale-200.png et Wide310x150Logo.scale-200.png représentent votre application (taille moyenne ou large) dans le menu Démarrer.Assets/Square150x150Logo.scale-200.png and Wide310x150Logo.scale-200.png represent your app (either Medium or Wide size) in the start menu.
  • Assets/Square44x44Logo.png représente votre application dans la liste d’applications du menu Démarrer, la barre des tâches et le Gestionnaire des tâches.Assets/Square44x44Logo.png represents your app in the app list of the start menu, task bar and task manager.
  • Assets/StoreLogo.png représente votre application dans le Microsoft Store.Assets/StoreLogo.png represents your app in the Microsoft Store.
  • Assets/SplashScreen.scale-200.png est l’écran de démarrage qui s’affiche quand votre application démarre.Assets/SplashScreen.scale-200.png is the splash screen that appears when your app starts.
  • Assets/LockScreenLogo.scale-200.png peut représenter l’application sur l’écran de verrouillage lorsque le système est verrouillé.Assets/LockScreenLogo.scale-200.png can be used to represent the app on the lock screen, when the system is locked.

Étape 2 : Ajouter un boutonStep 2: Adding a button

En utilisant le mode concepteurUsing the designer view

Ajoutons un bouton à la page.Let's add a button to our page. Dans ce didacticiel, vous n’utilisez qu’une partie des fichiers mentionnés précédemment : App.xaml, MainPage.xaml et MainPage.xaml.cs.In this tutorial, you work with just a few of the files listed previously: App.xaml, MainPage.xaml, and MainPage.xaml.cs.

  1. Double-cliquez sur MainPage.xaml pour l’ouvrir en mode Création.Double-click on MainPage.xaml to open it in the Design view.

    Vous remarquerez dans la partie supérieure de l’écran la présence d’un affichage graphique et en dessous celle d’un affichage de code XAML.You'll notice there is a graphical view on the top part of the screen, and the XAML code view underneath. Même si les deux peuvent être modifiés, nous n’utiliserons pour le moment que l’affichage graphique.You can make changes to either, but for now we'll use the graphical view.

    Capture d’écran de Visual Studio montrant MainPage.xaml en mode Création.

  2. Cliquez sur l’onglet vertical Boîte à outils à gauche pour ouvrir la liste des contrôles d’interface utilisateur.Click on the vertical Toolbox tab on the left to open the list of UI controls. (Vous pouvez cliquer sur l’épingle dans sa barre de titre pour qu’elle reste visible.)(You can click the pin icon in its title bar to keep it visible.)

    Capture d’écran du volet Boîte à outils avec une flèche rouge pointant sur l’icône d’épingle.

  3. Développez Contrôles XAML communs et faites glisser le contrôle Button jusqu’au milieu de l’aire de conception.Expand Common XAML Controls , and drag the Button out to the middle of the design canvas.

    Capture d’écran du volet Boîte à outils et de MainPage.xaml en mode Création, avec l’option Button mise en surbrillance dans le volet Boîte à outils et un contrôle Button affiché en mode Création.

    Si vous regardez dans la fenêtre de code XAML, vous constaterez que le contrôle Button y a été aussi ajouté :If you look at the XAML code window, you'll see that the Button has been added there too:

<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
  1. Modifiez le texte du bouton.Change the button's text.

    Cliquez dans l’affichage de code XAML et modifiez la valeur de Content en remplaçant « Button » par « Hello World ! ».Click in the XAML code view, and change the Content from "Button" to "Hello, world!".

<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

Le bouton figurant dans l’aire de conception est alors mis à jour pour présenter le nouveau texte.Notice how the button displayed in the design canvas updates to display the new text.

Capture d’écran du bouton Hello, world, avec un cadre rouge autour de lui et le code-behind du bouton.

Étape 3 : Démarrer l’applicationStep 3: Start the app

À ce stade, vous avez créé une application très simple.At this point, you've created a very simple app. Le moment est bien choisi pour générer, déployer et lancer votre application et voir à quoi elle ressemble.This is a good time to build, deploy, and launch your app and see what it looks like. Vous pouvez déboguer votre application sur l’ordinateur local, dans un simulateur ou un émulateur, ou sur un appareil distant.You can debug your app on the local machine, in a simulator or emulator, or on a remote device. Voici le menu des périphériques cibles dans Visual Studio.Here's the target device menu in Visual Studio.

Liste déroulante des périphériques cibles pour le débogage de votre application

Démarrer l’application sur un ordinateur de bureauStart the app on a Desktop device

Par défaut, l’application s’exécute sur l’ordinateur local.By default, the app runs on the local machine. Le menu des périphériques cibles vous offre plusieurs options pour le débogage de votre application sur des périphériques de la famille des ordinateurs de bureau.The target device menu provides several options for debugging your app on devices from the desktop device family.

  • SimulateurSimulator
  • Ordinateur localLocal Machine
  • Ordinateur distantRemote Machine

Pour démarrer le débogage sur l’ordinateur localTo start debugging on the local machine

  1. Dans le menu des appareils cibles (Menu Démarrer le débogage) figurant sur la barre d’outils Standard , assurez-vous que l’option Ordinateur local est sélectionnée.In the target device menu (Start debugging menu) on the Standard toolbar, make sure that Local Machine is selected. (Il s’agit de la sélection par défaut.)(It's the default selection.)
  2. Cliquez sur le bouton Démarrer le débogage (Bouton Démarrer le débogage) de la barre d’outils.Click the Start Debugging button (Start debugging button) on the toolbar.

–ou––or–

Dans le menu Déboguer , cliquez sur Démarrer le débogage.From the Debug menu, click Start Debugging.

–ou––or–

Appuyez sur F5.Press F5.

L’application s’ouvre dans une fenêtre, et un écran de démarrage par défaut s’affiche en premier.The app opens in a window, and a default splash screen appears first. Cet écran est défini par une image (SplashScreen.png) et par une couleur d’arrière-plan (spécifiées dans le fichier manifeste de votre application).The splash screen is defined by an image (SplashScreen.png) and a background color (specified in your app's manifest file).

L’écran de démarrage disparaît pour céder la place à votre application.The splash screen disappears, and then your app appears. Cette dernière se présente comme suit.It looks like this.

Écran initial de l’application

Appuyez sur la touche Windows pour ouvrir le menu Démarrer , puis affichez toutes les applications.Press the Windows key to open the Start menu, then show all apps. Notez que le déploiement de l’application entraîne l’ajout local de sa vignette au menu Démarrer.Notice that deploying the app locally adds its tile to the Start menu. Pour exécuter de nouveau l’application à un moment ultérieur (pas en mode débogage), appuyez ou cliquez sur sa vignette dans le menu Démarrer.To run the app again later (not in debugging mode), tap or click its tile in the Start menu.

Félicitations ! Vous venez de générer votre première application UWP, même si celle-ci ne propose pas (encore) beaucoup de fonctions.It doesn't do much—yet—but congratulations, you've built your first UWP app!

Pour arrêter le débogageTo stop debugging

Cliquez sur le bouton Arrêter le débogage (Bouton Arrêter le débogage) dans la barre d’outils.Click the Stop Debugging button (Stop debugging button) in the toolbar.

–ou––or–

Dans le menu Déboguer , cliquez sur Arrêter le débogage.From the Debug menu, click Stop debugging.

–ou––or–

Fermez la fenêtre de l’application.Close the app window.

Étape 4 : Gestionnaires d’événementsStep 4: Event handlers

Si le terme « gestionnaire d’événements » vous paraît compliqué, il s’agit simplement d’un autre nom pour désigner le code qui est appelé quand un événement se produit (par exemple, quand l’utilisateur clique sur votre bouton).An "event handler" sounds complicated, but it's just another name for the code that is called when an event happens (such as the user clicking on your button).

  1. Arrêtez l’exécution de l’application, si ce n’est déjà fait.Stop the app from running, if you haven't already.

  2. Double-cliquez sur le contrôle de bouton dans l’aire de conception pour que Visual Studio crée un gestionnaire d’événements pour votre bouton.Double-click on the button control on the design canvas to make Visual Studio create an event handler for your button.

Bien entendu, vous pouvez créer l’intégralité du code manuellement.You can of course, create all the code manually too. Vous pouvez aussi sélectionner le bouton en cliquant dessus et consulter le volet Propriétés en bas à droite.Or you can click on the button to select it, and look in the Properties pane on the lower right. Si vous basculez dans Événements (le petit boulon clignotant), vous pouvez ajouter le nom de votre gestionnaire d’événements.If you switch to Events (the little lightning bolt) you can add the name of your event handler.

  1. Modifiez le code du gestionnaire d’événements dans MainPage.xaml.cs , la page code-behind.Edit the event handler code in MainPage.xaml.cs , the code-behind page. C’est là où les choses deviennent intéressantes.This is where things get interesting. Le gestionnaire d’événements par défaut se présente ceci :The default event handler looks like this:
private void Button_Click(object sender, RoutedEventArgs e)
{

}

Modifions-le de sorte qu’il se présente comme ceci :Let's change it, so it looks like this:

private async void Button_Click(object sender, RoutedEventArgs e)
{
    MediaElement mediaElement = new MediaElement();
    var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
    Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
    mediaElement.SetSource(stream, stream.ContentType);
    mediaElement.Play();
}

Veillez aussi à inclure le mot clé async , car à défaut, vous obtiendrez une erreur en essayant d’exécuter l’application.Make sure the method signature now includes the async keyword, or you'll get an error when you try to run the app.

Que venons-nous de faire ?What did we just do?

Ce code utilise certaines API Windows pour créer un objet de synthèse vocale et lui donne du texte à prononcer.This code uses some Windows APIs to create a speech synthesis object, and then gives it some text to say. (Pour plus d’informations sur l’utilisation de SpeechSynthesis, voir la documentation Espace de noms SpeechSynthesis.)(For more information on using SpeechSynthesis, see the SpeechSynthesis namespace docs.)

Quand vous exécutez l’application et que vous cliquez sur le bouton, votre ordinateur (ou téléphone) prononce « Hello World ! ».When you run the app and click on the button, your computer (or phone) will literally say "Hello, World!".

RésuméSummary

Félicitations ! Vous venez de créer votre première application pour Windows 10 et l’application UWP.Congratulations, you've created your first app for Windows 10 and the UWP!

Pour apprendre à utiliser XAML et mettre en place les contrôles utilisés par votre application, essayez le didacticiel de grille ou passez directement aux étapes suivantes.To learn how to use XAML for laying out the controls your app will use, try the grid tutorial, or jump straight to next steps?

Voir aussiSee Also