Share via

Руководство. Создание первого приложения пакета SDK для приложений Windows в Visual Studio с помощью XAML и C#

  • Статья

В рамках этого краткого руководства по возможностям интегрированной среды разработки (IDE) Visual Studio вы создадите простое приложение "Hello World" для выполнения на устройстве с Windows 10 или более поздней версии. Для этого вы будете использовать шаблон проекта пакета SDK для приложений Windows (WinUI 3), язык разметки расширяемых приложений (XAML) и язык программирования C#.

Примечание.

WinUI 3 — это собственный компонент платформы пользовательского интерфейса, который поставляется с пакетом SDK для приложений Windows (полностью отделены от пакетов SDK для Windows). Дополнительные сведения см. в статье WinUI 3.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.

Создание проекта

Сначала создайте проект WinUI 3. Для этого типа проекта уже имеются все нужные файлы шаблонов, что избавляет вас от лишней работы.

Важно!

Visual Studio 2019 поддерживает только пакет SDK для приложений Windows 1.1 и более ранних версий. Visual Studio 2022 рекомендуется для разработки приложений со всеми версиями пакета SDK для приложений Windows.

Шаблоны пакета SDK для приложений Windows 1.1.x доступны путем установки расширения Visual Studio (VSIX).

Примечание.

Если у вас уже установлено расширение Visual Studio для пакета SDK для приложений Windows (VSIX), удалите его перед установкой другой версии. Инструкции см. в статье Управление расширениями для Visual Studio.

  • Вы можете установить последнюю стабильную версию 1.1.x vsIX из Visual Studio. Выберите Расширения>Управление расширениями, найдите Windows App SDK и скачайте расширение для Windows App SDK. Закройте и снова откройте Visual Studio и выполните инструкции по установке расширения. Обязательно установите шаблоны для пакета SDK для приложений Windows 1.1.
  • Кроме того, можно скачать расширение непосредственно из Visual Studio Marketplace и установить его:

Скачивание шаблонов ПАКЕТА SDK для C# для Windows App SDK ДЛЯ VS2019

После установки расширения шаблонов можно создать первый проект. Дополнительные сведения о поддержке Visual Studio 2019 см. в статье "Установка средств для пакета SDK для приложений Windows". В остальной части этого руководства предполагается, что вы используете Visual Studio 2022.

  1. Откройте Visual Studio и в начальном окне выберите Создать проект.

  2. На экране создания проекта введите WinUI в поле поиска, выберите шаблон C# для пустого приложения, упакованным (WinUI 3 в классическом приложении) и нажмите кнопку "Далее".

    Screenshot of the 'Create a new project' dialog with 'WinUI' entered in the search box, and the 'Blank App, Packaged (WinUI 3 in Desktop)' project template highlighted.

    Примечание.

    Если вы не видите шаблон проекта "Пустое приложение" (WinUI 3 в классическом приложении), щелкните ссылку "Установить дополнительные средства и компоненты ".

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Запускается Visual Studio Installer. Выберите рабочую нагрузку разработки классических приложений .NET, а затем в области сведений о установке диалогового окна установки выберите Шаблоны C# пакета SDK для приложений Windows (в нижней части списка). Теперь выберите "Изменить".

    Screenshot of the Visual Studio Installer showing the .NET Desktop Development workload.

  3. Присвойте проекту имя HelloWorld и нажмите кнопку Создать.

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

    Примечание.

    Если вы впервые использовали Visual Studio для создания приложения пакета SDK для приложений Для Windows, может появиться диалоговое окно Параметры. Выберите Режим разработчика, затем нажмите Да.

    Screenshot showing the Settings dialog box with the option for enabling Developer Mode.

    Visual Studio установит дополнительный пакет режима разработчика. После завершения установки пакета закройте диалоговое окно Параметры.

Создание приложения

Теперь можно приступить к разработке. Вы добавите элемент управления кнопкой, добавьте действие в кнопку, а затем запустите приложение Hello World, чтобы увидеть, как это выглядит.

