Contrôle de conteneur Grid dans Power Apps (préversion)

[Cet article est un document en préversion et est susceptible de changer.]

Le contrôle de conteneur Grid vous permet de mettre en page les composants enfants dans un modèle de grille. Vous obtenez un contrôle précis sur l’emplacement de chaque composant en termes de lignes et de colonnes.

Ce conteneur fonctionne comme des grilles de style CSS. Vous définissez les lignes et colonnes et définissez la position exacte de chaque composant enfant à l’aide de ses propriétés.

Descriptif

Le contrôle de conteneur Grid offre un système de disposition flexible pour les applications de canevas. L’application vous permet de :

• Placer des composants enfants dans un modèle de grille
• Spécifier la ligne et la fin de la colonne pour chaque enfant
• Apporter des ajustements réactifs lorsque la taille du conteneur ou de l’écran change
• Contrôler l’alignement, l’espacement et le dépassement de capacité dans la grille

À l’aide de cette approche, vous n’avez pas besoin de positionner manuellement chaque composant. Vos applications deviennent plus faciles à gérer et réactives.

Propriétés d’affichage

• Espacement en pixels entre les composants enfants à l’intérieur de la grille.
• Colonnes : nombre de colonnes dans la disposition de la grille.
• Lignes : nombre de lignes dans la disposition de la grille.

Taille et poste

• X : distance horizontale du bord gauche du conteneur parent (ou écran si aucun parent).
• Y : distance verticale du bord supérieur du conteneur parent (ou écran si aucun parent).
• Largeur : distance entre les bords gauche et droit d’un contrôle.
• Hauteur : distance entre les bords supérieurs et inférieurs d’un contrôle.
• Remplissage : espacement entre les bords du conteneur et ses composants enfants.

Couleur et bordure

• Couleur : couleur de premier plan du conteneur, utilisée pour les bordures et le texte le cas échéant.
• Border
  • Style : type de bordure : Solid, Dashed, Dotted ou None.
  • Épaisseur : largeur de la bordure en pixels.
  • Couleur : couleur de la bordure.
• Rayon de bordure : degré auquel les angles du conteneur sont arrondis. Vous pouvez appliquer ce paramètre à tous les coins uniformément ou le fractionner en angles individuels dans des paramètres avancés.
• Ombre déroulante : effet d’ombre appliqué au conteneur. Options : Aucun, Léger, Moyen ou Lourd.

Visibilité

• Visible : indique si le conteneur de grille est affiché. Activer oudésactiver.

Propriétés de disposition de grille (spécifiques à l’enfant)

• Début de colonne / Fin de colonne : définit les colonnes de début et de fin d’un composant enfant.
• Début de ligne / fin de ligne : définit les lignes de début et de fin d’un composant enfant.

Example

1. Créez une application de canevas vide à partir de zéro avec une disposition réactive .

2. Créez un écran.

3. Dans le volet Insertion sous Disposition, sélectionnez Conteneur Grid.

4. Définissez les propriétés du conteneur pour occuper l’écran plein écran :

   • X = 0
   • Y = 0
   • Largeur = Parent.Width
   • Height = Parent.Height

5. Ajoutez plusieurs composants enfants, tels que des boutons, des entrées de texte, des icônes et des supports. Pour chaque enfant, définissez les propriétés de placement de la grille :

   • Début/fin de la colonne
   • Début/fin de ligne
   • Aligner dans la cellule

6. Appuyez sur F5 pour afficher un aperçu. Redimensionnez l’écran et observez comment les composants enfants restent dans leurs positions de grille et s’ajustent de manière réactive.