Vytvoření "Hello, World!" Aplikace pro UPW s využitím C++/WinRT

Toto téma vás provede vytvořením aplikace Hello, World! pro Univerzální platformu Windows pro Windows pomocí C++/WinRT. Uživatelské rozhraní aplikace je definováno pomocí jazyka XAML (Extensible Application Markup Language).

C++/WinRT je zcela standardní moderní projekce jazyka C++17 pro rozhraní API prostředí Windows Runtime (WinRT). Další informace a další návody a příklady kódu najdete v dokumentaci C++/WinRT. Dobrým tématem pro začátek je Začínáme s C++/WinRT.

Nastavení sady Visual Studio pro C++/WinRT

Informace o nastavení sady Visual Studio pro vývoj pro C++/WinRT – včetně instalace a použití rozšíření sady C++/WinRT Visual Studio (VSIX) a balíčku NuGet (který společně poskytuje podporu pro šablonu projektu a sestavení) – viz podpora sady Visual Studio pro C++/WinRT.

Pokud chcete stáhnout Visual Studio, podívejte se na Stažení.

Úvod do XAML najdete v tématu přehled XAML.

Vytvoření prázdné aplikace (HelloWorldCppWinRT)

Naše první aplikace je aplikace "Hello, World!", která ukazuje některé základní funkce interaktivity, rozložení a stylů.

Začněte vytvořením nového projektu v sadě Microsoft Visual Studio. Vytvořte projekt Blank App (C++/WinRT) a pojmenujte ji HelloWorldCppWinRT. Ujistěte se, že Umístit řešení a projekt do stejného adresáře není zaškrtnuto. Zaměřte se na nejnovější obecně dostupnou verzi Windows SDK, tedy takovou, která není ve verzi Preview.

V další části tohoto tématu budete vyzváni k sestavení projektu (ale do té doby projekt nesestavujte).

O souborech projektu

Ve složce projektu má každý soubor .xaml (kód XAML) odpovídající soubory .idl, .ha .cpp. Společně se tyto soubory kompilují do typu stránky XAML.

Soubor kódu XAML můžete upravit a vytvořit prvky uživatelského rozhraní a tyto prvky můžete svázat se zdroji dat (úloha označovaná jako datová vazba). Upravíte .ha soubory .cpp (a někdy i soubor .idl) tak, aby se přidala vlastní logika pro stránku XAML – například obslužné rutiny událostí.

Pojďme se podívat na některé soubory projektu.

  • App.idl, App.xaml, App.ha App.cpp. Tyto soubory představují specializaci aplikace Windows::UI::Xaml::Application třídy, která zahrnuje vstupní bod vaší aplikace. App.xaml neobsahuje žádné značky specifické pro stránky, ale můžete tam přidat styly prvků uživatelského rozhraní a také všechny další prvky, které chcete zpřístupnit ze všech stránek. Soubory .h a .cpp obsahují obslužné rutiny pro různé události životního cyklu aplikace. Obvykle do ní přidáte vlastní kód, který inicializuje aplikaci při jejím spuštění a provede vyčištění, když je pozastavený nebo ukončený.
  • MainPage.idl, MainPage.xaml, MainPage.ha MainPage.cpp. Obsahují kód XAML a implementaci pro výchozí hlavní (spouštěcí) typ stránky v aplikaci, což je MainPage runtime třída. MainPage nemá podporu navigace, ale poskytuje nějaké výchozí prvky uživatelského rozhraní a obslužnou rutinu události, aby vám usnadnila začátek.
  • pch.h a pch.cpp. Tyto soubory představují předkompilovaný soubor hlaviček projektu. Do pch.hzahrňte všechny soubory hlaviček, které se často nemění, a pak do jiných souborů v projektu zahrňte pch.h.

První pohled na kód

Třídy modulu runtime

Jak můžete vědět, všechny třídy v aplikaci univerzální platformy Windows (UPW) napsané v jazyce C# jsou typy prostředí Windows Runtime. Když ale vytvoříte typ v aplikaci C++/WinRT, můžete zvolit, jestli je tento typ typem prostředí Windows Runtime, nebo běžnou třídou/strukturou/výčtem jazyka C++.

Libovolný typ stránky XAML v projektu musí být typem prostředí Windows Runtime. Proto MainPage je typ prostředí Windows Runtime. Konkrétně se jedná o třídu runtime . Každý typ, který využívá stránka XAML, musí být také typem prostředí Windows Runtime. Když píšete komponentu Windows Runtimea chcete vytvořit typ, který může být použit v jiné aplikaci, pak vytvoříte typ Windows Runtime. V jiných případech může být váš typ běžný typ C++. Obecně řečeno, typ prostředí Windows Runtime lze využívat pomocí libovolného jazyka Windows Runtime.

Jednou z dobrých indikací, že typ je typ prostředí Windows Runtime, je to, že je definovaný v jazyku MIDL (Microsoft Interface Definition Language) uvnitř souboru.idlInterface Definition Language. Jako příklad si vezmeme mainpage.

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

A zde je základní struktura implementace MainPage runtime třídy a její aktivační továrny, jak je vidět v 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>
    {
    };
}

Další podrobnosti o tom, zda byste měli vytvořit runtime třídu pro daný typ, najdete v tématu Tvorba API pomocí C++/WinRT. A další informace o propojení mezi runtime třídami a IDL (.idl soubory) si můžete přečíst a seznámit se s nimi v tématu ovládací prvky XAML; připojení k vlastnosti C++/WinRT. Toto téma vás provede procesem vytváření nové třídy modulu runtime. Prvním krokem je přidání nové položky Midl File (.idl) do projektu.

