Программирование для мобильных платформ. Android и WP. Учебный курс - страница 18

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

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

<RowDefinition Height=«Auto»/>

<RowDefinition Height=«Auto»/>

<RowDefinition Height=«*»/>

…

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»>

…

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

FontSize=» {StaticResource PhoneFontSizeExtraLarge}»

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

Name=«ClickMeButton»

Content=«Click Me»

HorizontalAlignment=«Right»

Padding=«4»

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

…

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

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

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

…

…

Style=» {StaticResource PhoneTextExtraLargeStyle}»

Foreground=«#FFFF9A00»

HorizontalAlignment=«Stretch»

TextWrapping=«Wrap»

TextAlignment=«Center»

FontWeight=«Bold» />

…

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

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

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