Навигация в приложении

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

В Листинге 17.1 приведен код страницы MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="P4_1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <!--LayoutRoot представляет корневую сетку, где размещается все содержимое страницы-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel содержит имя приложения и заголовок страницы-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="НАВИГАЦИЯ" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Text="вход"/>
        </StackPanel>

        <!--ContentPanel — поместите здесь дополнительное содержимое-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,0">
            <TextBlock HorizontalAlignment="Left" Margin="31,87,0,0" T
TextWrapping="Wrap" 
Text="Имя пользователя" VerticalAlignment="Top" Width="179"/>
            <Button x:Name="cmdEnter" Content="Вход" HorizontalAlignment="Left" Margin="31,221,0,0" 
VerticalAlignment="Top" Width="132" Click="cmdEnter_Click"/>
            <TextBox x:Name="txtLogin" HorizontalAlignment="Left" 
Height="73" Margin="24,115,0,0" 
Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Top" Width="425"/>
        </Grid>
       
    </Grid>
</phone:PhoneApplicationPage>

На копии экрана, кроме того, видно, что при выводе этой страницы не отображается системная строка состояния, расположенная по умолчанию в верхней части экрана. Мы скрыли её благодаря следующей настройке: shell:SystemTray.IsVisible="False".

Как можно видеть из кода, по нажатию на кнопку cmdEnter выполняется вызов обработчика её события Click. Код файла MainPage.xaml.cs приведен в Листинге 17.2. Для организации навигации по страницам приложения используется объект System.Windows.Navigation.NavigationService (http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.navigation.navigationservice%28v=vs.105%29.aspx)

using System;
using System.Windows;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;

namespace P4_1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Конструктор
        public MainPage()
        {
            InitializeComponent();

        }

        private void cmdEnter_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/CommonPage.xaml", UriKind.Relative));
        }


        protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            base.OnNavigatingFrom(e);

            if (txtLogin.Text == "")
            {
               MessageBox.Show("Нужно ввести учетные данные");
               e.Cancel = true;
            }
            
        }
        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            NavigationService.RemoveBackEntry();
            base.OnNavigatedFrom(e);
        }
       
    }
}

Здесь мы используем обработчик события нажатия на кнопку для навигации к странице CommonPage.xaml. Затем мы обрабатываем событие OnNavigatingFrom. Оно вызывается до выполнения перехода, здесь мы можем, в частности, отменить переход. Мы проверяем, заполнено ли текстовое поле, если это не так – показываем пользователю соответствующее сообщение и отменяем навигацию. В противном случае никаких действий не предпринимаем. Если же поле заполнено, в обработчике OnNavigatingFrom мы не предпринимаем никаких действий, вызывается обработчик OnNavigatedFrom. На данном этапе стек навигации уже содержит запись о странице MainPage.xaml, при обычном ходе событий это позволит перейти со следующей страницы на данную. Нам нужно иное поведение системы, поэтому мы удаляем запись из журнала и пользователь видит страницу CommonPage.xaml, рис. 17.3.

На ней размещена кнопка-гиперссылка для перехода на страницу сведений о программе. Как можно видеть из XAML-кода страницы (Листинг 17.3) настройка адреса для перехода при использовании кнопки-гиперссылки, производится непосредственно в разметке страницы, обработчик события нам здесь не нужен.

Кроме того, на странице используется панель приложения. Здесь имеется одна кнопка, изображение для которой находится в папке Images нашего проекта (рис. 17.4.).

Здесь использовано стандартное изображение, набор таких изображений, которые присутствуют в поставке средств разработки, можно найти по адресу C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons. Причем, здесь имеется папки с готовыми изображениями Dark и Light. Значки, расположенные в первой из них, можно использовать и при установках светлой темы, и при установках тёмной темы на устройстве. Они представляют собой PNG-изображения с прозрачным фоном и изображениями, выполненными белым цветом. Такой же подход следует использовать при создании собственных значков для кнопок панели управления.

<phone:PhoneApplicationPage
    x:Class="P4_1.CommonPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot представляет корневую сетку, где размещается все содержимое страницы-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel содержит имя приложения и заголовок страницы-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="НАВИГАЦИЯ" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="страница" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel – поместите здесь дополнительное содержимое-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <HyperlinkButton Content="О программе" HorizontalAlignment="Left" Margin="140,192,0,0" 
