Créer une application « Hello, World! »Create a "Hello, World!" en C++/CXapp in C++/CX

Important

Ce didacticiel utilise C++/CX.This tutorial uses C++/CX. Microsoft a publié C++/WinRT : une projection moderne et entièrement standard du langage C++17 destinée aux API Windows Runtime (WinRT).Microsoft has released C++/WinRT: an entirely standard modern C++17 language projection for Windows Runtime (WinRT) APIs. Pour plus d'informations sur ce langage, consultez C++/WinRT.For more information on this language, please see C++/WinRT.

Avec Microsoft Visual Studio, vous pouvez utiliser C++/CX pour développer une application exécutable sous Windows 10 avec une interface utilisateur définie en XAML (Extensible Application Markup Language).With Microsoft Visual Studio, you can use C++/CX to develop an app that runs on Windows 10 with a UI that's defined in Extensible Application Markup Language (XAML).

Notes

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

Avant de commencerBefore you start

  • Pour suivre ce didacticiel, vous devez utiliser Visual Studio Community ou l'une des versions de Visual Studio autres que Community sur un ordinateur exécutant Windows 10.To complete this tutorial, you must use Visual Studio Community, or one of the non-Community versions of Visual Studio, on a computer that's running Windows 10. Pour télécharger les éléments nécessaires, voir Obtenir les outils.To download, see Get the tools.
  • Nous supposons que vous avez une connaissance de base du langage C++/CX standard, du code XAML et des concepts présentés dans Vue d'ensemble du langage XAML.We assume you have a basic understanding of C++/CX, XAML, and the concepts in the XAML overview.
  • Nous partons du principe que vous utilisez la disposition de fenêtre par défaut dans Visual Studio.We assume you're using the default window layout in Visual Studio. Pour rétablir la disposition par défaut, dans la barre de menus, choisissez Fenêtre > Rétablir la disposition de la fenêtre.To reset to the default layout, on the menu bar, choose Window > Reset Window Layout.

Comparatif entre les applications de bureau C++ et les applications WindowsComparing C++ desktop apps to Windows apps

Si vous avez déjà programmé des applications de bureau Windows en C++, vous constaterez sans doute que certains aspects de l'écriture d'applications pour UWP présentent des similitudes. D'autres aspects, au contraire, vous demanderont d'acquérir de nouvelles connaissances.If you're coming from a background in Windows desktop programming in C++, you'll probably find that some aspects of writing apps for the UWP are familiar, but other aspects require some learning.

Points communsWhat's the same?

  • Vous pouvez utiliser la bibliothèque STL, la bibliothèque CRT (avec quelques exceptions) et toute autre bibliothèque C++ tant que le code se contente d'appeler des fonctions Windows accessibles à partir de l'environnement Windows Runtime.You can use the STL, the CRT (with some exceptions), and any other C++ library as long as the code only calls Windows functions that are accessible from the Windows Runtime environment.

  • Si vous êtes habitué aux concepteurs visuels, vous pouvez toujours utiliser le concepteur intégré à Microsoft Visual Studio ou utiliser Blend pour Visual Studio qui comporte davantage de fonctionnalités.If you're accustomed to visual designers, you can still use the designer built into Microsoft Visual Studio, or you can use the more full-featured Blend for Visual Studio. Si vous avez l’habitude de coder manuellement l’interface utilisateur, vous pouvez procéder de la même façon avec le code XAML.If you're accustomed to coding UI by hand, you can hand-code your XAML.

  • Vous créez toujours des applications qui utilisent les types du système d’exploitation Windows et vos propres types.You're still creating apps that use Windows operating system types and your own custom types.

  • Vous utilisez toujours le débogueur, le profileur et les autres outils de développement de Visual Studio.You're still using the Visual Studio debugger, profiler, and other development tools.

  • Vous créez toujours des applications qui sont compilées en code machine natif par le compilateur Visual C++.You're still creating apps that are compiled to native machine code by the Visual C++ compiler. En C++/CX, les applications UWP ne s'exécutent pas dans un environnement d'exécution managé.UWP apps in C++/CX don't execute in a managed runtime environment.

