Поделиться через

Создайте "Hello, World!" Приложение UWP с помощью C++/WinRT

В этой статье описывается создание приложения универсальной платформы Windows (UWP) "Hello, World!" с помощью C++/WinRT. Пользовательский интерфейс приложения определяется с помощью языка разметки расширяемых приложений (XAML).

C++/WinRT — это полностью стандартная современная современная проекция языка C++17 для API среды выполнения Windows (WinRT). Дополнительные сведения и дополнительные пошаговые руководства и примеры кода см. в документации по C++/WinRT . Хорошая тема для начала — Начало работы с C++/WinRT.

Настройка Visual Studio для C++/WinRT

Дополнительные сведения о настройке Visual Studio для разработки на C++/WinRT, включая установку и использование расширения Visual Studio для C++/WinRT (VSIX) и пакета NuGet (которые вместе предоставляют поддержку шаблона проекта и сборки), см. в разделе Поддержка Visual Studio для C++/WinRT.

Чтобы скачать Visual Studio, см. раздел Загрузки.

См. обзор XAML в разделе Общие сведения о XAML

Создание пустого приложения (HelloWorldCppWinRT)

Наше первое приложение — это приложение "Hello, World!", демонстрирующее некоторые основные функции интерактивности, макета и стилей.

Начните с создания проекта в Microsoft Visual Studio. Создайте проект "Пустое приложение" (C++/WinRT) и назовите его HelloWorldCppWinRT. Убедитесь, что опция «Разместить решение и проект в одном каталоге» не отмечена. Ориентируйтесь на последнюю общедоступную (т. е. не предварительную) версию пакета разработки программного обеспечения для Windows (SDK).

В более позднем разделе этой темы вам будет предложено приступить к сборке проекта (но не начинайте до того момента).

Сведения о файлах проекта

Как правило, в папке проекта каждый .xaml файл разметки XAML имеет соответствующий .idl.hфайл и .cpp файл. Вместе эти файлы компилируются в тип страницы XAML.

Вы можете изменить файл разметки XAML для создания элементов пользовательского интерфейса и привязать эти элементы к источникам данных (задача, известная как привязка данных). Вы изменяете файлы .h и .cpp (а иногда и файл .idl), чтобы добавить настраиваемую логику для страницы XAML — например, обработчики событий.

Рассмотрим некоторые файлы проекта.

  • App.idl, App.xaml, App.h и App.cpp. Эти файлы представляют специализацию приложения в классе Windows::UI::Xaml::Application , который включает точку входа вашего приложения. App.xaml не содержит разметку для конкретной страницы, но вы можете добавить там стили элементов пользовательского интерфейса и любые другие элементы, которые вы хотите сделать доступными на всех страницах. Файлы .h и .cpp содержат обработчики для различных событий жизненного цикла приложения. Как правило, вы добавляете пользовательский код туда, чтобы инициализировать приложение при запуске, и выполнить очистку при приостановке или завершении.
  • MainPage.idl, MainPage.xaml, MainPage.h и MainPage.cpp. Содержит разметку XAML и реализацию для типа главной (запуска) страницы по умолчанию в приложении, который является классом среды выполнения MainPage . MainPage не поддерживает навигацию, но предоставляет некоторый пользовательский интерфейс по умолчанию и обработчик событий, чтобы приступить к работе.
  • pch.h и pch.cpp. Эти файлы представляют предварительно скомпилируемый файл заголовка проекта. Включите в pch.h все файлы заголовков, которые редко изменяются, а затем включите pch.h в другие файлы проекта.

Первый взгляд на код

Классы среды выполнения

Как вы знаете, все классы в приложении универсальной платформы Windows (UWP), написанном на C#, являются типами среды выполнения Windows. Но при создании типа в приложении C++/WinRT можно выбрать тип среды выполнения Windows или обычный класс C++ или структуру или перечисление.

Любой тип страницы XAML в проекте должен быть типом среды выполнения Windows. Поэтому MainPage — это тип среды выполнения Windows. В частности, это класс среды выполнения. Любой тип, используемый страницей XAML, также должен быть типом среды выполнения Windows. При написании компонента среды выполнения Windowsи желании создавать тип, который можно использовать в другом приложении, вы создадите тип платформы Windows Runtime. В других случаях ваш тип может быть обычным C++ типом. Как правило, тип среды выполнения Windows можно использовать с помощью любого языка среды выполнения Windows.

Одним из хороших признаков того, что тип является типом среды выполнения Windows, является то, что он определен в языке определения интерфейса (MIDL) внутри файла языка определения интерфейса (.idl). Давайте рассмотрим MainPage в качестве примера.

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

И вот базовая структура реализации класса среды выполнения MainPage и его фабрики активации, как показано в 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>
    {
    };
}

Дополнительные сведения о создании классов среды выполнения для заданного типа см. в статье Создание интерфейсов API с помощью C++/WinRT. Для получения дополнительной информации о связи между классами выполнения и файлами IDL (.idl) вы можете ознакомиться и следовать за содержанием раздела "Элементы управления XAML: привязка к свойству C++/WinRT". В этой статье объясняется процесс написания нового класса среды выполнения, первым шагом которого является добавление в проект нового элемента Midl File (.idl).

