Создайте "Hello, World!" Приложение UWP (XAML)

В этом руководстве описано, как использовать XAML и C# с Native AOT (заранее) для создания простого приложения "Hello, World!" для Universal Windows Platform (UWP) на Windows. С помощью одного проекта в Майкрософт Visual Studio можно создать приложение, которое выполняется во всех поддерживаемых версиях Windows 10 и Windows 11.

Здесь вы узнаете, как:

• Создайте проект UWP в Visual Studio.
• Напишите XAML, чтобы изменить пользовательский интерфейс на начальной странице.
• Запустите проект на локальном рабочем столе в Visual Studio.
• Используйте SpeechSynthesizer, чтобы приложение заговорило при нажатии кнопки.

Предпосылки

• Что такое универсальное приложение Windows?
• Скачать Visual Studio (и Windows). Если вам нужна помощь, узнайте, как подготовиться.
• Мы также предполагаем, что вы используете макет окна по умолчанию в Visual Studio. Если изменить макет по умолчанию, его можно сбросить в меню "Окно" с помощью команды "Сбросить макет окна".

Шаг 1. Создание проекта в Visual Studio

1. Запустите Visual Studio.

2. В меню File выберите New > Project, чтобы открыть диалоговое окно New Project.

3. Отфильтруйте список доступных шаблонов, выбрав C# из раскрывающегося списка Languages и UWP из раскрывающегося списка Project типов, чтобы просмотреть список доступных шаблонов UWP project для разработчиков C#.

   

   (Если вы не видите шаблонов UWP, возможно, отсутствуют компоненты для создания приложений UWP. Вы можете повторить процесс установки и добавить поддержку UWP, открыв Visual Studio Installer из меню "Пуск" Windows. Дополнительные сведения см. в статье Set up Visual Studio for UWP development.)

4. Выберите шаблон пустого приложения UWP .

   Это важно

   Шаблон UWP Пустое приложение является стандартным и предназначен для последней версии .NET с Native AOT. Если отображается шаблон UWP Blank App (.NET Native), то это устаревший шаблон, предназначенный для более старой среды выполнения .NET Native. Приложения, использующие современный шаблон .NET, имеют доступ к новейшим функциям .NET и C#, улучшенным производительности и улучшению инструментов. Дополнительные сведения о различиях см. в разделе Модернизация вашего приложения UWP с использованием .NET и Native AOT.

5. Выберите Next и введите HelloWorld в качестве имени Project. Нажмите кнопку "Создать".

   

   Замечание

   Если вы впервые использовали Visual Studio, может появиться диалоговое окно "Параметры" с просьбой включить режим Developer mode. Режим разработчика — это специальный параметр, позволяющий использовать определенные функции, такие как разрешение на запуск приложений напрямую, а не только из Магазина. Дополнительные сведения см. в статье "Включение устройства для разработки". Чтобы продолжить работу с этим руководством, выберите режим разработчика, нажмите кнопку "Да" и закройте диалоговое окно.

   

6. Откроется диалоговое окно "Целевая версия" или "Минимальная версия". Параметры по умолчанию предназначены для этого руководства, поэтому нажмите кнопку "ОК ", чтобы создать проект.

   

7. Когда откроется новый проект, его файлы отображаются в области Обозреватель решений справа. Вам может потребоваться выбрать вкладку Обозреватель решений вместо вкладки Properties или GitHub Copilot Chat, чтобы просмотреть файлы.

   Снимок экрана панели Visual Studio Обозреватель решений, на которой выделен проект HelloWorld и раскрыты все папки.

Хотя пустое приложение UWP является минимальным шаблоном, он по-прежнему содержит много файлов. Эти файлы важны для всех приложений UWP с помощью C#. Каждый проект UWP, создаваемый в Visual Studio, содержит их.

Что содержится в файлах?

Чтобы просмотреть и изменить файл в проекте, дважды щелкните файл в Обозреватель решений. Разверните XAML-файл так же, как папку, чтобы увидеть связанный файл кода. XAML-файлы открываются в разделенном представлении, где отображаются область конструктора и редактор XAML.

App.xaml и App.xaml.cs

• App.xaml — это файл, в котором вы объявляете ресурсы, используемые в приложении.
• App.xaml.cs — это файл кода для App.xaml. Как и все страницы программной части, он содержит конструктор, который вызывает метод InitializeComponent. Вы не пишете метод InitializeComponent. Он создается Visual Studio, и его основной целью является инициализация элементов, объявленных в XAML-файле.
• App.xaml.cs — это точка входа для приложения.
• App.xaml.cs также содержит методы для обработки активации и приостановки приложения.

MainPage.xaml

• MainPage.xaml — это место, в котором определяется пользовательский интерфейс приложения. Вы можете добавлять элементы непосредственно с помощью разметки XAML или использовать средства разработки, предоставляемые Visual Studio.
• MainPage.xaml.cs — это страница программной части для MainPage.xaml. Здесь вы добавляете логику приложения и обработчики событий.
• Вместе эти два файла определяют новый класс с именем MainPage, который наследует от Page в пространстве имен HelloWorld.

Package.appxmanifest

• Файл манифеста, описывающий приложение: его имя, описание, плитку, начальную страницу и т. д.
• Содержит список зависимостей, ресурсов и файлов, содержащихся в приложении.

Набор изображений логотипов

