Создание приложения для Windows Phone 7 от начала до конца. Часть 5. Навигация между страницами, разметка страниц

Предыдущая часть

Если в вашем приложении больше одной страницы, вам придётся предоставить пользователям возможность перемещаться между этими страницами.

Создание разметки (layout) — это процесс добавления панелей, размещения элементов управления и установки свойств для достижения желаемого вида и поведения ваших страниц.

В этой части вы узнаете:

• Как реализовать переход на другую страницу с помощью гиперссылки.
• Как реализовать переход на другую страницу с помощью сервиса навигации.
• Какие стандартные панели используются на странице.
• Что такое XAML и как он используется для создания пользовательского интерфейса.
• Как разместить элементы управления на странице.
• Как создать динамическую разметку.

Навигация между страницами.

Помимо автоматической навигации при запуске и завершении работы, навигация обычно происходит в результате задействования элемента управления пользовательского интерфейса, такого как гиперссылка или кнопка, или нажатия аппаратной кнопки «Назад». Кнопка «Назад» автоматически осуществляет переход назад без какой-либо специальной обработки.

Самым простым способом реализовать навигацию между страницами является использование элемента управления HyperlinkButton. Вы можете использовать его свойство NavigationUri для того, чтобы перейти к нужной странице. В следующем примере показано, как перейти на страницу с именем SecondPage.xaml.

1. <HyperlinkButton NavigateUri="SecondPage.xaml" />

* This source code was highlighted with Source Code Highlighter.

Если вы не хотите использовать HyperlinkButton, вы можете реализовать навигацию с помощью класса NavigationService. Этот класс содержит несколько свойств, методов и событий, которые помогут вам с навигацией. Вы можете использовать метод NavigationService.Navigate для перехода к определенной странице. В следующем фрагменте кода показан обработчик событий клика на кнопку панели приложения, который вызывает метод Navigate.

1. private void FillupButton_Click(object sender, EventArgs e)
2. {
3.     NavigationService.Navigate(
4.         new Uri("/views/FillupPage.xaml", UriKind.Relative));
5. }

* This source code was highlighted with Source Code Highlighter.

Метод Navigate всегда создает новый экземпляр страницы по указанному URI. Вы также можете добавить параметры URI, чтобы инициализировать запрошенную страницу в заданное состояние (приложение Fuel Tracker не передаёт информацию о состоянии в параметрах URI). Другие варианты для передачи данных между страницами включают в себя использование свойств на уровне приложения, внешние служебные классы или свойство PhoneApplicationService.State.

Для перехода назад вы можете использовать метод NavigationService.GoBack, который возвращает к экземпляру предыдущей страницы. Конечно, это дублирует функциональность кнопки «Назад», так что вы, скорее всего, будете вызывать этот метод как часть какой-либо другой функциональности.

Например, в приложении Fuel Tracker на странице информации об автомобиле и странице информации о заправке есть кнопка «Сохранить», которая сохраняет внесенные пользователем изменения, а затем осуществляет переход назад к первой странице со сводной информацией. Если пользователь нажмёт вместо этого кнопку «Назад», переход назад произойдёт без сохранения данных. Приложение должно всегда запрашивать подтверждение перед тем, как сбросить пользовательские данные, поэтому полезно реагировать на событие нажатия кнопки «Назад». Дополнительную информацию вы сможете найти в части «Валидация вводимых данных».

Рекомендация по проектированию интерфейса:
Вы должны реализовать только такое поведение кнопки «Назад», которое осуществляет переход назад или скрывает контекстное меню и диалоговые окна. Все другие реализации запрещены.

Разметка страницы: стандартные панели

При создании нового проекта Windows Phone Application в Visual Studio, вы автоматически получаете несколько панелей и элементов для разметки вашей страницы. Большинство ваших решений по разметке будет относиться к панели содержимого (ContentPanel). На следующем изображении показаны стандартные панели и элементы для страницы в портретной ориентации.

Введение в XAML

Пользовательский интерфейс приложений для Windows Phone создаётся с помощью декларативного языка разметки, который называется Extensible Application Markup Language (XAML). XAML — это файл формата XML, который позволяет отделить определение пользовательского интерфейса от логики времени выполнения (run-time logic) с помощью code-behind (отделённый код) файлов, присоединяющихся к разметке через определение разделяемого класса (partial class). Если вы знакомы с веб-программирования, вы можете думать о XAML, как об HTML, но более мощном. Как и HTML, XAML состоит из элементов и атрибутов.

Visual Studio 2010 Express for Windows Phone и Expression Blend for Windows Phone позволяет вам перетаскивать элементы управления на поверхность дизайнера, размещать их и установливать свойства визуальным способом. Эти инструменты генерируют необходимый XAML-код для вас, так что вам не нужны обширные знания XAML для того, чтобы создать приложение для Windows Phone. Тем не менее, общее представление полезно для тех случаев, когда вы посчитаете необходимым изменить XAML-код вручную. Редактор XAML в Visual Studio предлагает IntelliSense и statement comletion (автозавершение операторов). Кроме того, изображение в дизайнере обновляется по мере изменения XAML. Если вам нужна помощь по конкретному элементу, наведите курсор на этот элемент и нажмите клавишу F1, чтобы перейти к разделу справки по этому элементу.

В XAML-файле каждый объект пользовательского интерфейса является элементом XAML, а свойства этого объекта устанавливаются с помощью атрибутов. XAML неявно передает отношение child/parent (дочерний/родительский объект) разметки пользовательского интерфейса. Следующий XAML-код отображает панель (StackPanel), которая содержит изображение (Image) и некоторый текст (TextBlock). В этом примере свойства устанавливаются с помощью синтаксиса атрибутов.

