Навигация, ориентация экрана

Цель работы: Научиться создавать систему навигации в Silverlight-приложениях, управлять ориентацией страниц

29.1. Навигация по страницам

Silverlight-приложения обычно включают в себя несколько страниц, поэтому одной из первоочередных задач, которую должен научиться решать Silverlight-разработчик – это организация навигации по страницам. Создадим новый Silverlight-проект, назовем его P22_1.

Вызовем контекстное меню проекта и выберем команду Добавить>Создать элемент. Здесь, в окне создания нового элемента проекта, рис. 29.1., нам доступны различные виды страниц и программных файлов.

Сейчас нас интересует Страница Windows Phone в книжной ориентации. Мы собираемся разместить на этой странице некоторые подробности о программе, поэтому назовём её About.xaml и нажмём на кнопку Добавить.

увеличить изображение
Рис. 29.1. Добавление нового элемента

Страница добавлена в проект, а именно, в проекте появился файл About.xaml и файл кода к нему – About.xaml.cs. То, что страница добавлена в проект, не означает добавления в проект автоматических механизмов навигации. Если попытаться запустить проект в эмуляторе или на устройстве, мы, как и прежде, увидим лишь главную страницу. Это означает, что нам нужно создать систему навигации по страницам самостоятельно.

Добавим в проект еще одну страницу – назовём её Game.xaml и выберем для неё шаблон Страница Windows Phone в альбомной ориентации.

Поменяем название приложения на страницах на "НАВИГАЦИЯ", заголовки страниц установим в значения "главная", "о программе" и "игра" для страниц MainPage.xaml, About.xaml и Game.xaml.

В итоге внешний вид Обозревателя решений нашего проекта стал таким, рис. 29.2.

Рис. 29.2. Обозреватель решений для проекта P22_1

Пожалуй, самый простой способ организации навигации между страницами заключается в использовании так называемой кнопки-гиперссылки (элемент управления HyperlinkButton). Перетащим новую кнопку-гиперссылку на страницу MainPage, выведем на неё текст Играть (свойство Content), свойство этой кнопки NavigateUri установим в значение "/Game.xaml".

Фактически, эти действия привели к появлению в коде MainPage.xaml одной строчки следующего содержания, листинг 29.1.

          <HyperlinkButton Content="Играть" Height="30" HorizontalAlignment="Left" 
          Margin="141,211,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200"
          NavigateUri="/Game.xaml" />

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

Если теперь запустить наш проект, мы сможем, коснувшись этой ссылки, перейти на страницу Game.xaml.

Для возврата на главную страницу мы можем воспользоваться аппаратной кнопкой Назад. Такая практика стандартна для Silverlight-приложений для Windows Phone.

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

Добавим на главную страницу новый элемент управления Button, разместим на нём надпись О программе, и, выполнив двойной щелчок по кнопке, создадим обработчик её нажатия. Приведем обработчик к такому виду, листинг 29.2.

private void button1_Click(object sender, RoutedEventArgs e)
        {
            Uri about = new Uri("/About.xaml", UriKind.Relative);
            NavigationService.Navigate(about);
        }

Здесь мы сначала создали новый объект типа Uri (универсальный код ресурса), при его создании указали, во-первых, адрес страницы, на которую хотим перейти, он задаётся в строковом представлении, во-вторых, вид ссылки. В нашем случае это, то есть UriKind.Relative – относительная ссылка.

Далее, мы пользуемся классом NavigationService, и, в частности, его методом Navigate, которому и передаём только что сформированную ссылку на ресурс.

Класс Navigate, помимо переходов по Uri, предоставляет такие возможности, как перезагрузка текущей страницы (метод Refresh), переход к последней записи журнала переходов назад (GoBack), остановка еще не обработанных асинхронных переходов (StopLoading).

На рис. 29.3 вы можете видеть главную страницу нашего проекта на данном этапе работы.

Рис. 29.3. Главная страница проекта

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

Указатель в этот момент представляет собой тонкий крестик, вспомогательной линией отображается место, где произойдёт разбиение. После того, как мы получили сетку, состоящую из двух строк и одного столбца, перетащим элементы управления в полученные ячейки. Теперь мы сможем, например, перетаскивать элементы управления в поле страницы, не манипулируя ими раздельно, а перемещая всю их сетку (за левый верхний угол), выравнивать их на странице, ориентируясь на сетку. На рис. 29.4 вы можете видеть сетку с элементами в процессе редактирования.

увеличить изображение
Рис. 29.4. Сетка на странице, процесс редактирования

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

Сейчас мы продолжим развивать наш пример, поработаем с кнопкой Назад.