Teď přidáme některé funkce do projektu HelloWorldCppWinRT.

Krok 1. Úprava úvodní stránky

V Průzkumníku řešeníotevřete MainPage.xaml, abyste mohli vytvářet ovládací prvky, které tvoří uživatelské rozhraní.

Odstraňte StackPanel, který je tam již, a také jeho obsah. Na jeho místo vložte následující 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>

Tento nový StackPanel má TextBlock, který zobrazí výzvu k zadání uživatelského jména, TextBox, který přijímá jméno uživatele, Buttona další TextBlock elementu.

Protože jsme odstranili tlačítko s názvem myButton, budeme muset odebrat odkaz na něj z kódu. V MainPage.cppodstraňte řádek kódu v rámci funkce MainPage::ClickHandler.

V tuto chvíli jste vytvořili velmi základní univerzální aplikaci pro Windows. Pokud chcete zjistit, jak aplikace pro UPW vypadá, sestavte a spusťte aplikaci.

obrazovka aplikace pro UWP s ovládacími prvky

V aplikaci můžete do textového pole zadat text. Když ale na tlačítko kliknete, ještě nic neudělá.

Krok 2. Přidejte obslužnou rutinu události

V MainPage.xamlvyhledejte tlačítko s názvem inputButtona deklarujte obslužnou rutinu pro událost ButtonBase::Click. Kód tlačítka by teď měl vypadat takto.

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

Implementujte obslužnou rutinu události takto.

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

Další informace najdete v tématu Zpracování událostí pomocí delegátů.

Implementace načte jméno uživatele z textového pole, použije ho k vytvoření pozdravu a zobrazí ji v bloku textu greetingOutput.

Zkompilujte a spusťte aplikaci. Do textového pole zadejte svoje jméno a klikněte na tlačítko. Aplikace zobrazí přizpůsobený pozdrav.

obrazovka aplikace s zobrazením zprávy

Krok 3. Styl úvodní stránky

Volba motivu

Vzhled a chování aplikace je snadné přizpůsobit. Ve výchozím nastavení vaše aplikace používá prostředky, které mají světlý styl. Systémové prostředky také obsahují tmavý motiv.

Pokud chcete vyzkoušet tmavý motiv, upravte App.xamla přidejte hodnotu pro Application::RequestedTheme.

<Application
    ...
    RequestedTheme="Dark">

</Application>

Pro aplikace, které zobrazují převážně obrázky nebo video, doporučujeme tmavý motiv; pro aplikace, které obsahují hodně textu, doporučujeme světlý motiv. Pokud používáte vlastní barevné schéma, použijte motiv, který nejlépe vyhovuje vzhledu a chování vaší aplikace.

Poznámka:

Motiv se použije při spuštění aplikace. V době, kdy je aplikace spuštěná, nejde ji změnit.

Použití systémových stylů

V této části změníme vzhled textu (například zvětšíme velikost písma).

V MainPage.xamlvyhledejte TextBlock "What's your name?" (Co je vaše jméno). Nastavte její vlastnost Style na odkazem na systémový klíč prostředku BaseTextBlockStyle.

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

BaseTextBlockStyle je klíčem prostředku, který je definován v ResourceDictionary v \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xaml. Tady jsou hodnoty vlastností, které jsou nastaveny tímto stylem.

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

V vyhledejte TextBlock s názvem . Nastavte stylu také na BaseTextBlockStyle. Pokud teď aplikaci sestavíte a spustíte, uvidíte, že se změnil vzhled obou bloků textu (například velikost písma je teď větší).

Krok 4. Přizpůsobení uživatelského rozhraní různým velikostem oken

Teď způsobíme, že se uživatelské rozhraní dynamicky přizpůsobí změně velikosti okna, takže bude na zařízeních s malými displeji vypadat dobře. Uděláte to tak, že do přidáte oddíl . Pro různé velikosti oken definujete různé stavy vizuálů a pak nastavíte vlastnosti, které se mají použít pro každý z těchto stavů vizuálu.

Úprava rozložení uživatelského rozhraní

Přidejte tento blok XAML jako první podřízený prvek kořenového StackPanel elementu.

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

Zkompilujte a spusťte aplikaci. Všimněte si, že uživatelské rozhraní vypadá stejně jako předtím, dokud se velikost okna nezmění na méně než 641 pixelů nezávislých na zařízení (DIPs). V tomto okamžiku je použit narrowState vizuální stav a společně s ním se použijí všechny nastavovací vlastnosti definované pro tento stav.

VisualState pojmenovaný wideState má AdaptiveTrigger s vlastností MinWindowWidth nastavenou na hodnotu 641. To znamená, že stav se použije pouze v případě, že šířka okna není menší než minimálně 641 DIPs. Pro tento stav nedefinujete žádné Setter objekty, takže používá vlastnosti rozložení, které jste definovali v XAML pro obsah stránky.

Druhý VisualState, narrowState, má AdaptiveTrigger s vlastností MinWindowWidth nastavenou na hodnotu 0. Tento stav se použije v případě, že je šířka okna větší než 0, ale menší než 641 DPI. Přesně při 641 DIPs je wideState aktivován. V narrowStatedefinujete Setter objekty, abyste změnili vlastnosti rozložení ovládacích prvků v uživatelském rozhraní.

  • Snížíte levý okraj prvku contentPanel z 120 na 20.
  • Orientaci změníte elementu inputPanel z horizontální na vertikální.
  • K elementu inputButton přidáte horní okraj 4 DIPů.

Shrnutí

Tento názorný postup vám ukázal, jak přidat obsah do univerzální aplikace pro Windows, jak přidat interaktivitu a jak změnit vzhled uživatelského rozhraní.

  • Last updated on