Приступая к работе: НавигацияGetting started: Navigation

Добавление навигацииAdding navigation

iOS предоставляет класс UINavigationController, чтобы помочь в создании навигации в приложении: вы можете использовать представления push и pop для создания иерархии UIViewControllers, определяющей ваше приложение.iOS provides the UINavigationController class to help with in-app navigation: you can push and pop views to create the hierarchy of UIViewControllers that define your app.

Напротив, приложение для Windows 10, содержащее несколько представлений, скорее использует подход к навигации по аналогии с веб-сайтом.In contrast, a Windows 10 app containing multiple views takes more of a web-site approach to navigation. Вы можете представить своих пользователей, которые переходят между «страницами» приложения по мере нажатия элементов управления.You can imagine your users hopping from page to page as they click on controls to work their way through the app. Подробнее см. в разделе Основы проектирования навигации.For more info, see Navigation design basics.

Для приложения Windows 10 один из способов управления этой навигацией — использование класса Frame.One of the ways to manage this navigation in a Windows 10 app is to use the Frame class. Эти возможности описаны в указанном ниже пошаговом руководстве.The following walkthrough shows you how to try this out.

Продолжим работу с решением, которую вы начали ранее. Откройте файл MainPage.xaml и добавьте кнопку в представление конструирования.Continuing with the solution you started earlier, open the MainPage.xaml file, and add a button in the Design view. Задайте для свойства кнопки Content значение "Go To Page" вместо "Button".Change the button's Content property from "Button" to "Go To Page". Затем создайте обработчик для события кнопки Click, как показано на следующем рисунке.Then, create a handler for the button's Click event, as shown in the following figure. Если вы не помните, как это делать, обратитесь к пошаговому руководству в предыдущем разделе (совет: дважды щелкните кнопку в представлении конструирования).If you don't remember how to do this, review the walkthrough in the previous section (Hint: double-click the button in the Design view).

Добавление кнопки и события нажатия в Visual Studio

Давайте добавим новую страницу.Let's add a new page. В представлении Решение коснитесь меню Проект, а затем коснитесь элемента Добавление нового элемента.In the Solution view, tap the Project menu, and tap Add New Item. Выберите Пустая страница, как показано на следующем рисунке, и затем нажмите кнопку Добавить.Tap Blank Page as shown in the following figure, and then tap Add.

Добавление новой страницы в Visual Studio

Затем добавьте кнопку в файл BlankPage.xaml.Next, add a button to the BlankPage.xaml file. Мы будем использовать элемент управления AppBarButton с изображением стрелки, указывающей назад: в представлении XAML добавьте <AppBarButton Icon="Back"/> между элементами <Grid> </Grid>.Let's use the AppBarButton control, and let's give it a back arrow image: in the XAML view, add <AppBarButton Icon="Back"/> between the <Grid> </Grid> elements.

Теперь добавим обработчик событий к кнопке: дважды щелкните элемент управления в режиме конструктора , после чего Microsoft Visual Studio добавит текст «AppBarButton _ Click» к полю щелчка , как показано на следующем рисунке, а затем добавляет и отображает соответствующий обработчик событий в файле BlankPage.XAML.cs.Now, let's add an event handler to the button: double-click the control in the Design view and Microsoft Visual Studio adds the text "AppBarButton_Click" to the Click box, as shown in the following figure, and then adds and displays the corresponding event handler in the BlankPage.xaml.cs file.

Добавление кнопки “Назад” и события нажатия в Visual Studio

Если вы вернетесь к представлению XAML файла BlankPage.xaml, код XAML элемента <AppBarButton> будет выглядеть так:If you return to the BlankPage.xaml file's XAML view, the <AppBarButton> element's Extensible Application Markup Language (XAML) code should now look like this:

<AppBarButton Icon="Back" Click="AppBarButton_Click"/>

Вернитесь в файл BlankPage.xaml.cs и добавьте следующий код для перехода на предыдущую страницу при нажатии кнопки пользователем.Return to the BlankPage.xaml.cs file, and add this code to go to the previous page after the user taps the button.

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    Frame.GoBack();
}

В завершение откройте файл MainPage.xaml.cs и добавьте следующий код.Finally, open the MainPage.xaml.cs file and add this code. Он открывает страницу BlankPage после нажатия кнопки пользователем.It opens BlankPage after the user taps the button.

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.
    Frame.Navigate(typeof(BlankPage1));
}

Теперь запустите программу.Now, run the program. Нажмите кнопку "Go To Page", чтобы перейти на другую страницу, а затем нажмите кнопку со стрелкой назад, чтобы вернуться на предыдущую страницу.Tap the "Go To Page" button to go to the other page, and then tap the back-arrow button to return to the previous page.

Для управления навигацией по страницам используется класс Frame.Page navigation is managed by the Frame class. Так как класс уинавигатионконтроллер в iOS использует методы пушвиевконтроллер и попвиевконтроллер , класс Frame для приложений UWP предоставляет методы navigate и GoBack .As the UINavigationController class in iOS uses pushViewController and popViewController methods, the Frame class for UWP apps provides Navigate and GoBack methods. Класс Frame также содержит метод под названием GoForward, который выполняет то, что вы ожидаете.The Frame class also has a method called GoForward, which does what you might expect.

В этом пошаговом руководстве при каждом переходе на страницу создается новый экземпляр BlankPage.This walkthrough creates a new instance of BlankPage each time you navigate to it. (Предыдущий экземпляр будет автоматически освобожден (высвобожден).(The previous instance will be freed, or released, automatically). Если вы не хотите, чтобы при каждом переходе на страницу создавался новый экземпляр, добавьте этот код в конструктор класса BlankPage в файле BlankPage.xaml.cs.If you don't want a new instance to be created each time, add the following code to the BlankPage class's constructor in the BlankPage.xaml.cs file. Он включает режим NavigationCacheMode.This will enable the NavigationCacheMode behavior.

public BlankPage()
{
    this.InitializeComponent();
    // Add the following line of code.
    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

Для указания числа кэшируемых страниц в журнале навигации вы также можете получить или задать свойство CacheSize класса Frame.You can also get or set the Frame class's CacheSize property to manage how many pages in the navigation history can be cached.

Подробнее о навигации см. в разделах Навигация и Пример анимаций персонализации на XAML.For more info about navigation, see Navigation and XAML personality animations sample.

Примечание    . Сведения о навигации по приложениям UWP с помощью JavaScript и HTML см. в разделе Краткое руководство. использование одностраничной навигации.Note  For info about navigation for UWP apps using JavaScript and HTML, see Quickstart: Using single-page navigation.  

Дальнейшие действияNext step

Приступая к работе: АнимацияGetting started: Animation