[Windows Phone 7] Utilisation d’un contrôle “Panorama”

Afin de faire une application digne de ce nom pour Windows phone 7, il faut suivre la logique des “hubs” de l’interface Métro, qui propose des vues panoramiques de service.

Très pratique et design, elle n’est pourtant pas disponible par défaut dans le SDK de Windows Phone 7. Cependant, de nombreux développeurs l’ont mis en place, ce qui nous permet de réaliser des applications très simplement.

J’ai donc choisi de vous présenter le “Panorama” le plus efficace et simple d’implémentation que j’ai trouvé sur le net. Il s’agit du panorama codeplex disponible sur : http://phone.codeplex.com/

L’avantage majeur de ce projet, est qu’il a déjà été porté pour la version béta de Windows phone, ce qui nous simplifie grandement la vie !

Vous pourrez faire des contrôles pivots ainsi que le fameux panorama.

La seule différence entre les deux réside dans la navigation, en effet, avec le pivot control, il y a deux façons de naviguer d’une page à l’autre,- soit en cliquant sur l’en-tête, soit en “flickant” les pages -. C’est à dire en donner un petit coup avec votre doigt sur la gauche ou sur la droite.

Le site codeplex vous donnera une explication claire pour mettre en place votre panorama, mais j’ai quand même quelques conseils à vous donner:

  • Bien télécharger la version pour la Béta du SDK, car la version recommandée n’est pas migré. Il faut prendre à ce jour : http://phone.codeplex.com/SourceControl/changeset/changes/55373. (je me suis fait avoir la 1er fois 🙂 ).
  • Ajouter la dll dans votre projet ou ne pas hésiter à ajouter directement le code source si vous voulez le modifier.
  • Afin d’avoir possibilité de scroller dans la page, c’est-à-dire de faire marcher une liste, ou un élément, et pouvoir scroller vers le haut ou le bas, il faut faire comme ci-dessous :
     <panorama:PanoramaItem x:Name="ItemsNow" Header="Page1" HorizontalAlignment="Left" Width="500">
                <ScrollViewer>
                     <!--Votre control-->
                 </ScrollViewer>
            </panorama:PanoramaItem>

ou encore:

   <panorama:PanoramaItem x:Name="ItemsNow" Header="Page1" HorizontalAlignment="Left" Width="500">
                <ListBox x:Name="Listbox1">
                     <!--Votre control-->
                </ListBox>
            </panorama:PanoramaItem>

En effet, placer un User control ou un stackpanel entre deux bloquera votre scroll, je n’ai pour le moment trouvé aucune autre possibilité pour le rendre fonctionnel différemment, il faut donc mettre tous le code dans la MainPage, après je ne suis pas non plus un killer en xaml !

Voilà, vous n’avez plus d’excuses pour vous lancer dans le développement sur Windows phone 7 !

Votre 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 )

Photo Google

Vous commentez à l’aide de votre compte Google. 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 )

Connexion à %s

%d blogueurs aiment cette page :