Создание первого приложения Create your first app

Добро пожаловать на платформу UWP. Welcome to the UWP platform! Эти руководства помогут вам создать первое приложение UWP на удобном для вас языке. These tutorials will help you create your first UWP app in the language of your choice.

Чтобы приступить к работе, выберите предпочитаемый язык. To get started, choose your favorite language.

C# и XAML C# and XAML

Воспользуйтесь своими навыками работы с .NET, WPF или Silverlight и создайте приложение на XAML с C#. Use your .NET, WPF, or Silverlight skills to build apps using C# with Extensible Application Markup Language (XAML).

Если вы хотите изучить основы или освежить знания, рекомендуем следующие материалы: If you want to learn the basics, or just refresh your memory, try reading these:

C++/WinRT и XAML C++/WinRT and XAML

Воспользуйтесь своим опытом программирования в стандартном коде C++ для создания приложений с помощью C++/WinRT с XAML. Leverage your programming expertise in standard C++ to build apps using C++/WinRT with Extensible Application Markup Language (XAML).

Узнайте больше о C++/WinRT. Learn more about C++/WinRT.

Расширения компонентов Visual C++ (C++/CX) и XAML Visual C++ component extensions (C++/CX) and XAML

Воспользуйтесь своим опытом программирования на С++ и создайте приложения с помощью расширений компонентов Visual C++ (C++/CX) с XAML. Take advantage of your C++ programming expertise to build apps using Visual C++ component extensions (C++/CX) with Extensible Application Markup Language (XAML).

Узнайте больше о C++. Learn more about C++ here.

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

Если вы готовы попробовать что-нибудь поинтереснее, чем приложение Hello World!, ознакомьтесь с этими учебниками: When you’re ready to try something a little more fun than «Hello, World!», try out these tutorials.

Создаём наше первое универсальное приложение для Windows

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

Суть состоит в том, чтобы максимизировать повторное использование кода. Вы можете повсеместно использовать код, элементы управления, стили, строки и другие активы между проектами Windows Phone и Windows 8 с помощью Visual Studio. Это уменьшает усилия, необходимые для создания и поддержки приложения для каждого типа устройств.

Введение

С точки зрения разработчика универсальное приложение Windows — это не один бинарный файл, который работает на нескольких платформах. Скорее, оно принимает форму решения Visual Studio, содержащего несколько проектов: один проект для каждой платформы в дополнение к совместному проекту, содержащему код и ресурсы, распределённому между платформами. Большая часть кода может быть распределена между проектами, так как Windows Phone 8.1 использует API-интерфейс WinRT, реализованный в Windows 8.1.

Вы можете создать приложение для Windows Phone с использованием среды Silverlight (версия 8.0 или 8.1) или среды WinRT (одно из универсальных приложений для Windows). Среда WinRT позволяет создать одно приложение, которое будет работать на Windows, Windows Phone и даже на Xbox One.

Мы будем использовать фреймворк XAML чтобы разработать приложение для нескольких платформ В текущей версии конвергенция API составляет 90%, но все еще существует небольшое количество несовместимого кода. Функции Windows Phone, доступные только в среде Silverlight, следующие:

• Поддержка Объективов
• Поддержка VoIP
• Задача захвата камеры
• API для буфера обмена
• API для обоев экрана заставки

В нашем уроке я буду использовать универсальный шаблон приложения Windows для того, чтобы создать приложение Hex Clock, точные шестнадцатеричные часы. Они покажут весь диапазон цветов в течении 24 часов, от #000000 до #235959. При каждом тиканье часов фон приложения будет изменяться на цвет, соответствующий текущему времени, преобразованному в шестнадцатеричный формат. Он будет использовать ту же реализацию, что и Hex Color JS Clock, для генерации шестнадцатеричного кода текущего времени.

Источником вдохновения является урок по созданию приложения для Windows Phone 7 на Tuts+. Пока приложение часов предназначено только для Windows Phone, мы используем его дизайн, чтобы создать аналогичное приложение для Windows Phone 8.1 и Windows 8.1 Следующий скриншот показывает то, что мы собираемся построить.