1. <!--Car photo and name.-->
2. <StackPanel Orientation="Horizontal" Margin="12,130" Height="110"
3.     VerticalAlignment="Top">
4.     <Image Height="75" Width="75" Margin="15" Stretch="UniformToFill"
5.     Source="{Binding Picture}"/>
6.     <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
7. </StackPanel>

* This source code was highlighted with Source Code Highlighter.

На следующем изображении показано, как этот XAML-код отобразится при запуске приложения.

Размещение элементов управления

Вы можете начать создавать разметку, просто перетаскивая элементы из панели элементов Visual Studio на поверхность дизайнера. Как только вы что-то изменяете в режиме дизайна, XAML-код обновляется. На следующем изображении показаны некоторые визуальные индикаторы, предлагаемые дизайнером Visual Studio для размещения элементов управления, такие как линии привязки (snap lines), сетки (gridlines) и предельные линии (margin lines).



При перемещении элементов управления по поверхности дизайнера, используются настройки полей (margin) и конкретные значения высоты и ширины, чтобы определить точное положение и размер элементов управления. Предельная линия от элемента управления до края приложения показывает, что поле является фиксированным и расстояние от элемента управления до края приложения будет оставаться неизменным. Какие поля являются фиксированными может повлиять на то, как элементы управления изменять размеры или переместятся при изменении размеров приложения.

Редактор полей в окне Properties отображает настройки каждого поля (margin) и как это влияет на размещение текстового поля (text box). На следующем изображении показан редактор полей.



Вы также можете размещать элементы управления, используя элемент управления разметкой Canvas. Элементы управления размещаются на Canvas'e на основе указанных в пикселях координат x и y.

Рекомендация по проектированию интерфейса:
Элемент управления Canvas использует основанную на пикселях разметку и может обеспечить лучшую производительность, чем элемент управления Grid для глубоко встроенных (embedded) или вложенных (nested) элементов управления в приложениях с неизменяющейся ориентацией.

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

Создание динамической разметки

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

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

• Элемент управления Grid позволяет размещать элементы в виде строк и столбцов.
• Элемент управления StackPanel автоматически размещает дочерние элементы вертикально или горизонтально.

Рекомендация по проектированию интерфейса:
Grid является лучшим выбором, когда фрейм приложения должен расширяться, сжиматься или поворачиваться.

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

Есть две важные настройки размера для динамической разметки.

• Auto — позволяет элементам управления изменять размер в соответствии с их содержимым, даже если содержимое изменяет размер.
• * (Звездочка) — распределяет свободное пространство между строками и столбцами элемента управления Grid в пропорций, соответствующей установленным весам.

Для того, чтобы установить свойства StackPanel для динамического поведения:

1. Установите для свойств «Height» и «Width» значение "Auto", что означает, они будут заполнять всю ширину или высоту родительской страницы или панели.

Для того, чтобы установить свойства Grid для динамического поведения:

1. Добавьте строки и столбцы в Grid с помощью окна «Properties» или дизайнера.
2. Укажите размер Auto или звездочка (*) для строк и столбцов.
   В следующем примере показан элемент управления Grid с именем ContentPanel на странице информации об автомобиле в приложении Fuel Tracker. Высота первых трёх строк установлена в Auto, а четвертая имеет значение *. Это означает, что высота первых трёх строк будет определяться размером их содержимого, а последняя строка займет оставшееся место. Ширина первого столбца установлена в Auto, а вторая колонка займёт оставшееся место.
   

   1. <Grid.RowDefinitions>
   2.     <RowDefinition Height="Auto"/>
   3.     <RowDefinition Height="Auto"/>
   4.     <RowDefinition Height="Auto"/>
   5.     <RowDefinition Height="*"/>
   6. </Grid.RowDefinitions>
   7. <Grid.ColumnDefinitions>
   8.     <ColumnDefinition Width="Auto"/>
   9.     <ColumnDefinition Width="*"/>
   10. </Grid.ColumnDefinitions>

   * This source code was highlighted with Source Code Highlighter.

3. Разместите дочерние элементы управления в конкретных строках и столбцах, используя свойства Grid.Row и Grid.Column, или перетащив их в нужное место на поверхность дизайнера.
4. При необходимости назначьте дочерним элементам управления несколько строк или столбцов с помощью свойств Grid.RowSpan и Grid.ColumnSpan.
5. Рассмотрите каждое фиксированное поле (margin) для элементов управления и убедитесь, что они необходимы.
6. Рассмотрите размер для всех элементов управления и при необходимости удалитe свойства Height и Width, установите вместо них свойства MinHeight или MinWidth.

Установка свойств MinHeight и MinWidth для текстовых элементов управления предотвращает масштабирование текста до размеров, когда он становится нечитаемым.

Рекомендация по проектированию интерфейса:
Избегайте использования шрифтов, размеры которых меньше 15 пунктов. Вы должны в первую очередь использовать шрифт Segoe.

В приложении Fuel Tracker большинство элементов управления размещены динамически с использованием элементов управления Grid и StackPanel. На следующем изображении показана страница сведений об автомобиле, которая использует Grid. Строки и столбцы были определены с динамическими размерами (Auto и звёздочка). На изображении справа вы можете видеть, что размер текста был увеличен и разметка автоматически подстроилась.



Следующая часть