2.12 Создаем страницы с навигацией

Теперь мы узнаем, как можно сделать навигацию между страницами. В предыдущем примере приложение состояло всего лишь одной страницы. Иногда этого недостаточно. В Silverlight навигация между страницами осуществляется очень просто. В этом вы сейчас сами убедитесь. Заодно вы увидите, как работает кнопка Back (Назад) в подобных приложениях. С ее помощью можно возвращаться на предыдущие страницы (напоминает поведение браузеров при посещении веб-страниц).

2.12.1 Создание приложения с навигацией

Запустите Visual Studio и создайте новый проект PageNavigation (смотрите День первый). Далее необходимо добавить еще несколько новых страниц. Щелкните правой кнопкой мыши на имени проекта в Solution Explorer и выберите команду Add→New Item… и в диалоговом окне выберите элемент Windows Phone Portrait Page (портретная ориентация).

Сейчас мы пока не будем обсуждать вопросы, связанные с ориентацией экрана. Создайте три новых страницы Page1.xaml, Page2.xaml, Page3.xaml. Так как они выглядят совершенно одинаково, нам будет трудно ориентироваться среди них. Предлагаю сделать следующее. Откройте каждую созданную страницу и измените текст в них. Я, например, в место слов PAGE NAME использовал имена котов: Рыжик, Барсик, Васька. Теперь мы не запутаемся.

2.12.2 Создание гиперссылок на другие страницы

Навигацию между страницами будем делать при помощи гиперссылок. Найдите на панели инструментов элемент HyperlinkButton и добавьте трижды данный элемент на панель эмулятора. После добавления измените код XAML следующим образом:

<HyperlinkButton Content=«Рыжик» NavigateUri="/page1.xaml»

Name=«hiperlinkbutton1» Height=«30» Width=«200»

HorizontalAlignment=«Left» VerticalAlignment=«Top»

Margin=«0,6,0,0» />

<HyperlinkButton Content=«Барсик» NavigateUri="/page2.xaml»

Name=«hiperlinkbutton2» Height=«30» Width=«200»

HorizontalAlignment=«Left» VerticalAlignment=«Top»

Margin=«0,6,0,0» />

<HyperlinkButton Content=«Васька» NavigateUri="/page3.xaml»

Name=«hiperlinkbutton3» Height=«30» Width=«200»

HorizontalAlignment=«Left» VerticalAlignment=«Top»

Margin=«0,6,0,0» />

Мы поменяли у гиперссылок текст, а также установили размеры и расположение на странице. При желании этого же результата можно добиться, изменяя соответствующие свойства в окне свойств. И самое главное – мы указали в атрибуте NavigateUri нужные имена страниц.

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

2.12.3 Навигация через код

Мы осуществили навигацию при помощи XAML-кода. Такого же результата можно добиться и через код на C#. Для этого добавим в проект три новых элемента Button (кнопка). Чтобы не писать одинаковый код для каждой кнопки, создадим общий обработчик событий для них. Для этого нам нужно знать имена кнопок.

[XAML]

<Button Content=«Рыжик» Height=«72» HorizontalAlignment=«Left» Margin=«12,40,0,0»

Name=«button1» VerticalAlignment=«Top» Width=«160»

Click=«Button_Click» />

<Button Content=«Барсик» Height=«72» HorizontalAlignment=«Left» Margin=«12,120,0,0»

Name=«button2» VerticalAlignment=«Top» Width=«160»

Click=«Button_Click» />

<Button Content=«Васька» Height=«72» HorizontalAlignment=«Left» Margin=«12,200,0,0»

Name=«button3» VerticalAlignment=«Top» Width=«160»

Click=«Button_Click» />

