Xamarin.Forms NavigationPage
Xamarin.Forms NavigationPage
-
Objectif
- Connaitre la classe Xamarin.Forms ContentPage
-
Introduction
- Une classe NavigationPage permet d’empiler les pages les unes sur les autres à l’aide de la séquence Dernier entré, premier sorti.
- La NavigationPage classe fournit une navigation hiérarchique où l’utilisateur peut naviguer dans les pages, en avant et en arrière, comme souhaité.
- La classe implémente la navigation en tant que pile de Page d’objets LIFO (dernier entré, premier sorti) .
- Du point de vue du programmeur, la navigation par page est implémentée avec le concept familier de stack.
- Lorsqu’une page accède à une autre, la nouvelle page est poussée sur la stack et devient la page active.
- Lorsque la deuxième page revient à la première page, une page est sortie de la stack et la nouvelle page la plus haute devient alors active.
-
Pages modales et pages non modales
- Dans la conception de l’interface utilisateur, « modal » fait référence à quelque chose qui nécessite une interaction de l’utilisateur avant que l’application puisse continuer.
- Les applications informatiques sur le bureau affichent parfois des fenêtres modales ou des boîtes de dialogue modales.
- Lorsque l’un de ces objets modaux est affiché, l’utilisateur ne peut pas simplement utiliser la souris pour basculer vers la fenêtre principale de l’application. L’objet modal demande plus d’attention à l’utilisateur avant de disparaître.
- Une fenêtre ou une boîte de dialogue qui n’est pas modale est souvent appelée non modale lorsqu’il est nécessaire de distinguer les deux types.
- Le système de navigation de pages Xamarin.Forms implémente également les pages modales et non modale en définissant deux méthodes différentes qu’une page peut appeler pour accéder à une autre page:
- Task PushAsync(Page page)
- Task PushModalAsync(Page page)
- Deux autres méthodes sont définies pour revenir à la page précédente:
- Task
PopAsync() - Task
PopModalAsync() -
Navigation hiérarchique
- Naviguer vers l’avant (Push)
- Naviguer en Retour une page (Pop)
- Revenir à la première page (PopToRoot)
-
Créer la NavigationPage:
- La première page ajoutée à une stack de navigation est appelée la page racine de l’application.
- Pour créer une page racine , suivez les étapes suivantes:
- Dans Visual Studio, cliquez sur Créer un nouveau projet…
- Dans la boîte de dialogue Nouveau projet, cliquez sur Cross-Platform, sélectionnez le modèle Application mobile (Xamarin.Forms), définissez le Nom Les_NavigationPage, choisissez l’emplacement du projet et cliquez sur le bouton OK :
- Dans la boîte de dialogue Nouvelle application Cross-Platform, cliquez sur Application vide,choisissez Android ,iOS et UWP comme plate forme de développement,Xamarin.Forms pour le IU Technologie, sélectionnez .NET Standard comme stratégie de partage de code, et cliquez sur le bouton OK :
- Cliquez avec le bouton droit de la souris sur votre projet et appuyez sur Nouveau élément.
- Sélectionnez la page de contenu de l’onglet Éléments Visual C #.
- Donnez-lui un nom et ajoutez-le dans votre projet.
- Pour accéder à Page2 à partir de la page1, nous devons appeler la méthode PushAsync().
- Créez la deuxième page en suivant les étapes ci-dessus. Après cela, ouvrez votre Page1.xaml. et créez un bouton en utilisant le code suivant.
- Créez le reste des pages.
-
Découvrez comment procéder
Navigation.PushAsync(new DeuxiemePage());
Navigation.PopAsync();
Navigation.PopToRoot();
Après cela, ouvrez votre App.xaml.cs et Remplacer le code actuel par le code suivant:
{
InitializeComponent();
//MainPage = new Les_NavigationPage.MainPage();
MainPage = new NavigationPage(new Page1());
}
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Navigation_Page.Page1"
>
<ContentPage.Content>
<StackLayout>
<Label Text="Page d'accueil"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
FontSize="Large"
TextColor="#184757"
Font="bold, 40"
/>
<Button Text="Next" Clicked="btnSuivant" />
</StackLayout>
</ContentPage.Content>
</ContentPage>Tutoriels recommandés
