Applications Metro et XAML

Message de Guillaume Leborgne (Le 15-09-2011)

Voici une synthèse de deux sessions vues hier sur les particularités des applications Metro réalisées en XAML.

Le XAML des applications métro ne diffère pas fondamentalement des autres stacks (Silverlight, WPF, WP7), mais il est basé sur une librairie différente (implémentation en code natif dans la stack WinRT). On retrouve les controles auxquels on est habitués (Grid, StackPanel, etc), même si il y a quelques propriétés qui diffèrent (le click sur un bouton est géré par un event « Tapped » par exemple).

Les différences les plus notables sont que nous allons trouver des choses qui sont nouvelles et spécifiques à Win 8 / Métro, en particulier, une librairie de controles tout nouveaux, et une librairie d’animations.

Animations
La stack WinRT possède des animations qui sont intégrées et optimisées (et jolies ^_^). Il est recommandé d’utiliser ces animations car elles sont très faciles à utiliser, donne une ergonomie homogène sur la plateforme, et reposent pleinement sur l’accélération matérielle. Il reste tout à fait possible de faire ses propres animations, mais il faut être vigilant car les animations custom peuvent être dépendante du thread UI (ColorAnimation par exemple), et donc avoir de moins bonnes perfs.

La librairie d’animations comporte un jeu d’animations et de transitions qui sont rattachables directement sur les éléments. Par exemple, pour animer la réorganisation des items dans un panel, on va ajouter une ou plusieurs transitions dans la propriété ChildrenTransitions, donc en très peu de code par rapport à ce qu’on aurait à faire en WPF ou en Silverlight.

Librairie de controles
La stack comporte de nombreux controles. Par défaut, les controles sont avec des templates sur fond noir. Les samples du SDK comportes un fichier XAML avec un thème sur fond blanc. Ces controles sont animés par défaut et certains sont très évolués. Les éléments suivants concernent les controles de listes spécifiques aux applis Métro.

Les controles de liste sont virtualisés, et il est possible de choisir entre deux modes de virtualisation :

  • Random (mode standard utilisé dans les listbox WP7, WPF, …)
  • Incremental (un mode qui ressemble à votre fil dans Facebook, dans lequel on télécharge un bloc d’élément quand on arrive en fin de liste)

Pour supporter la virtualisation, une source de donnée doit implémenter l’interface qui va bien (IVirtualizingVector et IIncrementalLoadingVector)
Parmis les controles de liste on trouve :

  • ListView : une ListBox améliorée par les spécificités « Métro » (le controle ListBox existe aussi, mais visiblement plus pour avoir de la compatibilité avec les applis WP7 / SL / WPF)
  • GridView : une ListView étendue qui permet notamment de faire des regroupements
  • JumpViewer : un wrapper qui permet de faire du « zoom sémantique » sur une un GridView, c’est à dire la possibilité en utilisant les gestures de zoom / dezoom, de visualiser une version sémantiquement différente de la GridView. Par exemple j’ai une liste des applications regroupées par ordre alphabétique. Si je dezoom je vais avoir une vue comportant uniquement les intitulés des groupes, qui va me permettre de naviguer plus rapidement. C’est le même principe que les jumplists dans WP7, mais avec une ergonomie différente.
  • FlipView : ItemsControl qui n’affiche qu’un seul élément à la fois.

Une réflexion sur “Applications Metro et XAML

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s