Naviguer entre les pages - Créez des applications en C# pour Windows Phone 8

Avant de pouvoir naviguer entre des multiples pages, il faut effectivement avoir plusieurs pages ! Nous allons illustrer cette navigation en prenant pour exemple le site OpenClassrooms… enfin, en beaucoup beaucoup moins bien.

Première fonctionnalité, il faut pouvoir se loguer afin d’atteindre la page des cours. Nous allons donc avoir deux pages, une qui permet de se loguer, et une qui permet d’afficher la liste des cours.

Commençons par la page pour se loguer et vu qu’elle existe, utilisons la page MainPage.xaml : Code : XML

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0"

Margin="12,17,0,28">

<TextBlock x:Name="PageTitle" Text="Page de Login"

Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

N’oubliez pas de générer à chaque fois les événements des contrôles, si ce n’est pas déjà fait. Dans l’exemple précédent : Button_Tap.

Pour que cela soit plus simple, nous utilisons uniquement un login pour nous connecter.

Si nous affichons la page dans l’émulateur, nous avons la figure suivante.

Affichage de la page de login

Nous allons maintenant créer une deuxième page permettant d’afficher la liste des cours. Créons donc une autre page que nous nommons ListeCours.xaml. Pour cela, nous faisons un clic droit sur le projet et choisissons d’ajouter un nouvel élément. Il suffit de choisir le modèle de fichier Page en mode portrait Windows Phone et de lui donner le bon nom (voir la figure suivante).

Ajout d'une nouvelle page XAML dans le projet

Dans cette page, nous allons afficher simplement bonjour et que la page est en construction. Pour cela, un XAML très minimaliste :

Code : XML

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0"

Margin="12,17,0,28">

<TextBlock x:Name="PageTitle" Text="Page des cours"

Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock x:Name="Bonjour" Text="Bonjour"

HorizontalAlignment="Center" />

</Grid>

</Grid>

Retournons dans la méthode de clic sur le bouton de la première page. Nous allons utiliser le code suivant :

Code : C#

private void Button_Tap(object sender, System.Windows.Input.GestureEventArgs e) { if (!string.IsNullOrEmpty(Login.Text))

NavigationService.Navigate(new Uri("/ListeCours.xaml", UriKind.Relative));

}

Nous utilisons le service de navigation et notamment sa méthode Navigate pour accéder à la page ListeCours.xaml, si le login n’est pas vide.

Grâce à cette méthode, nous pouvons aller facilement sur la page en construction. Remarquons que si nous appuyons sur le bouton en bas à gauche du téléphone permettant de faire un retour arrière, alors nous revenons à la page précédente. Si nous cliquons à nouveau sur le retour arrière, alors nous quittons l’application car il n’y a pas de page précédente.

Bon, c’est très bien tout ça, mais si on pouvait afficher un bonjour personnalisé, ça serait pas plus mal, avec par exemple le login saisi juste avant …

Il y a plusieurs solutions pour faire cela. Une des solutions consiste à utiliser la query string. Elle permet de passer des informations complémentaires à une page, un peu comme pour les pages web. Pour cela, on utilise la syntaxe suivante :

Code : HTML

Page.xaml?parametre1=valeur1&parametre2=valeur2

Modifions donc notre méthode pour avoir : Code : C#

private void Button_Tap(object sender, System.Windows.Input.GestureEventArgs e) { if (!string.IsNullOrEmpty(Login.Text))

NavigationService.Navigate(new Uri("/ListeCours.xaml?login="

+ Login.Text, UriKind.Relative));

}

Désormais, la page ListeCours sera appelée avec le paramètre login qui vaudra la valeur saisie dans la TextBox.

Pour récupérer cette valeur, rendez-vous dans le code behind de la seconde page où nous allons substituer la méthode appelée lorsqu’on navigue sur la page, il s’agit de la méthode OnNavigatedTo, cette méthode faisant partie de la classe

PhoneApplicationPage. Nous aurons donc le code behind suivant : Code : C#

