Créer une application « Hello, World! »Create a "Hello, World!" en utilisant C++/WinRTapp using C++/WinRT

Cette rubrique vous guide tout au long de la création d’une application de plateforme Windows universelle (UWP) Windows 10 « Hello, World! »This topic walks you through creating a Windows 10 Universal Windows Platform (UWP) "Hello, World!" en utilisant C++/WinRT.app using C++/WinRT. L’interface utilisateur de l’application est définie en utilisant le langage XAML (eXtensible Application Markup Language).The app's user interface (UI) is defined using Extensible Application Markup Language (XAML).

C++/WinRT est une projection du langage C++17 moderne entièrement standard pour les API Windows Runtime (WinRT).C++/WinRT is an entirely standard modern C++17 language projection for Windows Runtime (WinRT) APIs. Pour obtenir des informations, des procédures pas à pas et des exemples de code supplémentaires, consultez la documentation C++/WinRT.For more info, and more walkthroughs and code examples, see the C++/WinRT documentation. La rubrique Bien démarrer avec C++/WinRT constitue un bon point de départ.A good topic to begin with is Get started with C++/WinRT.

Configurer Visual Studio pour C++/WinRTSet up Visual Studio for C++/WinRT

Pour plus d’informations sur la configuration du développement Visual Studio pour C++/WinRT—notamment l’installation et l’utilisation de l’extension VSIX (Visual Studio Extension) C++/WinRT et du package NuGet (qui fournissent ensemble la prise en charge des modèles et des builds de projet)—, consultez Prise en charge de Visual Studio pour C++/WinRT.For info about setting up Visual Studio for C++/WinRT development—including installing and using the C++/WinRT Visual Studio Extension (VSIX) and the NuGet package (which together provide project template and build support)—see Visual Studio support for C++/WinRT.

Pour télécharger Visual Studio, consultez Téléchargements.To download Visual Studio, see Downloads.

Pour obtenir une présentation de XAML, consultez Vue d’ensemble du langage XAML.For an introduction to XAML, see XAML overview

Créer une application vide (HelloWorldCppWinRT)Create a Blank App (HelloWorldCppWinRT)

Notre première application, intitulée « Hello, World! »,Our first app is a "Hello, World!" illustre certaines fonctionnalités de base en matière d’interactivité, de présentation et de styles.app that demonstrates some basic features of interactivity, layout, and styles.

Commencez par créer un nouveau projet dans Microsoft Visual Studio.Begin by creating a new project in Microsoft Visual Studio. Créez un projet Application vide (C++/WinRT) , puis nommez-le HelloWorldCppWinRT.Create a Blank App (C++/WinRT) project, and name it HelloWorldCppWinRT. Vérifiez que l’option Placer la solution et le projet dans le même répertoire n’est pas cochée.Make sure that Place solution and project in the same directory is unchecked. Ciblez la dernière version en disponibilité générale (autrement dit, pas la préversion) du SDK Windows.Target the latest generally-available (that is, not preview) version of the Windows SDK.

Dans une section ultérieure de cette rubrique, il vous sera demandé de générer votre projet (ne le générez pas avant cela).In a later section of this topic, you'll be directed to build your project (but don't build until then).

À propos des fichiers de projetAbout the project files

En général, dans le dossier du projet, chaque fichier .xaml (balisage XAML) a un fichier .idl, .h et .cpp correspondant.Typically, in the project folder, each .xaml (XAML markup) file has a corresponding .idl, .h, and .cpp file. Réunis, ces fichiers sont compilés en un type de page XAML.Together, those files compile into a XAML page type.

Vous pouvez modifier un fichier de balisage XAML pour créer des éléments d’interface utilisateur, et vous pouvez lier ces éléments à des sources de données (une tâche appelée liaison de données).You can modify a XAML markup file to create UI elements, and you can bind those elements to data sources (a task known as data binding). Vous modifiez les fichiers .h et .cpp (et parfois le fichier .idl) pour ajouter une logique personnalisée pour votre page XAML (des gestionnaires d’événements, par exemple).You modify the .h, and .cpp files (and sometimes the .idl file) to add custom logic for your XAML page—event handlers, for example.

