Dela via

Skapa ett "Hello, World!" UWP-app med C++/WinRT

Det här avsnittet beskriver hur du skapar en UWP-app (Windows Universal Windows Platform) "Hello, World!" med C++/WinRT. Appens användargränssnitt definieras med XAML (Extensible Application Markup Language).

C++/WinRT är en helt standardmodern C++17-språkprojektion för Windows Runtime-API:er (WinRT). Mer information och fler genomgångar och kodexempel finns i dokumentationen C++/WinRT. Ett bra ämne att börja med är Kom igång med C++/WinRT.

Konfigurera Visual Studio för C++/WinRT

Information om hur du konfigurerar Visual Studio för C++/WinRT-utveckling– inklusive installation och användning av C++/WinRT Visual Studio-tillägget (VSIX) och NuGet-paketet (som tillsammans tillhandahåller projektmall och byggstöd)– finns i Visual Studio-stöd för C++/WinRT-.

Information om hur du laddar ned Visual Studio finns i Nedladdningar.

En introduktion till XAML finns i XAML-översikt

Skapa en tom app (HelloWorldCppWinRT)

Vår första app är en "Hello, World!"-app som visar några grundläggande funktioner i interaktivitet, layout och format.

Börja med att skapa ett nytt projekt i Microsoft Visual Studio. Skapa ett tomt program (C++/WinRT) projekt och ge det namnet HelloWorldCppWinRT. Kontrollera att Placera lösningen och projektet i samma katalog är avmarkerat. Rikta in dig på den senaste allmänt tillgängliga (dvs. inte förhandsversionen) av Windows SDK.

I ett senare avsnitt i det här avsnittet uppmanas du att skapa projektet (men bygg inte förrän då).

Om projektfilerna

I projektmappen har vanligtvis varje .xaml-fil (XAML-markering) motsvarande .idl, .hoch .cpp fil. Tillsammans kompileras dessa filer till en XAML-sidtyp.

Du kan ändra en XAML-markeringsfil för att skapa användargränssnittselement och du kan binda dessa element till datakällor (en uppgift som kallas databindning). Du ändrar .hoch .cpp filer (och ibland den .idl filen) för att lägga till anpassad logik för din XAML-sida, till exempel händelsehanterare.

Nu ska vi titta på några av projektfilerna.

  • App.idl, App.xaml, App.hoch App.cpp. Dessa filer representerar appens specialisering av Windows::UI::Xaml::Application-klass, vilket inkluderar appens startpunkt. App.xaml innehåller inte någon sidspecifik markering, men du kan lägga till elementformat för användargränssnittet där, samt andra element som du vill ska vara tillgängliga från alla sidor. Filerna .h och .cpp innehåller hanterare för olika programlivscykelhändelser. Vanligtvis lägger du till anpassad kod där för att initiera din app när den startas och för att utföra rensning när den antingen pausas eller avslutas.
  • MainPage.idl, MainPage.xaml, MainPage.hoch MainPage.cpp. Innehåller XAML-markering och implementering för standardsidan för huvudsidan (start) i en app, som är MainPage- körningsklass. MainPage- har inget navigeringsstöd, men det tillhandahåller ett standardgränssnitt och en händelsehanterare för att komma igång.
  • pch.h och pch.cpp. Dessa filer representerar projektets förkompilerade huvudfil. I pch.htar du med alla huvudfiler som inte ändras ofta och tar sedan med pch.h i andra filer i projektet.

En första titt på koden

Körningsklasser

Som du kanske vet är alla klasser i en UWP-app (Universal Windows Platform) som skrivits i C# Windows Runtime-typer. Men när du skapar en typ i ett C++/WinRT-program kan du välja om den typen är en Windows Runtime-typ eller en vanlig C++-klass/struct/uppräkning.

Alla XAML-sidtyper i projektet måste vara en Windows Runtime-typ. Så MainPage är en Windows Runtime-typ. Mer specifikt är det en runtime-klass. Alla typer som används av en XAML-sida måste också vara en Windows Runtime-typ. När du skriver en Windows Runtime-komponent, och du vill skapa en typ som kan användas från en annan app, skapar du en Windows Runtime-typ. I andra fall kan din typ vara en vanlig C++-typ. I allmänhet kan en Windows Runtime-typ användas med valfritt Windows Runtime-språk.

En bra indikation på att en typ är en Windows Runtime-typ är att den definieras i Microsoft Interface Definition Language (MIDL) inuti en gränssnittsdefinitionsspråkfil (.idl). Vi tar MainPage- som exempel.

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

Och här är den grundläggande strukturen för implementeringen av MainPage-körningsklassen och dess aktiveringsfabrik, enligt 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>
    {
    };
}

Mer information om huruvida du bör skapa en runtime-klass för en viss typ finns i avsnittet Author APIs med C++/WinRT. Och om du vill ha mer information om anslutningen mellan körningsklasser och IDL (.idl filer) kan du läsa och följa med i avsnittet XAML-kontroller; binda till en C++/WinRT-egenskap. Det här avsnittet går igenom processen för att skapa en ny körningsklass, där det första steget är att lägga till en ny Midl-fil (.idl) objektet i projektet.

