Developpement Windows Phone - partie 5
Les Contrôles Panorama et Pivot
Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.
Sommaire
Bien débuter et fondamentaux
- Bien démarrer (Hello World)
- Créer une interface utilisateur pour Windows Phone en XAML
- Utiliser des contrôles
- Types de contrôles
- Contrôles Panorama et Pivot
- Travailler avec du texte sur le Windows Phone
- Mise en page sur l’écran
- Orientations de l’écran
- Saisie tactile
- Navigation
- Exécuter votre application en arrière-plan (tombstoning)
- Notifications Push pour le développement Windows Phone
- Publier votre application sur le Marketplace
Visuels et média
Travailler avec les données
- Obtenir des données dans vos applications Windows Phone
- Data binding
- Isolated storage
- Accéder à un service Web REST
- Consommer des données Windows Azure
Sondes et autres fonctionnalités spécifiques au téléphone
- Lanceurs et choosers
- Détecter des mouvements (accéléromètres)
- Développer avec le GPS Windows Phone (Services de localisation)
- Développer avec l’appareil photo du Windows Phone
Les Contrôles Panorama et Pivot
Windows Phone 7 inclut les contrôles Panorama et Pivot pour afficher le contenu que les utilisateurs peuvent visualiser horizontalement. Ce tutoriel fournit un aperçu des contrôles Panorama et Pivot, et décrit comment les utiliser et fournit quelques bonnes pratiques.
Ce tutoriel contient les sections suivantes:
- Le contrôle Panorama
- Le contrôle Pivot
- Choisir entre le contrôle Panorama et Pivot
- Ajouter un contrôle Panorama ou Pivot à votre projet
- Exemple de contrôle Panorama
- Exemple de contrôle Pivot
- Bonnes pratiques
Le contrôle Panorama
Le contrôle Panorama est utilisé pour afficher du contenu sur un canevas horizontal qui s'étend au-delà des limites de l'écran. Les sections du contrôle Panorama, appelées items, servent comme point de départ pour des expériences détaillées. Vous pouvez explorer ces éléments en feuilletant les "pages". Lorsque vous êtes sur un élément, vous êtes capable de voir un bout de l'élément suivant ce qui vous indique qu'il y a plus à explorer. Lorsque vous atteignez la fin du Panorama, vous pouvez continuer le défilement pour revenir automatiquement au point de départ tel une boucle. Le contrôle Panorama contient par défaut le support pour le tactile et la navigation. Vous n'avez donc pas besoin d'implémenter des fonctionnalités de gestes puisque c'est implémenté par défaut dans le contrôle Panorama.
Les connecteurs (hubs)contacts et musique+videos sont des exemples d'expériences utilisateurs qui utilisent le contrôle Panorama. L'illustration suivante montre le contrôle Panorama pour le hub contacts.
Le contrôle Pivot
Le contrôle Pivot est utilisé pour filtrer de larges ensembles de données, afficher de larges ensembles de données ou alterner entre les différentes vues d'un même ensemble de données. Le contrôle Pivot est similaire à un tabcontrol mais propose un design spécifique pour le téléphone et/ou l'interaction tactile. Il place des vues individuelles de façon horizontale, et vous autorise à naviguer entre elles à l'aide du panoramique et des gestes tactiles.
Les applications e-mail et calendrier de Windows Phone sont des exemples d'utilisation du contrôle Pivot. L'illustration suivante montre le contrôle Pivot dans l'application e-mail.
Choisir entre le contrôle Panorama et Pivot
Bien que les contrôles Panorama et Pivot puissent sembler similaires, vous devriez faire attention au moment de décider d'utiliser l'un ou l'autre de ces contrôles.
Utilisez un contrôle Panorama pour permettre aux utilisateurs d'explorer du contenu et de fournir un point d'entrée pour n'importe quelle action supplémentaire. Un contrôle Panorama est génial pour agréger des informations de plusieurs sources. Un contrôle Panorama ne devrait pas fournir la seule interaction possible d'une application et devrait plutôt encourager l'utilisation d’actions supplémentaires pour compléter l'expérience utilisateur.
Utilisez un contrôle Pivot pour permettre aux utilisateurs de filtrer, trier ou organiser du contenu dans votre application. Le contrôle Pivot devrait seulement être utilisé pour afficher des éléments ou des données de même type. Les tuiles dans le contrôle devraient être des catégories naturelles des données. Le modèle de navigation de gauche à droite aidera pour trouver efficacement l'information dont ils ont besoin.
Ajouter un contrôle Panorama ou Pivot à votre projet
Vous pouvez ajouter un contrôle Panorama ou un contrôle Pivot dans votre projet de trois façons.
- En utilisant la boîte à outils
Pour ajouter un contrôle Panorama ou Pivot sur une page existante, vous pouvez le glisser depuis la boîte à outils. Ces deux contrôles ne se trouvent pas dans la boîte à outils par défaut et pour les y ajouter, vous devez cliquer à l'aide du bouton droit et sélectionner Choisir les éléments. - En utilisant un template de page
Pour ajouter un contrôle sur une nouvelle page, vous pouvez utiliser les templates de pages. Cliquez à l'aide du bouton droit de la souris sur votre projet dans l'explorateur de solution, cliquez sur Ajouter puis sur Nouveau élément. Dans la fenêtre de dialogue Ajouter un nouveau élément, sélectionnez Windows Phone Panorama Page ou Windows Phone Pivot Page. Pour plus d’informations, lisez l’article How to: Create a Panorama Application for Windows Phone et How to: Create a Pivot Application for Windows Phone. - En utilisant un template de projet
Pour démarrer avec un contrôle Panorama ou Pivot dans un nouveau projet, vous pouvez utiliser les templates de projet. Dans la fenêtre de dialogue Nouveau Projet, sélectionnez Windows Phone Panorama Application ou Windows Phone Pivot Application. Les templates apparaissent pré-remplies avec du contenu que vous pouvez modifier.
Lorsque vous ajoutez le contrôle Panorama ou Pivot en utilisant l'une de ces trois façons, une référence est ajoutée vers l'assembly :
- Microsoft.Phone.Controls.dll
De même, l'espace suivant est ajouté à la page.
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
Exemple de contrôle Panorama
L'exemple suivant créé un contrôle Panorama avec une image de fond et trois contrôles PanoramaItem. Les dimensions recommandées pour une image de fond sont une hauteur de 800 pixels et une largeur inférieure à 2000 pixels. Les contrôles PanoramaItem sont utilisés pour ajouter des sections individuelles au contrôle panorama. Un contrôle Panorama peut supporter plusieurs PanoramaItem et l'utilisateur peut naviguer au travers des sections grâce aux mouvements tactiles.
XAML
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama Control-->
<controls:Panorama Title="my pictures">
<controls:Panorama.Background>
<ImageBrush ImageSource="PanoramaBackground.png" />
</controls:Panorama.Background>
<!--Panorama item one-->
<controls:PanoramaItem>
<TextBlock FontSize="30" Text="This example demonstrates
the Panorama control in a Windows Phone application." TextWrapping="Wrap" />
</controls:PanoramaItem>
<!--Panorama item two-->
<controls:PanoramaItem>
<ListBox FontSize="35">
<ListBoxItem Content="all" />
<ListBoxItem Content="recent" />
<ListBoxItem Content="favorites" />
</ListBox>
</controls:PanoramaItem>
<!--Panorama item three-->
<controls:PanoramaItem Orientation="Horizontal">
<Grid>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<Image Source="Creek.jpg" Grid.Row="0" Grid.Column="0"
Margin="10"/>
<Image Source="Desert.jpg" Grid.Row="0" Grid.Column="1"
Margin="10"/>
...
</Grid>
</Grid>
</controls:PanoramaItem>
</controls:Panorama>
</Grid>
L'illustration suivante montre le résultat de l'exemple Panorama précédent.
- Le premier PanoramaItem a un contrôle TextBlock qui contient le texte avec retour à la ligne. C'est une façon simple d'afficher du texte dans un Panorama.
- Le second PanoramaItem a un contrôle ListBox avec trois éléments. Vous pouvez faire défiler le contenu de la liste vers le haut ou vers le bas. Le défilement vertical au sein d'une liste ou d'une grille dans les sections d'un Panorama est acceptable lorsqu'il se fait dans les limites de la section et qu'il n'est pas parallèle à un plan horizontal.
- Le troisième PanoramaItem a sa propriété Orientation définie sur horizontal pour que vous puissiez naviguer horizontalement pour visualiser toutes les miniatures. Le contrôle Panorama vous permet d’afficher des sections qui sont plus larges que l'écran.
Exemple du contrôle Pivot
L'exemple suivant créé un contrôle Pivot qui est utilisé pour afficher différentes vues de tâches utilisateur. Le contrôle Pivot a trois contrôles PivotItem. Chaque PivotItem filtre les tâches par "toutes les tâches", "tâches pour aujourd'hui" et "tâches pour demain".
XAML
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:Pivot Title="my tasks">
<!--Pivot item one-->
<controls:PivotItem Header="all">
<ListBox FontSize="30">
<ListBoxItem Content="Dentist appointment" />
<ListBoxItem Content="Pickup laundry" />
<ListBoxItem Content="Service car" />
<ListBoxItem Content="Send birthday gift to mom" />
<ListBoxItem Content="Grocery" />
</ListBox>
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem Header="today">
<ListBox FontSize="30">
<ListBoxItem Content="Dentist appointment" />
<ListBoxItem Content="Pickup laundry" />
</ListBox>
</controls:PivotItem>
<!--Pivot item three-->
<controls:PivotItem Header="tomorrow">
<ListBox FontSize="30">
<ListBoxItem Content="Service car" />
<ListBoxItem Content="Send birthday gift to mom" />
<ListBoxItem Content="Grocery" />
</ListBox>
</controls:PivotItem>
</controls:Pivot>
</Grid>
L'illustration suivante montre le résultant de l'exemple Pivot précédent.
Astuce
Si vous avez besoin d'implémenter un défilement vertical dans un contrôle Panorama ou Pivot, vous pouvez ajouter un contrôle qui défile tel qu'un contrôle ListBox, ou ajouter un ScrollViewer dans votre PanoramaItem ou votre PivotItem. Ajouter un ScrollViewer garantit que les éléments sont toujours dimensionnés par rapport au containeur parent.
Bonnes pratiques
Voici quelques bonnes pratiques d'utilisation d'un contrôle Panorama.
- Limitez le nombre de PanoramaItems dans un contrôle Panorama à quatre. Si le contenu est dense, ou si les PanoramaItems partagent trop de contrôles, réduisez le nombre de PanoramaItems.
- Cachez les PanoramaItems jusqu'à ce qu'ils aient du contenu en positionnant la propriété PanoramaItem.Visibility sur Collapsed.
- Lorsque cela est nécessaire, étendez le PanoramaItems au delà des limites de l'écran en positionnant la propriété PanoramaItem.Orientation sur horizontal. Cela renforce la nature du contrôle.
- Utilisez une image de fond à la bonne taille pour votre application. Les dimensions recommandées sont une hauteur de 800 pixels et une largeur inférieure à 2000 pixels.
- Par uniformité, définissez le titre du Panorama à la même valeur que le texte de la tuile de l'écran de démarrage.
- Evitez d'animer le titre du Panorama ou de changer sa taille dynamiquement.
Voici quelques bonnes pratiques sur l'utilisation d'un contrôle Pivot.
- Minimisez le nombre d'éléments pivot dans un contrôle Pivot pour des raisons de performance.
- Chargez le contenu du contrôle Pivot à la demande au lieu de tout charger au démarrage.
- Utilisez le contrôle Pivot pour afficher des éléments ou des informations de même type.
- N'utilisez pas le contrôle Pivot pour une navigation basée sur des tâches, comme un assistant.
- Vous ne devriez pas utiliser les boutons de la barre d'application pour naviguer au sein du contrôle Pivot. Si le Pivot requiert des aides à la navigation c'est probablement que vous l'utilisez mal.
Pour plus d'information à propos des bonnes pratiques d'utilisation des contrôles Panorama et Pivot, lisez l'article Central Application Hub with Home Page Menu (Panorama or Pivot Control) for Windows Phone.