Résumé du chapitre 17. Maîtrise de la grille
Remarque
Ce livre a été publié au printemps 2016 et n’a pas été mis à jour depuis. Il y a beaucoup dans le livre qui reste précieux, mais certains documents sont obsolètes, et certains sujets ne sont plus entièrement corrects ou complets.
Il Grid s’agit d’un mécanisme de disposition puissant qui organise ses enfants en lignes et en colonnes de cellules. Contrairement à l’élément HTML table similaire, il Grid s’agit uniquement d’une disposition plutôt que d’une présentation.
Grille de base
Grid dérive de Layout<View>, qui définit une Children propriété qui Grid hérite. Vous pouvez remplir cette collection en XAML ou en code.
Grille en XAML
La définition d’un Grid code XAML commence généralement par remplir les RowDefinitions ColumnDefinitions collections des objets et ColumnDefinition des RowDefinition Grid objets. Il s’agit de la façon dont vous établissez le nombre de lignes et de colonnes du Grid, ainsi que leurs propriétés.
RowDefinition a une Height propriété et ColumnDefinition a une Width propriété, à la fois de type GridLength, une structure.
En XAML, les GridLengthTypeConverter chaînes de texte simples sont converties en GridLength valeurs. En arrière-plan, le GridLength constructeur crée la GridLength valeur en fonction d’un nombre et d’une valeur de type GridUnitType, une énumération avec trois membres :
Absolute— la largeur ou la hauteur est spécifiée dans les unités indépendantes de l’appareil (un nombre en XAML)Auto— la hauteur ou la largeur est automatiquement mise en place en fonction du contenu de la cellule (« Auto » en XAML)Star— la hauteur ou la largeur restantes sont allouées proportionnellement (un nombre avec « * », appelé étoile, en XAML)
Chaque enfant du fichier Grid doit également être affecté à une ligne et une colonne (explicitement ou implicitement). Les étendues de lignes et les étendues de colonnes sont facultatives. Elles sont toutes spécifiées à l’aide de propriétés pouvant être liées jointes ( propriétés définies par l’objet Grid mais définies sur les enfants du Grid. Grid définit quatre propriétés pouvant être liées statiques :
RowProperty— ligne de base zéro ; la valeur par défaut est 0ColumnProperty— la colonne de base zéro ; la valeur par défaut est 0RowSpanProperty— nombre de lignes que l’enfant s’étend ; la valeur par défaut est 1ColumnSpanProperty— nombre de colonnes sur lesquelles s’étend l’enfant ; la valeur par défaut est 1
Dans le code, un programme peut utiliser huit méthodes statiques pour définir et obtenir ces valeurs :
Grid.SetRowetGrid.GetRowGrid.SetColumnetGrid.GetColumnGrid.SetRowSpanetGrid.GetRowSpanGrid.SetColumnSpanetGrid.GetColumnSpan
En XAML, vous utilisez les attributs suivants pour définir ces valeurs :
Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpan
L’exemple SimpleGridDemo illustre la création et l’initialisation d’un Grid fichier XAML.
Il Grid hérite de la Padding propriété et Layout définit deux propriétés supplémentaires qui fournissent un espacement entre les lignes et les colonnes :
RowSpacinga une valeur par défaut de 6ColumnSpacinga une valeur par défaut de 6
Les RowDefinitions collections et ColumnDefinitions les collections ne sont pas strictement requises. S’il est absent, les Grid lignes et les colonnes pour les Grid enfants sont créées et leur donnent tous une valeur par défaut GridLength « * » (étoile).
Grille dans le code
L’exemple GridCodeDemo montre comment créer et remplir un Grid code. Vous pouvez définir les propriétés jointes pour chaque enfant directement ou indirectement en appelant des méthodes supplémentaires Add telles que Add définies par l’interface T> Grid.IGridList<.
Graphique à barres de grille
L’exemple GridBarChart montre comment ajouter plusieurs BoxView éléments à une Grid méthode en blocAddHorizontal. Par défaut, ces BoxView éléments ont une largeur égale. La hauteur de chacun BoxView peut ensuite être contrôlée pour ressembler à un graphique à barres.
L’exemple GridBarChart partage un AbsoluteLayout parent avec un initialement invisibleFrame.Grid Le programme définit également une TapGestureRecognizer valeur sur chacune d’elles BoxView pour utiliser les Frame informations relatives à la barre taquetée.
Alignement dans la grille
L’exemple GridAlignment montre comment utiliser les propriétés et HorizontalOptions les VerticalOptions utiliser pour aligner les enfants dans une Grid cellule.
L’exemple SpacingButtons échantillonner également des éléments centrés Button dans les Grid cellules.
Séparateurs de cellules et bordures
Il Grid n’inclut pas de fonctionnalité qui dessine des séparateurs de cellules ou des bordures. Toutefois, vous pouvez faire votre propre.
GridCellDividers montre comment définir des lignes et des colonnes supplémentaires spécifiquement pour les éléments minces BoxView afin d’imiter les lignes de division.
Le programme GridCellBorders ne crée pas de cellules supplémentaires, mais aligne à la place les BoxView éléments de chaque cellule pour imiter une bordure de cellule.
Exemples de grille presque réels
L’exemple KeypadGrid utilise un Grid clavier pour afficher un pavé numérique :
Réponse aux modifications d’orientation
Il Grid peut aider à structurer un programme pour répondre aux changements d’orientation. L’exemple GridRgbSliders illustre une technique qui déplace un élément entre une deuxième ligne d’un téléphone orienté portrait et la deuxième colonne d’un téléphone orienté paysage.
Le programme initialise des Slider éléments à une plage de 0 à 255 et utilise des liaisons de données pour afficher la valeur des curseurs en hexadécimal. Étant donné que les Slider valeurs sont à virgule flottante et que la chaîne de mise en forme .NET pour les nombres hexadécimaux fonctionne uniquement avec des entiers, une DoubleToIntConvert classe de la Xamarin.Formsbibliothèque Book.Toolkit aide.