В рамках нашей серии обучающих программ для Windows Phone мы научимся создавать элементы пользовательского интерфейса для HelloPhone приложение. Приложение очень простое. По завершении пользовательский интерфейс приложения будет содержать заголовок, текстовое поле и кнопку.
Чтобы использовать приложение, вы вводите текст в текстовое поле, а затем, когда вы нажимаете кнопку, приложение отображает баннер с текстом, который вы набрали. Он будет выглядеть примерно следующим образом.
1. В Обозреватель решений, двойной щелчок MainPage.xaml чтобы открыть этот файл в дизайнере.
Дизайнер предоставляет два отдельных вида для редактирования файлов XAML, дизайн а также XAML Посмотреть. В режиме разработки у вас есть дизайн эмулятора, в котором вы можете перетаскивать элементы управления из панели инструментов, а также выбирать, изменять размер, перемещать и устанавливать свойства для существующих элементов управления. В режиме XAML у вас есть редактор разметки, который позволяет редактировать код XAML на странице. Вы можете работать с любым из режимов. У вас также есть режим разделения, при этом окно редактора отображает оба представления одновременно.
2. В этой задаче мы в основном фокусируемся на редактировании XAML вручную. Как только часть кодирования будет выполнена, вы можете вернуться к дизайнерскому представлению, чтобы увидеть результаты. Вы также можете просмотреть полный экран XAML.
3. В разметке XAML, сгенерированной шаблоном приложения Windows Phone по умолчанию, найдите сетка контейнерный элемент с именем LayoutRoot, Его цель - упорядочить элементы на странице. Внутри RowDefinition свойство, добавьте дополнительную строку между двумя существующими строками и установите значение ее Рост собственность на Авто, В эту строку скоро войдут текстовое поле и кнопка.
4. Корень сетка элемент также содержит некоторые вложенные элементы, каждая из которых назначается другой строке внешней сетки, определяя Grid.Row имущество. Теперь найдите элемент Grid с именем TitleGrid и установите свойство text первого элемента текстового блока во внутренней сетке, чтобы Windows Phone 7 Series ». так же Привет, телефон добавляется в следующий текстовый блок.
5. Теперь найдите сетка элемент с именем ContentGrid, присвойте ему строку 1, который, как правило, пустой, и вставьте следующую надпись XAML внутри этого элемента.
6. Чтобы завершить дизайн страницы, добавьте третью строку, чтобы содержать баннер с сообщением, введенным пользователем. Чтобы создать эту строку, вставьте следующую разметку XAML непосредственно перед конечным тегом внешней сетки.
7. Нажмите дизайн просмотреть и изучить расположение элементов управления на странице.
В следующем уроке мы узнаем, как «Обработать события из пользовательского интерфейса».
