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

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

Заметка

Если вы удовлетворены текущими функциями универсальной платформы Windows (UWP), вам не нужно переносить тип проекта в пакет SDK для приложений Windows. WinUI 2.x и Windows SDK поддерживают типы проектов UWP. Если вы хотите приступить к работе с WinUI 3 и пакетом SDK для приложений Windows, вы можете выполнить действия, описанные в руководстве по пакету SDK для приложений Windows .

В этом руководстве вы:

• Создание проекта
• Создание приложения
• Запуск приложения

Необходимые условия

Для работы с этим руководством вам потребуется Visual Studio. Перейдите на страницу для скачивания Visual Studio, чтобы получить бесплатную версию.

Заметка

Для этого руководства требуется шаблон проекта пустого приложения (Универсальная платформа Windows). Во время установки выберите рабочую нагрузку разработки универсальной платформы Windows:

Если вы уже установили Visual Studio и хотите добавить его компоненты, в меню выберите Сервис>Получить средства и компонентыили в окне Создать проект выберите ссылку Установить дополнительные средства и компоненты.

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

Сначала создайте проект универсальной платформы Windows. Тип проекта содержит все нужные файлы шаблона еще до того, как вы что-либо добавите!

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

2. На экране Создание нового проекта введите Universal Windows в поле поиска, выберите шаблон C# для Blank App (Universal Windows), и нажмите кнопку Далее.

   

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

   

4. Примите параметры "Целевая версия" и "Минимальная версия" по умолчанию в диалоговом окне "Новый проект универсальной платформы Windows".

   

   Заметка

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

   

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

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

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

Добавьте кнопку на холст дизайна

1. В обозревателе решений дважды щелкните MainPage.xaml, чтобы открыть разделенное представление.

   

   Существует две панели: конструктор XAML, включающий рабочую область конструктора, а также редактор XAML, где можно добавить или изменить код.

   

2. Выберите Набор инструментов, чтобы открыть всплывающее окно набора инструментов.

   

   Если опция панели инструментов не отображается, её можно открыть по строке меню. Для этого выберите Просмотр>панели инструментов. Или нажмите клавиши CTRL +ALT+X.

3. Щелкните значок кнопки закрепления , чтобы закрепить окно Панели инструментов.

   

4. Выберите кнопку , элемент управления, а затем перетащите его на холст конструктора.

   

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

   

Добавление метки в кнопку

1. В редакторе XAML измените значение Button Content с кнопки Button на Hello World!

   

2. Обратите внимание: изменяется и кнопка в конструкторе XAML .

   

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

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

1. Дважды щелкните элемент управления кнопкой на дизайнерском холсте.

2. Измените код обработчика событий в MainPage.xaml.cs, страницу программной части.

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

   

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

   

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

   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();
   }
   

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

Код использует некоторые API Windows для создания объекта синтеза речи, а затем дает ему текст для слова. Дополнительные сведения об использовании SpeechSynthesisсм. в System.Speech.Synthesis.

Запуск приложения

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

1. Нажмите кнопку «Воспроизведение» (в ней есть текст «локальный компьютер») для запуска приложения на локальном компьютере.

   

   Кроме того, можно выбрать Отладка>Начать отладку в строке меню или нажать F5, чтобы запустить приложение.

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

   

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

   Ваше устройство с Windows 10 или более поздней версии буквально говорит: "Hello, World!"

4. Чтобы закрыть приложение, нажмите кнопку Остановить отладку на панели инструментов. Кроме того, выберите Отладка>Остановить отладку на панели меню или нажмите Shift+F5.

Связанное содержимое

• Обзор UWP
• Получение примеров приложений UWP

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

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

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