Добавление кнопки на холст конструктора

  1. В Обозреватель решений дважды щелкните MainWindow.xaml, чтобы открыть редактор разметки XAML.

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainWindow.xaml is selected.

    Редактор XAML — это место, где можно добавить или изменить разметку. В отличие от проектов UWP, WinUI 3 не имеет представления конструктора.

    Screenshot showing MainWindow.xaml open in the Visual Studio IDE. The XAML Editor pane shows the XAML markup for the window.

  2. Просмотрите элемент управления Button , вложенный в StackPanel в корне окна.

    Screenshot showing 'Button' highlighted in the XAML editor.

Изменение метки на кнопке

  1. В редакторе XAML измените значение содержимого кнопки на "Щелкните меня" на "Hello World!".

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. Обратите внимание, что кнопка также содержит обработчик событий Click с именем myButton_Click . Мы перейдем к этой области на следующем шаге.

    Screenshot showing the XAML code for the Button in the XAML editor. The click event of the button has been highlighted.

Изменение обработчика событий

Название "обработчик событий" звучит как что-то сложное, но это всего лишь еще одно имя в коде, которое вызывается, когда происходит какое-то событие. В этом случае он добавляет действие, активируется кнопкой "Hello World!".

  1. В Обозреватель решений дважды щелкните Файл MainWindow.xaml.cs, страницу программной части.

  2. Измените код обработчика событий в открываемом окне редактора C#.

    Здесь начинается самое интересное. Обработчик события по умолчанию выглядит так:

    Screenshot showing the C# code for the default myButton_Click event handler.

    Давайте изменим его, чтобы он выглядел следующим образом:

    Screenshot showing the C# code for the new async myButton_Click event handler.

    Ниже приведен код для копирования и вставки:

    private async void myButton_Click(object sender, RoutedEventArgs e)
{
    var welcomeDialog = new ContentDialog()
    {
        Title = "Hello from HelloWorld",
        Content = "Welcome to your first Windows App SDK app.",
        CloseButtonText = "Ok",
        XamlRoot = myButton.XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

Что же мы только что сделали?

Код использует элемент управления ContentDialog для отображения приветственного сообщения в модальном всплывающем элементе управления в текущем окне. (Дополнительные сведения об использовании Microsoft.UI.Xaml.Controls.ContentDialogсм. в классе ContentDialog.)

Выполнение приложения

Пришло время создавать, развертывать и запускать приложение Пакета SDK для приложений Для Windows Hello World, чтобы узнать, как это выглядит. Это делается следующим образом.

  1. Используйте кнопку воспроизведения (она содержит текст HelloWorld (Package)), чтобы запустить приложение на локальном компьютере.

    Screenshot showing the drop-down box open next to the Play button with 'HelloWorld (Package)' selected.

    (Либо можно выбрать Отладка>Начать отладку в строке меню или нажать клавишу F5 для запуска приложения.)

  2. Посмотрите на свое приложение, которое появится вскоре после исчезновения всплывающего окна. Приложение должно выглядеть следующим образом.

    Screenshot showing the running Windows App SDK 'Hello World' application.

  3. Нажмите кнопку Hello World.

    На устройстве с Windows 10 или более поздней версии появится сообщение с надписью "Добро пожаловать в свое первое приложение пакета SDK для приложений Для Windows" с названием Hello from HelloWorld. Нажмите кнопку "ОК" , чтобы закрыть сообщение.

    Screenshot showing the running 'Hello World' application with a popup titled 'Hello from HelloWorld'.

  4. Для закрытия приложения нажмите кнопку Остановить отладку на панели инструментов. (Либо выберите пункт меню Отладка>Остановить отладку или нажмите клавиши SHIFT + F5.)

Следующие шаги

Поздравляем с завершением этого учебника! Мы надеемся, что вы узнали некоторые основы о пакете SDK для приложений Windows, WinUI 3 и интегрированной среде разработки Visual Studio. Для получения дополнительных сведений перейдите к следующему руководству:

Руководство. Создание простого средства просмотра фотографий с помощью WinUI 3

См. также