NouveautésWhat's new?

  • Les principes de conception régissant les applications UWP et les applications Windows universelles sont très différents de ceux des applications de bureau.The design principles for UWP apps and Universal Windows apps are very different from those for desktop apps. Les bordures des fenêtres, les étiquettes, les boîtes de dialogue, etc., sont reléguées au deuxième plan.Window borders, labels, dialog boxes, and so on, are de-emphasized. C’est le contenu qui est mis en avant.Content is foremost. Les applications Windows universelles réussies intègrent ces principes dès le début de la phase de planification.Great Universal Windows apps incorporate these principles from the very beginning of the planning stage.

  • Vous utilisez XAML pour définir l’interface utilisateur dans sa totalité.You're using XAML to define the entire UI. La séparation entre l’interface utilisateur et la logique du programme résident est beaucoup plus nette dans une application Windows universelle que dans une application MFC ou Win32.The separation between UI and core program logic is much clearer in a Windows Universal app than in an MFC or Win32 app. Pendant que vous mettez au point le comportement dans le fichier de code, d’autres personnes peuvent travailler sur l’apparence de l’interface utilisateur dans le fichier XAML.Other people can work on the appearance of the UI in the XAML file while you're working on the behavior in the code file.

  • Bien que, sur les appareils Windows, Win32 soit toujours disponible pour certaines fonctionnalités, vous programmez avant tout dans une nouvelle API conviviale orientée objet : Windows Runtime.You're primarily programming against a new, easy-to-navigate, object-oriented API, the Windows Runtime, although on Windows devices Win32 is still available for some functionality.

  • Vous utilisez C++/CX pour consommer et créer des objets Windows Runtime.You use C++/CX to consume and create Windows Runtime objects. C++/CX autorise la gestion des exceptions, les délégués et les événements C++, ainsi que le décompte de références automatique des objets créés dynamiquement.C++/CX enables C++ exception handling, delegates, events, and automatic reference counting of dynamically created objects. Quand vous utilisez C++/CX, les détails des architectures COM et Windows sous-jacentes sont soustraits du code de votre application.When you use C++/CX, the details of the underlying COM and Windows architecture are hidden from your app code. Pour plus d’informations, voir les Informations de référence en matière de langage C++/CX.For more information, see C++/CX Language Reference.

  • Votre application est compilée dans un package qui contient aussi des métadonnées sur les types présents dans votre application, les ressources qu’elle utilise, ainsi que les capacités dont elle a besoin (accès aux fichiers, à Internet, à un appareil photo et ainsi de suite).Your app is compiled into a package that also contains metadata about the types that your app contains, the resources that it uses, and the capabilities that it requires (file access, internet access, camera access, and so forth).

  • Dans le Microsoft Store et le Windows Phone Store, votre application est validée comme étant digne de confiance par un processus de certification, puis mise à la disposition de millions de clients potentiels.In the Microsoft Store and Windows Phone Store your app is verified as safe by a certification process and made discoverable to millions of potential customers.

Application Hello World Store en C++/CXHello World Store app in C++/CX

Notre première application, intitulée « Hello World », présente certaines fonctionnalités de base en matière d’interactivité, de présentation et de style.Our first app is a "Hello World" that demonstrates some basic features of interactivity, layout, and styles. Nous allons créer une application à partir du modèle de projet d’application Windows universelle.We'll create an app from the Windows Universal app project template. Si vous avez développé auparavant des applications pour Windows 8.1 et Windows Phone 8.1, vous vous rappelez probablement que vous deviez avoir trois projets dans Visual Studio, l’un pour l’application Windows, l’un pour l’application téléphonique et l’un avec du code partagé.If you've developed apps for Windows 8.1 and Windows Phone 8.1 before, you might remember that you had to have three projects in Visual Studio, one for the Windows app, one for the phone app, and another with shared code. La plateforme Windows universelle (UPW) de Windows 10 permet de n'utiliser qu'un seul projet, qui s'exécute sur tous les appareils, notamment sur les ordinateurs de bureau et portables Windows 10, et sur les appareils tels que les tablettes, les téléphones mobiles, les appareils VR, etc.The Windows 10 Universal Windows Platform (UWP) makes it possible to have just one project, which runs on all devices, including desktop and laptop computers running Windows 10, devices such as tablets, mobile phones, VR devices and so on.

Commençons par les bases :We'll start with the basics:

  • Créer un projet Windows universel dans Visual Studio.How to create a Universal Windows project in Visual Studio.

  • Comprendre les projets et fichiers qui sont créés.How to understand the projects and files that are created.

  • Comprendre les extensions de composant Visual C++ (C++/CX) et savoir quand les utiliser.How to understand the extensions in Visual C++ component extensions (C++/CX), and when to use them.

Tout d'abord, créez une solution dans Visual StudioFirst, create a solution in Visual Studio

  1. Dans Visual Studio, dans la barre de menus, choisissez Fichier > Nouveau > Projet... .In Visual Studio, on the menu bar, choose File > New > Project....

  2. Dans la boîte de dialogue Créer un projet, sélectionnez Application vide (Windows universelle - C++/CX) .In the Create a new project dialog box, select Blank App (Universal Windows - C++/CX). Si vous ne voyez pas cette option, vérifiez que les outils de développement d’applications Windows universelles sont installés.If you don't see this option, make sure you have the Universal Windows App Development Tools installed. Pour plus d’informations, consultez Se préparer.See Get set up for more information.