Examinons certains des fichiers de projet.Let's look at some of the project files.

  • App.idl, App.xaml, App.h et App.cpp.App.idl, App.xaml, App.h, and App.cpp. Ces fichiers représentent la spécialisation de votre application de la classe de Windows::UI::Xaml::Application, qui comporte le point d’entrée de votre application.These files represent your app's specialization of the Windows::UI::Xaml::Application class, which includes your app's entry point. App.xaml ne contient aucun balisage spécifique à chaque page, mais vous pouvez y ajouter des styles d’éléments d’interface utilisateur, ainsi que tous les autres éléments que vous voulez rendre accessibles à partir de toutes les pages.App.xaml doesn't contain any page-specific markup, but you can add user interface element styles there, as well as any other elements that you want to be accessible from all pages. Les fichiers .h et .cpp contiennent des gestionnaires pour divers événements de cycle de vie de l’application.The .h and .cpp files contain handlers for various application lifecycle events. En général, c’est ici que vous ajoutez du code personnalisé pour initialiser votre application quand elle démarre et pour effectuer un nettoyage quand elle est suspendue ou arrêtée.Typically, you add custom code there to initialize your app when it starts, and to perform cleanup when it's either suspended or terminated.
  • MainPage.idl, MainPage.xaml, MainPage.h et MainPage.cpp.MainPage.idl, MainPage.xaml, MainPage.h, and MainPage.cpp. Ces fichiers contiennent le balisage XAML, ainsi que l’implémentation, pour le type de page principal (de démarrage) par défaut dans une application, qui est la classe runtime MainPage.Contain the XAML markup, and implementation, for the default main (startup) page type in an app, which is the MainPage runtime class. MainPage ne prend pas en charge de la navigation, mais elle fournit une interface utilisateur par défaut et un gestionnaire d’événements pour vous aider à démarrer.MainPage has no navigation support, but it provides some default UI, and an event handler, to get you started.
  • pch.h et pch.cpp.pch.h and pch.cpp. Ces fichiers représentent le fichier d’en-tête précompilé de votre projet.These files represent your project's precompiled header file. Dans pch.h, incluez tous les fichiers d’en-tête qui ne changent pas souvent, puis incluez pch.h dans d’autres fichiers du projet.In pch.h, include any header files that don't change often, and then include pch.h in other files in the project.

Découverte du codeA first look at the code

Classes runtimeRuntime classes

Comme vous le savez peut-être, toutes les classes d’une application de plateforme Windows universelle (UWP) écrites en C# sont des types Windows Runtime.As you may know, all of the classes in a Universal Windows Platform (UWP) app written in C# are Windows Runtime types. Cependant, quand vous créez un type dans une application C++/WinRT, vous pouvez choisir si ce type est un type Windows Runtime ou une classe/structure/énumération C++ normale.But when you author a type in a C++/WinRT application, you can choose whether that type is a Windows Runtime type, or a regular C++ class/struct/enumeration.

Toutes les pages XAML de votre projet doivent être de type Windows Runtime.Any XAML page type in your project needs to be a Windows Runtime type. Par conséquent, MainPage est un type Windows Runtime.So MainPage is a Windows Runtime type. Plus précisément, il s’agit d’une classe de runtime.Specifically, it's a runtime class. Tout type qui est consommé par une page XAML doit également être un type Windows Runtime.Any type that's consumed by a XAML page also needs to be a Windows Runtime type. Quand vous écrivez un composant Windows Runtime et que vous voulez créer un type qui peut être consommé à partir d’une autre application, vous créez alors un type Windows Runtime.When you're writing a Windows Runtime component, and you want to author a type that can be consumed from another app, then you'll author a Windows Runtime type. Dans d’autres cas, votre type peut être un type C++ normal.In other cases, your type can be a regular C++ type. En général, un type Windows Runtime peut être consommé avec n’importe quel langage Windows Runtime.Generally speaking, a Windows Runtime type can be consumed using any Windows Runtime language.

Le fait qu’un type soit défini dans MIDL (Microsoft Interface Definition Language) à l’intérieur d’un fichier .idl (Interface Definition Language) constitue une bonne indication qu’il est de type Windows Runtime.One good indication that a type is a Windows Runtime type is that it's defined in Microsoft Interface Definition Language (MIDL) inside an Interface Definition Language (.idl) file. Prenons MainPage comme exemple.Let's take MainPage as an example.

// MainPage.idl
namespace HelloWorldCppWinRT
{
    [default_interface]
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        Int32 MyProperty;
    }
}

Et voici la structure de base de l’implémentation de la classe runtime MainPage et sa fabrique d’activation, comme indiqué dans MainPage.h.And here's the basic structure of the implementation of the MainPage runtime class, and its activation factory, as seen in MainPage.h.

// MainPage.h
...
namespace winrt::HelloWorldCppWinRT::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        int32_t MyProperty();
        void MyProperty(int32_t value);
        ...
    };
}

namespace winrt::HelloWorldCppWinRT::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

