В цій статті
У цьому підручнику описано, як за допомогою XAML і C # створити просте додаток "Hello, world", призначене для універсальної платформи Windows (UWP) в Windows10. За допомогою єдиного проекту в Microsoft Visual Studio ви можете створити додаток, що працює на будь-якому пристрої з Windows10.
У цьому розділі ви навчитеся виконувати наступні дії.
Перед початком роботи.
Примітка
Крок 1. Створення нового проекту в Visual Studio.
У меню Файл виберіть Створити> Проект. . щоб відкрити діалогове вікно Новий проект.
У списку шаблонів зліва відкрийте Встановлені> Шаблони> Visual C #> Windows і виберіть Універсальні. щоб побачити список шаблонів проектів UWP.
(Якщо універсальні шаблони не відображаються, можливо, у вас немає компонентів для створення додатків UWP. Ви можете повторити процес установки і додати підтримку UWP. Для цього натисніть Відкрити установник Visual Studio в діалоговому вікні Новий проект. Див. Розділ Підготовка
Виберіть шаблон Пусте додаток (універсальні додатки для Windows) і вкажіть "HelloWorld" в якості Імені. Натисніть кнопку ОК.
Примітка
Якщо ви користуєтеся Visual Studio вперше, може відкритися діалогове вікно із запитом включити Режим розробника. Режим разработчіка- це спеціальний параметр, що включає певні функції, наприклад дозвіл на безпосередній запуск додатків, а не тільки через Магазин. Детальніше див. У розділі Підготовка пристрою до розробки. Щоб продовжити роботу з цим керівництвом, виберіть Режим розробника. натисніть Та й закрийте діалогове вікно.
З'явиться діалогове вікно з полями цільової / мінімальної версії Windows. Параметри за замовчуванням для цього підручника задані правильно, тому натисніть кнопку ОК. щоб створити проект.
Незважаючи на те, що шаблон Пусте додаток (універсальні додатки для Windows) надає мінімальні можливості, він містить кілька файлів. Ці файли необхідні для всіх додатків UWP на C #. Вони є у всіх проектах, які створюються в Visual Studio.
Що містять файли?
Примітка
Що таке XAML? Розширювана мова розмітки для додатків (Extensible Application Markup Language, XAML) - це мова, яка використовується для визначення призначеного для користувача інтерфейсу додатка. Код на ньому можна писати вручну або створювати за допомогою засобів розробки Visual Studio. У XAML-файлі є файл коду програмної частини .xaml.cs, що містить логіку програми. Спільно 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 визначається призначений для користувача інтерфейс програми. Додавати елементи можна безпосередньо за допомогою розмітки XAML або за допомогою інструментів конструктора, що надаються Visual Studio.
- MainPage.xaml.cs- це сторінка з кодом програмної частини для MainPage.xaml. Тут ви додаєте логіку програми та обробники подій.
- Разом ці два файли формують новий клас, званий MainPage. успадковує від Page в просторі імен HelloWorld.
- Файл маніфесту, в якому описується ваше додаток: його ім'я, опис, плитка, початкова сторінка і т. Д.
- Зберігає список файлів, що містяться в додатку.
Набір зображень логотипів
- Файл Assets / Square150x150Logo.scale-200.png відповідає за відображення вашого застосування в меню "Пуск".
- Файл Assets / StoreLogo.png представляє ваш додаток в Магазині Windows.
- Файл Assets / SplashScreen.scale-200.png- це екран-заставка, що відображається при запуску вашого застосування.
Крок 2. Додавання кнопки
Використання уявлення конструктора
Додамо кнопку на нашу сторінку. У цьому підручнику ви будете працювати лише з декількома з перерахованих раніше файлів: App.xaml, MainPage.xaml і MainPage.xaml.cs.
Двічі клацніть файл MainPage.xaml. щоб відкрити його в поданні конструктора.
У верхній частині екрану буде відображатися графічне представлення, а під ним подання коду XAML. Зміни можна внести в будь-яке представлення, але зараз ми будемо використовувати графічне представлення.
Виберіть вертикальну вкладку Панель елементів зліва, щоб відкрити список елементів управління користувальницького інтерфейсу (щоб ця вкладка відображалася постійно, можна клацнути значок закріплення в рядку заголовка вкладки).
Розгорніть групу Типові елементи управління XAML і перетягніть Кнопку в центр полотна проектування.
Якщо ви подивіться на вікно коду XAML, то побачите, що "Кнопка (Button)" була додана і туди.
Змініть текст кнопки.
Встановіть курсор в поданні коду XAML і задайте властивості "Вміст (Content)" значення "Hello, world!" замість значення "Кнопка (Button)".
Зверніть увагу, що текст кнопки на полотні проектування оновиться.
Крок 3. Запуск програми
Запуск програми на настільному ПК
За замовчуванням під час запуску програми на локальному комп'ютері. Меню цільового пристрою надає ряд можливостей для налагодження програми на пристроях з настільного ПК.
Запуск налагодження на локальному комп'ютері
- Переконайтеся, що в меню цільового пристрою () на панелі інструментів Стандартна обраний параметр Локальний комп'ютер. (Цей параметр за замовчуванням.)
Натисніть кнопку Почати налагодження () на панелі інструментів.
В меню Налагодження виберіть команду Почати налагодження.
Натисніть клавішу F5.
Додаток відкриється в новому вікні і спочатку відобразиться екран-заставка за замовчуванням. Екран-заставка визначається зображенням (SplashScreen.png) і кольором фону (зазначеним в маніфесті додатка).
Після зникнення екрану-заставки з'явиться ваше додаток. Воно виглядає наступним чином.
Натисніть кнопку Windows, щоб відкрити меню Пуск. і виберіть пункт «Усі програми». Зверніть увагу, що при локальному розгортанні додатки його плитка додається в меню Пуск. Щоб знову запустити програму (не в режимі налагодження) натисніть або натисніть відповідну плитку в меню Пуск.
Ваша програма поки що вміє трохи, але все одно поздравляем- ви створили свою першу додаток UWP!
Натисніть кнопку Зупинити налагодження () на панелі інструментів.
В меню Налагодження виберіть команду Зупинити налагодження.
Закрийте вікно програми.
Крок 3. Обробники подій
Термін "обробник подій" звучить незрозуміло, проте це просто ще одне ім'я коду, який викликається при виникненні події (наприклад, коли користувач натискає кнопку).
Зупиніть додаток, якщо ви ще не зробили цього.
Двічі клацніть елемент керування "Кнопка (Button)" на полотні проектування, щоб середовище Visual Studio створила обробник подій для вашої кнопки.
Також ви можете створити код вручну. Або можна натиснути кнопку, щоб вибрати її, і подивитися відомості у вікні Властивості в нижньому правому куті. Перейшовши на панель Події (із зображенням блискавки), ви зможете задати ім'я для обробника подій.
Змініть код обробника подій в файлі MainPage.xaml.cs на сторінці з кодом програмної частини. Це найцікавіший етап. Код обробника подій за замовчуванням виглядає наступним чином.
Давайте змінимо його, щоб він виглядав наступним чином.
Обов'язково додайте ключове слово async. Якщо цього не зробити, додаток видасть помилку при спробі його запуску.
Що нам вдалося зробити?
У цьому коді використовуються деякі API-інтерфейси Windows для створення об'єкта синтезу мови, якому передається певний текст для його озвучування. Додаткові відомості щодо використання об'єкта SpeechSynthesis см. В документації поПространству імен SpeechSynthesis.
Вітаємо! Ви створили свою першу додаток для Windows10 і платформи UWP!
Щоб дізнатися, як використовувати XAML для розміщення елементів управління, які будуть використовуватися у вашому додатку, вивчіть підручник по сітці або відразу перейдіть до наступного кроку.