La plate-forme Windows Phone 8 a ses propres styles de disposition qui la distinguent de toute autre plate-forme mobile. Ces dispositions uniques sont possibles grâce à quelques commandes intégrées pratiques du SDK Windows Phone 8. Les commandes que nous allons examiner dans ce tutoriel sont les suivantes: Pivot et Panorama les contrôles.
1. panorama
Qu'Est-ce que c'est?
Le contrôle de disposition de Windows Phone Panorama offre une approche unique en termes de présentation du contenu à l'utilisateur. Un panorama est constitué de plusieurs panneaux ou éléments de panorama représentant chacun une page. À tout moment, un seul élément de panorama est visible à côté d'une petite partie de l'élément de panorama précédent ou suivant. L'utilisation de la commande Panorama donne l'impression de regarder à travers un trou de serrure. Vous pouvez voir une partie de la pièce derrière la porte, mais pas la pièce entière..
La capture d'écran ci-dessus est un excellent exemple pour illustrer le contrôle Panorama. L'exemple ci-dessus contient cinq éléments de panorama. Chaque élément de panorama représente une page avec un contenu.
Dans la capture d'écran ci-dessus, le panorama actif a pour titre menu. Dans le même temps, nous pouvons voir un aperçu du prochain élément de panorama intitulé En vedette. Le contrôle Panorama indique à l'utilisateur que davantage de contenu attend d'être découvert à droite. Voyons comment utiliser le contrôle Panorama.
Créer un contrôle de panorama
Commencez par créer un nouveau projet Windows Phone. Pour ajouter un contrôle Panorama au projet, choisissez Ajouter un nouvel élément> Page Panorama de Windows Phone> Ajouter du Projet menu. Cela devrait ajouter un contrôle Panorama avec deux éléments de panorama. Le contrôle Panorama doit être visible dans la vue de conception de Visual Studio..
Ajoutons du contenu au contrôle Panorama. Nous allons peupler le premier élément de panorama avec une liste de couleurs et le second élément de panorama avec un nombre de rectangles colorés correspondant à la liste de couleurs du premier élément de panorama. Pour le moment, le contrôle Panorama contient un contrôle Grid avec le nom LayoutRoot, comme indiqué ci-dessous..
Le contrôle de grille nommé LayoutRoot est le conteneur principal de la page actuelle de notre application, contenant tous les autres éléments de la page. N'oubliez pas qu'en XAML, les contrôles sont structurés de manière hiérarchique, très similaire à XML..
Le contrôle Panorama est imbriqué dans le contrôle Grid et possède un Titre propriété de "mon application". La commande Panorama contient les éléments de panorama. Comme vous pouvez le voir dans l’extrait de code XAML ci-dessus, la commande Panorama contient actuellement deux éléments de panorama. Entête propriété des éléments de panorama est objet 1 et item2 respectivement.
le Entête propriété d'un élément de panorama est similaire à la Titre propriété du contrôle Panorama et vous pouvez les changer comme bon vous semble.
Ajout de couleurs
Remplissons maintenant les éléments de panorama avec un contenu comme nous en avons déjà discuté. Mettez à jour le contenu des deux éléments de panorama comme indiqué ci-dessous.
Comme vous pouvez le voir, j'ai changé le Entête propriété des éléments de panorama à noms de couleurs et couleurs respectivement. Au premier élément de panorama, j'ai ajouté un contrôle StackPanel contenant cinq contrôles TextBlock. Chacun des contrôles TextBlock a son Texte propriété définie sur la couleur du nom. J'ai aussi mis le Taille de police propriété de chaque contrôle TextBlock à 30px agrandir le texte.
Le deuxième contrôle PanoramaItem contient également un contrôle StackPanel, contenant cinq contrôles Rectangle. Chaque commande Rectangle est remplie d’une couleur indiquée dans le premier élément de panorama à l’aide de Remplir propriété. le la taille propriété des rectangles est définie sur 50px et le Marge la propriété est définie sur 0, 0, 0, 10, ce qui se traduit par une marge inférieure de 10px. Vous pouvez voir le résultat de votre travail dans la vue de conception de votre IDE comme indiqué ci-dessous.
Maintenant que nous avons rempli le contrôle Panorama avec du contenu, il est temps de passer au second contrôle de ce didacticiel, le contrôle Pivot..
2. pivot
Qu'Est-ce que c'est?
Le contrôle Pivot est un autre moyen de présenter du contenu à l'utilisateur, propre à la plate-forme Windows Phone. Le contrôle Pivot est semblable au contrôle Panorama à certains égards, mais il possède un certain nombre de fonctionnalités qui le distinguent.
Comme un contrôle Panorama, un contrôle Pivot peut comporter plusieurs PivotItem les contrôles. Chaque élément pivot peut contenir d'autres contrôles, tels que les contrôles Grid et StackPanel. La capture d'écran ci-dessus montre un contrôle Pivot avec deux contrôles PivotItem., annuaire et établissement.
Alors que le contrôle Panorama affiche un aperçu de la page suivante, le contrôle Pivot fait de même pour la Entête au sommet du contrôle Pivot. Ceci est clairement montré dans l'exemple ci-dessus dans lequel vous pouvez voir les premières lettres du mot établissement, le titre du deuxième élément pivot. Pour illustrer le fait que le deuxième élément pivot n’est pas mis au point, son titre est grisé..
Création d'un contrôle de pivot
Créons un contrôle Pivot en suivant les mêmes étapes que nous avons suivies pour créer un contrôle Panorama. Au lieu de cela, sélectionnez l'option Page pivot Windows Phone. Comme pour le contrôle Panorama, remplissez le contrôle Pivot avec la liste des couleurs et leurs noms, comme précédemment. Le code XAML résultant pour le contrôle Pivot doit être similaire à celui présenté ci-dessous..
Avant de pouvoir créer et exécuter l'application pour voir les deux contrôles en action, nous devons mettre en œuvre un moyen de naviguer dans les pages de l'application. Ce sera l'objet de la prochaine section.
3. Navigation de page
Si vous exécutez l'application dans sa forme actuelle, vous verrez le MainPage.xaml page, le point d’entrée par défaut pour chaque application Windows Phone. Changeons cela.
Ajout de boutons
Pour naviguer vers les contrôles Panorama et Pivot que nous avons mis en place précédemment, nous devons ajouter deux contrôles Button à la commande. MainPage.xaml page. Double-cliquez MainPage.xaml dans votre IDE et faites glisser deux contrôles Button de la Boîte à outils à la page en mode Création de Visual Studio.
Comme vous pouvez le voir ci-dessous, j'ai aussi changé le Contenu propriétés des contrôles Button à lire Panorama et Pivot.
Implémentation des contrôles de boutons
Lorsque l'utilisateur appuie sur un contrôle Button, nous souhaitons que l'application accède au contrôle Panorama ou au contrôle Pivot. Commençons par le bouton gauche en premier.
Panorama
Commencez par double-cliquer sur le contrôle Button de gauche en mode Création. Cela devrait vous amener à MainPage.cs, qui contient la classe qui est liée à MainPage.xaml. Visual Studio a déjà créé une méthode pour nous, Button_Click, qui est appelé lorsque l'utilisateur appuie sur le bouton intitulé Panorama.
Lorsque l'utilisateur appuie sur le premier bouton, l'application doit les amener au contrôle Panorama. Nous accomplissons cela en mettant à jour le Button_Click méthode comme indiqué ci-dessous.
Nous invoquons le Naviguer méthode sur Service de navigation, passant dans la destination, un Uri instance, et le type de destination, UriKind.Relative. Notez que le nom de la page de destination doit correspondre à la première page du contrôle Panorama., PanoramaPage1.xaml dans l'exemple ci-dessus. Ne pas oublier la barre oblique avant.
Pivot
La navigation vers le contrôle Pivot est très similaire. Ouvrez MainPage.xaml, double-cliquez sur le contrôle Button nommé Pivot, et implémenter le gestionnaire d'événements, Button_Click_1, comme indiqué ci-dessous. La seule différence est la destination vers laquelle nous naviguons, PivotPage1.xaml.
void privé Button_Click_1 (expéditeur de l'objet, RoutedEventArgs e) NavigationService.Navigate (nouvel Uri ("/ PivotPage1.xaml", UriKind.Relative));
Générez et exécutez l'application pour tester les boutons ainsi que les commandes Panorama et Pivot. Utilisez le bouton de retour physique de votre périphérique ou de votre émulateur pour revenir à la page précédente..
Conclusion
Dans ce didacticiel, nous avons abordé deux contrôles de mise en page importants de la plate-forme Windows Phone, les contrôles Panorama et Pivot. Nous avons également revisité la navigation et utilisé certains des contrôles courants de Windows Phone, tels que les contrôles Button, TextBox et Rectangle. Dans le prochain article, nous conclurons cette série d'introduction sur Windows Phone et examinerons les prochaines étapes pour vous..
Share
Accentsconagua
