Freigeben über

Erstellen Sie ein "Hello, World!" UWP-App mit C++/WinRT

In diesem Thema erfahren Sie, wie Sie eine "Hello, World!"-App für die universelle Windows-Plattform (UWP) mithilfe von C++/WinRT erstellen. Die Benutzeroberfläche der App wird mithilfe von XAML (Extensible Application Markup Language) definiert.

C++/WinRT ist eine vollständig standardmäßige moderne C++17-Sprachprojektion für Windows-Runtime-APIs (WinRT). Weitere Informationen und weitere exemplarische Vorgehensweisen und Codebeispiele finden Sie in der C++/WinRT- Dokumentation. Ein gutes Thema, mit dem Sie beginnen können, ist Erste Schritte mit C++/WinRT.

Einrichten von Visual Studio für C++/WinRT

Informationen zum Einrichten von Visual Studio für die C++/WinRT-Entwicklung – einschließlich der Installation und Verwendung der C++/WinRT Visual Studio-Erweiterung (VSIX) und des NuGet-Pakets (die zusammen Projektvorlagen und Build-Unterstützung bereitstellen) – finden Sie unter Visual Studio-Unterstützung für C++/WinRT.

Informationen zum Herunterladen von Visual Studio finden Sie unter Downloads.

Eine Einführung in XAML finden Sie unter XAML-Übersicht

Erstellen einer leeren App (HelloWorldCppWinRT)

Unsere erste App ist eine "Hello, World!"-App, die einige grundlegende Features von Interaktivität, Layout und Stilen veranschaulicht.

Beginnen Sie mit dem Erstellen eines neuen Projekts in Microsoft Visual Studio. Erstellen Sie ein leeres App- (C++/WinRT-) Projekt, und nennen Sie es HelloWorldCppWinRT. Stellen Sie sicher, dass die Option Lösung und Projekt im selben Verzeichnis ablegen deaktiviert ist. Zielen Sie auf die neueste allgemein verfügbare Version des Windows SDK, also nicht die Vorschauversion.

In einem späteren Abschnitt werden Sie angewiesen, Ihr Projekt zu kompilieren (aber kompilieren Sie erst dann).

Informationen zu den Projektdateien

In der Regel weist jede .xaml datei (XAML-Markup) im Projektordner eine entsprechende .idl, .hund .cpp Datei auf. Zusammen kompilieren diese Dateien zu einem XAML-Seitentyp.

Sie können eine XAML-Markupdatei ändern, um UI-Elemente zu erstellen; zudem können Sie diese Elemente an Datenquellen binden – eine Aufgabe, die als Datenbindungbezeichnet wird. Sie ändern die .hund .cpp Dateien (und manchmal die Datei .idl), um Ihrer XAML-Seite benutzerdefinierte Logik hinzuzufügen, z. B. Ereignishandler.

Sehen wir uns einige der Projektdateien an.

  • App.idl, App.xaml, App.hund App.cpp. Diese Dateien stellen die Spezialisierung Ihrer App auf die Windows::UI::Xaml::Application Klasse dar, die den Einstiegspunkt Ihrer App enthält. App.xaml enthält kein seitenspezifisches Markup, aber Sie können dort Stile für die Benutzeroberfläche sowie alle anderen Elemente hinzufügen, auf die Sie von allen Seiten zugreifen möchten. Die dateien .h und .cpp enthalten Handler für verschiedene Anwendungslebenszyklusereignisse. In der Regel fügen Sie dort benutzerdefinierten Code hinzu, um Ihre App zu initialisieren, wenn sie startet, und eine Bereinigung durchzuführen, wenn sie entweder angehalten oder beendet wird.
  • MainPage.idl, MainPage.xaml, MainPage.hund MainPage.cpp. Enthält das XAML-Markup und die Implementierung für den standardmäßigen Hauptseitentyp (Start) in einer App, nämlich die MainPage Laufzeitklasse. MainPage bietet keine Navigationsunterstützung, stellt jedoch einige Standard-UI-Elemente und einen Ereignishandler bereit, um Ihnen den Einstieg zu erleichtern.
  • pch.h und pch.cpp. Diese Dateien stellen die vorkompilierte Headerdatei Ihres Projekts dar. Schließen Sie in pch.halle Kopfzeilendateien ein, die sich nicht häufig ändern, und fügen Sie dann pch.h in andere Dateien im Projekt ein.

Ein erster Blick auf den Code

Laufzeitklassen

