Разработка под Windows Phone

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

Инструментарий (Разработка для Windows Phone)

Visual Studio 2010

Чтобы разрабатывать для Windows Phone потребуется Visual Studio 2010 c Service Pack 1 редакции Professional или выше. Если у вас нет Visual Studio 2010, при установке инструментарий

разработки для Windows Phone

, автоматически будет установлена бесплатная версия Visual Studio 2010 Express for Windows Phone, на которой также можно разрабатывать приложения под Windows Phone.

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

Обратите внимание, что для того, чтобы отлаживаться на устройстве, помимо собственно устройства и кабеля для подключения его к компьютеру разработчика, на компьютере со средствами разработки необходимо иметь установленное ПО Zune (https://zune.net). Также перед развертыванием приложения и отладкой, требуется зарегистрировать устройство или «разлочить», с использованием утилиты Windows Phone Developer Registration Tool, которая устанавливается вместе с Windows Phone SDK.

Windows Phone SDK

Этот пакет, доступный для скачивания на сайте App Hub https://create.msdn.com содержит всё необходимое, для того, чтобы начать разработку. На момент написания этой статьи, последняя версия инструментария доступна в версии Windows Phone SDK 7.1 Release Candidate в лицензии «Go Live» с возможностью разрабатывать свои приложения и публиковать их в Windows Phone Marketplace. Windows Phone SDK 7.1 Release Candidate содержит следующие компоненты:

Windows Phone SDK 7.1
Windows Phone Emulator
Windows Phone SDK 7.1 Assemblies
Silverlight 4 SDK and DRT
Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0
Expression Blend SDK for Windows Phone 7
Expression Blend SDK for Windows Phone OS 7.1
WCF Data Services Client for Windows Phone
Microsoft Advertising SDK for Windows Phone

Если у вас не установлена версия Visual Studio 2010 редакции Professional, Expression Bland 4 или XNA Game Studio 4.0, в процессе установки также будут скачаны и установлены:

Visual Studio 2010 Express for Windows Phone
Expression Blend 4 for Windows Phone
XNA Game Studio 4.0

Разработка для Windows Phone в Expression Blend и Expression Blend for Windows Phone

Expression Blend – это интерактивный визуальный дизайнер для XAML, технологии описания интерфейса для приложений Silverlight и Windows Presentation Foundation (WPF). Это отличное средство разработки, которое позволяет просто манипулировать слоями, анимацией, стилями и шаблонами. Это базовое средство разработки на XAML. Собственно программа Expression Blend не бесплатна, однако, специальная версия для создания дизайнов приложений под Windows Phone, под названием Expression Blend 4 for Windows Phone доступна для разработчиков бесплатно. Она закачается и установится в процессе установки Windows Phone SDK, если у вас на компьютере нет полной версии Expression Blend. Подробнее об Expression Blend 4 можно прочитать на MSDN: https://msdn.microsoft.com/ru-ru/library/cc296227.aspx

XNA Game Studio 4.0

XNA Game Studio – это программное окружение, которое позволяет разрабатывать в Visual Studio игры для Windows Phone, консоли Xbox 360 и компьютеров на базе Windows. Включает в себя XNA Framework, представляющий собой набор библиотек на управляемом коде для разработки игр. Подробнее можно прочитать на MSDN: https://msdn.microsoft.com/ru-ru/library/bb200104.aspx

Windows Phone Emulator

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

Эмулятор Windows Phone Emulator не поддерживает проигрывание медиаконтента Zune. Эмулятор поставляется только с одним встроенным приложением Internet Explorer, но это Internet Explorer 9 с поддержкой HTML5.

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

Подробнее можно прочитать на MSDN: https://msdn.microsoft.com/ru-ru/library/ff402563(v=VS.92).aspx

Дополнительный инструментарий разработчика

Windows Phone Developer Registration Tool

Перед тем, как разработчик сможет развернуть своё приложение на реальном устройстве, его необходимо зарегистрировать как устройство разработчика – «разлочить». Это делается один раз для определенного телефона. Зарегистрированный на Marketplace разработчик может зарегистрировать до 3 устройств (для разработчика, зарегистрированного, как студент количество устройств ограничено до одного). Подробнее: https://create.msdn.com

Windows Phone Profiler

Windows Phone Profiler доступен в меню Debug Visual Studio с установленным инструментарием Windows Phone SDK.

Анализирует работу программы во время исполнения , идентифицирует возможные проблемы с производительностью. Подробнее можно прочитать на MSDN: https://msdn.microsoft.com/ru-ru/library/hh202934(v=VS.92).aspx

Silverlight Toolkit for Windows Phone

Silverlight Toolkit for Windows Phone – набор полезных элементов управления Silverlight дляWindows Phone с поддержкой режима дизайна, от команды разработчиков Silverlight. Доступен весь исходный код, примеры и документация. Обновляется приблизительно раз в три месяца, доступен по адресу https://silverlight.codeplex.com или через NuGet.

Текущий релиз включает в себя такие элементы управления, как ContextMenu, DatePicker и TimePicker, ToggleSwitch, WrapPanel и GestureHelper.

Среда разработки

После установки средств разработки Windows Phone SDK в диалоге New Project в Visual Studio появятся группы проектов для Silverlight for Windows Phone:

и в группе XNA Game Studio 4.0 добавятся проекты для Windows Phone:

Этот цикл статьей сфокусирован на разработке под Windows Phone на Silverlight, поэтому рассмотрим доступные разработчику приложений шаблоны несколько более подробно.

После установки разработчику доступны следующие шаблоны приложений Silverlight for Windows Phone:

Windows Phone Application
Windows Phone Databound Application
Windows Phone Class Library
Windows Phone Panorama Application
Windows Phone Pivot Application
Windows Phone Silverlight and XNA Application
Windows Phone Audio Playback Agent
Windows Phone Audio Streaming Agent
Windows Phone Scheduled Task Agent

Перед тем как перейти непосредственно к шаблонам приложений, надо сказать несколько слов по поводу Windows Phone и Metro-дизайна.

Windows Phone и Metro-дизайн

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

Если вы дизайнер или в вашей команде есть выделенный дизайнер, вы можете воспользоваться всей мощью инструментарий Expression Blend 4 или Expression Blend for Windows Phone, которая поставляется вместе с Windows Phone SDK.

Что же делать если вы разработчик и не хотите заниматься визуальным дизайном приложения, например, вы разрабатываете бизнес-приложение и всё что от него требуется, соответствовать общему дизайну и стилю Windows Phone?

Всё очень просто. Во-первых, Silverlight для телефона разработан с учётом требований Metro-дизайна, поэтому все встроенные элементы управления выполнены в Metro-дизайне. Во-вторых, по умолчанию, приложения, созданные из шаблонов из поставки Windows Phone SDK, работают, выглядят и используют стили и шрифты в соответствии с Metro-дизайном.

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

Руководство по дизайну интерфейсов и взаимодействию с пользователем для Windows Phone можно найти по следующей ссылке https://msdn.microsoft.com/ru-ru/library/hh202915.aspx

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

Шаблоны приложений

Сначала давайте рассмотрим три шаблона, представляющих собой три основных стиля приложения для Windows Phone:

Windows Phone Application
Windows Phone Pivot Application
Windows Phone Panorama Application

Windows Phone Application – это аналог простого диалогового приложения у которого один основной экран, через который происходит основное взаимодействие с пользователем.

Windows Phone Pivot Application – это некий аналог приложения с закладками, где заголовок каждой закладки определяет содержимое. Стандартный вариант использования – каждая закладка представляет собой одни и те же, в целом, данные, но в разных представлениях и/или с разной фильтрацией. Например, календарь, почтовый клиент и настройки телефона. Шаблон использует элемент управления Pivot.

Windows Phone Panorama Application – приложение панорама, в котором зоны взаимодействия с пользователем также разделены на панели, но доступны они через горизонтальную прокрутку; фоновое изображение установлено сразу на всю панораму, она имеет общий заголовок, который прокручивается медленнее, чем панели; контент соседней панели справа виден при отображении текущей. Например, таким образом реализованы хабы в Windows Phone: People, Marketplace, Pictures, Music+Videos и др. Шаблон использует элемент управления Panorama.

Шаблоны, заканчивающиеся на Agent – это шаблоны библиотек, для выполнения соответствующих фоновых задач:

Windows Phone Audio Playback Agent
Windows Phone Audio Streaming Agent
Windows Phone Scheduled Task Agent

Шаблон Windows Phone Databound Application – простой шаблон приложения с вида список – детальное представление с реализацией навигации между страницами с передачей параметров и хранением данных в глобальном VeiwModel.

Шаблон Windows Phone Class Library – шаблон библиотеки классов для Windows Phone.

Шаблон Windows Phone Silverlight and XNA Application для Silverlight приложения, которое может использовать XNA для рендеринга графического контента.

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

В диалоге New Project Visual Studio выберем Visual C#, Silverlight for Windows Phone и простой шаблон приложения Windows Phone Application и назовём его ExploringXAMLFeatures.

В диалоге выбора целевой операционной системы выберем Windows Phone OS 7.1

После создания проекта, окно Visual Studio примет следующий вид

Рассмотрим структуру проекта в окне Solution Explorer:

Название файла

Назначение

AppManifest.xml

Файл манифеста, необходимый для генерации XAP файла, в который упаковывается приложение для развёртывания на телефоне.

AssemblyInfo.cs

Ещё один конфигурационный файл, в котором определяются некоторые метаданные главной сборки(Assembly) приложения.

WMAppManifest.xml

Файл метаданных, который содержит разнообразные настройки приложения: заголовок, задание первой страницы, пути к иконкам, определение необходимых системных возможностей и.т.д.

App.xaml

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

App.xaml.cs

Файл кода (code-behind) для App.xaml. Здесь можно обрабатывать события и ошибки уровня приложения, в том числе его tombstoning. Данную концепция будет рассмотрена позднее, когда будет рассматриваться многозадачность.

ApplicationIcon.png

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

Background.png

Данная картинка используется, когда приложение закреплено на стартовом экране телефона(start screen). По сути это большая иконка приложения. Разумно сделать её визуально похожей на ApplicationIcon.png.

MainPage.xaml

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

MainPage.xaml.cs

Файл кода страницы MainPage.xaml.

SplashScreenImage.jpg

Данная картинка отображается во время загрузки +приложения. Можно задать свою картинку с анимацией, чтобы проинформировать, что приложение загружается. Есть техника создания очень динамичных страниц загрузки на XNA, но она выходит далеко за рамки этого цикла статей.

Файлы XAML определяют интерфейс приложения. На самом деле — это просто XML файлы с языком разметки XAML.

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

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

Добавление элементов управления на страницу XAML

Обратите внимание, что Visual Studio по умолчанию отображает и дизайн, и XAML код страницы.

Если вы переходили к просмотру других файлов решения, двойным щелчком перейдите на файл MainPage.xaml.

В XAML код файла MainPage.xaml внутрь элеметна Grid с именем ContentPanel вставьте элемент управления Button:

<!—ContentPanel — place additional content here—>
<Grid x:Name=«ContentPanel» Grid.Row=«1» Margin=«12,0,12,0»>
<Button Content=«Нажми меня» Name=«MyButton» FontSize=«18» Width=«175» Height=«75» />
</Grid>

В окне дизайна кнопка отобразится сразу приблизительно в центре интерфейса. Обратили внимание на атрибут Name? Это уникальный идентификатор элемента, который помогает ссылаться на него в коде. Считайте это ID атрибутом элемента управления. Давайте теперь добавим какие-нибудь действия при нажатии на эту кнопку. Есть два способа привязать событие к кнопке Button (или любому другому элементу управления). В XAML, прямо в определении Button, можно добавить атрибут Click и система InteliSense автоматически спросит, хотим ли мы сгенерировать новый обработчик событий:

Можно связать обработчик событий напрямую в коде страницы Home.xaml.cs не указывая его в XAML файле:

public MainPage()
{
InitializeComponent();
MyButton.Click +=new RoutedEventHandler(MyButton_Click);
}

Оба способа работают. Можете использовать любой из них. Для упрощения здесь будет использоваться определение метода в XAML. Теперь в функции MyButton_Click можно написать управляемый код, который будет изменять интерфейс или вызывать другие функции. Завершим наш пример приложения, добавив код, который будет изменять текст в TextBlock PageTitle (PageTitle – это Name, так что можно ссылаться на неё напрямую в коде) на «привет wp7». Чтобы сделать это допишем следующий код в функцию:

private void MyButton_Click(object sender, RoutedEventArgs e)
{
PageTitle.Text = «привет wp7»;
}

Выберем в настройках проекта Windows Device Emulator

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

Добавление новых страниц в проект

Только самое простое приложение состоит из одной страницы. Мы хотим научиться писать сложные многостраничные приложения. Мы можем использовать шаблоны Pivot, Panorama, можем использовать паттерн проектирования MVVM (Model-View-ViewModel), а сначала научимся добавлять новые страницы в проект и переходить между ними.

В окне Solution Explorer щелкнем правой кнопкой мыши по названия проекта, и в отобразившемся меню выберем, Add, далее New Item, в открывшемся диалоговом окне выберем Windows Phone Portrait Page и назовем её SecondPage.xaml:

Теперь у нас есть пустая XAML страница, точная копия страницы MainPage.xaml до того, как мы её отредактировали.

Чтобы лучше различать страницы, перейдем к XAML коду страницы SecondPage и у элемента TextBlock с Name PageTitle отредактируем свойство Text, как показано ниже:

<TextBlock Name=«PageTitle» Text=«second page» Margin=«9,-7,0,0» Style=«{StaticResource PhoneTextTitle1Style}»/>

Навигация между страницами приложения

Итак, у нас в проекте есть две страницы, при запуске приложения отображается страница MainPage.xaml. Как теперь перейти со страницы MainPage.xaml на SecondPage.xaml?

Попробуем два простых способа, как это сделать.

В XAML код файла MainPage.xaml после добавленного ранее кода Button, добавим код HyperlinkButton, как показано ниже:

<!—ContentPanel — place additional content here—>
<Grid x:Name=«ContentPanel» Grid.Row=«1» Margin=«12,0,12,0»>
<Button Content=«Нажми меня» Name=«MyButton» FontSize=«18» Width=«175» Height=«75» />
<HyperlinkButton Content=«Вторая страница» Name=«MyHyperlinkButton» FontSize=«18» Width=«175» Height=«75» Margin=«140,350,140,185» />
</Grid>

Элемент управления HyperlinkButton имеет специальноe свойство NavigateUri, которое позволяет указать Uri для перехода. Добавим это свойство со значением /SecondPage.xaml, как показано ниже:

<HyperlinkButton Content=«Вторая страница» Name=«MyHyperlinkButton» FontSize=«18» Width=«175» Height=«75» Margin=«140,350,140,185» NavigateUri=«/SecondPage.xaml»/>

Запустим приложение (F5).

Когда отобразится интерфейс приложения, если мы нажмём ссылку Вторая страница, то произойдет переход на вторую, ранее созданную страницу SecondPage.xaml. Если после этого нажать на аппаратную кнопку Back, то мы вернёмся на основную (предыдущую) страницу – по умолчанию эта кнопка позволяет перейти на предыдущую активную страницу.

Теперь воспользуемся возможностью программного перехода. Сначала добавим в секцию using следующий код:

using System.Windows.Navigation;

А затем, заменим код обработчика MyButton_Click на следующий:

private void MyButton_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri(«/SecondPage.xaml», UriKind.Relative));
}

