Bien démarrer : NavigationGetting started: Navigation

Ajout de la navigationAdding navigation

iOS fournit la classe UINavigationController pour faciliter la navigation : vous pouvez pousser et faire apparaître des affichages pour créer une hiérarchie de UIViewControllers qui définissent votre application.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.

En revanche, une application Windows 10 contenant plusieurs affichages présente une approche de la navigation plus proche de celle d’un site web.In contrast, a Windows 10 app containing multiple views takes more of a web-site approach to navigation. Vous pouvez imaginer vos utilisateurs passant de page en page en cliquant sur des contrôles tandis qu’ils explorent l’application.You can imagine your users hopping from page to page as they click on controls to work their way through the app. Pour plus d’informations, voir Informations de base relatives à la conception de la navigation.For more info, see Navigation design basics.

L’une des façons de gérer cette navigation dans une application Windows 10 consiste à utiliser la classe Frame .One of the ways to manage this navigation in a Windows 10 app is to use the Frame class. La procédure pas à pas suivante vous montre comment tester et mettre en pratique cette opération.The following walkthrough shows you how to try this out.

Sans quitter la solution commencée précédemment, ouvrez le fichier MainPage.xaml, puis ajoutez un bouton dans l’affichage Conception.Continuing with the solution you started earlier, open the MainPage.xaml file, and add a button in the Design view. Remplacez la valeur « Button » de la propriété Content du bouton par « Go To Page ».Change the button's Content property from "Button" to "Go To Page". Créez ensuite un gestionnaire pour l’événement Click du bouton, comme illustré dans la figure ci-dessous.Then, create a handler for the button's Click event, as shown in the following figure. Si vous ne vous rappelez pas comment procéder, consultez la procédure pas à pas décrite dans la section précédente (conseil : double-cliquez sur le bouton dans le mode Création).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).

ajout d’un bouton et de son événement click dans visual studio

Ajoutons une nouvelle page.Let's add a new page. Dans l’affichage Solution, appuyez sur le menu Projet, puis sur Ajouter un nouvel élément.In the Solution view, tap the Project menu, and tap Add New Item. Appuyez sur Page vierge comme le montre la figure ci-dessous, puis appuyez sur Ajouter.Tap Blank Page as shown in the following figure, and then tap Add.

ajout d’une nouvelle page dans visual studio

Ajoutons ensuite un bouton au fichier BlankPage.xaml.Next, add a button to the BlankPage.xaml file. Utilisons le contrôle AppBarButton et attribuons-lui une image de flèche Précédent : dans la vue XAML, ajoutez <AppBarButton Icon="Back"/> entre les éléments <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.

À présent, nous allons ajouter un gestionnaire d’événements au bouton : double-cliquez sur le contrôle en mode Design , Microsoft Visual Studio ajouter le texte « AppBarButton _ Click » à la zone de clic , comme illustré dans la figure suivante, puis ajoute et affiche le gestionnaire d’événements correspondant dans le fichier 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.

ajout d’un bouton précédent et de son événement click dans visual studio

De retour dans la vue XAML du fichier BlankPage.xaml, le code XAML (Extensible Application Markup Language) de l’élément <AppBarButton> doit maintenant ressembler à ceci :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"/>

Revenez au fichier BlankPage.xaml.cs et ajoutez ce code pour accéder à la page précédente dès que l’utilisateur appuie sur le bouton.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();
}

Pour finir, ouvrez le fichier MainPage.xaml.cs et ajoutez ce code.Finally, open the MainPage.xaml.cs file and add this code. Le fichier BlankPage s’ouvre après que l’utilisateur a appuyé sur le bouton.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));
}

Exécutez le programme à présent.Now, run the program. Appuyez sur le bouton « Go To Page » (Atteindre la page) pour accéder à l’autre page, puis appuyez sur le bouton doté de la flèche Précédent pour revenir à la page précédente.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.

La navigation entre les pages est gérée par la classe Frame.Page navigation is managed by the Frame class. Comme la classe UINavigationController dans iOS utilise les méthodes pushViewController et popViewController , la classe Frame des applications UWP fournit des méthodes Navigate et GoBack .As the UINavigationController class in iOS uses pushViewController and popViewController methods, the Frame class for UWP apps provides Navigate and GoBack methods. La classe Frame possède également une méthode appelée GoForward, qui comblera vos attentes.The Frame class also has a method called GoForward, which does what you might expect.

Cette procédure pas à pas crée une nouvelle instance de BlankPage chaque fois que vous y accédezThis walkthrough creates a new instance of BlankPage each time you navigate to it. (l’instance précédente sera automatiquement libérée, ou publiée).(The previous instance will be freed, or released, automatically). Si vous ne souhaitez pas qu’une nouvelle instance soit créée à chaque fois, ajoutez le code suivant au constructeur de la classe BlankPage dans le fichier 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. Cela active le comportement 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;
}

Vous pouvez également vous procurer ou définir la propriété CacheSize de la classe Frame pour gérer le nombre de pages de l’historique de navigation qu’il est possible de mettre en cache.You can also get or set the Frame class's CacheSize property to manage how many pages in the navigation history can be cached.

Pour plus d’informations sur la navigation, voir Navigation et Exemple d’animations de personnages XAML.For more info about navigation, see Navigation and XAML personality animations sample.

Remarque    Pour plus d’informations sur la navigation pour les applications UWP en JavaScript et HTML, consultez démarrage rapide : utilisation de la navigation sur une seule page.Note  For info about navigation for UWP apps using JavaScript and HTML, see Quickstart: Using single-page navigation.  

Étape suivanteNext step

Bien démarrer : AnimationGetting started: Animation