Xamarin.Forms Tutoriel sur la grille
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
Grid
code XAML. - Spécifier des colonnes et des lignes pour
Grid
. - Étendre le contenu sur plusieurs colonnes ou plusieurs lignes dans
Grid
.
Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment positionner les contrôles au sein d’une Grid
. 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 une grille
Une Grid
est une disposition qui organise ses enfants en lignes et en colonnes, qui peuvent avoir des tailles proportionnelles ou absolues. Par défaut, une Grid
contient une ligne et une colonne.
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 GridTutorial.
Important
Pour les extraits C# et XAML de ce didacticiel, la solution doit se nommer GridTutorial. 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 GridTutorial, 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="GridTutorial.MainPage"> <Grid Margin="20,35,20,20"> <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." /> </Grid> </ContentPage>
Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend un élément
Label
dansGrid
. Par défaut, l’élémentGrid
positionne ses vues enfants dans un emplacement unique. Par conséquent, lorsqu’il contient plusieurs enfants, un élémentGrid
doit spécifier des colonnes et des lignes. Nous aborderons ce sujet dans l’exercice suivant. En outre, la propriétéMargin
indique la position de rendu de l’élémentGrid
dansContentPage
.Remarque
Outre la propriété
Margin
, la propriétéPadding
peut également être définie surGrid
. La valeur de la propriétéPadding
spécifie la distance entre les limites de laGrid
et ses enfants. 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 la
Grid
grille, consultez Xamarin.Forms Grid.
Spécifier des colonnes et des lignes
Dans MainPage.xaml, modifiez la déclaration
Grid
pour définir des colonnes et des lignes, et pour y placer du contenu :<Grid Margin="20,35,20,20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.5*" /> <ColumnDefinition Width="0.5*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="50" /> </Grid.RowDefinitions> <Label Text="Column 0, Row 0" /> <Label Grid.Column="1" Text="Column 1, Row 0" /> <Label Grid.Row="1" Text="Column 0, Row 1" /> <Label Grid.Column="1" Grid.Row="1" Text="Column 1, Row 1" /> </Grid>
Ce code définit des colonnes et des lignes pour
Grid
et positionne les instancesLabel
dans des colonnes et des lignes spécifiques. Les données des colonnes et des lignes sont stockées dans les propriétésColumnDefinitions
etRowDefinitions
, qui représentent respectivement des collections d’objetsColumnDefinition
etRowDefinition
. La largeur de chaqueColumnDefinition
est définie par la propriétéColumnDefinition.Width
et la hauteur de chaqueRowDefinition
est définie par la propriétéRowDefinition.Height
. Les valeurs de largeur et de hauteur valides sont :Auto
, qui dimensionne la colonne ou ligne en fonction du contenu.- Des valeurs proportionnelles qui dimensionnent les colonnes et les lignes proportionnellement à l’espace restant. Les valeurs proportionnelles se terminent par un
*
. - Des valeurs absolues qui dimensionnent les colonnes ou les lignes avec des valeurs fixes spécifiques.
Par conséquent, dans le code ci-dessus, chaque colonne a une largeur correspondant à la moitié de
Grid
, tandis que chaque ligne a une hauteur de 50 unités indépendantes du périphérique.La position de chaque
Label
dansGrid
est spécifiée avec les propriétésGrid.Column
etGrid.Row
qui lui sont jointes, à l’aide d’un index de base zéro. La première colonne est donc la colonne 0 et la première ligne est la ligne 0. La premièreLabel
ne dispose pas de ces propriétés jointes, car n’importe quel affichage enfant qui ne la définit pas sera automatiquement restitué dans la colonne 0, ligne 0.Remarque
L’espacement entre les colonnes et lignes dans
Grid
peut être défini avec les propriétésColumnSpacing
etRowSpacing
. Pour plus d’informations, consultez Espacement dans le Xamarin.Forms guide de grille.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 :
Étendre du contenu sur plusieurs colonnes ou lignes
Dans MainPage.xaml, modifiez la déclaration
Grid
pour définir des colonnes et des lignes, et pour y placer du contenu sur toutes ces colonnes et lignes :<Grid Margin="20,35,20,20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.5*" /> <ColumnDefinition Width="0.5*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="30" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> <Label Grid.ColumnSpan="2" Text="This text uses the ColumnSpan property to span both columns." /> <Label Grid.Row="1" Grid.RowSpan="2" Text="This text uses the RowSpan property to span two rows." /> </Grid>
Ce code définit des colonnes et des lignes pour
Grid
et positionne les instancesLabel
dans des colonnes et des lignes spécifiques. La premièreLabel
définit la propriété jointeColumnSpan
afin que son texte s’étende sur plusieurs colonnes. La propriétéColumnSpan
est définie sur 2, qui représente le nombre de colonnes qu’occuperaLabel
. La deuxièmeLabel
définit la propriété jointeRowSpan
afin que son texte s’étende sur plusieurs lignes. La propriétéRowSpan
est définie sur 2, qui représente le nombre de lignes qu’occuperaLabel
.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 :
Dans Visual Studio, arrêtez l’application.
Pour plus d’informations sur l’étendue des colonnes et des lignes, consultez Lignes et colonnes dans le Xamarin.Forms guide de grille .
Félicitations !
Félicitations ! Vous avez terminé ce didacticiel qui vous a expliqué comment effectuer les opérations suivantes :
- Créez un Xamarin.Forms
Grid
code XAML. - Spécifier des colonnes et des lignes pour
Grid
. - Étendre le contenu sur plusieurs colonnes ou plusieurs lignes dans
Grid
.
Étapes suivantes
Pour en savoir plus sur les principes de base de la création d’applications mobiles avec Xamarin.Forms, passez au didacticiel CollectionView.
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.