Modèles de projet C++/CX dans la boîte de dialogue Créer un projetC++/CX project templates in the Create a new project dialog box

  1. Choisissez Suivant, puis entrez un nom pour le projet.Choose Next, and then enter a name for the project. Appelons-le HelloWorld.We'll name it HelloWorld.

  2. Choisissez le bouton Créer.Choose the Create button.

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.

Vos fichiers de projet sont créés.Your project files are created.

Avant de continuer, examinons de plus près ce que contient la solution.Before we go on, let's look at what's in the solution.

Solution d’application universelle avec des nœuds réduits

À propos des fichiers de projetAbout the project files

Chaque fichier .xaml inclus dans un dossier de projet est associé à un fichier .xaml.h et à un fichier .xaml.cpp correspondants dans le même dossier, ainsi qu’à un fichier .g et à un fichier .g.hpp dans le dossier Fichiers générés qui figure sur le disque mais ne fait pas partie du projet.Every .xaml file in a project folder has a corresponding .xaml.h file and .xaml.cpp file in the same folder and a .g file and a .g.hpp file in the Generated Files folder, which is on disk but not part of the project. Vous modifiez les fichiers XAML pour créer des éléments d’interface utilisateur et les connecter à des sources de données (DataBinding).You modify the XAML files to create UI elements and connect them to data sources (DataBinding). Vous modifiez les fichiers .h et .cpp pour ajouter une logique personnalisée pour des gestionnaires d’événements.You modify the .h and .cpp files to add custom logic for event handlers. Les fichiers auto-générés représentent la transformation du balisage XAML en C++/CX.The auto-generated files represent the transformation of the XAML markup into C++/CX. Ne modifiez pas ces fichiers, mais étudiez-les pour mieux comprendre comment fonctionne le code-behind.Don't modify these files, but you can study them to better understand how the code-behind works. En gros, le fichier généré contient une définition de classe partielle pour un élément racine XAML ; cette classe est la même que celle que vous modifiez dans les fichiers *.xaml.h et .cpp.Basically, the generated file contains a partial class definition for a XAML root element; this class is the same class that you modify in the *.xaml.h and .cpp files. Les fichiers générés déclarent les éléments enfants d’interface utilisateur XAML en tant que membres de classe pour que vous puissiez les référencer dans le code que vous écrivez.The generated files declare the XAML UI child elements as class members so that you can reference them in the code you write. Au moment de la génération, le code généré et votre code sont fusionnés dans une définition de classe complète, puis compilés.At build time, the generated code and your code are merged into a complete class definition and then compiled.

Examinons tout d’abord les fichiers de projet.Let's look first at the project files.

  • App.xaml, App.xaml.h, App.xaml.cpp : ces fichiers représentent l'objet Application, qui est le point d'entrée d'une application.App.xaml, App.xaml.h, App.xaml.cpp: Represent the Application object, which is an app's entry point. Le fichier App.xaml ne contient pas de balisage d’interface utilisateur spécifique à chaque page, mais vous pouvez ajouter des styles d’interface utilisateur et d’autres éléments que vous voulez rendre accessibles depuis chaque page.App.xaml contains no page-specific UI markup, but you can add UI styles and other elements that you want to be accessible from any page. Les fichiers code-behind contiennent des gestionnaires pour les événements OnLaunched et OnSuspending.The code-behind files contain handlers for the OnLaunched and OnSuspending events. En règle générale, c’est ici que vous ajoutez du code personnalisé pour initialiser votre application quand elle démarre et effectuer un nettoyage quand elle est suspendue ou arrêtée.Typically, you add custom code here to initialize your app when it starts and perform cleanup when it's suspended or terminated.
  • MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp : ces fichiers contiennent le balisage XAML et le code-behind de la page de « démarrage » par défaut d’une application.MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp: Contain the XAML markup and code-behind for the default "start" page in an app. Cette page n’inclut pas de prise en charge de la navigation ni de contrôles intégrés.It has no navigation support or built-in controls.
  • pch.h, pch.cpp : il s'agit d'un fichier d'en-tête précompilé et du fichier qui l'inclut dans votre projet.pch.h, pch.cpp: A precompiled header file and the file that includes it in your project. Dans pch.h, vous pouvez inclure tous les en-têtes qui ne changent pas souvent et qui sont inclus dans d’autres fichiers de la solution.In pch.h, you can include any headers that do not change often and are included in other files in the solution.
  • Package.appxmanifest : il s'agit d'un fichier XML qui décrit les fonctionnalités d'appareil requises par votre application, ainsi que les informations liées à la version et à d'autres métadonnées de l'application.Package.appxmanifest: An XML file that describes the device capabilities that your app requires, and the app version info and other metadata. Pour ouvrir ce fichier dans le Concepteur de manifeste, il suffit de double-cliquer dessus.To open this file in the Manifest Designer, just double-click it.
  • HelloWorld_TemporaryKey.pfx : clé permettant le déploiement de l’application sur cet ordinateur, à partir de Visual Studio.HelloWorld_TemporaryKey.pfx: A key that enables deployment of the app on this machine, from Visual Studio.

