Riepilogo del capitolo 17. Il controllo della griglia
Nota
Questo libro è stato pubblicato nella primavera del 2016, e non è stato aggiornato da allora. C'è molto nel libro che rimane prezioso, ma alcuni materiali sono obsoleti, e alcuni argomenti non sono più completamente corretti o completi.
Grid è un potente meccanismo di layout che dispone i relativi elementi figlio in righe e colonne di celle. A differenza dell'elemento HTML table simile, l'oggetto Grid è esclusivamente ai fini del layout anziché della presentazione.
Griglia di base
Grid deriva da Layout<View>, che definisce una Children proprietà che Grid eredita. Puoi compilare questa raccolta in XAML o nel codice.
Griglia in XAML
La definizione di un Grid oggetto in XAML inizia in genere con la compilazione delle RowDefinitions raccolte e ColumnDefinitions di Grid con RowDefinition gli oggetti e ColumnDefinition . Questo è il modo in cui si stabilisce il numero di righe e colonne dell'oggetto Gride le relative proprietà.
RowDefinitionha una proprietà e ColumnDefinition ha una Width Height proprietà, entrambi di tipo GridLength, una struttura .
In XAML, GridLengthTypeConverter converte le semplici stringhe di testo in GridLength valori. Dietro le quinte, il GridLength costruttore crea il GridLength valore in base a un numero e un valore di tipo GridUnitType, un'enumerazione con tre membri:
Absolute— la larghezza o l'altezza viene specificata in unità indipendenti dal dispositivo (un numero in XAML)Auto— l'altezza o la larghezza viene ridimensionata automaticamente in base al contenuto della cella ("Auto" in XAML)Star— altezza o larghezza rimanente allocata proporzionalmente (un numero con "*", denominato stella, in XAML)
A ogni elemento figlio di Grid deve essere assegnata anche una riga e una colonna (in modo esplicito o implicito). Gli intervalli di righe e gli intervalli di colonne sono facoltativi. Vengono tutti specificati usando le proprietà associabili associate, ovvero le proprietà definite dall'oggetto Grid ma impostate sugli elementi figlio dell'oggetto Grid. Grid definisce quattro proprietà associabili associate statiche:
RowProperty— la riga in base zero; il valore predefinito è 0ColumnProperty— colonna in base zero; il valore predefinito è 0RowSpanProperty— il numero di righe a cui si estende l'elemento figlio; il valore predefinito è 1ColumnSpanProperty— il numero di colonne a cui si estende l'elemento figlio; il valore predefinito è 1
Nel codice, un programma può usare otto metodi statici per impostare e ottenere questi valori:
Grid.SetRoweGrid.GetRowGrid.SetColumneGrid.GetColumnGrid.SetRowSpaneGrid.GetRowSpanGrid.SetColumnSpaneGrid.GetColumnSpan
In XAML usi gli attributi seguenti per impostare questi valori:
Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpan
L'esempio SimpleGridDemo illustra la creazione e l'inizializzazione di un Grid oggetto in XAML.
Grid Eredita la Padding proprietà da Layout e definisce due proprietà aggiuntive che forniscono la spaziatura tra le righe e le colonne:
RowSpacingha un valore predefinito pari a 6ColumnSpacingha un valore predefinito pari a 6
Le RowDefinitions raccolte e ColumnDefinitions non sono strettamente necessarie. Se assente, Grid crea righe e colonne per gli Grid elementi figlio e assegna a tutti un valore predefinito GridLength "*" (stella).
Griglia nel codice
L'esempio GridCodeDemo illustra come creare e popolare un Grid oggetto nel codice. È possibile impostare le proprietà associate per ogni elemento figlio direttamente o indirettamente chiamando metodi aggiuntivi, ad Add esempio definiti dall'interfaccia Grid.IGridList<T>.Add
Grafico a barre griglia
L'esempio GridBarChart mostra come aggiungere più BoxView elementi a un Grid oggetto usando il metodo bulkAddHorizontal. Per impostazione predefinita, questi BoxView elementi hanno una larghezza uguale. L'altezza di ogni BoxView oggetto può quindi essere controllata per assomigliare a un grafico a barre.
L'oggetto nell'esempio GridBarChart condivide un AbsoluteLayout elemento padre con un oggetto inizialmente invisibileFrame.Grid Il programma imposta anche un TapGestureRecognizer oggetto su ognuno BoxView per utilizzare per Frame visualizzare informazioni sulla barra toccata.
Allineamento nella griglia
L'esempio GridAlignment illustra come usare le VerticalOptions proprietà e HorizontalOptions per allineare gli elementi figlio in una Grid cella.
SpacingButtons campiona in modo uniforme gli Button elementi centrati nelle Grid celle.
Divisori e bordi delle celle
Grid Non include una funzionalità che disegna divisori di celle o bordi. Tuttavia, è possibile crearne uno personalizzato.
GridCellDividers illustra come definire righe e colonne aggiuntive in modo specifico per elementi sottili BoxView per simulare linee di divisione.
Il programma GridCellBorders non crea celle aggiuntive, ma allinea BoxView gli elementi in ogni cella per simulare un bordo di cella.
Esempi di Grid quasi reali
L'esempio KeypadGrid usa per Grid visualizzare un tastierino:
Risposta alle modifiche dell'orientamento
Grid Può aiutare a strutturare un programma per rispondere alle modifiche dell'orientamento. L'esempio GridRgbSliders illustra una tecnica che sposta un elemento tra una seconda riga di un telefono orientato ai ritratti e la seconda colonna di un telefono orientato verso il paesaggio.
Il programma inizializza gli Slider elementi in un intervallo compreso tra 0 e 255 e usa i data binding per visualizzare il valore dei dispositivi di scorrimento in formato esadecimale. Poiché i Slider valori sono a virgola mobile e la stringa di formattazione .NET per l'esadecimale funziona solo con numeri interi, una DoubleToIntConvert classe nella Xamarin.Formslibreria Book.Toolkit risulta utile.