Запустите приложение (F5) и убедитесь, что кнопка работает также как и ссылка.

Добавим на вторую страницу (SecondPage.xaml) элементы управления и код, который бы позволял вернуться на предыдущую страницу.

В XAML код файла SecondPage.xaml внутрь элеметна Grid с именем ContentPanel вставьте элементы управления Button и HyperlinkButton, как показано ниже:

<!—ContentPanel — place additional content here—>
<Grid x:Name=«ContentPanel» Grid.Row=«1» Margin=«12,0,12,0»>
<Button Content=«Обратно» Name=«MyButton» FontSize=«18» Width=«175» Height=«75» Click=«MyButton_Click» />
<HyperlinkButton Content=«Первая страница» Name=«MyHyperlinkButton» FontSize=«18» Width=«175» Height=«75» Margin=«140,350,140,185» NavigateUri=«/MainPage.xaml»/>
</Grid>

Для создания обработчика события Click кнопки MyButton на странице SecondPage кликните правой кнопкой мыши по тексту MyButton_Click в XAML редакторе и выберите Navigae to Event Handler.

Запустите приложение (F5) и убедитесь, что ссылка «Первая страница» на второй странице возвращает приложение на MainPage.

Теперь воспользуемся возможностью программного перехода. В коде страницы SecondPage.xaml.cs добавим в секцию using следующий код:

