2.11 Создаем первый проект на Silverlight

Прежде чем приступить к приемам программирования для Windows Phone 7, необходимо познакомиться с базовыми понятиями. Те, кто имел опыт программирования на Windows Mobile 6, уже обладают некоторыми знаниями в этой области (использование эмуляторов, отличия от настольной. NET Framework и т.д.). Тем не менее, и им также придется учиться заново, так как Microsoft в очередной раз поменяла правила, и все прежние навыки теперь считаются устаревшими и выброшены на свалку истории. Гонка за новыми технологиями продолжается.

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

2.11.1 Терминология

Прежде чем приступить к написанию приложений для Windows Phone, необходимо познакомиться с некоторой терминологией. Рассмотрим некоторые элементы Windows Phone (рис.).

Tile (плитка) – Значок приложения на стартовом экране. Плитка может быть динамической и отображать некоторую информацию для пользователя.

Application Title – Название приложение. Обычно в верхнем регистре.

Page Title – Заголовок страницы. Обычно в нижем регистре.

Status Bar – Состояние работы телефонной части, например, уровень сигнала.

On-screen keyboard – Экранная клавиатура. Появляется при получение фокуса текстовым полем. Иногда используется термин (SIP – soft input panel).

Application Bar – Дополнительная всплывающая панель для навигации по приложению. Содержит кнопки и/или пункты меню.

Кнопки Back, Start, Search – Стандартные кнопки на любом устройстве с Windows Phone.

Специально для Windows Phone 7 был разработан новый пользовательский дизайн под кодовым названием Metro. Рекомендуется следовать этому дизайну в своём приложении, чтобы оно интегрировалось с операционной системой и другими приложениями. Дизайн обеспечивает простой в использовании интерфейс, предназначенный для уменьшения потребления энергии на телефоне.

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

Запустите Visual Studio 2010 Express For Windows Phone. В меню File выберите пункт New Project. У вас откроется диалоговое окно New Project.

Далее слева выберите пункт Silverlight for Windows Phone. Как видите, для данного типа проекта доступны несколько шаблонов: Windows Phone Application, Windows Phone Databound Application, Windows Phone Class Library, Windows Phone Panorama Application, Windows Phone Pivot Application. Для нашего учебного примера выберем первый вариант.

Постарайтесь сразу выработать привычку задавать понятные имена для своих проектов. Поэтому присваиваем проекту имя WP7HelloWorld и нажимаем на кнопку OK.

Спустя несколько секунд Visual Studio создаст новый проект. Вы увидите несколько окон на экране. Оставим пока в покое окна в центральной части экрана с изображением телефона и кодом XAML, а посмотрим на окно Solution Explorer. В Solution Explorer хорошо видна структура решения, созданного на основе выбранного шаблона Windows Phone Application. В нашем случае в этом окне содержится один проект WP7HelloWorld.

Проект содержит следующие файлы (табл. Таблица 2.1):

Таблица 2.1

Подробнее о файлах проекта можно почитать в статье [1].

2.11.3 Сборка и тестирование программы

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

В меню View выберите пункт Output (возможно потребуется настроить это меню), чтобы открыть окно Output. Далее в меню Debug выберите команду Build Solution (SHIFT + F6) для компиляции.

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

Также вы можете использовать окно Error List (View→Other Windows→ Error List), которое показывает ошибки, предупреждения и сообщения, выдаваемые компилятором. Вы можете сделать двойной щелчок на описании ошибки, чтобы автоматически оказаться в нужном месте исходного кода.

2.11.4 Запуск программы в эмуляторе

Убедитесь, что у вас установлен Windows Phone Emulator в выпадающем списке устройств Select Device, который расположен рядом с кнопкой Start Debugging на панели инструментов.

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

Через некоторое время вы увидите свое приложение в эмуляторе.

Пока программа слишком проста для изучения, поэтому давайте закроем ее – нажмите SHIFT + F5 или щелкните на кнопке Stop на панели инструментов (рис.), чтобы остановить отладчик и закончить сеанс отладки. Но не закрывайте окно эмулятора.

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