[C#]

private void Button_Click (object sender, RoutedEventArgs e)

{

Button clickedbutton = sender as Button;

switch (clickedbutton.Name)

{

case «button1»: NavigationService.Navigate (new Uri (»/page1.xaml», UriKind.Relative));

break;

case «button2»:

NavigationService.Navigate (new Uri (»/page2.xaml», UriKind.Relative));

break;

case «button3»:

NavigationService.Navigate (new Uri (»/page3.xaml», UriKind.Relative));

break;

}

}

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

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

private void button1_Click (object sender, RoutedEventArgs e)

{

NavigationService. GoBack ();

}

2.12.4 Передача параметров

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

Добавьте код для обработчика щелчка кнопки

private void passParam_Click (object sender, RoutedEventArgs e)

{

NavigationService.Navigate (new Uri (»/SecondPage. xaml? msg=" + textBox1.Text, UriKind.Relative));

}

Вы видите, что при навигации на вторую страницу мы передаем строковые данные, которые берутся из текстового поля. Чтобы получить передаваемые данные, добавьте на второй странице текстовый блок (TextBlock) под именем textBlock1. В файле SecondPage. xaml. cs создайте следующий метод:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

{

base. OnNavigatedTo (e);

string msg = «»;

if (NavigationContext.QueryString.TryGetValue («msg», out msg)) textBlock1.Text = msg;

}

Запустите приложение, введите текст на первой странице и убедитесь, что он отображается на второй странице.

2.12.5 Аппаратная кнопка Back

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

Переопределяем работу кнопки Back

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

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)

{

// Ваш код здесь

e.Cancel = true; //Cancels the default behavior.

}

Давайте попробуем посмотреть работу переопределенной кнопки на примере. Возьмем предыдущий проект с навигацией по страницам PageNavigation и откроем редактор кода для страницы Page3.xaml. cs. Напишем следующий код:

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)

{

// Ваш код здесь

NavigationService.Navigate (new Uri (»/page1.xaml», UriKind.Relative));

e.Cancel = true; //Cancels the default behavior.

}

Запустим проект, нажмем на кнопку или ссылку Васька. Далее нажимаем аппаратную кнопку Back и убеждаемся, что теперь мы возвращаемся не на основную страницу MainPage. xaml, а на страницу Page1.xaml.

Как видите, код работает – мы переопределили работу аппаратной кнопки под свои нужды. Но не спешите радоваться. С переопределением кнопки Back нужно быть очень осторожным. Если вы еще не закрыли пример и находитесь на странице Page1.xaml (страница Рыжика), то нажмите на Back еще раз. Как и ожидалось, вы вернетесь обратно на Page3.xaml, с которого вы пришли. Нажимаем кнопку Back и замечаем, что снова попадаем на страницу Рыжика. Получился замкнутый круг – мы больше не можем никуда попасть и попеременно оказываемся на страницах Page1.xaml и Page3.xaml.

Поэтому тщательно тестируйте свою программу, если решили изменить поведение кнопки Back. Иначе, вы рискуете попасть в неприятную ситуацию.

Кнопка Back для XNA-приложений

Описанный нами пример в основном применяется для Silverlight-приложений. Мы еще не знакомы с разработкой приложений на основе XNA, но, забегая вперед, скажу, что в XNA-программах есть класс GamePad, имеющим cвойство Buttons.Back. Поэтому вам придется встречаться с такой конструкцией:

// выйти, если нажата кнопка Back

if(GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

2.13 Ориентация дисплея

Пора поговорить о вашей ориентации. Если вы, разговаривая по телефону, держите его правой рукой, то вы… обычный пользователь, который держит телефон в портретной ориентации (вертикально). Если вы смотрите на устройстве фотографии, то удобнее его развернуть горизонтально – это уже альбомная ориентация. О том, как в программах для Windows Phone 7 управлять обеими ориентациями, и будет посвящена сегодняшняя статья.

2.13.1 Ориентация

Вам необходимо запомнить, что существуют два положения экрана. Вертикальное расположение называется портретным (Portrait), а горизонтальное – альбомным (Landscape). По умолчанию, приложения на Silverlight запускаются в портретном режиме, а XNA-приложения запускаются в альбомном, так как игры лучше смотрятся именно в этом режиме (посмотрите на ваш монитор). Но вы можете управлять режимами исходя из ваших задач. Жесткой привязки к ориентации нет. Более того, часто необходимо поддерживать два режима одновременно.

2.13.2 Рекомендация по проектированию интерфейса

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

Существуют различные способы гарантировать правильное отображение содержимого как в портретной, так и в альбомной ориентации. Два основных метода – это прокрутка (scrolling) и сетка (grid layout). Эти методы могут использоваться отдельно или в сочетании друг с другом.

Scrolling использует элемент управления StackPanel, который находится в элементе управления ScrollViewer. Используйте этот метод, если содержимое отображается в виде списка или если различные элементы управления следуют один за другим на странице. StackPanel позволяет установить порядок расположения дочерних элементов одного за другим, а элемент управления ScrollViewer позволяет прокручивать содержимое StackPanel, если элементы пользовательского интерфейса не помещаются на экране.

2.13.3 Управление ориентацией экрана в Silverlight