Xamarin.Forms Tutoriel StackLayout
Avant de tenter ce didacticiel, vous devez avoir suivi les guides et didacticiels suivants :
Dans ce tutoriel, vous allez apprendre à :
- Créez un Xamarin.Forms
StackLayoutcode XAML. - Spécifier l’orientation du
StackLayout. - Contrôler l’alignement et l’expansion de l’affichage enfant dans le
StackLayout.
Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment aligner les contrôles au sein d’un StackLayout. Les captures d’écran suivantes montrent l’application finale :
Vous utiliserez également des Rechargement à chaud XAML pour Xamarin.Forms voir les modifications apportées à l’interface utilisateur sans regénérer votre application.
Créer un stacklayout
Une StackLayout est une disposition qui organise les affichages dans une pile unidimensionnelle, à l’horizontale ou à la verticale. Par défaut, une StackLayout est orientée verticalement.
Pour suivre ce didacticiel, vous devez disposer de Visual Studio 2019 (dernière version) sur lequel est installée la charge de travail Développement mobile en .NET. Vous aurez également besoin d’un Mac couplé pour générer l’application du didacticiel sur iOS. Pour plus d’informations sur l’installation de la plateforme Xamarin, consultez Installation de Xamarin. Pour plus d’informations sur la connexion de Visual Studio 2019 à un hôte de build Mac, consultez l’article Appairer avec un Mac pour le développement Xamarin.iOS.
Lancez Visual Studio et créez une application vide Xamarin.Forms nommée StackLayoutTutorial.
Important
Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer StackLayoutTutorial. L’utilisation d’un autre nom entraîne des erreurs de build quand vous copiez le code à partir de ce didacticiel dans la solution.
Pour plus d’informations sur la bibliothèque .NET Standard créée, consultez Anatomie d’une Xamarin.Forms application dans le Xamarin.Forms guide de démarrage rapide Deep Dive.
Dans l’Explorateur de solutions, dans le projet StackLayoutTutorial, double-cliquez sur MainPage.xaml pour l’ouvrir. Puis, dans MainPage.xaml, supprimez tout le code du modèle et remplacez-le par le code suivant :
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="StackLayoutTutorial.MainPage"> <StackLayout Margin="20,35,20,25"> <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." /> <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." /> <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." /> </StackLayout> </ContentPage>Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend trois instances
Labeldans unStackLayout.StackLayoutpositionne ses affichages enfants (les instancesLabel) sur une seule ligne, laquelle est orientée verticalement par défaut. En outre, la propriétéMarginindique la position de rendu de l’élémentStackLayoutdansContentPage.Remarque
Outre la propriété
Margin, les propriétésPaddingetSpacingpeuvent également être définies surStackLayout. La valeur de propriétéPaddingspécifie la distance entre les affichages dansStackLayoutet la valeur de propriétéSpacingspécifie la quantité d’espace entre chaque élément enfant dansStackLayout. Pour plus d’informations, consultez Marge et remplissage.Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android de votre choix :
Pour plus d’informations sur stackLayout
StackLayoutXamarin.Forms.
Spécifier l’orientation
Dans MainPage.xaml, modifiez la déclaration
StackLayoutpour en aligner les éléments enfants à l’horizontale plutôt qu’à la verticale :<StackLayout Margin="20,35,20,25" Orientation="Horizontal"> <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." /> <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." /> <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." /> </StackLayout>Ce code définit la propriété
OrientationsurHorizontal.Si l’application est toujours en cours d’exécution, enregistrez les modifications dans le fichier : l’interface utilisateur de l’application est alors mise à jour automatiquement dans votre simulateur ou votre émulateur. Sinon, dans la barre d’outils de Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android que vous avez choisi :
Notez que les instances
Labeldans leStackLayoutsont maintenant alignées horizontalement, au lieu de verticalement.
Contrôler l’alignement et l’expansion
La taille et la position des vues enfants au sein d’une StackLayout fonction dépendent des valeurs des vues HeightRequest et WidthRequest propriétés enfants, ainsi que des valeurs des propriétés et VerticalOptions des HorizontalOptions propriétés.
Les propriétés HorizontalOptions et VerticalOptions peuvent être définies sur des champs à partir de la struct LayoutOptions, qui encapsule deux préférences de mise en page :
- Alignement : les préférences d’alignement de l’affichage enfant, qui déterminent sa position et da taille au sein dans sa mise en page parente.
- Extension : indique si l’affichage enfant doit utiliser un espace supplémentaire, s’il est disponible (utilisé uniquement par
StackLayout).
Dans MainPage.xaml, modifiez la déclaration
StackLayoutpour définir les options d’alignement et d’extension pour chaqueLabel:<StackLayout Margin="20,35,20,25"> <Label Text="Start" HorizontalOptions="Start" BackgroundColor="Gray" /> <Label Text="Center" HorizontalOptions="Center" BackgroundColor="Gray" /> <Label Text="End" HorizontalOptions="End" BackgroundColor="Gray" /> <Label Text="Fill" HorizontalOptions="Fill" BackgroundColor="Gray" /> <Label Text="StartAndExpand" VerticalOptions="StartAndExpand" BackgroundColor="Gray" /> <Label Text="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Gray" /> <Label Text="EndAndExpand" VerticalOptions="EndAndExpand" BackgroundColor="Gray" /> <Label Text="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Gray" /> </StackLayout>Ce code définit les préférences d’alignement sur les quatre premières instances
Labelainsi que les préférences d’extension sur les quatre dernières instancesLabel. Les champsStart,Center,EndetFillsont utilisés pour définir l’alignement des instancesLabeldans leStackLayoutparent. Les champsStartAndExpand,CenterAndExpand,EndAndExpandetFillAndExpandsont utilisés pour définir les préférences d’alignement et indiquent si l’affichage occupe plus d’espace que la quantité disponible dans leStackLayoutparent.Remarque
La valeur par défaut des propriétés
HorizontalOptionsetVerticalOptionsd’un affichage estFill.Si l’application est toujours en cours d’exécution, enregistrez les modifications dans le fichier : l’interface utilisateur de l’application est alors mise à jour automatiquement dans votre simulateur ou votre émulateur. Sinon, dans la barre d’outils de Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android que vous avez choisi :
Un
StackLayoutrespecte uniquement les préférences d’alignement sur les affichages enfants qui se trouvent dans la direction opposée à l’orientationStackLayout. Par conséquent, les vues enfantsLabeldansStackLayoutorienté verticalement définissent leurs propriétésHorizontalOptionssur l’un des champs d’alignement :Start, qui positionneLabelà gauche deStackLayout.Center, qui centreLabeldansStackLayout.End, qui positionneLabelà droite deStackLayout.Fill, qui garantit queLabelremplit la largeur deStackLayout.
Un
StackLayoutpeut uniquement développer les affichages enfants dans le sens de son orientation. Par conséquent, leStackLayoutorienté verticalement peut développer les affichages enfantsLabelqui définissent leurs propriétésVerticalOptionssur l’un des champs d’extension. Cela signifie que, pour l’alignement vertical, chaqueLabeloccupe la même quantité d’espace dansStackLayout. En revanche, seule la dernière instanceLabel, qui définit sa propriétéVerticalOptionssurFillAndExpanda une taille différente.Important
Lorsque tout l’espace de
StackLayoutest utilisé, les préférences d’extension n’ont aucun effet.Dans Visual Studio, arrêtez l’application.
Pour plus d’informations sur l’alignement et l’expansion, consultez Options de disposition dans Xamarin.Forms.
Félicitations !
Félicitations ! Vous avez terminé ce didacticiel qui vous a expliqué comment effectuer les opérations suivantes :
- Créez un Xamarin.Forms
StackLayoutcode XAML. - Spécifier l’orientation du
StackLayout. - Contrôler l’alignement et l’expansion de l’affichage enfant dans le
StackLayout.
Étapes suivantes
Pour en savoir plus sur les principes de base de la création d’applications mobiles avec Xamarin.Forms, passez au didacticiel Sur l’étiquette.
Liens connexes
Vous avez un défi avec cette section ? Si c'est le cas, faites-nous part de vos commentaires pour que nous puissions l'améliorer.