Découverte du codeA first look at the code

Si vous examinez le code dans les fichiers App.xaml.h et App.xaml.cpp dans le projet partagé, vous pouvez remarquer qu’il s’agit en majorité de code C++ que vous connaissez déjà.If you examine the code in App.xaml.h, App.xaml.cpp in the shared project, you'll notice that it's mostly C++ code that looks familiar. Toutefois, certains éléments de syntaxe peuvent ne pas vous être aussi familiers si vous découvrez les applications Windows Runtime ou si vous avez travaillé avec C++/CLI.However, some syntax elements might not be as familiar if you are new to Windows Runtime apps, or you've worked with C++/CLI. Voici donc les éléments de syntaxe non standard les plus courants en C++/CX :Here are the most common non-standard syntax elements you'll see in C++/CX:

Classes refRef classes

Presque toutes les classes Windows Runtime, qui incluent tous les types de l’API Windows (les contrôles XAML, les pages dans votre application, la classe App elle-même, tous les objets appareil et réseau, tous les types de conteneurs) sont déclarées sous forme de ref class.Almost all Windows Runtime classes, which includes all the types in the Windows API--XAML controls, the pages in your app, the App class itself, all device and network objects, all container types--are declared as a ref class. (Quelques types Windows correspondent à une value class ou value struct).(A few Windows types are value class or value struct). Une classe ref est consommable à partir de tous les langages.A ref class is consumable from any language. En C++/CX, la durée de vie de ces types est régie par le décompte de références automatique (et non par le nettoyage de la mémoire), si bien que vous ne supprimez jamais explicitement ces objets.In C++/CX, the lifetime of these types is governed by automatic reference counting (not garbage collection) so that you never explicitly delete these objects. Vous pouvez créer vos propres classes ref également.You can create your own ref classes as well.

namespace HelloWorld
{
   /// <summary>
   /// An empty page that can be used on its own or navigated to within a Frame.
   /// </summary>
   public ref class MainPage sealed
   {
      public:
      MainPage();
   };
}

Tous les types Windows Runtime doivent être déclarés au sein d’un espace de noms alors qu’en C++ ISO, les types eux-mêmes possèdent un modificateur d’accessibilité.All Windows Runtime types must be declared within a namespace and unlike in ISO C++ the types themselves have an accessibility modifier. Le modificateur public rend la classe visible pour les composants Windows Runtime en dehors de l’espace de noms.The public modifier makes the class visible to Windows Runtime components outside the namespace. Le mot clé sealed signifie que la classe ne peut pas servir de classe de base.The sealed keyword means the class cannot serve as a base class. Presque toutes les classes ref sont des classes « sealed » ; l’héritage de classe n’est pas largement utilisé, car JavaScript ne le comprend pas.Almost all ref classes are sealed; class inheritance is not broadly used because Javascript does not understand it.

ref new et ^ (hats)ref new and ^ (hats)

Pour déclarer une variable d’une classe ref, vous utilisez l’opérateur ^ (accent circonflexe) et vous instanciez l’objet avec le nouveau mot-clé ref.You declare a variable of a ref class by using the ^ (hat) operator, and you instantiate the object with the ref new keyword. Ensuite, vous accédez aux méthodes d’instance de l’objet avec l’opérateur ->, à l’instar d’un pointeur C++.Thereafter you access the object's instance methods with the -> operator just like a C++ pointer. Pour accéder aux méthodes statiques, vous utilisez l’opérateur :: comme en C++ ISO.Static methods are accessed with the :: operator just as in ISO C++.

Dans le code suivant, nous utilisons le nom complet pour instancier un objet et l’opérateur -> pour appeler une méthode d’instance.In the following code, we use the fully qualified name to instantiate an object, and use the -> operator to call an instance method.

Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =
     ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();

bitmapImage->SetSource(fileStream);

En règle générale, dans un fichier .cpp, nous ajoutons une directive using namespace Windows::UI::Xaml::Media::Imaging et le mot clé auto, pour que le même code ressemble à ce qui suit :Typically, in a .cpp file we would add a using namespace Windows::UI::Xaml::Media::Imaging directive and the auto keyword, so that the same code would look like this:

auto bitmapImage = ref new BitmapImage();
bitmapImage->SetSource(fileStream);

PropriétésProperties

