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

Вступление

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

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

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

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

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

Навигацию между страницами будем делать при помощи гиперссылок. Найдите на панели инструментов элемент 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, то тем самым вы закроете приложение.

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

Мы осуществили навигацию при помощи 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();
}

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

Иногда требуется не просто перейти на другую страницу, но и передать ей некоторые данные с предыдущей страницы. Добавьте на первую страницу текстовое поле и кнопку под именем 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;
}

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

Реклама