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
Gridcode 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
LabeldansGrid. Par défaut, l’élémentGridpositionne ses vues enfants dans un emplacement unique. Par conséquent, lorsqu’il contient plusieurs enfants, un élémentGriddoit spécifier des colonnes et des lignes. Nous aborderons ce sujet dans l’exercice suivant. En outre, la propriétéMarginindique la position de rendu de l’élémentGriddansContentPage.Remarque
Outre la propriété
Margin, la propriétéPaddingpeut également être définie surGrid. La valeur de la propriétéPaddingspécifie la distance entre les limites de laGridet 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
Gridgrille, consultez Xamarin.Forms Grid.
Spécifier des colonnes et des lignes
Dans MainPage.xaml, modifiez la déclaration
Gridpour 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
Gridet positionne les instancesLabeldans des colonnes et des lignes spécifiques. Les données des colonnes et des lignes sont stockées dans les propriétésColumnDefinitionsetRowDefinitions, qui représentent respectivement des collections d’objetsColumnDefinitionetRowDefinition. La largeur de chaqueColumnDefinitionest définie par la propriétéColumnDefinition.Widthet la hauteur de chaqueRowDefinitionest 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
LabeldansGridest spécifiée avec les propriétésGrid.ColumnetGrid.Rowqui 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èreLabelne 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
Gridpeut être défini avec les propriétésColumnSpacingetRowSpacing. 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
Gridpour 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
Gridet positionne les instancesLabeldans des colonnes et des lignes spécifiques. La premièreLabeldéfinit la propriété jointeColumnSpanafin que son texte s’étende sur plusieurs colonnes. La propriétéColumnSpanest définie sur 2, qui représente le nombre de colonnes qu’occuperaLabel. La deuxièmeLabeldéfinit la propriété jointeRowSpanafin que son texte s’étende sur plusieurs lignes. La propriétéRowSpanest 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
Gridcode 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.