Catégories
Uncategorized

Navigation de base dans les pages à l’aide de XAML et C # dans les applications du Windows Store


introduction

Navigation de base entre les pages utilisant XAML et C # dans les applications du Windows Store

La description

La navigation est le processus de navigation d’une page à une autre parmi plusieurs pages au sein de l’application. Microsoft Visual Studio Express 2012 fournit des modèles de page pour Windows 8 qui fournissent une prise en charge de navigation de base pour les applications du Windows Store à l’aide du code C # ou XAML. Dans cet article, nous utiliserons les modèles de page pour gérer la navigation entre plusieurs pages dans les applications du Windows Store.

Étape 1

Créez un nouveau projet avec le nom « NavigationDemo » en utilisant le Suivant:

  1. Ouvrez Visual Studio Express 2012 pour Windows 8
  2. Choisissez « Fichier » -> « Nouveau » -> « Projet … »; ici la boîte de dialogue Nouveaux projets sera ouverte
  3. Dans le panneau d’application installé, sélectionnez « Visual C # » puis sélectionnez « Applications du Windows Store »
  4. Dans le panneau du milieu, sélectionnez « Application vide » et appuyez sur la touche Entrée pour le nom du projet « NavigationDemo »
  5. Cliquez sur le bouton « Ok »; le projet sera créé avec le nom spécifié

Vous devez maintenant ajouter deux pages au projet pour faire la navigation, donc l’étape suivante consiste à ajouter les deux pages.

Étape 2

Ajoutez les deux pages au projet à l’aide du procédure suivante:

  1. Accédez à l’Explorateur de solutions.
  2. Faites un clic droit sur les projets puis sélectionnez « Ajouter un nouvel élément ». L’ajout d’un nouvel élément la boîte de dialogue s’ouvre.
  3. dans le « Installée » volet, développez « Visual C # »
  4. Sélectionnez le « Application Windows Store » type de modèle
  5. Dans le panneau du milieu, sélectionnez « Page de base » avec le nom « BasicPage1 »
  6. Cliquez sur « Ajouter ».

pageadd.jpg

Après avoir ajouté la première page de base, répétez ce processus à nouveau pour ajouter la deuxième page avec le nom « Page de base2 ».
Nous verrons les détails de la page suivante dans l’Explorateur de solutions:

figerforpage.jpg
BasicPage1.Xaml
BasicPage1.Xaml.cs
BasicPage2.Xaml
BasicPage2.Xaml.cs

Étape 3

A. Ajoutez deux « Button on MainPage.xaml » pour la navigation
figer2.jpg

A. Et définissez le nom via le code XAML comme Contenu= « GoToBasicPage1 » donné ici et le détail de la page de navigation ici MainPage-> Page1 Navigation.

B. Et définissez le nom via le code XAML comme Contenu= « GoToBasicPage2 » donné ici et le détail de la page de navigation ici MainPage-> Page2 Navigation.

Figer1.jpg
C. Placez le code suivant dans MainPage.xaml.cs pour afficher la navigation pour différentes pages de la page principale vers d’autres pages.
maincs.jpg
Étape 4

A. Ajout d’un « bouton sur BasicPage1 » pour la navigation.

figerforpage1.jpg

B. Et définissez le nom via le code XAML comme Contenu= « GoToMainPage » donné ici et le détail de la page de navigation ici Page1-> MainPage Navigation.

basic1xaml.jpg
C. Mettez le code suivant dans BasicPage1.xaml.cs pour afficher la navigation sur Button_Click_1.
basic1cs.jpg
Étape 5

A. Ajoutez un « bouton sur BasicPage2 » pour la navigation.

figerforpage1btn.jpg

B. Et définissez le nom via le code XAML comme Contenu= « GoToMainPage » donné ici et le détail de la page de navigation ici Page2-> Navigation MainPage.

xamlforbtn2.jpg
C. Utilisez le code suivant dans BasicPage1.xaml.cs pour afficher la navigation sur Button_Click_:
Étape 6 csforbtn2.jpg

Pour effectuer la navigation, sélectionnez « MianPage.xaml » et exécutez-le; il sera affiché comme:

Figer1.jpg

Étape 7

1 Cliquez maintenant sur le bouton « GoToBasicPage1 ». Vous accédez à la page 1 comme indiqué ici:

after1navigation.jpg

2 Cliquez sur le bouton « GoToBasicPage2 ». Vous accédez à la page 2 comme indiqué ici:

figerforpage1btn.jpg

3 Nous pouvons cliquer sur le bouton « GoToMainPage » pour naviguer vers « ManPage » après avoir navigué depuis Page1 ou Page2.

after1navigation.jpg

figerforpage1btn.jpg

4 Maintenant, nous naviguons enfin vers « ManPage ».

Figer1.jpg



Source link