Windows Phone Урок 4:Проектирование пользовательского интерфейса.

Xaml учебникЭта статья,как часть серии нашего учебника для Windows Phone , теперь мы будем учиться создавать элементы пользовательского интерфейса для  приложения HelloPhone. Приложение очень простое. После завершения строительства, пользовательский интерфейс приложения будет содержать заголовок, текстовое поле и кнопку.

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

 Сетка в xaml

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

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

2. В этой задаче мы будем ориентироваться в основном на редактирование XAML вручную. После сделанной части кодирования, вы можете вернуться к дизайнеру, чтобы увидеть результаты. Вы также можете иметь полный экран просмотра XAML.

 Проектирование и дизайн приложений Windows phone

3. В XAML разметке, созданной по умолчанию для применения шаблонов Windows Телефон, найдите  элемент Сетка контейнера имени  LayoutRoot . Его целью является организовать элементы на странице. Внутри него  RowDefinition, вставте дополнительную строку между двумя существующими строками и установите значение  свойств высота  Auto . Этот ряд включает текстовое поле и кнопку.

 Шаблоны для проектирования интерфейса Windows phone

4. Элемент корневая  Сетка также содержит некоторые вложенные элементы ,каждой из них присваивается другая строка из внешней сетки, определяя  Grid.Row особственности. Теперь найдите элемент Сетка с именем TitleGrid и установите свойства текста первого элемента блока текста внутри внутренней сетки на “ Windows Phone 7 Series “. Аналогично Привет телефон  добавляется как следующий блок текста.

 Сетка в xaml

5. Теперь найдите  элемент Сетка с именем  ContentGrid, назначьте ему строку  1 , которая, как правило, пустая на начальном этапе, и вставьте следующий код разметки XAML внутри этого элемента.

<Grid.ColumnDefinitions> 
<ColumnDefinition Width="*" /> 
<ColumnDefinition Width="Auto"/> 
</ Grid.ColumnDefinitions> 
<TextBox Grid.Column = "0" Name = "MessageTextBox" FontSize = "{StaticResource PhoneFontSizeExtraLarge} "Маржа =" 20,20,10,20 "/> <Кнопка Grid.Column = "1" Name = "ClickMeButton" Content = "Click Me" HorizontalAlignment = "Right" Padding = "4" Маржа = "10,20 , 20,20 "Click =" ClickMeButton_Click "/>

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

<Grid Grid.Row="2"> 
<TextBlock Name = "BannerTextBlock« Стиль = "{StaticResource PhoneTextBodyTextStyle}" 
Foreground = "# FFFF9A00" HorizontalAlignment = "Stretch" 
TextWrapping = "Перенос" TextAlignment = "Центр" FontWeight = "Bold "/> 
</ Grid>

7. Нажмите  просмотреть Дизайн и изучите расположение элементов управления на странице.

В нашем следующем уроке мы узнаем, как “Обработать события пользовательского интерфейса”.


Смотрите также:

Оставить комментарий


7 × three =

Календарь
July 2014
M T W T F S S
« May    
 123456
78910111213
14151617181920
21222324252627
28293031  
Статистика
Rambler's Top100 Яндекс.Метрика
Apple Cdma и GSM разница Facetime как пользоваться Gpedit msc Windows 7 Hard reset HTC one x Hspa что это Java для ipad Kmz в gpx Восстановление иконок Windows 7 Восстановление удаленных файлов Windows 7 Значки для папок Windows 7 Как активировать ipad 2? Как изменить значок ярлыка? Как изменить устройство воспроизведения звука? Как настроить ipad mini через itunes? Как отключить обновление Google chrome? Как пользоваться командной строкой? Как разблокировать Айфон 5? Как убрать блокировку экрана Windows 8? Контекстное меню Windows 7 Плюсы и минусы айфона 5 Рабочая группа Windows 7 Секретные коды для iphone Сканер wifi сетей для Windows 7 Скрытые файлы в Windows 8 Сортировка контактов в iphone Увеличить шрифт на iphone 4 видео Удаление приложений Windows 8 Удалить дубликаты файлов Юсб модем для андроид планшета