Nu ska vi lägga till några funktioner i projektet HelloWorldCppWinRT.

Steg 1. Ändra startsidan

I Solution Exploreröppnar du MainPage.xaml så att du kan skapa de kontroller som utgör användargränssnittet (UI).

Ta bort StackPanel- som redan finns där, samt dess innehåll. I stället klistrar du in följande 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>

Den här nya StackPanel- har en TextBlock- som frågar efter användarens namn, en TextBox- som accepterar användarens namn, en Buttonoch ett annat TextBlock-element.

Eftersom vi har tagit bort Button med namnet myButtonmåste vi ta bort referensen till den från koden. I MainPage.cpptar du därför bort kodraden i funktionen MainPage::ClickHandler.

Nu har du skapat en mycket grundläggande Universell Windows-app. Om du vill se hur UWP-appen ser ut skapar du och kör appen.

UWP-appskärm med kontroller

I appen kan du skriva i textrutan. Men att klicka på knappen gör ingenting ännu.

Steg 2. Lägga till en händelsehanterare

I MainPage.xaml, hitta Button med namnet inputButton, och deklarera en händelsehanterare för dess ButtonBase::Click -händelse. Koden för knappen bör nu se ut så här.

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

Implementera händelsehanteraren så här.

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

Mer information finns i Hantera händelser med hjälp av ombud.

Implementeringen hämtar användarens namn från textrutan, använder det för att skapa en hälsning och visar det i greetingOutput textblock.

Skapa och kör appen. Skriv ditt namn i textrutan och klicka på knappen. Appen visar en anpassad hälsning.

appskärm med meddelandevisning

Steg 3. Formatera startsidan

Välj ett tema

Det är enkelt att anpassa appens utseende och känsla. Som standardinställning använder appen resurser som har en ljus stil. Systemresurserna innehåller också ett mörkt tema.

Prova det mörka temat genom att redigera App.xamloch lägga till ett värde för Application::RequestedTheme.

<Application
    ...
    RequestedTheme="Dark">

</Application>

För appar som främst visar bilder eller video rekommenderar vi det mörka temat. för appar som innehåller mycket text rekommenderar vi ljustemat. Om du använder ett anpassat färgschema använder du det tema som passar bäst för appens utseende och känsla.

Anmärkning

Ett tema används när appen startas. Det går inte att ändra när appen körs.

Använd systemformat

I det här avsnittet ändrar vi utseendet på texten (till exempel gör du teckenstorleken större).

I MainPage.xamlletar du reda på "Vad heter du?" TextBlock. Ange egenskapen Style till en referens till BaseTextBlockStyle systemresursnyckel.

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

BaseTextBlockStyle är nyckeln till en resurs som definieras i ResourceDictionary i \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xaml. Här är de egenskapsvärden som anges med det formatet.

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

I MainPage.xamlhittar du även TextBlock med namnet greetingOutput. Ange dess Style till BaseTextBlockStyle också. Om du skapar och kör appen nu ser du att utseendet på båda textblocken har ändrats (till exempel är teckenstorleken nu större).

Steg 4. Låt användargränssnittet anpassas till olika fönsterstorlekar

Nu får vi användargränssnittet att anpassa sig dynamiskt till en ändrad fönsterstorlek och så att det ser bra ut på enheter med små skärmar. Det gör du genom att lägga till ett VisualStateManager- avsnitt i MainPage.xaml. Du definierar olika visuella tillstånd för olika fönsterstorlekar och anger sedan de egenskaper som ska gälla för var och en av dessa visuella tillstånd.

Justera layouten för användargränssnittet

Lägg till det här XAML-blocket som det första underordnade elementet i rotelementet 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>
    </VisualStateManager.VisualStateGroups>
    ...
</StackPanel>

Skapa och kör appen. Observera att användargränssnittet ser likadant ut som tidigare tills fönstret har storleksanpassats smalare än 641 enhetsoberoende bildpunkter (DIP:er). Då tillämpas det narrowState- visuella tillståndet och, tillsammans med det, alla egenskapsuppsättningar som definierats för det tillståndet.

VisualState med variabeln wideState har en AdaptiveTrigger med egenskapen MinWindowWidth inställd på 641. Det innebär att tillståndet endast ska tillämpas när fönsterbredden inte är mindre än minst 641 DIP:er. Du definierar inte någon Setter objekt för det här tillståndet, så den använder layoutegenskaperna som du definierade i XAML för sidinnehållet.

Den andra VisualState, narrowState, har en AdaptiveTrigger med egenskapen MinWindowWidth inställd på 0. Det här tillståndet tillämpas när fönsterbredden är större än 0, men mindre än 641 DIP:er. Vid exakt 641 DIP:er gäller wideState. I narrowStatedefinierar du Setter objekt för att ändra layoutegenskaperna för kontroller i användargränssnittet.

  • Du minskar vänstermarginalen för contentPanel element från 120 till 20.
  • Du ändrar Orientation för elementet inputPanel från Horizontal till Vertical.
  • Du lägger till en toppmarginal på 4 DIP:er till elementet inputButton.

Sammanfattning

Den här genomgången visade hur du lägger till innehåll i en Universell Windows-app, hur du lägger till interaktivitet och hur du ändrar användargränssnittets utseende.