• Ресурсы/Square150x150Logo.scale-200.png и Wide310x150Logo.scale-200.png представляют приложение (средний или широкий размер) в меню "Пуск".
• "Assets/Square44x44Logo.png обозначает ваше приложение в списке приложений меню Пуск, на панели задач и в диспетчере задач."
• Assets/StoreLogo.png представляет ваше приложение в Microsoft Store.
• Ресурсы илиSplashScreen.scale-200.png — это экран-заставка, который отображается при запуске приложения.
• Ресурсы илиLockScreenLogo.scale-200.png можно использовать для представления приложения на экране блокировки, когда система заблокирована.

Шаг 2. Добавление кнопки

Использование представления конструктора

Давайте добавим кнопку на нашу страницу. В этом руководстве вы работаете с несколькими файлами, перечисленными ранее: App.xaml, MainPage.xaml и MainPage.xaml.cs.

1. Дважды щелкните Файл MainPage.xaml , чтобы открыть его в редакторе XAML.

   

   Замечание

   Вы не увидите конструкторский вид при работе с шаблоном UWP Blank App, который использует современные технологии .NET. Если вы хотите работать с проектом UWP с представлением конструктора XAML, вместо этого можно использовать шаблон UWP Пустое приложение (.NET native). Как упоминалось ранее, шаблон UWP Blank App (.NET Native) отличается от шаблона UWP Blank App, но имеет ту же базовую структуру. Основное различие заключается в том, что шаблон UWP Пустое приложение (.NET native) использует .NET Native для компиляции приложения. Дополнительные сведения о преимуществах использования современного шаблона .NET см. в руководстве Модернизируйте ваше UWP приложение с помощью .NET и Native AOT.

2. Добавьте следующий код XAML в <Grid> элемент в MainPage.xaml. Его можно ввести или скопировать и вставить здесь:

   <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
   

3. На этом этапе вы создали очень простое приложение. Это хорошее время для сборки, развертывания и запуска приложения и просмотра того, как это выглядит. Приложение можно отлаживать на локальном компьютере, в симуляторе или эмуляторе или на удаленном устройстве. Ниже приведено меню целевого устройства в Visual Studio:

   

   По умолчанию приложение выполняется на локальном компьютере. Меню устройства назначения предоставляет несколько вариантов отладки приложения на устройствах из семейства настольных устройств.

   • HelloWorld (он запускается на локальном компьютере)
   • WSL
   • Скачивание новых эмуляторов...

4. Запустите приложение, чтобы увидеть кнопку в действии. Чтобы начать отладку на локальном компьютере, можно запустить приложение, выбрав отладку | Запустите элемент отладки в меню, нажав кнопку запуска отладки на панели инструментов (с меткой HelloWorld ) или нажав клавишу F5.

   Приложение открывается в окне, и сначала появится экран-заставка по умолчанию. Экран-заставка определяется изображением (SplashScreen.png) и цветом фона (указанным в файле манифеста приложения).

   Экран-заставка исчезает, а затем появится приложение. Выглядит следующим образом:

   

5. Нажмите клавишу Windows, чтобы открыть меню Start, а затем выберите All, чтобы отобразить все приложения. Обратите внимание, что развертывание приложения локально добавляет его в список программ в меню "Пуск ". Чтобы снова запустить приложение (не в режиме отладки), его можно выбрать в меню "Пуск ".

   Это пока мало что делает — но поздравляем, вы создали и развернули свое первое приложение UWP на локальном компьютере!

6. Чтобы остановить отладку, выполните следующие действия.

   Нажмите кнопку "Остановить отладку " (") на панели инструментов.

   –или–

   В меню отладки нажмите кнопку "Остановить отладку".

   –или–

   Закройте окно приложения.

7. Измените текст кнопки, изменив значение Content с Button на Hello, world!.

   <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
   

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

Шаг 3. Обработчики событий

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

1. Остановите работу приложения, если вы еще не сделали этого.

2. Начните вводить Click в редакторе XAML, а Visual Studio отобразит список возможных событий. Выберите пункт "Щелкните " из списка.

   

3. Затем выберите <New Event Handler> из списка. При этом создается новый метод обработчика событий в файле программной части (MainPage.xaml.cs) и добавляется событие Click к элементу кнопки в коде XAML.

   

   Редактор XAML автоматически добавляет Click событие в элемент кнопки в коде XAML:

   <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>
   

   Это также добавляет обработчик событий в файл программной части (MainPage.xaml.cs). Обработчик событий — это метод, который будет вызываться при нажатии кнопки. Имя метода - button_Click, и у него есть два параметра: object sender и RoutedEventArgs e.

   private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
   {
   
   }
   

   Событие Click — это стандартное событие для кнопок. Когда пользователь нажимает кнопку, вызывается метод button_Click.

4. Измените код обработчика событий в MainPage.xaml.cs страницы программной части. Вот где все интересно. Давайте изменим его, так что выглядит следующим образом:

   private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
   {
       var mediaElement = new MediaElement();
       var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
       Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
       mediaElement.SetSource(stream, stream.ContentType);
       mediaElement.Play();
   }
   

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

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

Этот код использует некоторые api Windows для создания объекта синтеза речи, а затем дает ему текст для слова. (Дополнительные сведения об использовании SpeechSynthesis см. в документации по API SpeechSynthesis namespace в документации по API среда выполнения Windows (WinRT).)

Когда вы запускаете приложение и нажимаете кнопку, компьютер (или телефон) буквально будет говорить "Hello, World!".

Сводка

Поздравляем, вы создали свое первое приложение UWP для Windows с использованием современного .NET!

Чтобы узнать, как использовать XAML для размещения элементов управления, которые будет использоваться приложением, попробуйте выполнить инструкции по сетке или перейти непосредственно к следующим шагам?

Связанный контент

• Публикация приложения UWP.
• Практическое руководство по разработке приложений UWP
• Примеры кода для разработчиков UWP