Wie Sie wissen, sind alle Klassen in einer UWP-App (Universelle Windows-Plattform), die in C# geschrieben wurde, Windows-Runtime-Typen. Wenn Sie jedoch einen Typ in einer C++/WinRT-Anwendung erstellen, können Sie auswählen, ob dieser Typ ein Windows-Runtime-Typ oder eine normale C++-Klasse/Struktur/Enumeration ist.

Jeder XAML-Seitentyp in Ihrem Projekt muss ein Windows-Runtime-Typ sein. Daher ist MainPage- ein Windows-Runtime-Typ. Es handelt sich insbesondere um die Laufzeitklasse . Jeder Typ, der von einer XAML-Seite genutzt wird, muss auch ein Windows-Runtime-Typ sein. Wenn Sie eine Windows-Runtime-Komponenteschreiben und einen Typ erstellen möchten, der von einer anderen App genutzt werden kann, erstellen Sie einen Windows-Runtime-Typ. In anderen Fällen kann ihr Typ ein normaler C++-Typ sein. Im Allgemeinen kann ein Windows-Runtime-Typ mit einer beliebigen Windows-Runtime-Sprache genutzt werden.

Ein guter Hinweis darauf, dass ein Typ ein Windows-Runtime-Typ ist, ist, dass er in Microsoft Interface Definition Language (MIDL) in einer Interface Definition Language (.idl) Datei definiert ist. Nehmen wir MainPage als Beispiel.

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

Und hier ist die grundlegende Struktur der Implementierung der MainPage Runtime-Klasse und ihrer Aktivierungsfabrik, wie in MainPage.hzu sehen.

// 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>
    {
    };
}

Weitere Informationen dazu, ob Sie eine Laufzeitklasse für einen bestimmten Typ erstellen sollten, finden Sie im Thema Autoren-APIs mit C++/WinRT. Weitere Informationen zur Verbindung zwischen Laufzeitklassen und IDL (.idl Dateien) können Sie im Thema XAML-Steuerelemente; Binden an eine C++/WinRT-Eigenschaftnachlesen und nachvollziehen. Dieses Thema beschreibt den Prozess der Erstellung einer neuen Laufzeitklasse, wobei der erste Schritt darin besteht, dem Projekt ein neues Midl File (.idl) Element hinzuzufügen.

Nun fügen wir dem HelloWorldCppWinRT- Projekt ein wenig Funktionalität hinzu.

Schritt 1. Startseite ändern

Öffnen Sie im Projektmappen-ExplorerMainPage.xaml, damit Sie die Steuerelemente erstellen können, die die Benutzeroberfläche bilden.

Löschen Sie das StackPanel, das schon vorhanden ist, sowie dessen Inhalt. Fügen Sie an seiner Stelle den folgenden XAML-Code ein.

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

Diese neue StackPanel- verfügt über ein TextBlock-, das den Benutzer auffordert, den Namen einzugeben, eine TextBox-, die den Namen des Benutzers akzeptiert, einen Button-und ein weiteres TextBlock--Element.

Da wir den Button mit dem Namen myButtongelöscht haben, müssen wir den Verweis darauf aus dem Code entfernen. Löschen Sie also in MainPage.cppdie Codezeile innerhalb der MainPage::ClickHandler-Funktion.

Zu diesem Zeitpunkt haben Sie eine sehr einfache universelle Windows-App erstellt. Um zu sehen, wie die UWP-App aussieht, erstellen Sie die App, und führen Sie sie aus.

UWP-App-Bildschirm mit Steuerelementen

In der App können Sie in das Textfeld tippen. Das Klicken auf die Schaltfläche bewirkt aber noch nichts.

Schritt 2. Hinzufügen eines Ereignishandlers

Suchen Sie in MainPage.xamlden Button mit dem Namen inputButton, und deklarieren Sie einen Ereignishandler für das ButtonBase::Click Ereignis. Das Markup für den Button sollte jetzt so aussehen.

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

Implementieren Sie den Ereignishandler wie folgt.

// 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"!");
    }
}

Weitere Informationen finden Sie unter Behandeln von Ereignissen mithilfe von Delegaten.

Die Implementierung ruft den Namen des Benutzers aus dem Textfeld ab, verwendet ihn zum Erstellen einer Begrüßung und zeigt diesen im greetingOutput- Textblock an.

Erstellen Sie die App und führen Sie sie aus. Geben Sie Ihren Namen in das Textfeld ein, und klicken Sie auf die Schaltfläche. Die App zeigt eine personalisierte Begrüßung an.

App-Bildschirm mit Meldungsanzeige

Schritt 3. Startseite gestalten

Wählen Sie ein Thema

