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

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

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

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

Перед началом..

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

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

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

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

3. В списке шаблонов слева выберите Установленные > Visual C# > Универсальная платформа Windows, чтобы просмотреть список шаблонов проектов UWP.

   (Если вы не видите универсальных шаблонов, возможно, у вас отсутствуют компоненты для создания приложений UWP. Чтобы повторить процесс установки и добавить поддержку UWP, нажмите кнопку открыть установщик Visual Studio в диалоговом окне Новый проект. См. статью о получении настройки.)

   

4. Выберите шаблон пустого приложения (универсального приложения Windows) и введите "HelloWorld" в качестве имени. Нажмите ОК.

   

   Примечание.

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

   

5. Откроется диалоговое окно целевой версии или минимальной версии. Параметры по умолчанию подходят для этого руководства, поэтому нажмите кнопку ОК, чтобы создать проект.

   

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

   

Хотя пустое приложение (универсальное окно) является минимальным шаблоном, он по-прежнему содержит много файлов. Эти файлы важны для всех приложений UWP с помощью C#. Каждый проект, создаваемый в 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

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

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

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

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

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

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

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

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

   

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

   

3. Разверните общие элементы управления XAML и перетащите кнопку в середину холста конструктора.

   

   Если вы посмотрите на окно кода XAML, вы увидите, что кнопка была добавлена там тоже:

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

4. Измените текст кнопки.

   Щелкните в представлении кода XAML и измените содержимое с кнопки на "Hello, world!".

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

Обратите внимание, как кнопка, отображаемая на холсте конструктора, обновляет новый текст.

Шаг 3. Запуск приложения

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

Запуск приложения на классическом устройстве

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

• Симулятор
• Локальный компьютер
• Удаленный компьютер

Запуск отладки на локальном компьютере

1. В меню целевого устройства () на панели инструментов "Стандартный" убедитесь, что выбран локальный компьютер. (Это выбор по умолчанию.)
2. Нажмите кнопку "Начать отладку " () на панели инструментов.

–или–

В меню отладки нажмите кнопку "Начать отладку".

–или–

Нажмите клавишу F5.

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

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

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

Это не делает много , но поздравляем, вы создали свое первое приложение UWP!

Остановка отладки

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

–или–

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

–или–

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

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

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

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

2. Дважды щелкните элемент управления кнопкой на холсте конструктора, чтобы сделать Visual Studio обработчиком событий для кнопки.

Конечно, можно создать весь код вручную. Вы также можете нажать кнопку, чтобы выбрать ее, и посмотреть в области "Свойства " в правом нижнем углу. При переключении на события (небольшой молнии) можно добавить имя обработчика событий.

3. Измените код обработчика событий в файле MainPage.xaml.cs, страница с выделенным кодом. Здесь начинается самое интересное. Обработчик события по умолчанию выглядит так:

private void Button_Click(object sender, RoutedEventArgs e)
{

}

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

private async void Button_Click(object sender, RoutedEventArgs e)
{
    MediaElement 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();
}

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

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

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

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

Итоги

Поздравляем! Вы создали свое первое приложение для Windows и платформы UWP!

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

См. также

• Ваше первое приложение
• Публикация вашего приложения UWP
• Практические руководства по разработке приложений UWP
• Примеры кода для разработчиков UWP
• Что такое универсальное приложение для Windows?
• Регистрация учетной записи Windows