Une classe ref peut avoir des propriétés, qui, comme dans les langages managés, sont des fonctions membres spéciales qui apparaissent sous forme de champs dans le code consommateur.A ref class can have properties, which, just as in managed languages, are special member functions that appear as fields to consuming code.

public ref class SaveStateEventArgs sealed
{
   public:
   // Declare the property
   property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
   {
      Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
   }
   ...
};

   ...
   // consume the property like a public field
   void PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {    
      if (mruToken != nullptr && !mruToken->IsEmpty())
   {
      e->PageState->Insert("mruToken", mruToken);
   }
}

DéléguésDelegates

Comme dans les langages managés, un délégué est un type de référence qui encapsule une fonction avec une signature spécifique.Just as in managed languages, a delegate is a reference type that encapsulates a function with a specific signature. Les délégués sont le plus souvent utilisés avec des événements et des gestionnaires d’événements.They are most often used with events and event handlers

// Delegate declaration (within namespace scope)
public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);

// Event declaration (class scope)
public ref class NavigationHelper sealed
{
   public:
   event LoadStateEventHandler^ LoadState;
};

// Create the event handler in consuming class
MainPage::MainPage()
{
   auto navigationHelper = ref new Common::NavigationHelper(this);
   navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);
}

Ajout de contenu à l’applicationAdding content to the app

Ajoutons du contenu à l’application.Let's add some content to the app.

Étape 1 : modifier votre page de démarrageStep 1: Modify your start page

  1. Dans l’Explorateur de solutions, ouvrez MainPage.xaml.In Solution Explorer, open MainPage.xaml.

  2. Créez des contrôles pour l’interface utilisateur en ajoutant le code XAML suivant à la classe Grid racine, juste avant sa balise de fermeture.Create controls for the UI by adding the following XAML to the root Grid, immediately before its closing tag. Il contient un StackPanel comportant un TextBlock qui demande le nom de l’utilisateur, un élément TextBox qui accepte le nom de l’utilisateur, un Button, puis un autre élément TextBlock.It contains a StackPanel that has a TextBlock that asks the user's name, a TextBox element that accepts the user's name, a Button, and another TextBlock element.

    <StackPanel x:Name="contentPanel" Margin="120,30,0,0">
        <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
        <TextBlock Text="What's your name?"/>
        <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button x:Name="inputButton" Content="Say &quot;Hello&quot;"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput"/>
    </StackPanel>
    
  3. À ce stade, vous avez créé une application Windows universelle très basique.At this point, you have created a very basic Universal Windows app. Pour voir à quoi l’application UWP ressemblera, appuyez sur F5 pour générer, déployer et exécuter l’application en mode débogage.To see what the UWP app looks like, press F5 to build, deploy, and run the app in debugging mode.

L’écran de démarrage par défaut s’affiche en premier.The default splash screen appears first. Il comporte une image, Assets\SplashScreen.scale-100.png, et une couleur d'arrière-plan spécifiées dans le fichier manifeste de l'application.It has an image—Assets\SplashScreen.scale-100.png—and a background color that are specified in the app's manifest file. Pour apprendre à personnaliser l’écran de démarrage, voir Ajout d’un écran de démarrage.To learn how to customize the splash screen, see Adding a splash screen.

Quand l’écran de démarrage disparaît, votre application apparaît.When the splash screen disappears, your app appears. La page principale de l’application apparaît.It displays the main page of the App.

Écran de l'application UWP, avec des contrôles

Félicitations ! Même si elle ne propose pas encore beaucoup de fonctions, vous venez de générer votre première application pour la plateforme Windows universelle.It doesn't do much—yet—but congratulations, you've built your first Universal Windows Platform app!

Pour arrêter le débogage et fermer l’application, retournez dans Visual Studio et appuyez sur Maj+F5.To stop debugging and close the app, return to Visual Studio and press Shift+F5.

Pour plus d’informations, voir Exécuter une application du Store à partir de Visual Studio.For more information, see Run a Store app from Visual Studio.

Dans l’application, vous pouvez taper dans le TextBox, mais quand vous cliquez sur le Button, il ne se passe rien.In the app, you can type in the TextBox, but clicking the Button doesn't do anything. Dans les étapes suivantes, vous créez un gestionnaire d’événements pour l’événement Click du bouton qui affiche une formule de salutation personnalisée.In later steps, you create an event handler for the button's Click event, which displays a personalized greeting.

