Иван Трещев – Программирование для мобильных платформ. Android и WP. Учебный курс (страница 8)
Далее слева выберите пункт 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):
Подробнее о файлах проекта можно почитать в статье [1].
Хотя наша программа еще бесполезна, тем не менее, давайте проверим ее работу – скомпилируем и протестируем в эмуляторе.
В меню View выберите пункт Output (возможно потребуется настроить это меню), чтобы открыть окно Output. Далее в меню Debug выберите команду Build Solution (SHIFT + F6) для компиляции.
Посмотрите в окно Output и изучите сообщения, генерируемые во время компиляции приложения, включая финальное сообщение, в котором подводится окончательный итог и количество предупреждений и ошибок.
Рисунок 2.7 Вид окна Output
Также вы можете использовать окно Error List (View→Other Windows→ Error List), которое показывает ошибки, предупреждения и сообщения, выдаваемые компилятором. Вы можете сделать двойной щелчок на описании ошибки, чтобы автоматически оказаться в нужном месте исходного кода.
Рисунок 2.8 Вид окна Error List
Убедитесь, что у вас установлен Windows Phone Emulator в выпадающем списке устройств Select Device, который расположен рядом с кнопкой Start Debugging на панели инструментов.
Рисунок 2.9 Список выбора устройств отладки
Нажмите F5 или щелкните по зеленому треугольнику для запуска программы в Windows Phone Emulator. На экране появится эмулятор устройства и начнется процесс установки приложения на эмулятор. Наберитесь терпения и ждите полной загрузки.
Через некоторое время вы увидите свое приложение в эмуляторе.
Пока программа слишком проста для изучения, поэтому давайте закроем ее – нажмите SHIFT + F5 или щелкните на кнопке Stop на панели инструментов (рис.), чтобы остановить отладчик и закончить сеанс отладки. Но не закрывайте окно эмулятора.
После начала сеанса отладки значительную часть времени занимают настройка среды эмулятора и запуск приложения. Чтобы упростить отладку, не закрывайте эмулятор во время работы с исходным кодом в Visual Studio. Пока эмулятор работает, остановка текущего сеанса, редактирование исходного кода и последующее создание и развертывание нового образа приложения для запуска нового сеанса отладки выполняются очень быстро.
Рисунок 2.10 Кнопка Stop на панели инструментов
Теперь, когда мы поняли, как создавать приложения, попробуем создать более сложную программу с элементами пользовательского интерфейса. Мы добавим такие элементы, как заголовок, текстовое поле и кнопка. При использовании приложения нужно ввести какой-либо текст в текстовое поле, и после нажатия кнопки появится сообщение с введенным текстом. Он будет выглядеть примерно, как на следующем рисунке.
Рисунок 2.11 Результат работы программы в окне эмулятора
В обозревателе решений дважды щелкните файл 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»>
…