как создать uwp приложение для windows 10

Начало разработки

Добро пожаловать на платформу UWP. На этой странице мы приведем необходимую информацию для начала разработки любых приложений для Windows 10, которые вам захочется создать.

Перед началом разработки не забудьте выполнить подготовку.

Обучающие курсы

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

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

Начинающим разработчикам

Если вы начинаете разрабатывать ПО, корпорация Майкрософт предлагает множество ресурсов для изучения основ программирования и инструментов, необходимых для разработки для Windows 10.

Если вам требуется более подробное пошаговое руководство по основным принципам программирования, языку C#, Visual Studio или возможностям универсальной платформы Windows, ознакомьтесь со следующими ресурсами.

Документация:

Руководства:

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

Если вы уже изучили наши обучающие курсы или вас интересует то, что они не охватывают, займитесь самостоятельным изучением нашей документации. Вот краткий обзор того, что можно найти в каждой области.

Другие документы

Некоторые специализированные платформы в Windows 10, например, для веб-разработки и смешанной реальности, располагают собственными наборами документов. Если вы заинтересованы в разработке приложения с этими функциями, ознакомьтесь с их документацией:

Источник

Как мы делали приложение под Windows 10 с Fluent Design (UWP/C#)

Мы в ivi давно собирались обновить наше приложение под Windows 10 (которое для ПК и планшетов). Мы хотели сделать его эдаким «уютным» уголком для отдыха. И поэтому анонсированная недавно Microsoft-ом концепция fluent design пришлась нам очень кстати.

Но я не буду здесь рассказывать про стандартные компоненты, предлагаем Microsoft-ом для fluent design-а (Acrylic, Reveal, Connected-анимации и др.), хотя мы их, конечно, используем тоже. С ними всё просто и понятно — бери документацию и пользуйся.

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

Идея в том, что мы используем depth и motion из fluent design system. Центральный элемент как бы слегка приподнимается надо всеми остальными. Это достигается за счёт анимации его размера и тени во время скролла.

Контрол FlipView сразу не подошёл, т.к. он не умеет показывать кусочки следующего и предыдущего элементов (мы их называем «ушами»). И мы начали поиски решения.

Путь 1. Пробуем использовать GridView

Логичным решением было попробовать использовать GridView. Чтобы выстроить элементы в горизонтальную строку задаём в качестве ItemsPanel задаём:

Чтобы центрировать текущий элемент используем свойства ScrollViewer-а в шаблоне GridView:

Пример такой реализации можно посмотреть, например, здесь.

Вроде всё ок, но есть проблемы.

GridView. Проблема 1. масштабирование контрола на всю ширину экрана

По задумке дизайнеров наш контрол должен тянуться на всю ширину окна. Само по себе это не проблема. Но при изменении размера контрола должны синхронно изменяться и размеры всех его дочерних элементов (Items):

Из коробки GridView такого не умеет. Решение мы подсмотрели в реализации контрола AdaptiveGridView из UWPToolkit:

Более подробно реализацию можно посмотреть в исходниках UWPToolkit.

Вроде всё ок, работает. Но…

GridView. Проблема 2. При изменении размера item-ов текущий элемент уходит из области видимости

Особенно сильно эффект заметен при максимизации окна (из-за резкого изменения размеров). И ещё при просто больших значениях HorizontalOffset.

Казалось бы можно было бы это проблему решить попросив GridView проскроллиться к нужному элементу:

Но это работает только при постепенном изменении размера окна. При максимизации окна это часто даёт неправильный результат. Скорее всего, причина в том, что новое рассчитанное нами значение HorizontalOffset оказывается слишком большим и выходит за границы ExtentWidth (ширины контента внутри ScrollViewer-а). А т.к. GridView использует UI-виртуализацию, то автоматически после изменения ширины Item-ов ExtentWidth может не пересчитываться.

В общем, адекватного решения этой проблемы найти не удалось.

На этом можно было бы остановиться и начать поиск следующего варианта решения. Но я опишу ещё одну проблему с этим подходом.

GridView. Проблема 3. Вложенные ScrollViewer-ы ломают горизонтальный скроллинг мышкой

Мы хотим, чтобы колёсико мышки всегда выполняло скроллинг по вертикали. Всегда. По вертикали.

Но если мы ставим на страницу GridView с горизонтальной прокруткой, то находящийся в его недрах ScrollViewer захватывает события колёсика мышки на себя и не пропускает выше. В итоге, если курсор мышки находится над нашим контролом-листалкой, то колёсико мышки делает горизонтальный скролл в нём. Это неудобно и запутывает пользователей:

Решений у этой проблемы два:

Touch screen терять не хотелось и мы продолжили поиск более хорошего решения.

Путь 2. Carousel из UWPToolkit

Следующим вариантом решения стал контрол Carousel из UWPToolkit. Со всех сторон очень интересный и познавательный контрол. Рекомендую всем для изучения его реализацию.

Он довольно неплохо закрывал наши потребности. Но в итоге тоже не подошёл:

В общем, от этого подхода мы тоже решили отказаться. Если уж тратить время, то будем делать по уму.

Путь 3. Наша реализация

Делаем «TOUCH ONLY» ScrollViewer

Напомню, что стандартный ScrollViewer мы использовать не хотим, из-за того, что он захватывает все события от колёсика мышки (см. выше раздел «GridView. Проблема 3»).

Реализацию из Carousel нам не нравится, т.к. использует анимации на UI-потоке, а предпочтительный для UWP-приложений способ создания анимаций — это Composition-анимации. Их отличие от более привычных Storyboard-ов в том, что они работают на отдельном Composition-потоке и за счёт этого обеспечивают 60 кадров/сек даже тогда, когда UI поток чем-то занят.

Для реализации нашей задачи нам понадобится InteractionTracker — компонент, который позволяет использовать touch-ввод в качестве источника для анимаций. Собственно, первое, что нам нужно научиться делать — это перемещать UI-элементы по горизонтали в зависимости от перемещения пальца по экрану. Фактически, нам придётся начать с реализации своего кастомного ScrollViewer-а. Так и назовём его — TouchOnlyScrollViewer:

Здесь пока всё строго по доке от Mircosoft. Разве что вызов TryRedirectForManipulation пришлось обернуть в try-catch потому что он иногда кидает внезапные исключения. Это случается довольно редко (навскидку, примерно в 2-5% случаев) и выяснить причину нам не удалось. Почему об этом ничего не сказано в документации и официальных примерах Microsoft — мы не знаем 😉

TOUCH ONLY ScrollViewer. Формируем HorizontalOffset и события ViewChanging и ViewChanged

Раз мы делаем подобие ScrollViewer-а, то нам понадобится свойство HorizontalOffset и события ViewChanging и ViewChanged. Их будем реализовывать через обработку callback-ов InteractionTracker-а. Для их получения при создании InteractionTracker-а надо указать объект, реализующих IInteractionTrackerOwner, который эти callback-и и будет получать:

Для полноты картины позволю себе скопировать картинку из документации с состояниями и событиями InteractionTracker-а:

Событие ViewChanged будем бросать по входу в состояние Idle.

Событие ViewChanging будем бросать по срабатыванию IInteractionTrackerOwner.ValuesChanged.
Сразу скажу, что ValuesChanged может случаться, когда InteractionTracker находится и в состоянии Idle. Это случается после вызова TryUpdatePosition у InteractionTracker-а. И выглядит как баг в платформе UWP.

Ну что ж, с этим придётся мириться. Благо, нам не сложно — в ответ на ValuesChanged будем выбрасывать либо ViewChanging, либо ValuesChanged, в зависимости от текущего состояния:

TOUCH ONLY ScrollViewer. Snap Points, чтобы пролистывалось ровно на 1 элемент

Для обеспечения пролистывания ровно на 1 элемент есть замечательное решение — «snap points with inertia modifiers».

Смысл в том, что мы задаём точки, в которых скроллинг имеет право остановиться после выполнения свайпа на touch экране. А всю остальную логику берёт на себя InteractionTracker. По сути он модифицирует скорость замедления так, чтобы остановка после свайпа произошла плавно и при этом ровно в том месте, где нам надо.

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

Поэтому мы добавляем только три snap-point-а — «на один шаг влево», «на один шаг вправо» и «остаться в текущей позиции». И после каждого пролистывания будем их обновлять.

А чтобы не пересоздавать snap point-ы каждый раз после прокрутки, мы сделаем их параметризуемыми. Для этого заводим PropertySet с тремя свойствами:

И в формулах для Condition и RestingValue используем свойства из этого PropertySet:

Поэтому в формулах для Contition мы используем коэффициенты 0.25 и 0.75, чтобы даже «медленный» свайп производил прокрутку к соседнему элементу.

Ну и после каждой прокрутки к соседнему элементу будем вызывать вот такой метод для обновления параметров snap point-ов:

Панель с UI-виртуализацией

Следующим шагом нам нужно было построить на основе нашего TouchOnlyScrollerViewer-а полноценный ItemsControl.

Для справки. UI-виртуализация — это когда контрол-список вместо, скажем, 1000 дочерних элементов создаёт только те, что видны на экране. И переиспользует их по мере скроллинга, привязывая к новым дата-объектам. Это позволяет сократить время загрузки страницы при большом количестве элементов в списке.

Т.к. всё-таки очень не хотелось реализовывать свою UI-виртуализацию, то первое, что мы, конечно, попытались сделать — это использовать стандартную панель ItemsStackPanel.

Хотелось подружить её с нашим TouchOnlyScrollerViewer-ом. К сожалению, не удалось найти ни документации об её внутреннем устройстве, ни исходного кода. Но ряд экспериментов позволил предположить, что ItemsStackPanel ищет ScrollViewer в Visual Tree в списке родительских элементов. И способа это как-то переопределить, чтобы вместо стандартного ScrollViewer-а оно искало наш, мы не нашли.

Ну что ж. Значит панель с UI-виртуализацией придётся всё-таки делать самостоятельно. Лучшее, что удалось найти на эту тему — это вот этот цикл статей аж 11-летней давности: раз, два, три, четыре. Он, правда, про WPF, а не про UWP, но идею передаёт очень неплохо. Ей мы и воспользовались.

Собственно, идея проста:

Ищем события Tapped, потерявшиеся после перенаправления touch-ввода в composition-поток

После того, как мы это собрали вместе вскрылась ещё одна интересная проблема. Иногда пользователь тапает по элементам внутри нашего контрола в процессе того, пока touch ввод перенаправлен в InteractionTracker. Это случается, когда происходит скроллинг по инерции. В этом случае события PointerPressed, PointerReleased и Tapped просто не случаются. И это не надуманная проблема, т.к. инерция у InteractionTracker-а довольно долгая. И даже, когда визуально скроллинг почти закончился, по факту может происходит медленное доскролливание последних нескольких пикселей.

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

Поэтому будем идентифицировать тап по паре событий от InteractionTracker-а:

Это работает. Но, правда, не позволяет узнать элемент, по которому был осуществлён тап. В нашем случае это не критично, т.к. наши элементы занимают почти всю видимую ширину TouchOnlyScrollViewer-а. Поэтому мы просто выбираем тот, что находится ближе к центру. В большинстве случаев — это именно то, что нужно. Пока никто даже не заметил, что иногда тап во время скроллинга может привести не туда. Это не так просто поймать, даже если знаешь про это 😉

Хотя в общем случае, это конечно ещё не полноценное решение. Для полноценной реализации пришлось бы городить ещё и свой hit testing. Но и его непонятно как сделать, т.к. координаты тапа неизвестны…

Бонус. Expression-анимации для opacity, scale и теней. Чтобы стало, наконец, красиво

И, наконец, вишенка на торте — то, ради чего всё это и затевалось. По мере скроллинга мы хотим изменять размер, тень и прозрачность элементов. Чтобы создать ощущение, что тот, который в центре — слегка приподнят.

Для этого мы воспользуемся Expression-анимациями. Они тоже являются частью подсистемы Composition, работают на отдельном потоке и поэтому не подтормаживают при занятости UI-потока.

Создаются они так. Для свойства, которое должно анимироваться мы задаём формулу (expression), которая определяет зависимость этого свойства от каких-либо других свойств. Формула задаётся в виде текстовой строки.

Ещё их прелесть в том, что их можно выстраивать в цепочки. Этим мы и воспользуемся:

Источником для всех анимаций будет смещение из InteractionTracker-а в пикселях. На основе него мы для каждого дочернего UI-элемента сгенерируем свойство progress, которое будет принимать значения в диапазоне от 0 до 1. И уже на основе progress-а будем вычислять все остальные визуальные свойства.

Итак, формируем _progressExpression таким образом, чтобы оно принимало значения:

И создаём PropertySet со свойством progress, которое будет вычисляться посредством нашего _progressExpression. Это нужно, чтобы на основе этого свойства строить следующие анимации:

Теперь на основе нашего свойства progress создаём уже настоящие «визуальные» анимации с использованием линейной интерполяции (системные функции Lerp и ColorLerp). Полный список функций, которые можно использовать в Expression-анимациях можно найти здесь.

Ну и для остальных свойств формулы аналогичны.

Эпилог

На этом всё. Справедливости ради, надо сказать, что этот контрол оказался, пожалуй, чуть ли ни самым сложным с точки зрения реализации. Остальной fluent design дался намного проще 🙂

→ Посмотреть, как это всё работает можно, установив приложение.

Источник

Приступая к работе с приложениями для Windows 10

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

Сведения о приложениях для Windows 10.

Windows 10 и универсальная платформа Windows позволяют создавать приложения, которые прекрасно работают и выглядят на всех типах устройств с Windows, или обновлять существующие приложения с помощью современных функций.

Подготовка

Visual Studio Community и пакет SDK для Windows 10 содержат все необходимые инструменты для разработки превосходных приложений, причем это абсолютно бесплатно!

Начало разработки

Независимо от того, являетесь ли вы опытным разработчиком или просто создаете свое первое приложение, вы можете получить помощь по платформе Windows 10 и доступ к учебной документации.

Учебники

Вам нужно пройти пошаговое обучение с практическими примерами? Эти руководства помогут вам.

Примеры

Научитесь на личном опыте работать с платформой Windows 10 и оцените возможности интерфейсов API в действии.

Новые возможности

Расширьте свои возможности и изучите последние изменения в Windows 10.

Источник

Создание приложения Hello, World! в C++/CX

В этом руководстве используется язык C++/CX. Корпорация Майкрософт выпустила C++/WinRT. Это полностью соответствующая стандартам современная проекция языка C++17 для интерфейсов API среды выполнения Windows (WinRT). Дополнительные сведения об этом языке см. в разделе C++/WinRT.

В Microsoft Visual Studio вы можете использовать C++/CX для разработки приложения для Windows 10 с пользовательским интерфейсом, определенным на языке XAML.

В этом руководстве используется Visual Studio Community 2019. Если вы используете другую версию Visual Studio, она может выглядеть иначе.

Прежде чем начать

Сравнение классических приложений на C++ с приложениями для Windows

Если у вас есть опыт создания классических приложений для Windows на C++, то некоторые аспекты создания приложений для UWP вам, вероятно, покажутся хорошо знакомыми, а другие потребуют изучения.

Сходство с традиционным программированием на C++

Вы можете использовать STL, CRT (за некоторыми исключениями) и любую другую библиотеку C++, если код вызывает только функции Windows, которые доступны из среды выполнения Windows.

Если вы привыкли работать с визуальными конструкторами, можно использовать конструктор, встроенный в Microsoft Visual Studio, или использовать полнофункциональное приложение Blend для Visual Studio. Если вы обычно пишете код для пользовательского интерфейса вручную, вы точно так же можете писать код XAML.

Создаваемые приложения могут использовать типы операционной системы Windows и ваши собственные настраиваемые типы.

Вы по-прежнему можете использовать отладчик, профилировщик и другие инструменты разработки Visual Studio.

Для компиляции созданных вами приложений в машинный код так же используется компилятор Visual C++. Выполнение приложений UWP на C++/CX не поддерживается в управляемой среде выполнения.

Новые возможности

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

Для определения всего пользовательского интерфейса используется XAML. Разделение между пользовательским интерфейсом и основной логикой в универсальном приложении для Windows намного более очевидно, чем в приложениях MFC или Win32. В то время как вы работаете над поведением приложения в файле кода, другие специалисты могут работать над внешним видом пользовательского интерфейса в файле XAML.

Программирование выполняется главным образом с помощью нового объектно-ориентированного API среды выполнения Windows с улучшенной навигацией, хотя на устройствах Windows для ряда функций можно по-прежнему использовать Win32.

С помощью C++/CX можно использовать и создавать объекты среды выполнения Windows. C++/CX разрешает обработку исключений C++, делегаты, события и автоматический подсчет ссылок для динамически создаваемых объектов. При использовании C++/CX особенности базовой архитектуры COM и Windows скрыты от кода приложения. Подробнее: Справочник по языку C++/CX.

Приложение компилируется в пакет, также включающий метаданные о типах, которые содержатся в приложении, используемых ресурсах и требуемых возможностях (доступ к файловой системе, Интернету, камере и т. д.).

В Microsoft Store и Windows Phone Store приложение проходит сертификацию для подтверждения его надежности, после чего оно становится доступным для миллионов потенциальных клиентов.

Приложение Hello World на C++/CX для Store

Наше первое приложение Hello World демонстрирует некоторые основные возможности взаимодействия, стилей и макета. Мы создадим приложение, используя шаблон проекта универсального приложения для Windows. Если вы разрабатывали приложения для Windows 8.1 и Windows Phone 8.1 ранее, возможно, вы помните, что вам нужны были три проекта в Visual Studio: один для приложения для Windows, один для приложения для телефона и еще один с общим кодом. Благодаря универсальной платформе Windows (UWP) в Windows 10 можно создать всего один проект, который работает на всех устройствах, в том числе на настольных компьютерах и ноутбуках под управлением Windows 10, таких устройствах, как планшеты, мобильные телефоны, устройства виртуальной реальности и т. д.

Создание проекта универсального приложения для Windows в Visual Studio.

Общее представление о проектах и создаваемых файлах.

Общее представление о расширениях в расширениях компонентов Visual C++ (C++/CX) и способах их использования

Сначала создайте решение в Visual Studio

В Visual Studio в строке меню последовательно выберите Файл > Создать > Проект.

Нажмите кнопку Далее и введите имя для проекта. Он будет называться HelloWorld.

Нажмите кнопку Создать.

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

Файлы вашего проекта созданы.

Перед тем как продолжить работу, давайте изучим файлы решения.

Информация о файлах проекта

Давайте сначала посмотрим на файлы проекта.

Начало работы с программным кодом

Если вы изучите код в файлах App.xaml.h, App.xaml.cpp в общем проекте, то заметите, что в основном понимаете код C++. Тем не менее есть и некоторые незнакомые элементы синтаксиса, если вы ранее не сталкивались с приложениями для среды выполнения Windows, или если вы работали с C++/CLI. Вот общие нестандартные элементы синтаксиса, которые вы можете увидеть в C++/CX:

Ссылочные классы

Почти все классы среды выполнения Windows, которые включают в себя все типы в API Windows (элементы управления XAML, страницы в вашем приложении, сам класс App, все объекты устройств и сетевые объекты, все типы контейнеров), объявляются как ref class. (Несколько типов в Windows: класс значения или структура значения). Класс ref может использоваться из любого языка. В C++/CX время существования этих типов регулируется с помощью автоматического подсчета ссылок (а не сборки мусора), чтобы не приходилось явно удалять эти объекты. Вы также можете создавать свои собственные классы «ref».

Все типы среды выполнения Windows должны объявляться в пространстве имен и, в отличие от самих типов в C++ стандарта ISO, иметь модификатор доступа. Модификатор public делает класс видимым для компонентов среды выполнения Windows, которые находятся вне пространства имен. Ключевое слово sealed означает, что класс не может быть базовым классом. Почти все классы ref запечатаны. Наследование классов широко не используется, потому что JavaScript его не понимает.

ref new и ^ (крышка)

Переменная класса ref объявляется с помощью оператора «^» («крышка»), и создается экземпляр объекта с помощью ключевого слова «ref new». После этого вы получаете доступ к методам экземпляров объекта, используя оператор «->» почти так же, как указатель C++. Доступ к статическим методам можно получить с помощью оператора «::», как в C++ стандарта ISO.

В следующем коде мы используем полное имя, чтобы создать экземпляр объекта, и оператор «->», чтобы вызвать метод экземпляров.

Свойства

Класс «ref» может иметь свойства, которые, как и в управляемых языках, являются специальными функциями-членами. Они отображаются в виде полей в потребляющем коде.

Делегаты

Как и в управляемых языках, делегат — это ссылочный тип, который инкапсулирует функцию с помощью специальной подписи. Делегаты часто используются с событиями и обработчиками событий.

Добавление содержимого в приложение

Давайте добавим содержимое в приложение.

Шаг 1. Изменение начальной страницы

В Обозревателе решений откройте файл MainPage.xaml.

Создайте элементы управления для пользовательского интерфейса, добавив следующий код XAML в корневой элемент Grid сразу после его закрывающего тега. В нем содержится StackPanel с TextBlock, который запрашивает имя пользователя; элемент TextBox, который принимает имя пользователя; элемент Button и еще один элемент TextBlock.

На этот момент вы создали очень простое универсальное приложение для Windows. Если вы хотите увидеть, как выглядит приложение UWP, нажмите клавишу F5, чтобы выполнить сборку, развернуть и запустить приложение в режиме отладки.

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

После того как экран-заставка исчезнет, появится ваше приложение. Отображается основная страница приложения.

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

Чтобы завершить отладку и закрыть приложение, вернитесь в Visual Studio и нажмите клавиши SHIFT+F5.

В приложении можно вводить информацию в TextBox, но при нажатии Button ничего не происходит. Позднее мы создадим для кнопки обработчик события Click, который отображает персонализированное приветствие.

Шаг 2. Создание обработчика событий

В файле MainPage.xaml в коде XAML или в представлении конструирования выберите элемент Say Hello Button в добавленном ранее элементе StackPanel.

Найдите событие Click. В текстовом поле введите имя функции, которая обрабатывает событие Click. Для этого примера введите «Button_Click».

Нажмите клавишу ВВОД. Метод обработчика событий создается в файле MainPage.xaml.cpp и открывается в редакторе кода. Вы можете добавить код, который выполняется при возникновении события.

В то же время в MainPage.xaml код XAML для Button обновляется, чтобы объявить обработчик событий Click следующим образом.

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

Шаг 3. Стиль начальной страницы

Выбор темы

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

Переключение на темную тему

Откройте файл App.xaml.

В открывающем теге Application измените свойство RequestedTheme и установите для него значение Dark:

Вот полный тег Application с темной темой:

Чтобы выполнить сборку и запустить приложение, нажмите клавишу F5. Обратите внимание, что проект использует темную тему.

Какую тему использовать? Любую, какую пожелаете! Мы рекомендуем для приложений, которые главным образом отображают изображения или видео, лучше использовать темную тему, а для приложений с большим объемом текста — светлую тему. Если применяется пользовательская цветовая схема, используйте тему, которая лучше всего сочетается с внешним видом вашего приложения. В остальных разделах настоящего руководства мы используем светлую тему на снимках экрана.

Примечание. Тема применяется после запуска приложения. Ее нельзя изменить, пока приложение работает.

Использование системных стилей

В данный момент в приложении для Windows текст является слишком мелким и трудным для чтения. Давайте исправим это, применив системный стиль.

Изменение стиля элемента

Откройте файл MainPage.xaml в проекте Windows.

В коде XAML или в представлении конструирования выберите добавленный ранее элемент What’s your name? TextBlock.

В окне Свойства (F4) нажмите кнопку «Свойства» ( ) в правом верхнем углу.

Разверните группу Текст и установите размер шрифта 18 пикселей.

Разверните группу Разное и найдите свойство Style.

Щелкните маркер свойств (зеленый прямоугольник справа от свойства Стиль), а затем в меню выберите пункты Системный ресурс > BaseTextBlockStyle.

BaseTextBlockStyle — это ресурс, который определен в ResourceDictionary в файле \Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml.

Вид текста в рабочей области конструирования XAML изменится. В редакторе XAML обновляется код XAML для TextBlock.

Повторите процесс, чтобы установить размер шрифта, и назначьте значение BaseTextBlockStyle элементу greetingOutput TextBlock.

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

XAML-код теперь выглядит так:

Шаг 4. Адаптация пользовательского интерфейса к различным размерам окна

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

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

Если вы использовали VisualStateManager в предыдущих версиях XAML, можно заметить, что в XAML здесь используется упрощенный синтаксис.

У VisualState с именем wideState имеется AdaptiveTrigger, для свойства MinWindowWidth которого задано значение 641. Это означает, что состояние будет применяться только тогда, когда ширина окна составляет не менее минимального значения 641 DIP. Вы не указываете никакие объекты Setter для этого состояния, поэтому оно использует свойства макета, заданные в XAML для содержимого страницы.

Сводка

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

Дальнейшие действия

Если у вас есть проект универсального приложения для Windows, ориентированный на Windows 8.1 и (или) Windows Phone 8.1, вы можете перенести его в Windows 10. Для этого действия нет автоматического процесса, но его можно выполнить вручную. Начните новый проект универсального приложения для Windows, чтобы получить последнюю структуру системы и файлы манифеста проекта, скопируйте файлы кода в структуру каталогов проекта, добавьте элементы в проект и перепишите код XAML, используя VisualStateManager в соответствии с рекомендациями в этом разделе. Дополнительные сведения см. в разделах: Перенос проекта среды выполнения Windows 8 в проект универсальной платформы Windows (UWP) и Перенос на универсальную платформу Windows (C++).

Если у вас есть код на C++, который вы хотите включить в приложение UWP, например для создания нового пользовательского интерфейса UWP для существующего приложения, изучите раздел Практическое руководство. Использование существующего кода C++ в приложении универсальной платформы Windows.

Источник