VerticalAlignment="Top" NavigateUri="/About.xaml"/>
        </Grid>
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
            <shell:ApplicationBarIconButton IconUri="/Images/questionmark.png" 
Text="О программе" Click="ApplicationBarIconButton_Click"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Настройки" 
Click="ApplicationBarMenuItem_Click"/>
                <shell:ApplicationBarMenuItem Text="Команда меню"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

Обратите внимание на то, что у панели приложения свойство Mode установлено в значение Minimized. Это приводит к тому, что панель занимает минимум места на экране, однако, для доступа к кнопкам её нужно развернуть. Какую именно панель использовать – стандартную или уменьшенную – можно решить, основываясь на необходимости постоянной доступности её кнопок. Кнопкам и командам меню панели можно назначать обработчики, они располагаются в коде страницы (Листинг 17.4.).

using System;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;

namespace P4_1
{
    public partial class CommonPage : PhoneApplicationPage
    {
        public CommonPage()
        {
            InitializeComponent();
        }

        private void ApplicationBarMenuItem_Click(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri("/Pages/Settings.xaml", UriKind.Relative));
        }

        private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri("/About.xaml", UriKind.Relative));
        }
    }
}

Навигация с помощью элементов панели приложения ничем не отличается от навигации с помощью кнопок. Обратите внимание на обращение к странице, расположенной не в корневом разделе проекта, а в одном из подразделов. Путь к странице Settings.xaml (рис. 17.4.) указывается относительно корневого раздела: /Pages/Settings.xaml.

На странице Settings.xaml (Листинг 17.5) мы использовали элемент управления Pivot (создав её по соответствующему шаблону, хотя это не принципиально, можно добавить его на страницу самостоятельно), на одном из экранов которого расположена кнопка для "выхода из системы", то есть – в нашем случае для перехода на первую страницу приложения и очистки стека навигации.

<phone:PhoneApplicationPage
    x:Class="P4_1.Pages.Settings"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot представляет корневую сетку, где размещается все содержимое страницы-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Элемент управления Pivot-->
        <phone:Pivot Title="НАВИГАЦИЯ">
            <!--Первый элемент Pivot-->
            <phone:PivotItem Header="цвет">
                <Grid/>
            </phone:PivotItem>

            <!--Второй элемент Pivot-->
            <phone:PivotItem Header="размер">
                <Grid/>
            </phone:PivotItem>

            <!--Третий элемент Pivot-->
            <phone:PivotItem Header="общие">
                <Button x:Name="cmdLogOut" Content="Выйти из системы" 
HorizontalAlignment="Left" Height="83" Margin="52,84,0,0" 
VerticalAlignment="Top" Width="259" Click="cmdLogOut_Click"/>
            </phone:PivotItem>
        </phone:Pivot>
    </Grid>

В файле кода страницы (Листинг 17.6) мы, обрабатывая событие кнопки cmdLogOut, выполняем переход на страницу MainPage.xaml и в событии OnNavigatedFrom очищаем стек. В нашем случае такой подход работает, однако, если бы мы инициировали переход с данной страницы на другие страницы, каждый раз при вызове события OnNavigatedFrom стек не нужно было бы очищать. Следовало бы проверять, на какую страницу осуществляется переход (например, воспользовавшись свойством CurrentSource объекта NavigationService), и очищать стек лишь при переходе на MainPage.xaml. В нашем случае это не нарушает логику приложения, в иных случаях нужно обратить на это внимание.

</phone:PhoneApplicationPage>

using System;
using System.Windows;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;

namespace P4_1.Pages
{
    public partial class Settings : PhoneApplicationPage
    {
        public Settings()
        {
            InitializeComponent();
        }

        private void cmdLogOut_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            while (NavigationService.CanGoBack)
            {
                NavigationService.RemoveBackEntry();
            }
            base.OnNavigatedFrom(e);
        }
    }
}

Выводы

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

Задание

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

Дополнительные материалы

К данной лекции подготовлено видеоприложение и демонстрационный программный проект.