Créez un « Hello, World ! » Application UWP utilisant C++/WinRT

Cette rubrique vous guide tout au long de la création d’une application de plateforme Windows universelle Windows (UWP) « Hello, World ! » à l’aide de C++/WinRT. L’interface utilisateur de l’application est définie à l’aide du langage XAML (Extensible Application Markup Language).

C++/WinRT est une projection de langage C++17 moderne entièrement standard pour les API Windows Runtime (WinRT). Pour plus d’informations, ainsi que d’autres procédures pas à pas et exemples de code, consultez la documentation C++/WinRT . Un bon sujet pour commencer est Pour vous lancer avec C++/WinRT.

Configurer Visual Studio pour C++/WinRT

Pour plus d’informations sur la configuration de Visual Studio pour le développement C++/WinRT, notamment l’installation et l’utilisation de l’extension Visual Studio C++/WinRT (VSIX) et du package NuGet (qui fournissent ensemble un modèle de projet et une prise en charge de build), consultez prise en charge de Visual Studio pour C++/WinRT.

Pour télécharger Visual Studio, consultez Téléchargements.

Pour une présentation du code XAML, consultez vue d’ensemble du code XAML

Créer une application vide (HelloWorldCppWinRT)

Notre première application est une application « Hello, World ! » qui illustre certaines fonctionnalités de base de l’interactivité, de la disposition et des styles.

Commencez par créer un projet dans Microsoft Visual Studio. Créez un projet d'application vide (C++/WinRT) et nommez-le HelloWorldCppWinRT. Assurez-vous que Placer la solution et le projet dans le même répertoire n’est pas coché. Ciblez la dernière version en disponibilité générale (c’est-à-dire non en préversion) du Kit de développement logiciel (SDK) Windows.

Dans une section ultérieure de cette rubrique, vous serez dirigé vers la génération de votre projet (mais ne générez pas avant).

À propos des fichiers projet

En règle générale, dans le dossier du projet, chaque fichier .xaml (balisage XAML) a un fichier correspondant .idl, un fichier .het un fichier .cpp. Ensemble, ces fichiers sont compilés dans un type de page XAML.

Vous pouvez modifier un fichier de balisage XAML pour créer des éléments d’interface utilisateur et lier ces éléments à des sources de données (une tâche appelée liaison de données). Vous modifiez les fichiers .h, .cpp (et parfois le fichier .idl) pour ajouter une logique personnalisée à votre page XAML, comme des gestionnaires d’événements, par exemple.

Examinons certains des fichiers projet.

• App.idl, App.xaml, App.h et App.cpp. Ces fichiers représentent la spécialisation de votre application de la classe Windows ::UI ::Xaml ::Application , qui inclut le point d’entrée de votre application. App.xaml ne contient aucun balisage spécifique à la page, mais vous pouvez y ajouter des styles d’éléments d’interface utilisateur, ainsi que d’autres éléments accessibles à partir de toutes les pages. Les fichiers .h et .cpp contiennent des gestionnaires pour différents événements du cycle de vie de l'application. En règle générale, vous ajoutez du code personnalisé là pour initialiser votre application au démarrage et effectuer le nettoyage lorsqu’elle est suspendue ou terminée.
• MainPage.idl, MainPage.xaml, MainPage.h et MainPage.cpp. Contiennez le balisage XAML et l’implémentation, pour le type de page principal (démarrage) par défaut dans une application, qui est la classe runtime MainPage . MainPage ne prend pas en charge la navigation, mais il fournit une interface utilisateur par défaut et un gestionnaire d’événements pour commencer.
• pch.h et pch.cpp. Ces fichiers représentent le fichier d’en-tête précompilé de votre projet. Dans pch.h, incluez tous les fichiers d’en-tête qui ne changent pas souvent, puis incluez pch.h dans d’autres fichiers dans le projet.

Un premier aperçu du code

Classes de runtime

Comme vous le savez peut-être, toutes les classes d’une application de plateforme Windows universelle (UWP) écrite en C# sont des types Windows Runtime. Toutefois, lorsque vous créez un type dans une application C++/WinRT, vous pouvez choisir si ce type est un type Windows Runtime ou une classe/struct/énumération C++ standard.

Tout type de page XAML dans votre projet doit être un type Windows Runtime. MainPage est donc un type Windows Runtime. Plus précisément, il s’agit d’une classe runtime. Tout type consommé par une page XAML doit également être un type Windows Runtime. Lorsque vous écrivez un composant Windows Runtime et que vous souhaitez créer un type qui peut être consommé à partir d’une autre application, vous allez créer un type Windows Runtime. Dans d’autres cas, votre type peut être un type C++ standard. En règle générale, un type Windows Runtime peut être consommé à l’aide de n’importe quel langage Windows Runtime.

Une bonne indication qu’un type est un type Windows Runtime est qu’il est défini dans Microsoft Interface Definition Language (MIDL) à l’intérieur d’un fichier Interface Definition Language (IDL).idl). Prenons l’exemple de MainPage .

// 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 d'exécution MainPage et de sa fabrique d'activation, comme on le voit dans 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 la création ou non d’une classe runtime pour un type donné, consultez la rubrique Créer des API avec C++/WinRT. Pour plus d’informations sur la connexion entre les classes runtime et les fichiers IDL (.idl), vous pouvez lire et suivre la rubrique Contrôles XAML : lier à une propriété C++/WinRT. Cette rubrique décrit le processus de création d’une nouvelle classe runtime, dont la première étape consiste à ajouter une nouvelle Fichier Midl (.idl) élément au projet.