Pour plus d’informations sur le choix de créer ou pas une classe de runtime pour un type donné, consultez la rubrique Créer des API avec C++/WinRT.For more details about whether or not you should author a runtime class for a given type, see the topic Author APIs with C++/WinRT. Pour plus d’informations sur la connexion entre les classes runtime et IDL (fichiers .idl), vous pouvez lire et suivre la rubrique Contrôles XAML - Liaison à une propriété C++/WinRT.And for more info about the connection between runtime classes and IDL (.idl files), you can read and follow along with the topic XAML controls; bind to a C++/WinRT property. Cette rubrique vous guide tout au long du processus de création d’une classe de runtime, dont la première étape consiste à ajouter un nouvel élément Fichier Midl (.idl) au projet.That topic walks through the process of authoring a new runtime class, the first step of which is to add a new Midl File (.idl) item to the project.

Ajoutons maintenant des fonctionnalités au projet HelloWorldCppWinRT.Now let's add some functionality to the HelloWorldCppWinRT project.

Étape 1.Step 1. Modifier votre page de démarrageModify your startup page

Dans l’Explorateur de solutions, ouvrez MainPage.xaml afin de pouvoir créer les contrôles qui constituent l’interface utilisateur.In Solution Explorer, open MainPage.xaml so that you can author the controls that form the user interface (UI).

Supprimez le StackPanel qui y figure déjà, ainsi que son contenu.Delete the StackPanel that's in there already, as well as its contents. À sa place, collez le code XAML suivant.In its place, paste the following XAML.

<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>

Ce nouveau StackPanel comporte un TextBlock qui demande le nom de l’utilisateur, un TextBox qui accepte le nom de l’utilisateur, un Button, ainsi qu’un autre élément TextBlock.This new StackPanel has a TextBlock that prompts for the user's name, a TextBox that accepts the user's name, a Button, and another TextBlock element.

Étant donné que nous avons supprimé l’élément Button nommé myButton, nous allons devoir supprimer la référence à celui-ci dans le code.Since we deleted the Button named myButton, we'll have to remove the reference to it from the code. Par conséquent, dans MainPage.cpp, supprimez la ligne de code se trouvant dans la fonction MainPage::ClickHandler.So, in MainPage.cpp, delete the line of code inside the MainPage::ClickHandler function.

À ce stade, vous avez créé une application Windows universelle très basique.At this point, you've created a very basic Universal Windows app. Pour voir à quoi ressemble l’application UWP, générez et exécutez l’application.To see what the UWP app looks like, build and run the app.

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

Dans l’application, vous pouvez taper du contenu dans la zone de texte.In the app, you can type into the text box. Mais le fait de cliquer sur le bouton n’a pour le moment aucun effet.But clicking the button doesn't do anything yet.

Étape 2.Step 2. Ajouter un gestionnaire d’événementsAdd an event handler

Dans MainPage.xaml, recherchez l’élément Button nommé inputButton, puis déclarez un gestionnaire d’événements pour son événement ButtonBase ::Click.In MainPage.xaml, find the Button named inputButton, and declare an event handler for its ButtonBase::Click event. Le balisage de l’élément Button doit maintenant ressembler à ceci.The markup for the Button should now look like this.

<Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="inputButton_Click"/>

Implémentez le gestionnaire d’événements comme suit.Implement the event handler like this.

// MainPage.h
struct MainPage : MainPageT<MainPage>
{
    ...
    void inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
};

// MainPage.cpp
namespace winrt::HelloWorldCppWinRT::implementation
{
    ...
    void MainPage::inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        greetingOutput().Text(L"Hello, " + nameInput().Text() + L"!");
    }
}

Pour plus d’informations, consultez Gérer des événements en utilisant des délégués.For more info, see Handle events by using delegates.

L’implémentation récupère le nom de l’utilisateur à partir de la zone de texte, puis il utilise pour créer un message d’accueil qu’il l’affiche dans le bloc de texte greetingOutput.The implementation retrieves the user's name from the text box, uses it to create a greeting, and displays that in the greetingOutput text block.

Générez et exécutez l’application.Build and run the app. Tapez votre nom dans la zone de texte, puis cliquez sur le bouton.Type your name in the text box, and click the button. L’application affiche un message d’accueil personnalisé.The app displays a personalized greeting.

Écran de l’application avec un message affiché

Étape 3.Step 3. Appliquer un style à la page de démarrageStyle the startup page

Choisir un thèmeChoose 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 dont le style est de couleur claire.By default, your app uses resources that have a light-colored style. Les ressources système comprennent également un thème sombre.The system resources also include a dark theme.

Pour tester le thème sombre, modifiez App.xaml, puis ajoutez une valeur pour Application::RequestedTheme.To try out the dark theme, edit App.xaml, and add a value for Application::RequestedTheme.