public partial class ListeCours : PhoneApplicationPage { public ListeCours()

{

InitializeComponent();

}

protected override void

OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) {

base.OnNavigatedTo(e);

} }

C’est à cet endroit que nous allons extraire la valeur du paramètre avec le code suivant : Code : C#

protected override void

OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { string login;

if (NavigationContext.QueryString.TryGetValue("login", out login))

{

Bonjour.Text += " " + login;

}

base.OnNavigatedTo(e);

}

On utilise la méthode TryGetValue en lui passant le nom du paramètre. Cette méthode fait partie de l’objet QueryString du contexte de navigation accessible via NavigationContext.

Ce qui nous donne la figure suivante.

Affichage de la seconde page

Une autre solution pour passer des informations de page en page serait d’utiliser le dictionnaire d’état de l’application afin de communiquer un contexte à la page vers laquelle nous allons naviguer. Il s’agit d’un objet accessible de partout où nous pouvons stocker des informations et les lier à une clé. Cela donne :

Code : C#

private void Button_Tap(object sender, System.Windows.Input.GestureEventArgs e) { if (!string.IsNullOrEmpty(Login.Text)) {

PhoneApplicationService.Current.State["login"] = Login.Text;

NavigationService.Navigate(new Uri("/ListeCours.xaml", UriKind.Relative));

} }

Et pour récupérer la valeur dans la deuxième page, nous ferons : Code : C#

base.OnNavigatedTo(e);

}

L’utilisation du dictionnaire d’état est très pratique pour faire transiter un objet complexe qui sera difficilement représentable dans des paramètres de query string.

Attention : le dictionnaire d’état ne doit contenir que des informations sérialisables.

Voilà pour ce premier aperçu du service de navigation. Remarquez que le XAML possède également un contrôle qui permet de naviguer entre les pages, comme le NavigationService. Il s’agit du contrôle HyperlinkButton. Il suffira de renseigner sa propriété NavigateUri. Complétons notre page ListeCours pour rajouter en bas un HyperLinkButton qui renverra vers une page Contact.xaml :

Code : XML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock x:Name="Bonjour" Text="Bonjour"

HorizontalAlignment="Center" />

<HyperlinkButton Grid.Row="2" Content="Nous contacter"

NavigateUri="/Contact.xaml" />

</Grid>

Puis créons une page Contact.xaml : Code : XML

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0"

Margin="12,17,0,28">

<TextBlock x:Name="PageTitle" Text="Nous contacter"

Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<Button Content="Revenir à la page précédente"

Tap="Button_Tap" />

</StackPanel>

</Grid>

</Grid>

Ainsi, lorsque nous démarrerons l’application et après nous être logués, nous pouvons voir le bouton « nous contacter » en bas de la page (voir la figure suivante).

Utilisation du contrôle HyperLinkButton pour la navigation

Un clic dessus nous amène à la page de contact (voir la figure suivante).

Affichage de la page de contact

Et voilà, la navigation est rendue très simple avec ce contrôle, nous naviguons entre les pages de notre application en n'ayant presque rien fait, à part ajouter un contrôle HyperlinkButton. Il sait gérer facilement une navigation avec des liens entre des pages. C’est la forme de navigation la plus simple.

Nous avons pu voir ainsi deux façons différentes de naviguer entre les pages, via le contrôle HyperlinkButton et via le NavigationService. Puis nous avons vu deux façons différentes de passer des informations entre les pages, via la query string et via le dictionnaire d'état de l'application.

On remarque que la première page à s’afficher lorsqu’on démarre une application est la page MainPage.xaml. Ceci est configurable en allant modifier le fichier WMAppManifest.xml qui se trouve dans l’explorateur de solutions, sous properties (voir la figure suivante).

Le fichier WMAppManifest.xml dans l'explorateur de solutions

Double-cliquez dessus et une nouvelle page s’ouvre permettant de saisir une autre page de démarrage (voir la figure suivante).

Le concepteur permettant de modifier

la page XAML de démarrage de l'application

Dans le document Créez des applications en C# pour Windows Phone 8 (Page 117-125)