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

В этом учебном руководстве объясняется, как использовать XAML, C# и .NET 9 с родным AOT (Ahead-of-Time) для создания простого приложения "Hello, World!" для универсальной платформы Windows (UWP). С помощью одного проекта в Microsoft Visual Studio можно создать приложение, которое работает во всех поддерживаемых версиях Windows 10 и Windows 11.

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

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

Предпосылки

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

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

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

2. В меню файла выберите "Создать проект ", чтобы открыть диалоговое окно "Новый проект".

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

   

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

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

   Это важно

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

5. Нажмите кнопку "Далее" и введите "HelloWorld" в качестве имени проекта. Нажмите кнопку "Создать".

   

   Замечание

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

   

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

   

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

   

Хотя пустое приложение 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 обозначает ваше приложение в списке приложений меню Пуск, на панели задач и в диспетчере задач."
• Ваше приложение в Microsoft Store представляется под именем Assets/StoreLogo.png.
• Ресурсы илиSplashScreen.scale-200.png — это экран-заставка, который отображается при запуске приложения.
• Ресурсы илиLockScreenLogo.scale-200.png можно использовать для представления приложения на экране блокировки, когда система заблокирована.

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

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

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

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

   

   Замечание

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

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, чтобы открыть меню "Пуск ", а затем выберите "Все ", чтобы отобразить все приложения. Обратите внимание, что развертывание приложения локально добавляет его в список программ в меню "Пуск ". Чтобы снова запустить приложение (не в режиме отладки), его можно выбрать в меню "Пуск ".

   Это пока мало что делает — но поздравляем, вы создали и развернули свое первое приложение 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 см. в разделе пространство имен SpeechSynthesis документации по API среды выполнения Windows (WinRT).)

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

Сводка

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

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

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

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