IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

31 Jours de Windows Phone 7

Date de publication : 11/21/2011. Date de mise à jour : 11/21/2011.


V. Traduction
VI. Navigation de page
VII. Simple Navigation Web
VII-A. Créez une nouvelle application Windows Phone
VII-B. Ajoutez quelques nouvelles Pages Windows Phone Portrait
VII-C. Changer le titre de chaque page, afin que nous sachions quand nous y sommes
VII-D. Créez quelques liens hypertexte sur MainPage.xaml
VII-E. Naviguer dans les pages via le code
VIII. Conclusion
IX. Liens


V. Traduction

Cet article est la traduction la plus fidèle possible de l'article original de Jeff Blankenburg, 31 Days of Windows Phone | Day #2: Page Navigation


VI. Navigation de page

Ce billet correspond au Jour #2 de la série appelée les 31 Jours de Windows Phone.

Aujourd'hui, nous allons parler de la façon de naviguer entre les pages en Silverlight pour Windows Phone. Ce sera une leçon importante pour deux raisons. La première est parce que vous ne voulez pas construire toute votre application dans un seul fichier XAML. La seconde est que, en suivant les règles, votre application sera automatiquement en mesure de tirer parti du bouton "Back" intégré dans le matériel du téléphone. Cela permettra à vos utilisateurs de naviguer en arrière dans votre application quand ils veulent revenir à ce qu'ils faisaient auparavant. Nous parlerons plus en détails demain du bouton "Back".

Il ya plusieurs façons de naviguer entre les pages, mais je vais me concentrer sur un seul. Je vais y faire référence en tant que Simple Navigation Web. C'est exactement comme cela semble. Nous naviguerons entre les pages de la même manière que vous navigueriez à travers les pages HTML. Il ya certainement aussi d'autres frameworks à votre disposition (comme MVVM), mais aux fins du présent billet nous allons couvrir cette approche simple.


VII. Simple Navigation Web

Nous avons plusieurs pages, et nous voulons donner à l'utilisateur un moyen de naviguer entre elles. Construisons une interface utilisateur de navigation simple qui nous permettra de faire exactement cela. Commençons par le début :


VII-A. Créez une nouvelle application Windows Phone

image

VII-B. Ajoutez quelques nouvelles Pages Windows Phone Portrait

image
Nous parlerons plus d'orientation de page (Portrait vs Paysage) lors du Jour #4. Pour l'instant, disons simplement s'en tenir à des pages Portrait. J'ai créé trois nouvelles : Pasta.xaml, Sauce.xaml, et Cheese.xaml. Nous allons relier ces pages ensemble en utilisant plusieurs méthodes différentes.


VII-C. Changer le titre de chaque page, afin que nous sachions quand nous y sommes

Sur chaque nouvelle page que vous avez créé, il y avait un élément XAML nommé "PageTitle", et il a été fixé par défaut à "page name". Modifiez cela sur chaque page de sorte qu'il soit évident sur quelle page vous travaillez. J'aime faire ceci pour que je sois moins enclin à faire des erreurs. Vous verrez lorsque vous plongez dans un projet élaboré que le code commence à se ressembler tous, donc leur donner un aspect différent (du moins pendant que vous êtes en train de coder) peut aller un long chemin.

image

VII-D. Créez quelques liens hypertexte sur MainPage.xaml

Pour créer des liens entre les pages, nous avons plusieurs options différentes. La première est la solution tout-XAML. Pour ce faire, nous pouvons utiliser le contrôle HyperlinkButton. Voici le code :
<HyperlinkButton Content="Pasta" NavigateUri="/Pasta.xaml" Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />
<HyperlinkButton Content="Sauce" NavigateUri="/Sauce.xaml" Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" Name="hyperlinkButton2" VerticalAlignment="Top" Width="200" />
<HyperlinkButton Content="Cheese" NavigateUri="/Cheese.xaml" Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" Name="hyperlinkButton3" VerticalAlignment="Top" Width="200" />
Lorsque vous exécutez votre projet, vous devriez être capable de cliquer sur un de ces HyperlinkButtons et arriver sur cette page en particulier (en supposant que vous aviez les mêmes pages que les miennes). L'utilisation du bouton Retour devrait également vous ramener à l'écran précédent. Si vous revenez suffisamment en arrière, vous devriez aussi constater que vous quittez votre application une fois que vous allez au-delà du premier écran de l'application.


VII-E. Naviguer dans les pages via le code

Si vous préférez le faire via le code au lieu de mettre tout cela dans votre XAML, vous pouvez utiliser n'importe quel élément XAML pour y arriver. Pour cet exemple, nous allons simplement utiliser un bouton. J'ai créé trois boutons dans cet exemple, et chacun d'entre eux pointe vers le même gestionnaire d'événements. Dans le code C # ci-dessous, vous verrez qu'en fait je détecte quel bouton a été cliqué, et dirige l'utilisateur vers la page appropriée. Toutes les fonctionnalités du bouton Retour sont également disponibles.

XAML
<Button x:Name="PastaButton" Content="Pasta" Click="Button_Click" Width="200" Height="75" />
<Button x:Name="SauceButton" Content="Sauce" Click="Button_Click" Width="200" Height="75" />
<Button x:Name="CheeseButton" Content="Cheese" Click="Button_Click" Width="200" Height="75" />
C#
private void Button_Click(object sender, RoutedEventArgs e)
{
	Button clickedButton = sender as Button;

	switch(clickedButton.Name)
	{
		case "PastaButton":
			NavigationService.Navigate(new Uri("/Pasta.xaml", UriKind.Relative));
			break;
		case "SauceButton":
			NavigationService.Navigate(new Uri("/Sauce.xaml", UriKind.Relative));
			break;
		case "CheeseButton":
			NavigationService.Navigate(new Uri("/Cheese.xaml", UriKind.Relative));
			break;
	}
}
Comme vous pouvez le voir, simplement en naviguant avec le NavigationService, toutes les actions de votre utilisateur sont enregistrées, et utiliser le bouton Retour leur permet de retourner par le biais de leur arbre de décision.


VIII. Conclusion

Demain, nous allons explorer comment nous pouvons tirer parti du bouton Retour pour encore plus de fonctionnalités.


IX. Liens


 

Valid XHTML 1.0 TransitionalValid CSS!

Copyright © 2011 Jeff Blankenburg. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.