Xamarin.Forms Tutoriel sur la grille

Article
Developer (Débutant)
9 minutes avant achèvement

Avant de tenter ce didacticiel, vous devez avoir suivi les guides et didacticiels suivants :

Créez votre premier Xamarin.Forms démarrage rapide d’application .

Dans ce tutoriel, vous allez apprendre à :

Créez un Xamarin.FormsGrid 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

8 minutes restantes

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.

Visual Studio
Visual Studio pour Mac

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 dans Grid. Par défaut, l’élément Grid positionne ses vues enfants dans un emplacement unique. Par conséquent, lorsqu’il contient plusieurs enfants, un élément Grid 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ément Grid dans ContentPage.

Remarque

Outre la propriété Margin, la propriété Padding peut également être définie sur Grid. La valeur de la propriété Padding spécifie la distance entre les limites de la Grid 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 Gridgrille, consultez Xamarin.Forms Grid.

Pour suivre ce didacticiel, vous devez disposer de Visual Studio pour Mac (dernière version) avec une prise en charge des plateformes iOS et Android. Vous aurez également besoin de Xcode (dernière version). Pour plus d’informations sur l’installation de la plateforme Xamarin, consultez Installation de Xamarin.

Lancez Visual Studio pour Mac 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 Panneau 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 dans Grid. Par défaut, l’élément Grid positionne ses vues enfants dans un emplacement unique. Par conséquent, lorsqu’il contient plusieurs enfants, un élément Grid 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ément Grid dans ContentPage.

Remarque

Outre la propriété Margin, la propriété Padding peut également être définie sur Grid. La valeur de propriété Padding spécifie la distance entre les vues dans l’élément Grid. Pour plus d’informations, consultez Marge et remplissage.
Dans la barre d’outils Visual Studio pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android de votre choix :

Pour plus d’informations sur la Gridgrille, consultez Xamarin.Forms Grid.

Spécifier des colonnes et des lignes

6 minutes restantes

Visual Studio
Visual Studio pour Mac

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 instances Label dans des colonnes et des lignes spécifiques. Les données des colonnes et des lignes sont stockées dans les propriétés ColumnDefinitions et RowDefinitions, qui représentent respectivement des collections d’objets ColumnDefinition et RowDefinition. La largeur de chaque ColumnDefinition est définie par la propriété ColumnDefinition.Width et la hauteur de chaque RowDefinition 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 dans Grid est spécifiée avec les propriétés Grid.Column et Grid.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ère Label 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és ColumnSpacing et RowSpacing. 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 :

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 instances Label dans des colonnes et des lignes spécifiques. Les données des colonnes et des lignes sont stockées dans les propriétés ColumnDefinitions et RowDefinitions, qui représentent respectivement des collections d’objets ColumnDefinition et RowDefinition. La largeur de chaque ColumnDefinition est définie par la propriété ColumnDefinition.Width et la hauteur de chaque RowDefinition 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 dans Grid est spécifiée avec les propriétés Grid.Column et Grid.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ère Label 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és ColumnSpacing et RowSpacing. 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 pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android que vous avez choisi :

Étendre du contenu sur plusieurs colonnes ou lignes

2 minutes restantes

Visual Studio
Visual Studio pour Mac

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 instances Label dans des colonnes et des lignes spécifiques. La première Label définit la propriété jointe ColumnSpan 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’occupera Label. La deuxième Label définit la propriété jointe RowSpan 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’occupera Label.
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 .

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 instances Label dans des colonnes et des lignes spécifiques. La première Label définit la propriété jointe ColumnSpan 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’occupera Label. La deuxième Label définit la propriété jointe RowSpan 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’occupera Label.
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 pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android que vous avez choisi :

Dans Visual Studio pour Mac, 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 .

Xamarin.Forms Tutoriel sur la grille

Créer une grille

Spécifier des colonnes et des lignes

Étendre du contenu sur plusieurs colonnes ou lignes

Félicitations !

Étapes suivantes

Xamarin.Forms Tutoriel sur la grille

Créer une grille

Spécifier des colonnes et des lignes

Étendre du contenu sur plusieurs colonnes ou lignes

Félicitations !

Étapes suivantes

Liens connexes