2.11.5 Проектирование интерфейса пользователя

Теперь, когда мы поняли, как создавать приложения, попробуем создать более сложную программу с элементами пользовательского интерфейса. Мы добавим такие элементы, как заголовок, текстовое поле и кнопка. При использовании приложения нужно ввести какой-либо текст в текстовое поле, и после нажатия кнопки появится сообщение с введенным текстом. Он будет выглядеть примерно, как на следующем рисунке.

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

Хотя интегрированная среда разработки поддерживает графические манипуляции с объектами (как обычный визуальный конструктор интерфейса), мы вручную отредактируем код XAML. Для перевода режима редактора в представление XAML и увеличения области обзора дважды щелкните вкладку XAML с правого края окна конструктора.

В разметке XAML найдите элемент контейнера Grid с именем LayoutRoot. Он предназначен для упорядочивания элементов на странице. Внутри его свойства RowDefinition вставьте дополнительную строку между двумя существующими и установите значение свойства Height равным Auto. В этой строке вскоре появится текстовое поле и кнопка.

<Grid x: Name=«LayoutRoot» Background=«Transparent»>

<Grid.RowDefinitions>

<RowDefinition Height=«Auto»/>

<RowDefinition Height=«Auto»/>

<RowDefinition Height=«*»/>

</Grid.RowDefinitions>

…

</Grid>

</phone: PhoneApplicationPage>

Grid – это элемент разметки, который выступает в качестве контейнера для других элементов управления. Его основная задача – расположение и упорядочение дочерних элементов управления. Существует и другие элементы управления разметкой: Canvas, StackPanel.

Обратите внимание, что корневой элемент Grid содержит вложенные элементы, каждый из которых сопоставлен отдельной строке внешней сетки путем определения свойства Grid.Row. Найдите элемент Grid с именем TitlePanel. Присвойте свойству Text первого элемента TextBlock в пределах внутренней сетки строковое значение Windows Phone 7. Аналогичным образом присвойте свойству Text второго элемента TextBlock строковое значение Hello Phone.

Теперь найдите элемент Grid с именем ContentPanel, который должен быть пустым, и вставьте в него следующую разметку XAML.

<Grid x: Name=«LayoutRoot» Background=«Transparent»>

…

<! – ContentPanel – place additional content here – >

<Grid x: Name=«ContentPanel» Grid.Row=«1» Margin=«12,0,12,0»>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=«*» />

<ColumnDefinition Width=«Auto»/>

</Grid.ColumnDefinitions>

<TextBox Grid.Column=«0» Name=«MessageTextBox»

FontSize=» {StaticResource PhoneFontSizeExtraLarge}»

Margin=«20,20,10,20»/>

<Button Grid.Column=«1»

Name=«ClickMeButton»

Content=«Click Me»

HorizontalAlignment=«Right»

Padding=«4»

Margin=«10,20,20,20» />

</Grid>

</Grid>

…

(описание текстового поля можно было также получить, просто перетащив мышкой заготовку текстового поля из панели TOOLS на изображение эмулятора телефона).

Элемент Grid упорядочивает свои дочерние элементы управления на странице на основе ширины каждого столбца, как указано в коллекции ColumnDefinitions. Обратите внимание, что ширина первого столбца указывается как *. Это позволяет столбцу растягиваться и заполнять неиспользуемое пространство в строке после размещения всех остальных столбцов. Ширина второго столбца указывается как Auto, что позволяет изменять размер столбца в соответствии с размером его содержимого.

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

…

<Grid x: Name=«LayoutRoot» Background=«Transparent»>

…

<Grid Grid.Row=«2»>

<TextBlock Name=«BannerTextBlock»

Style=» {StaticResource PhoneTextExtraLargeStyle}»

Foreground=«#FFFF9A00»

HorizontalAlignment=«Stretch»

TextWrapping=«Wrap»

