Share via

  • Статья
45 дней с Windows Phone 7. День #2. Навигация между страницами.

Сегодня мы рассмотрим навигацию между страницами в Windows Phone 7 Silverlight приложениях. Данная тема важна по 2 причинам. Во-первых, Windows Phone 7 приложения практически всегда состоят из нескольких страниц, а во-вторых все телефоны на Windows Phone 7 имеют аппаратную кнопку «Назад», что позволяет пользователям легко возвращаться на предыдущую страницу. Завтра мы поговорим о кнопке «Назад» более подробно.

Навигация между страницами на телефоне напоминает таковую в Web приложениях. И, хотя, в случае с телефоном, у нас есть больший контроль над навигацией, с точки зрения пользователя различия минимальны. Более того, любое Silverlight приложение для Windows Phone 7 состоит как минимум из одной страницы, тогда как традиционные Silverlight приложения состоят как минимум из одного пользовательского элемента управления (UserControl), внутри которого может быть фрейм для навигации между страницами.

1. Новое Windows Phone 7 приложение.

Давайте создадим простое Windows Phone 7 приложение (как это сделать описано в дне #1), используя шаблон проекта Windows Phone Application. После создания проекта по умолчанию при редактировании страницы в левой части окна Visual Studio отображается полнофункциональный интерактивный дизайнер пользовательского интерфейса, а в правой XAML разметка.
Нажав на специальные кнопки, можно перейти в режим отображения только дизайнера или только XAML разметки. Кроме того, если выделить какой-либо элемент управления, например надпись с текстом «page name», то в окне Properties можно задать свойства данного элемента.

2. Добавление страниц.


Добавим в проект несколько страниц, чтобы у пользователя была возможность навигации между ними. Нажав правой кнопкой мыши на имени проекта в окне Solution Explorer выберем пункт Add-> New Item… Можно добавить два основных типа страниц: портретную (Windows Phone Portrait Page) и ландшафтную(Windows Phone Landscape Page). Различия между ними заключаются в ориентации экрана по умолчанию. Мы поговорим больше об ориентации экрана в четвёртый день, а сейчас просто выберем портретную страницу. Всего добавим в проект четыре страницы: Pasta.xaml, Sauce.xaml и Cheese.xaml.

3. Изменение заголовка страниц.

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

Перейдём к XAML коду страницы Pasta.xaml и изменим значение свойства «Text» текстового блока с именем «PageTitle» на «Pasta»:

        <TextBlock x:Name="PageTitle" Text="Pasta"Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

Изменим заголовок других страниц соответствующим образом.

4. Создание ссылок на страницы.

Для создания ссылок между страницами мы можем использовать несколько различных подходов. Первым из них является элемент управления «HyperlinkButton» – кнопка-ссылка. Плюс данного подхода состоит в том, что нам не требуется писать C# код для навигации, а достаточно добавить одну строку в XAML разметку.

Перейдём к XAML коду страницы MainPage и в элемент управления Grid с именем «ContentPanel»  добавим несколько ссылок, которые будут располагаться по вертикали одна за другой:

<StackPanel>    

<HyperlinkButton Content="Pasta" NavigateUri="/Pasta.xaml"/>   

 <HyperlinkButton Content="Sauce" NavigateUri="/Sauce.xaml"/>   

 <HyperlinkButton Content="Cheese" NavigateUri="/Cheese.xaml"/>

</StackPanel>

 


Запустим приложение. Загрузится эмулятор, в первый раз это занимает достаточно много времени, но потом всё будет существенно быстрее. Надо учесть только одно обстоятельство –  между сеансами отладки приложения эмулятор должен быть открыт, закрывать его не следует, так как придётся выполнять запуск ещё раз. Вместо этого просто остановите отладку в Visual Studio, оставив эмулятор открытым.

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

5. Навигация между страницами с помощью кода.

Вместо использования элемента управления «HyperlinkButton» мы можем перейти на другую страницу, написав некоторый код на языке C#. Давайте добавим после ссылок на странице MainPage.xaml кнопку:

        <Button Content="Pasta" />

Двойным кликом по кнопке в дизайнере перейдём к обработчику события нажатия данной кнопки:

        private void Button_Click(object sender, RoutedEventArgs e){}

Добавим код для перехода на другую страницу:

        NavigationService.Navigate(new Uri("/Pasta.xaml", UriKind.Relative));

 

Здесь используется специальный класс NavigationService, с помощью методов которого мы можем программно управлять навигацией:

GoBack Переходит к последней записи журнала переходов назад или создает исключение, если в журнале переходов назад нет записей.
GoForward Переходит к последней записи журнала переходов вперед или создает исключение, если в журнале переходов вперед нет записей.
Navigate Переходит к содержимому, заданному универсальным кодом ресурса (URI).
Refresh Перезагрузка текущей страницы.
StopLoading Останавливает еще не обработанные асинхронные переходы.

 

Запустите приложение, нажмите на кнопку, и Вы перейдёте на нужную страницу

.

Завтра мы подробнее поговорим про кнопку «Назад» и связанные с этим вопросы.

Пример кода.

Автор Jeff Blankenburg
Перевод и доработка Сергей Пугачёв