Étape 2 : Créer un gestionnaire d’événementsStep 2: Create an event handler

  1. Dans MainPage.xaml, en mode XAML ou Création, sélectionnez le Button « Say Hello » dans le StackPanel que vous avez ajouté précédemment.In MainPage.xaml, in either XAML or design view, select the "Say Hello" Button in the StackPanel you added earlier.

  2. Ouvrez la Fenêtre Propriétés en appuyant sur F4, puis choisissez le bouton Événements (bouton Événements).Open the Properties Window by pressing F4, and then choose the Events button (Events button).

  3. Recherchez l’événement Click.Find the Click event. Dans sa zone de texte, tapez le nom de la fonction qui gère l’événement Click.In its text box, type the name of the function that handles the Click event. Pour cet exemple, tapez « Button_Click ».For this example, type "Button_Click".

    Fenêtre Propriétés, vue Événements

  4. Appuyez sur Entrée.Press Enter. La méthode du gestionnaire d’événements est créée dans MainPage.xaml.cpp et ouverte afin que vous puissiez ajouter le code qui est exécuté quand l’événement se produit.The event handler method is created in MainPage.xaml.cpp and opened so that you can add the code that's executed when the event occurs.

Au même moment, dans MainPage.xaml, le code XAML de Button est mis à jour pour déclarer le gestionnaire d’événements Click comme suit :At the same time, in MainPage.xaml, the XAML for the Button is updated to declare the Click event handler, like this:

<Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>

Vous pourriez également avoir simplement ajouté cela au code xaml manuellement, ce qui peut être utile si le concepteur ne se charge pas.You could also have simply added this to the xaml code manually, which can be helpful if the designer doesn't load. Si vous ajoutez cela manuellement, tapez « Click », puis laissez IntelliSense afficher l’option pour ajouter un nouveau gestionnaire d’événements.If you enter this manually, type "Click" and then let IntelliSense pop up the option to add a new event handler. De cette façon, Visual Studio crée la déclaration de méthode nécessaire et un stub.That way, Visual Studio creates the necessary method declaration and stub.

Le concepteur ne se charge pas si une exception non gérée se produit pendant l’opération de rendu.The designer fails to load if an unhandled exception occurs during rendering. L’opération de rendu dans le concepteur implique l’exécution d’une version de conception de la page.Rendering in the designer involves running a design-time version of the page. Il peut être utile de désactiver l’exécution du code utilisateur.It can be helpful to disable running user code. Vous pouvez le faire en modifiant le paramètre dans la boîte de dialogue Outils, Options.You can do this by changing the setting in the Tools, Options dialog box. Sous Concepteur XAML, désactivez l’option Exécuter le code du projet dans le concepteur XAML (si pris en charge) .Under XAML Designer, uncheck Run project code in XAML designer (if supported).

  1. Dans MainPage.xaml.cpp, ajoutez le code suivant au gestionnaire d'événements Button_Click que vous venez de créer.In MainPage.xaml.cpp, add the following code to the Button_Click event handler that you just created. Ce code récupère le nom de l’utilisateur à partir du contrôle nameInput TextBox et l’utilise pour créer des salutations.This code retrieves the user's name from the nameInput TextBox control and uses it to create a greeting. Le contrôle greetingOutput TextBlock affiche le résultat.The greetingOutput TextBlock displays the result.
void HelloWorld::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    greetingOutput->Text = "Hello, " + nameInput->Text + "!";
}
  1. Définissez le projet comme projet de démarrage, puis appuyez sur F5 pour générer et exécuter l’application.Set the project as the startup, and then press F5 to build and run the app. Quand vous tapez un nom dans la zone de texte et que vous cliquez sur le bouton, l’application affiche une formule de salutation personnalisée.When you type a name in the text box and click the button, the app displays a personalized greeting.

Écran de l’application avec un message affiché

Étape 3 : définir le style de la page de démarrageStep 3: Style the start page

Choix d’un thèmeChoosing a theme

Il est très simple de personnaliser l’apparence d’une application.It's easy to customize the look and feel of your app. Par défaut, votre application utilise des ressources sont le style est à dominante claire.By default, your app uses resources that have a light style. Les ressources système comportent également un thème à dominante claire.The system resources also include a light theme. Testons-le pour voir à quoi il ressemble.Let's try it out and see what it looks like.

Pour basculer vers le thème foncéTo switch to the dark theme

  1. Ouvrez App.xaml.Open App.xaml.

  2. Dans la balise de début Application, modifiez la propriété RequestedTheme et attribuez-lui la valeur Dark :In the opening Application tag, edit the RequestedTheme property and set its value to Dark:

    RequestedTheme="Dark"
    

    Voici l’intégralité de la balise Application avec le thème foncé :Here's the full Application tag with the dark theme :

    <Application
    x:Class="HelloWorld.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    RequestedTheme="Dark">
    
  3. Appuyez sur la touche F5 pour générer et exécuter l’application.Press F5 to build and run it. Remarquez qu’elle utilise le thème à dominante foncée.Notice that it uses the dark theme.

    Écran de l’application avec un thème à dominante foncée