TextAlignment=«Center»

FontWeight=«Bold» />

</Grid>

</Grid>

…

Щелкните вкладку Design с правого края окна, чтобы перейти в режим конструирования.

2.11.6 Обработка событий

Теперь необходимо определить обработчики событий, которые отвечают на действия из интерфейса пользователя, в частности событие нажатия кнопки. Включите в конструкторе режим Design. Для этого дважды щелкните вкладку Design с правого края окна конструктора. Щелкните кнопку Click Me на поверхности конструктора, чтобы выбрать ее, а затем нажмите клавишу F4, чтобы открыть окно свойств этой кнопки. На панели Properties щелкните вкладку Events, чтобы отобразить окно со списком доступных событий. Найдите в этом списке событие Click и введите ClickMeButton_Click в текстовом поле рядом с этим событием. Нажмите клавишу Enter, чтобы создать обработчик событий с этим именем, и откройте файл с выделенным кодом для отображения заглушки метода, созданной Visual Studio (рис.).

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

Реализация метода (который пока является пустым) находится в файле MainPage. xaml. cs. Вставьте следующий код в тело метода ClickMeButton_Click.

private void ClickMeButton_Click (object sender, RoutedEventArgs e)

{

BannerTextBlock. Text = MessageTextBox. Text;

MessageTextBox. Text = String. Empty;

}

Этот код считывает текст, введенный пользователем в текстовом поле, а затем создает баннер с этим текстом.

2.11.7 Проверка

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

При необходимости повторно откройте файл с выделенным кодом для страницы MainPage. xaml. Для этого щелкните данный файл правой кнопкой мыши в обозревателе решений и выберите команду View Code.

Теперь определите точку останова для прекращения выполнения в обработчике событий для кнопки Click Me. Для задания точки останова найдите первую строку метода ClickMeButton_Click исходного файла и щелкните в области серого поля, расположенного на левой стороне окна редактора рядом с этой строкой. Красный кружок указывает положение вставленной точки останова (рис.). Либо щелкните строку в окне редактора, чтобы выбрать ее, а затем нажмите клавишу F9.

Чтобы включить или выключить точку останова, щелкните в области поля или щелкните строку, содержащую точку останова, и нажмите клавишу F9.

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

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

Вернитесь в Visual Studio. Обратите внимание, что выполнение прекращается в заданной ранее точке останова и следующий выполняемый оператор выделяется желтым (рис.).

Изучите текущее содержимое текстового поля в отладчике. Для этого в окне исходного кода наведите указатель мыши на свойство MessageTextBox. Text. Появится окно подсказки (совета) с текущим значением свойства, которое должно совпадать с текстом, введенным в окно эмулятора. Убедитесь, что указатель находится над частью Text. Иначе в подсказке будут отображаться сведения об объекте MessageTextBox (рис.).

alt=«Проверка значений переменных в отладчике»>

Нажмите клавишу F10, чтобы в пошаговом режиме выполнить текущую команду и отобразить в баннере текст, соответствующий содержимому текстового поля. Отобразите подсказку для свойства BannerTextBlock. Text, чтобы убедиться, что его значение соответствует значению текстового поля (рис.).

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

Нажмите клавишу F10 еще раз, чтобы выполнить следующий оператор и очистить содержимое текстового поля. Вновь отобразите совет для свойства MessageTextBox. Text, которое по-прежнему доступно, и убедитесь, что теперь оно пустое. Нажмите клавишу F5, чтобы возобновить выполнение приложения. Вернитесь в эмулятор Windows Phone.

Нажмите в эмуляторе кнопку Back, чтобы перейти на предыдущую страницу. Обратите внимание, что при этом сеанс отладки завершается и в отладчике отображается главное меню: вы уходите с первой (и единственной) страницы приложения (закрываем ее), а других активных приложений нет.

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

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

2.11. 8 Видео

Вы также можете посмотреть видео о том, как создать первое приложение Windows Phone 7 – [2].