Es ist einfach, das Erscheinungsbild Ihrer App anzupassen. Standardmäßig verwendet Ihre App Ressourcen, die einen hellen Stil aufweisen. Die Systemressourcen verfügen auch über ein dunkles Thema.

Um das dunkle Design auszuprobieren, bearbeiten Sie App.xamlund fügen Sie einen Wert für Application::RequestedThemehinzu.

<Application
    ...
    RequestedTheme="Dark">

</Application>

Für Apps, die hauptsächlich Bilder oder Videos anzeigen, empfehlen wir das dunkle Design; Für Apps, die viel Text enthalten, empfehlen wir das helle Design. Wenn Sie ein benutzerdefiniertes Farbschema verwenden, verwenden Sie das Design, das am besten zum Aussehen und Verhalten Ihrer App passt.

Hinweis

Beim Starten der App wird ein Thema angewendet. Sie kann nicht geändert werden, während die App ausgeführt wird.

Systemformatvorlagen verwenden

In diesem Abschnitt werden wir das Erscheinungsbild des Texts ändern (z. B. den Schriftgrad vergrößern).

Suchen Sie in MainPage.xamlden "Wie lautet Ihr Name?" TextBlock . Legen Sie die -Style---Eigenschaft auf einen Verweis auf den -BaseTextBlockStyle--Systemressourcenschlüssel fest.

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

BaseTextBlockStyle ist der Schlüssel einer Ressource, die im ResourceDictionary in \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xamldefiniert ist. Hier sind die Eigenschaftswerte, die durch diese Formatvorlage definiert sind.

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

Finden Sie außerdem in MainPage.xamlden TextBlock mit dem Namen greetingOutput. Legen Sie den Style ebenfalls auf BaseTextBlockStyle fest. Wenn Sie die App jetzt erstellen und ausführen, sehen Sie, dass sich die Darstellung beider Textblöcke geändert hat (z. B. ist der Schriftgrad jetzt größer).

Schritt 4. Passen Sie die Benutzeroberfläche an verschiedene Fenstergrößen an

Nun führen wir dazu, dass sich die Benutzeroberfläche dynamisch an eine sich ändernde Fenstergröße anpasst und damit auf Geräten mit kleinen Displays gut aussieht. Dazu fügen Sie einen VisualStateManager Abschnitt zu MainPage.xamlhinzu. Sie definieren unterschiedliche visuelle Zustände für unterschiedliche Fenstergrößen und legen dann die Eigenschaften fest, die für jeden dieser visuellen Zustände gelten sollen.

Anpassen des UI-Layouts

Fügen Sie diesen XAML-Block als erstes Kindelement des Stammelements StackPanel hinzu.

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

Erstellen Sie die App und führen Sie sie aus. Beachten Sie, dass die Benutzeroberfläche genauso wie zuvor aussieht, bis das Fenster auf eine Breite von weniger als 641 geräteunabhängigen Pixeln (DIPs) verkleinert wird. Zu diesem Zeitpunkt wird der narrowState visuelle Zustand angewendet und zusammen damit alle für diesen Zustand definierten Eigenschaftenzuweisungen.

Die VisualState mit dem Namen wideState verfügt über einen AdaptiveTrigger, dessen MinWindowWidth- Eigenschaft auf 641 festgelegt ist. Dies bedeutet, dass der Zustand nur angewendet werden soll, wenn die Fensterbreite nicht kleiner als mindestens 641 DIPs ist. Sie definieren keine Setter--Objekte für diesen Zustand, sodass es die Layouteigenschaften verwendet, die Sie im XAML für den Seiteninhalt definiert haben.

Der zweite VisualState, narrowState, verfügt über einen AdaptiveTrigger, wobei seine MinWindowWidth Eigenschaft auf 0 festgelegt ist. Dieser Zustand wird angewendet, wenn die Fensterbreite größer als 0 ist, jedoch kleiner als 641 DIPs. Bei genau 641 DIPs ist wideState in Kraft. In narrowStatedefinieren Sie Setter--Objekte, um die Layouteigenschaften von Bedienelementen in der Benutzeroberfläche zu ändern.

  • Sie reduzieren den linken Rand des Elements contentPanel von 120 auf 20.
  • Sie ändern die Ausrichtung des Eingabefelds von Horizontal in Vertikal.
  • Sie fügen dem inputButton-Element einen oberen Rand von 4 DIPs hinzu.

Zusammenfassung

In dieser exemplarischen Vorgehensweise wurde gezeigt, wie Sie einer universellen Windows-App Inhalte hinzufügen, interaktivität hinzufügen und wie Sie die Darstellung der Benutzeroberfläche ändern.

  • Last updated on