Рисунок 2.10 Кнопка Stop на панели инструментов
2.11.5 Проектирование интерфейса пользователя
Теперь, когда мы поняли, как создавать приложения, попробуем создать более сложную программу с элементами пользовательского интерфейса. Мы добавим такие элементы, как заголовок, текстовое поле и кнопка. При использовании приложения нужно ввести какой-либо текст в текстовое поле, и после нажатия кнопки появится сообщение с введенным текстом. Он будет выглядеть примерно, как на следующем рисунке.
Рисунок 2.11 Результат работы программы в окне эмулятора
В обозревателе решений дважды щелкните файл MainPage. xaml, чтобы открыть его в конструкторе.
Хотя интегрированная среда разработки поддерживает графические манипуляции с объектами (как обычный визуальный конструктор интерфейса), мы вручную отредактируем код XAML. Для перевода режима редактора в представление XAML и увеличения области обзора дважды щелкните вкладку XAML с правого края окна конструктора.
В разметке 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»/>