Quel thème utiliser ?Which theme should you use? Tout est question de goût personnel.Whichever one you want. Toutefois, nous recommandons le thème à dominante foncée pour les applications qui affichent essentiellement des images ou de la vidéo, et le thème à dominante claire pour les applications qui contiennent beaucoup de texte.Here's our take: for apps that mostly display images or video, we recommend the dark theme; for apps that contain a lot of text, we recommend the light theme. Si vous recourez à un modèle de couleurs personnalisé, utilisez le thème qui s’accorde le mieux à l’apparence de votre application.If you're using a custom color scheme, use the theme that goes best with your app's look and feel. Dans le reste de ce didacticiel, nous utilisons le thème à dominante claire dans les captures d’écran.In the rest of this tutorial, we use the Light theme in screenshots.

Remarque Le thème s’applique au démarrage de l’application et n’est pas modifiable pendant l’exécution de celle-ci.Note The theme is applied when the app is started and can't be changed while the app is running.

Utilisation de styles systèmeUsing system styles

Pour l’heure, le texte de l’application Windows est de très petite taille et difficile à lire.Right now, in the Windows app the text is very small and difficult to read. Remédions à cela en appliquant un style système.Let's fix that by applying a system style.

Pour modifier le style d'un élémentTo change the style of an element

  1. Dans le projet Windows, ouvrez MainPage.xaml.In the Windows project, open MainPage.xaml.

  2. En mode XAML ou Création, sélectionnez le TextBlock « What’s your name? » que vous avez ajouté précédemment.In either XAML or design view, select the "What's your name?"TextBlock that you added earlier.

  3. Dans la fenêtre Propriétés (F4), choisissez le bouton Propriétés (bouton Propriétés) dans l’angle supérieur droit.In the Properties window (F4), choose the Properties button (Properties button) in the upper right.

  4. Développez le groupe Texte et affectez 18 pixels à la taille de police.Expand the Text group and set the font size to 18 px.

  5. Développez le groupe Divers et recherchez la propriété Style.Expand the Miscellaneous group and find the Style property.

  6. Cliquez sur le marqueur de propriété (zone verte à droite de la propriété Style), puis, dans le menu, choisissez Ressource système > BaseTextBlockStyle.Click the property marker (the green box to the right of the Style property), and then, on the menu, choose System Resource > BaseTextBlockStyle.

    BaseTextBlockStyle est une ressource définie dans la classe ResourceDictionary sous \Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml.BaseTextBlockStyle is a resource that's defined in the ResourceDictionary in \Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml.

    Fenêtre Propriétés, vue Propriétés

    Dans l’aire de conception XAML, l’apparence du texte change.On the XAML design surface, the appearance of the text changes. Dans l’éditeur XAML, le code XAML de TextBlock est mis à jour :In the XAML editor, the XAML for the TextBlock is updated:

<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
  1. Répétez le processus pour définir la taille de la police et affectez BaseTextBlockStyle à l’élément greetingOutputTextBlock.Repeat the process to set the font size and assign the BaseTextBlockStyle to the greetingOutputTextBlock element.

    Conseil Bien que le TextBlock ne contienne pas de texte, quand vous placez le pointeur au-dessus de l’aire de conception XAML, un contour bleu indique son emplacement pour vous permettre de le sélectionner.Tip Although there's no text in this TextBlock, when you move the pointer over the XAML design surface, a blue outline shows where it is so that you can select it.

    Votre code XAML doit maintenant se présenter ainsi :Your XAML now looks like this:

<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    </StackPanel>
    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" x:Name="greetingOutput"/>
</StackPanel>
  1. Appuyez sur la touche F5 pour générer et exécuter l’application.Press F5 to build and run the app. Elle se présente maintenant comme suit :It now looks like this:

Écran de l’application contenant du texte plus grand

Étape 4 : adapter l'interface utilisateur à différentes tailles de fenêtreStep 4: Adapt the UI to different window sizes

Nous allons à présent adapter l’interface utilisateur à différentes tailles d’écran afin qu’elle s’affiche correctement sur des appareils mobiles.Now we'll make the UI adapt to different screen sizes so it looks good on mobile devices. Pour ce faire, vous ajoutez un élément VisualStateManager et vous définissez des propriétés qui s’appliquent à différents états visuels.To do this, you add a VisualStateManager and set properties that are applied for different visual states.

Pour ajuster la disposition de l'interface utilisateurTo adjust the UI layout

  1. Dans l’éditeur XAML, ajoutez le bloc de code XAML ci-dessous après la balise de début de l’élément Grid racine.In the XAML editor, add this block of XAML after the opening tag of the root Grid element.
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="641" />
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="narrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="contentPanel.Margin" Value="20,30,0,0"/>
                <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
  1. Déboguez l’application sur l’ordinateur local.Debug the app on the local machine. Notez que l’interface utilisateur présente le même aspect qu’auparavant, à moins que la fenêtre ne présente une taille inférieure à 641 DIP (device-independent pixel).Notice that the UI looks the same as before unless the window gets narrower than 641 device-independent pixels (DIPs).
  2. Déboguez l’application sur l’émulateur d’appareil mobile.Debug the app on the mobile device emulator. Notez que l’interface utilisateur utilise les propriétés que vous avez définies dans l’élément narrowState et s’affiche correctement sur le petit écran.Notice that the UI uses the properties you defined in the narrowState and appears correctly on the small screen.