Теперь добавим некоторые функции в проект HelloWorldCppWinRT .

Шаг 1. Изменение начальной страницы

Вобозревателе решений откройте , чтобы создать управляющие элементы, формирующие пользовательский интерфейс.

Удалите StackPanel, который уже там есть, а также его содержимое. На его месте вставьте следующий КОД 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>

Этот новый StackPanel включает в себя TextBlock, который запрашивает имя пользователя; TextBox, предназначенный для ввода имени пользователя; Buttonи другой элемент TextBlock.

Так как мы удалили кнопкус именем myButton, нам придется удалить ссылку на нее из кода. Таким образом, удалите MainPage.cppстроку кода внутри функции MainPage::ClickHandler .

На этом этапе вы создали очень простое универсальное приложение Для Windows. Чтобы узнать, как выглядит приложение UWP, создайте и запустите приложение.

экран UWP-приложения с контролами

В приложении можно ввести текстовое поле. Но нажатие кнопки пока не делает ничего.

Шаг 2. Добавление обработчика событий

В найдите кнопк и inputButtonи объявите обработчик событий для события ButtonBase::Click. Разметка для кнопки должна выглядеть следующим образом.

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

Реализуйте обработчик событий, как показано ниже.

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

Дополнительные сведения см. в разделе Обработка событий с помощью делегатов.

Реализация извлекает имя пользователя из текстового поля, использует его для создания приветствия и отображает его в текстовом блоке greetingOutput.

Создайте и запустите приложение. Введите имя в текстовом поле и нажмите кнопку. Приложение отображает персонализированное приветствие.

Экран приложения с отображением сообщения

Шаг 3. Стиль начальной страницы

Выбор темы

Легко настроить внешний вид и удобство работы приложения. По умолчанию приложение использует ресурсы с светло-цветным стилем. Системные ресурсы также включают темную тему.

Чтобы попробовать темную тему, изменить App.xamlи добавить значение для Application::RequestedTheme.

<Application
    ...
    RequestedTheme="Dark">

</Application>

Для приложений, которые отображаются в основном изображения или видео, рекомендуется темная тема; для приложений, содержащих много текста, рекомендуется светлая тема. Если вы используете настраиваемую цветовую схему, используйте тему, которая лучше всего подходит для внешнего вида и чувства вашего приложения.

Замечание

Тема применяется при запуске приложения. Его нельзя изменить во время работы приложения.

Использование системных стилей

В этом разделе мы изменим внешний вид текста (например, размер шрифта больше).

В MainPage.xamlнайдите текстовый блок "Как вас зовут?". Установите свойство Style как ссылку на ключ системного ресурса BaseTextBlockStyle.

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

BaseTextBlockStyle является ключом ресурса, определенного в ResourceDictionary в \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xaml. Ниже приведены значения свойств, заданные этим стилем.

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

Также в MainPage.xamlнайдите TextBlock с именемgreetingOutput. Задайте для стиль значение BaseTextBlockStyle. Если вы создаете и запускаете приложение, вы увидите, что внешний вид обоих текстовых блоков изменился (например, размер шрифта теперь больше).

Шаг 4. Адаптация пользовательского интерфейса к разным размерам окна

Теперь пользовательский интерфейс будет динамически адаптироваться к изменению размера окна, поэтому он выглядит хорошо на устройствах с небольшими дисплеями. Для этого вы добавите раздел VisualStateManager в MainPage.xaml. Вы определите различные визуальные состояния для разных размеров окна, а затем задайте свойства, которые будут применяться для каждого из этих визуальных состояний.

Настройка макета пользовательского интерфейса

Добавьте этот блок XAML как первый дочерний элемент в корневой элемент StackPanel.

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

Создайте и запустите приложение. Обратите внимание, что пользовательский интерфейс выглядит так же, как и раньше, пока окно не будет сужено до менее чем 641 пикселя, независимых от устройства (DIP). На этом этапе применяется визуальное состояние narrowState и вместе с ним все установщики свойств, определенные для этого состояния.

VisualState с именемwideState имеет adaptiveTrigger с его свойством MinWindowWidth значение 641. Это означает, что состояние применяется только в том случае, если ширина окна не меньше 641 DIPs. Для этого состояния не определяются объекты Setter , поэтому для содержимого страницы используются свойства макета, определенные в XAML.

Второй VisualStateимеет AdaptiveTrigger со свойством MinWindowWidth значение 0. Это состояние применяется, если ширина окна превышает 0, но менее 641 DIPs. Ровно в 641 DIPs wideState действует. В narrowStateвы определяете объекты Setter для изменения свойств макета элементов управления в пользовательском интерфейсе.

  • Можно уменьшить левое поле элемента contentPanel с 120 до 20.
  • Вы измените ориентации элемента inputPanel с Horizontal на Vertical.
  • Вы добавляете верхний отступ 4 DIP элементу inputButton.

Сводка

В этом пошаговом руководстве показано, как добавить содержимое в универсальное приложение Windows, как добавить интерактивность и как изменить внешний вид пользовательского интерфейса.