Nous allons maintenant ajouter certaines fonctionnalités au projet HelloWorldCppWinRT .

Étape 1. Modifier votre page de démarrage

Dans l’Explorateur de solutions, ouvrez MainPage.xaml pour pouvoir créer les contrôles qui forment l’interface utilisateur.

Supprimez le StackPanel déjà présent, ainsi que son contenu. À sa place, collez le code XAML suivant.

<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 a un TextBlock qui invite à entrer le nom de l'utilisateur, un TextBox qui accepte le nom de l'utilisateur, un Buttonet un autre élément TextBlock.

Étant donné que nous avons supprimé le bouton nommé myButton, nous devons supprimer la référence à celle-ci du code. Par conséquent, dans MainPage.cpp, supprimez la ligne de code à l’intérieur de la fonction MainPage ::ClickHandler .

À ce stade, vous avez créé une application Windows universelle très simple. Pour voir à quoi ressemble l’application UWP, générez et exécutez l’application.

Dans l’application, vous pouvez taper dans la zone de texte. Mais le fait de cliquer sur le bouton ne fait rien pour le moment.

Étape 2. Ajouter un gestionnaire d’événements

Dans MainPage.xaml, trouvez le bouton nommé inputButton, et déclarez un gestionnaire d’événements pour son événement ButtonBase::Click. Le balisage du bouton doit maintenant ressembler à ceci.

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

Implémentez le gestionnaire d’événements comme celui-ci.

// 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 les événements à l’aide de délégués.

L’implémentation récupère le nom de l’utilisateur à partir de la zone de texte, l’utilise pour créer un message d’accueil et l'affiche dans le greetingOutput bloc de texte.

Générez et exécutez l’application. Tapez votre nom dans la zone de texte, puis cliquez sur le bouton. L’application affiche un message d’accueil personnalisé.

Étape 3. Style de la page de démarrage

Sélectionner un thème

Il est facile de personnaliser l’apparence de votre application. Par défaut, votre application utilise des ressources qui ont un style clair. Les ressources système incluent également un thème sombre.

Pour essayer le thème sombre, modifiez App.xamlet ajoutez une valeur pour Application ::RequestedTheme.

<Application
    ...
    RequestedTheme="Dark">

</Application>

Pour les applications qui affichent principalement des images ou des vidéos, nous vous recommandons le thème sombre ; pour les applications qui contiennent beaucoup de texte, nous recommandons le thème clair. Si vous utilisez un jeu de couleurs personnalisé, utilisez le thème qui convient le mieux à l’apparence de votre application.

Utiliser des styles système

Dans cette section, nous allons modifier l’apparence du texte (par exemple, rendre la taille de police plus grande).

Dans MainPage.xaml, trouvez le TextBlock « Quel est votre nom ? ». Définissez sa propriété Style sur une référence à la clé de ressource système BaseTextBlockStyle.

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

BaseTextBlockStyle est la clé d’une ressource définie dans le ResourceDictionary dans \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xaml. Voici les valeurs de propriété définies par ce 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>

Dans également, recherchez le TextBlock nommé . Définissez son style sur BaseTextBlockStyle également. Si vous générez et exécutez l’application maintenant, vous verrez que l’apparence des deux blocs de texte a changé (par exemple, la taille de police est maintenant plus grande).

Étape 4. Adapter l’interface utilisateur à différentes tailles de fenêtre

À présent, nous allons adapter l’interface utilisateur de manière dynamique à une taille de fenêtre changeante, afin qu’elle semble bonne sur les appareils avec de petits écrans. Pour ce faire, vous allez ajouter une section VisualStateManager dans MainPage.xaml. Vous allez définir différents états visuels pour différentes tailles de fenêtre, puis définir les propriétés à appliquer pour chacun de ces états visuels.

Ajuster la disposition de l’interface utilisateur

Ajoutez ce bloc de XAML comme premier élément enfant de l’élément StackPanel racine.

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

Générez et exécutez l’application. Remarquez que l'interface utilisateur semble identique à avant jusqu'à ce que la fenêtre soit redimensionnée à moins de 641 pixels indépendants de l'appareil (DIPs). À ce stade, l'état visuel narrowState est appliqué et, avec celui-ci, tous les paramètres de propriétés définis pour cet état.

Le VisualState nommé wideState a un AdaptiveTrigger avec sa propriété MinWindowWidth définie sur 641. Cela signifie que l’état doit être appliqué uniquement lorsque la largeur de la fenêtre n’est pas inférieure au minimum de 641 DIPs. Vous ne définissez aucun objet Setter pour cet état, donc il utilise les propriétés de disposition que vous avez définies dans le code XAML pour le contenu de la page.

Le deuxième VisualState, narrowState, a un AdaptiveTrigger avec sa propriété MinWindowWidth définie sur 0. Cet état est appliqué lorsque la largeur de la fenêtre est supérieure à 0, mais inférieure à 641 DIPs. À exactement 641 DIPs, wideState est en vigueur. Dans narrowState, vous définissez objets Setter pour modifier les propriétés de disposition des contrôles dans l’interface utilisateur.

• Vous réduisez la marge gauche de l’élément contentPanel de 120 à 20.
• Vous modifiez l' Orientation de l’élément inputPanel de horizontal vers vertical.
• Vous ajoutez une marge supérieure de 4 DIPs à l’élément inputButton.

Résumé

Cette procédure pas à pas vous a montré comment ajouter du contenu à une application universelle Windows, comment ajouter une interactivité et comment modifier l’apparence de l’interface utilisateur.