using System.Windows.Navigation;

А затем, заменим код обработчика MyButton_Click на следующий:

private void MyButton_Click(object sender, RoutedEventArgs e)
{
NavigationService.GoBack();
}

Запустите приложение (F5) и убедитесь, что кнопка Обратно на второй странице возвращает приложение на MainPage.

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

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

Добавьте следующий код в файл SecondPage.xaml.cs сразу после обработчика MyButton_Click:

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
base.OnNavigatingFrom(e);
// Если можно отменить переход, уточним у пользователя, хочет ли он остаться на текущей странице
if (e.IsCancelable)
{
MessageBoxResult result = MessageBox.Show(«Может быть останетесь?», «Подтверждение перехода», MessageBoxButton.OKCancel);
if (result == MessageBoxResult.OK)
{
// Пользователь решил остаться
e.Cancel = true;
return;
}
}
}

Код достаточно простой, чтобы вы с ним могли разобраться самостоятельно.

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

Теперь осталось научиться передавать между страницами параметры.

Двойным щелчком по MainPage.xaml перейдём к редактированию основной страницы. В коде MainPage.xaml добавим элемент управления TextBox, выше элемента Button, как показано ниже:

<!—ContentPanel — place additional content here—>
<Grid x:Name=«ContentPanel» Grid.Row=«1» Margin=«12,0,12,0»>
<TextBox Name=«MyTextBox» Width=«175» Height=«75» Margin=«140,185,140,350»/>
<Button Content=«Нажми меня» Name=«MyButton» FontSize=«18» Width=«175» Height=«75» Click=«MyButton_Click»/>
<HyperlinkButton Content=«Вторая страница» Name=«MyHyperlinkButton» FontSize=«18» Width=«175» Height=«75» Margin=«140,350,140,185» NavigateUri=«/SecondPage.xaml»/>
</Grid>