В этом уроке мы обсудим следующие темы, которые имеют отношение к разработке универсальных приложений для Windows:

• структура универсальных приложений Windows
• переключение проектов в Visual Studio
• контекстный коммутатор для универсальных приложений Windows в редакторе Visual Studio
• как создать кроссплатформенный код в общем проекте
• как добавить поддержку Windows или Windows Phone к существующему проекту.
• создание универсального приложения Windows с нуля

1. Структура универсальных приложений Windows

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

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

Скриншот показывает решение, которое создаст Visual Studio, если вы выберете шаблон Blank App (Universal Apps).

Visual Studio 2013 Update 2 предоставляет новую функцию — универсальное приложение Windows. Загрузите и установите это обновление перед началом создания универсальных приложений Windows.

2. Переключение проектов

Когда вы создаете решение, проект, который выполняется, является стартовым. Чтобы установить стартовый проект, щелкните правой кнопкой мыши над проектом в обозревателе решений и выберите параметр «Установить как стартовый проект». Вы можете быстро переключить стартовый проект из выпадающего меню «Отладка», который теперь содержит все проекты решения.

Выбранный проект выделен жирным шрифтом в обозревателе решений. Доступные параметры отладки изменяются при переключении стартовых проектов.

• Когда проект Windows стартовый, в выпадающем меню «Отладка» отображаются параметры для симулятора Windows или локальной машины.
• Когда проект Windows Phone является стартовым проектом, в выпадающем меню отображаются параметры для устройства, а также различные эмуляторы.

3. Контекстный переключатель в редакторе кода

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

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

Следующий скриншот показывает пример уведомлений в IntelliSense для случая, уведомлений для приложений Windows Phone.

4. Кроссплатформенный код в общем проекте

В распределённом проекте вы обычно пишете код для обеих платформ. Чтобы отделить части кода, специфичные для каждой платформы, используйте директиву #ifdef . Константы WINDOWS_APP и WINDOWS_PHONE_APP определены.

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

C#	WINDOWS_APP	WINDOWS_PHONE_APP
C++	WINAPI_FAMILY_PC_APP	WINAPI_FAMILY_PHONE_APP

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

5. Добавление поддержки для Windows / Windows Phone

Если у вас уже есть приложение Windows 8.1, вы можете использовать команду Add Windows Phone 8.1 чтобы добавить новый проект Windows Phone 8.1 и распределённый проект в решение. Аналогичный вариант доступен, если у вас есть приложение Windows Phone 8.1, и вы хотите добавить поддержку для Windows 8.1.

Чтобы добавить поддержку типа устройства в Обозревателе решений щелкните правой кнопкой мыши проект и выберите Добавить Windows Phone 8.1 или Добавить Windows 8.1.

Visual Studio добавляет в решение новый проект Windows Phone или Windows. Распределённый проект также будет автоматически создан.

Следующий скриншот показывает решение после добавления проекта Windows Phone в существующий проект. Распределённый проект, добавленный в решение, изначально пуст.

Заметьте, что если вы создаете приложение с использованием универсального шаблона приложения Windows, рспределённый проект уже содержит файл App.xaml.

Шаг 1: Перенос файлов в распределённый проект

Вы можете перемещать любой код, который вы хотите распределить между приложениями, в общий проект. Например, вы можете переместить папки Common, DataModel и Strings в общий проект. Вы даже можете переместить туда App.xaml.

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

Следующий скриншот показывает на ссылку, добавленную в оба проекта.

Если ваш общий код использует API, специфичные для Windows, используйте директиву #ifdef с константой WINDOWS_APP , чтобы отделить эту часть кода. Используйте константу WINDOWS_PHONE_APP , чтобы отделить части кода, специфичные для Windows Phone 8.1.

Шаг 2: Распределение App.xaml

Когда вы создаете новое решение для универсального приложения Windows, Visual Studio помещает App.xaml в общий проект. Если вы конвертируете существующий проект в универсальное приложение Windows, вы можете переместить App.xaml в общий проект вручную. После перемещения файла вам нужно будет изменить свойство action для сборки на ApplicationDefinition. Ниже приведены наши шаги:

• В обозревателе решений в общем проекте выберите файл App.xaml.
• Выберите окно «Вид» > «Свойства».
• В окне «Свойства» в выпадающем списке Action выберите ApplicationDefinition.

Вы также можете выбрать, как вы хотите открыть первую страницу своего приложения. Если вы распределённо используете файл App.xaml и хотите использовать разную стартовую страницу для каждого приложения, вам нужно добавить директивы #ifdef , как показано ниже.

6. Начинаем написание универсального приложения Windows App

Шаг 1: Настройка проекта

Для начала, выберите шаблон проекта для универсального приложения Windows в диалоговом окне «Новый проект». На следующем скриншоте показаны универсальные шаблоны проектов приложений Windows, которые в настоящее время доступны для C#.

Напишите название проекта. Я напишу Hex Clock Pro для своего проекта.

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

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

Вместо создания отдельных пользовательских интерфейсов для версий Windows Phone 8.1 и Windows 8.1 Hex Clock Pro я определяю общий дизайн в распределённом проекте. Мне просто нужно внести несколько изменений в файл XAML приложения часов на Tuts+, чтобы он работал на обеих платформах.

Шаг 3: Совместное использование Code

Как упоминалось ранее, код, который является общим для обеих платформ, может быть помещен в распределённый проект. Код, который использует специфичные для платформы API, должен быть помещен в один из проектов, ориентированных на конкретную платформу. Вы также можете использовать директивы #ifdef для включения кода, специфичного для каждой платформы, в общем файле.

Поскольку приложение Hex Clock Pro не использует API-интерфейсы, специфичные для платформы, Я могу поместить весь код в общий проект.

Прячем Status Bar

В файле MainPage.xaml.cs в общем проекте, мы использовали директиву #ifdef для того, чтобы выделить код, специфичный для Windows Phone. Код, заключенный в #ifdef , скрывает строку состояния на Windows Phone.

Отображение текущего времени

Я использовал класс DispatcherTimer для вызова начального тиканья при загрузке LayoutRoot . Объект timer вызывает функцию timer_Tick которая выполняется при каждом тиканье часов.

Функция timer_Tick обновляет отображаемое время в приложении и в то же самое время обновляет цвет фона.

Обновление цвета фона

Цвет фона устанавливается в виде шестнадцатеричного цвета, который соответствует текущему времени.

Объект класса HexColour инициализируется текущим временем, возвращая соответствующие значения RGB. Конструктор класса HexColour задает значения A, R, G, B для указанного цвета.

Добавление анимаций и эффектов

Я повторил начальную анимацию, используемую в предыдущем приложении часов на Tuts+, и она инициализируется при загрузке LayoutRoot .

Это все, что нам нужно для создания приложения Hex Clock Pro. Приложение использует 100% распределённый код. Вам просто нужно создать отдельные сборки приложений для обеих платформ. Приложение выглядит очень похоже на приложение Windows Phone и использует один и тот же код XAML для своего пользовательского интерфейса.

Заметьте, что я добавил весь код XAML и C # в общий проект, но при развертывании приложения Windows или Приложения Windows Phone, код в общем проекте объединен внутри с проектами, специфичными для платформы.

Заключение

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

Если бы я разработал версию Windows Hex Clock Pro для Windows Phone 7 или 8, это было бы намного дольше, поскольку Windows Phone 7 не содержит WinRT API и Windows Phone 8 содержит только небольшую часть API.

В Windows 10 мы увидим больше конвергенции, что означает один API-интерфейс WinRT API для нескольких платформ и высокую степень соответствия между элементами пользовательского интерфейса для каждой платформы, которая не исключает применение элементов, специфичных для отдельных платформ, чтобы представить самые лучшие возможности для каждого устройства. Не стесняйтесь и скачивайте исходные файлы учебника для использования в качестве примера. Hex Clock Pro также доступен на marketplace для Windows Phone 8.1 и Windows 8.1.