Migration du LongListSelector en Universal Apps – 2ème Partie


Nous poursuivons l’article sur la migration du LongListSelector (WP8 et WP8.Silverlight) vers les Universal Apps (WP8 et W8.x)

Nous avons vu dans le précédent article la migration des listes simples et des listes regroupées.

Dans cet article nous allons voir maintenant la migration du « JumpList ».

Le JumpList permet d’offrir des raccourcis de navigation lors du clic (ou tap) sur un regroupement.

Migrer le Jumplist en Universal Apps - Liste regtroupée wp_ss_20140925_0004

Avant avec le LongListSelector

En WP8.0 Silverlight, la gestion du JumpList passe obligatoirement par la définition du style associé à la propriété JumpListStyle. Sans cette association, la Jumplist ne fonctionnait pas.

Exemple d’utilisation (on ajoute juste la propriété « JumListStyle » à l’exemple de l’article précédent)

Puis le style définit les 3 propriétés essentielles :

  • GridCellSize : Hauteur et Largeur d’affichage des données dans la Jump Liste
  • LayoutMode : Type d’affichage en liste ou en grille (ici Grille)
  • ItemTemplate : L’affichage des items de la liste ou Grille.

Cet état est géré avec la syntaxe suivante    :

Remarquez que le Binding se fait encore une fois avec « {Binding Key} »

Maintenant sur les Universal Apps

Le passage d’une Jumplist à une liste « Normale » va se faire à l’aide d’un SemanticZoom.

Le SemanticZoom définit 2 états : ZoomIn (Etat déployé) et ZoomOut (Etat résumé – la Jumplist).

Cet état est géré avec la syntaxe suivante :

Remarque : Il est recommandé de positionner la propriété

dans chaque élément contenu dans le SemanticZoom afin de ne pas répercuter les actions de la liste sur le Zoom (molette de la souris en Windows par exemple).

Dans la partie ZoomInView, on retrouve notre ListView précédente.

Dans la partie « Jumplist » la ZoomOutView, on va définir un GridView pour afficher les raccourcis.

Le Binding se fait toujours sur la liste regroupée « {StaticResource ViewSourceMessagesByGroup} ». Les regroupement s’affichent en utilisant la propriété « CollectionGroups ».

  • ItemTemplate permet de définir le modèle d’affichage utilisé pour cette partie. Le précédent template de la Jumplist va pouvoir être utilisé presque sans aucun changement. Le « presque » concerne le Binding permettant d’afficher les éléments. Il devra référencer Group.Key à la place de Key qui était utilisé seul auparavant.

Exemple :

( Text= »{Binding Group.Key} » remplace la syntaxe Text= »{Binding Key} » )

  • ItemsPanelTemplate permet de paramétrer l’affichage de la grille : Orientation définit l’ordre d’affichage (par colonne ou par ligne),
  • ItemWidth et ItemHeight, les dimensions des éléments
  • MaximumRowsOrColumns le nombre d’élements par colonne (exemple avec Orientation= »Horizontal »).

Au final le code source de la liste avec les raccourcis ressemble à ça :

Vous savez maintenant comment migrer le LongListSelector d’un projet pour qu’il fonctionne dans une Universal app qui sera accessible depuis Windows Phone 8.1 et Windows 8.

Le code source complet (avec la gestion de la Jumplist) se trouve ici :

Téléchargement du Code

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

deux × 5 =