<Application
    ...
    RequestedTheme="Dark">

</Application>

Nous recommandons le thème sombre pour les applications qui affichent essentiellement des images ou du contenu vidéo, et le thème clair pour les applications qui contiennent beaucoup de texte.For apps that display mostly images or video, we recommend the dark theme; for apps that contain a lot of text, we recommend the light theme. Si vous utilisez 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, then use the theme that goes best with your app's look and feel.

Notes

Un thème est appliqué au démarrage de votre application.A theme is applied when your app starts up. Il ne peut pas être changé pendant que l’application est en cours d’exécution.It can't be changed while the app is running.

Utiliser les styles systèmeUse system styles

Dans cette section, nous allons modifier l’apparence du texte (par exemple, en augmentant la taille de la police).In this section we'll change the appearance of the text (for example, make the font size larger).

Dans MainPage.xaml, recherchez « What is your name ? » (Quel est votre nom ?) comme valeur deIn MainPage.xaml, find the "What's your name?" TextBlock.TextBlock. Définissez sa propriété Style sur une référence à la clé de ressource système BaseTextBlockStyle.Set its Style property to a reference to the BaseTextBlockStyle system resource key.

<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>

BaseTextBlockStyle est la clé d’une ressource qui est définie dans l’élément ResourceDictionary de \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xaml.BaseTextBlockStyle is the key of a resource that's defined in the ResourceDictionary in \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xaml. Voici les valeurs de propriété qui sont définies par ce style.Here are the property values that are set by that style.

<Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="TextTrimming" Value="None" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="LineStackingStrategy" Value="MaxHeight" />
    <Setter Property="TextLineBounds" Value="Full" />
</Style>

Également dans MainPage.xaml, recherchez l’élément TextBlock nommé greetingOutput.Also in MainPage.xaml, find the TextBlock named greetingOutput. Définissez aussi sa propriété Style sur BaseTextBlockStyle.Set its Style to BaseTextBlockStyle also. Si vous générez et exécutez l’application maintenant, vous voyez que l’apparence des deux blocs de texte a changé (par exemple, la taille de police est maintenant plus grande).If you build and run the app now, you'll see that the appearance of both text blocks has changed (for example, the font size is now larger).

Étape 4.Step 4. Faire en sorte que l’interface utilisateur s’adapte à différentes tailles de fenêtreHave the UI adapt to different window sizes

À présent, nous allons faire en sorte que l’interface utilisateur s’adapte de façon dynamique à un changement de taille de la fenêtre et qu’elle s’affiche correctement sur les appareils dotés de petits écrans.Now we'll cause the UI to adapt dynamically to a changing window size, and so that it looks good on devices with small displays. Pour ce faire, vous allez ajouter une section VisualStateManager dans MainPage.xaml.To do this, you'll add a VisualStateManager section into MainPage.xaml. Vous allez définir différents états visuels pour différentes tailles de fenêtres, puis définir les propriétés à appliquer pour chacun de ces états visuels.You'll define different visual states for different window sizes, and then set the properties to apply for each of those visual states.

Ajuster la disposition de l’interface utilisateurAdjust the UI layout

Ajoutez ce bloc de code XAML en tant que premier élément enfant de l’élément racine StackPanel.Add this block of XAML as the first child element of the root StackPanel element.

<StackPanel ...>
    <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>
    ...
</StackPanel>

Générez et exécutez l’application.Build and run the app. Notez que la présentation de l’interface utilisateur est la même qu’auparavant jusqu’à ce que la fenêtre soit redimensionnée à une taille inférieure à 641 DIP (Device-Independent Pixels, pixels indépendants des appareils).Notice that the UI looks the same as before until the window is resized narrower than 641 device-independent pixels (DIPs). À ce stade, l’état visuel narrowState est appliqué et, avec lui, toutes les méthodes setter de propriété définis pour cet état.At that point, the narrowState visual state is applied and, along with it, all of the property setters defined for that state.

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 that 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. À exactement 641 DIP, wideState est actif.At exactly 641 DIPs, wideState is in effect. Dans narrowState, vous définissez des objets Setter de façon à changer les propriétés de disposition des contrôles dans l’interface utilisateur.In narrowState, you define 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 changez l’Orientation de l’élément inputPanel en remplaçant Horizontal par 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

Cette procédure pas à pas vous a montré comment ajouter du contenu dans une application Windows universelle, comment ajouter de l’interactivité et comment changer l’apparence de l’interface utilisateur.This walkthrough showed you how to add content to a Windows Universal app, how to add interactivity, and how to change the UI's appearance.