Двойным щелчком по SecondPage.xaml перейдём к редактированию основной страницы. В коде SecondPage.xaml добавим элемент управления TextBox, выше элемента Button, также как на странице MainPage:

<!—ContentPanel — place additional content here—>
<Grid x:Name=«ContentPanel» Grid.Row=«1» Margin=«12,0,12,0»>
<TextBox Name=«MyTextBox» Width=«175» Height=«75» Margin=«140,185,140,350»/>
<Button Content=«Обратно» Name=«MyButton» FontSize=«18» Width=«175» Height=«75» Click=«MyButton_Click» />
<HyperlinkButton Content=«Первая страница» Name=«MyHyperlinkButton» FontSize=«18» Width=«175» Height=«75» Margin=«140,350,140,185» NavigateUri=«/MainPage.xaml»/>
</Grid>

Теперь, в обработчик события MyButton_Click страницы MainPage добавим параметры в Uri перехода на вторую страницу по кнопке:

private void MyButton_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri(«/SecondPage.xaml?text=»+Uri.EscapeDataString(MyTextBox.Text), UriKind.Relative));
}

И, наконец, в код страницы SecondPage.xaml.cs, сразу же после обработчика OnNavigatedFrom, добавим обработчик прихода на страницу OnNavigatedTo и в нем обработаем приходящий параметр и выведем его в MyTextBox:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
if (NavigationContext.QueryString.ContainsKey(«text»))
{
MyTextBox.Text = NavigationContext.QueryString[«text»].ToString();
}
}

Запустите приложение (F5) и проверьте, как оно работает, например, при переходе по ссылке со страницы MainPage на SecondPage.

Итоги и следующие шаги

Итак, мы разобрались с тем, что надо установить для разработки под Windows Phone 7, познакомились с доступными шаблонами и научились создавать новое приложение из шаблона. Также мы научились добавлять элементы управления, прямо в XAML код, добавлять в проект новые страницы и организовывать между ними переход по ссылке и в коде с возможностью передачи параметров.

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

Файлы для загрузки

Проект ExploringXAMLFeatures