Écran de l’application mobile contenant du texte avec style

Si vous avez utilisé un élément VisualStateManager dans des versions précédentes du langage XAML, vous pouvez remarquer que le code XAML spécifié ici utilise une syntaxe simplifiée.If you've used a VisualStateManager in previous versions of XAML, you might notice that the XAML here uses a simplified syntax.

L’élément VisualState nommé wideState comporte un élément AdaptiveTrigger dont la propriété MinWindowWidth est définie sur 641.The VisualState named wideState has an AdaptiveTrigger with its MinWindowWidth property set to 641. Cela signifie que l’état ne doit s’appliquer que si la largeur de la fenêtre n’est pas inférieure à la valeur minimale de 641 DIP.This means that the state is to be applied only when the window width is not less than the minimum of 641 DIPs. Vous ne définissez aucun objet Setter pour cet état, de sorte qu’il utilise les propriétés de disposition que vous avez définies dans le code XAML pour le contenu de la page.You don't define any Setter objects for this state, so it uses the layout properties you defined in the XAML for the page content.

Le second élément VisualState, narrowState, comporte un élément AdaptiveTrigger dont la propriété MinWindowWidth est définie sur 0.The second VisualState, narrowState, has an AdaptiveTrigger with its MinWindowWidth property set to 0. Cet état est appliqué lorsque la largeur de la fenêtre est supérieure à 0, mais inférieure à 641 DIP.This state is applied when the window width is greater than 0, but less than 641 DIPs. (À 641 DIP, l’état wideState s’applique.) Dans cet état, vous définissez certains objets Setter de façon à modifier les propriétés de disposition des contrôles dans l’interface utilisateur :(At 641 DIPs, the wideState is applied.) In this state, you do define some Setter objects to change the layout properties of controls in the UI:

  • Vous réduisez la marge gauche de l’élément contentPanel de 120 à 20.You reduce the left margin of the contentPanel element from 120 to 20.
  • Vous remplacez l’Orientation Horizontal de l’élément inputPanel par l’orientation Vertical.You change the Orientation of the inputPanel element from Horizontal to Vertical.
  • Vous ajoutez une marge supérieure de 4 DIP à l’élément inputButton.You add a top margin of 4 DIPs to the inputButton element.

RésuméSummary

C’est ici que prend fin le premier didacticiel.Congratulations, you've completed the first tutorial! Il vous a appris à ajouter du contenu dans des applications Windows universelles, à y ajouter de l’interactivité et à modifier leur apparence.It taught how to add content to Windows Universal apps, how to add interactivity to them, and how to change their appearance.

Étapes suivantesNext steps

Si votre projet d’application Windows universelle cible Windows 8.1 et/ou Windows Phone 8.1, vous pouvez le porter vers Windows 10.If you have a Windows Universal app project that targets Windows 8.1 and/or Windows Phone 8.1, you can port it to Windows 10. Aucune procédure automatique n'existe pour ce faire, mais vous pouvez effectuer le portage manuellement.There is no automatic process for this, but you can do it manually. Commencez par un nouveau projet Windows universel pour obtenir la dernière structure du système de projet et les derniers fichiers manifeste, copiez vos fichiers de code dans la structure de répertoire du projet, ajoutez les éléments à votre projet, puis réécrivez votre code XAML à l’aide du VisualStateManager en suivant les recommandations de cette rubrique.Start with a new Windows Universal project to get the latest project system structure and manifest files, copy your code files into the project's directory structure, add the items to your project, and rewrite your XAML using the VisualStateManager according to the guidance in this topic. Pour plus d’informations, voir Portage d’un projet Windows Runtime 8 vers un projet de plateforme Windows universelle (UWP) et Portage vers la plateforme Windows universelle (C++).For more information, see Porting a Windows Runtime 8 project to a Universal Windows Platform (UWP) project and Porting to the Universal Windows Platform (C++).

Si vous disposez de code C++ existant que vous souhaitez intégrer avec une application UWP, par exemple, pour créer une interface utilisateur UWP pour une application existante, voir Utilisation de code C++ existant dans un projet Windows universel.If you have existing C++ code that you want to integrate with a UWP app, such as to create a new UWP UI for an existing application, see How to: Use existing C++ code in a Universal Windows project.