Riepilogo del capitolo 4. Scorrimento dello stack
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.
Questo capitolo è dedicato principalmente all'introduzione del concetto di layout, che è il termine complessivo per le classi e le tecniche che Xamarin.Forms usa per organizzare la visualizzazione visiva di più visualizzazioni nella pagina.
Il layout include diverse classi che derivano da Layout e Layout<T>. Questo capitolo è incentrato su StackLayout.
Nota
L'oggetto FlexLayout introdotto nella Xamarin.Forms versione 3.0 può essere usato in modi simili a StackLayout ma con maggiore flessibilità.
In questo capitolo sono state introdotte anche le ScrollViewclassi , Framee BoxView .
Stack di viste
StackLayout deriva da Layout<View> e eredita una Children proprietà di tipo IList<View>. Aggiungere più elementi di visualizzazione a questa raccolta e StackLayout visualizzarli in uno stack orizzontale o verticale.
Impostare la Orientation proprietà di StackLayout su un membro dell'enumerazione StackOrientation o Vertical Horizontal. Il valore predefinito è Vertical.
Impostare la Spacing proprietà di StackLayout su un double valore per specificare una spaziatura tra gli elementi figlio. Il valore predefinito è 6.
Nel codice è possibile aggiungere elementi alla raccolta di in un for ciclo o foreach come illustrato nell'esempio ColorLoop oppure inizializzare la Children raccolta con un elenco delle singole visualizzazioni, come illustrato in ColorList.StackLayout Children Gli elementi figlio devono derivare da View ma possono includere altri StackLayout oggetti.
Scorrimento del contenuto
Se un StackLayout oggetto contiene troppi elementi figlio da visualizzare in una pagina, è possibile inserire in StackLayout un ScrollView oggetto per consentire lo scorrimento.
Impostare la Content proprietà di ScrollView sulla visualizzazione che si desidera scorrere. Si tratta spesso di un StackLayoutoggetto , ma può essere qualsiasi visualizzazione.
Impostare la Orientation proprietà di ScrollView su un membro della ScrollOrientation proprietà , Vertical, Horizontalo Both. Il valore predefinito è Vertical. Se il contenuto di è ScrollView un StackLayout, i due orientamenti devono essere coerenti.
L'esempio ReflectedColors illustra l'uso di ScrollView e StackLayout per visualizzare i colori disponibili. L'esempio illustra anche come usare la reflection .NET per ottenere tutte le proprietà e i campi statici pubblici della Color struttura senza la necessità di elencarli in modo esplicito.
Opzione Espandi
Quando un StackLayout elemento stack i relativi elementi figlio, ogni figlio occupa uno slot specifico all'interno dell'altezza totale di StackLayout che dipende dalle dimensioni dell'elemento figlio e dalle impostazioni delle relative HorizontalOptions proprietà e VerticalOptions . Queste proprietà sono valori assegnati di tipo LayoutOptions.
La LayoutOptions struttura definisce due proprietà:
Alignmentdel tipo diLayoutAlignmentenumerazione con quattro membri,Start,Center,EndeFillExpandsdi tipobool
Per praticità, la LayoutOptions struttura definisce anche otto campi statici di sola lettura di tipo LayoutOptions che includono tutte le combinazioni delle due proprietà dell'istanza:
LayoutOptions.StartLayoutOptions.CenterLayoutOptions.EndLayoutOptions.FillLayoutOptions.StartAndExpandLayoutOptions.CenterAndExpandLayoutOptions.EndAndExpandLayoutOptions.FillAndExpand
La discussione seguente prevede un StackLayout oggetto con orientamento verticale predefinito. L'oggetto orizzontale StackLayout è analogo.
Per un oggetto verticale StackLayout, l'impostazione HorizontalOptions determina il modo in cui un elemento figlio viene posizionato orizzontalmente all'interno della larghezza di StackLayout. Un'impostazione Alignment di Start, Centero End fa sì che l'elemento figlio sia orizzontalmente non vincolato. L'elemento figlio determina la propria larghezza e viene posizionato a sinistra, al centro o a destra dell'oggetto StackLayout. L'opzione Fill fa sì che l'elemento figlio sia vincolato orizzontalmente e riempia la larghezza di StackLayout.
Per un elemento verticale StackLayout, ogni figlio è verticalmente non vincolato e ottiene uno slot verticale a seconda dell'altezza dell'elemento figlio, nel qual caso l'impostazione VerticalOptions è irrilevante.
Se il valore verticale stesso non è vincolato StackLayout , ovvero se l'impostazione VerticalOptions è Start, Centero End, l'altezza di StackLayout è l'altezza totale degli elementi figlio.
Tuttavia, se il valore verticale è vincolato StackLayout verticalmente, se l'impostazione VerticalOptions è Fill, l'altezza di sarà l'altezza del StackLayout contenitore, che potrebbe essere maggiore dell'altezza totale degli elementi figlio. Se questo è il caso e se almeno un figlio ha un'impostazione VerticalOptions con un Expands flag di true, lo spazio aggiuntivo in StackLayout viene allocato equamente tra tutti gli elementi figlio con un Expands flag di true. L'altezza totale degli elementi figlio sarà quindi uguale all'altezza di StackLayoute la parte dell'impostazione determina il Alignment modo in cui l'elemento VerticalOptions figlio viene posizionato verticalmente nello slot.
Questo è illustrato nell'esempio VerticalOptionsDemo .
Frame e BoxView
Queste due visualizzazioni rettangolari vengono spesso utilizzate a scopo di presentazione.
La Frame visualizzazione visualizza una cornice rettangolare attorno a un'altra visualizzazione, che può essere un layout come StackLayout. Frame eredita una Content proprietà da ContentView che è stata impostata sulla vista da visualizzare all'interno di Frame. l'oggetto Frame è trasparente per impostazione predefinita. Impostare le tre proprietà seguenti per personalizzare l'aspetto della cornice:
- Proprietà
OutlineColorda rendere visibile. È comune impostare suOutlineColorColor.Accentquando non si conosce la combinazione di colori sottostante. - La
HasShadowproprietà può essere impostata sutrueper visualizzare un'ombreggiatura nera nei dispositivi iOS. - Impostare la
Paddingproprietà su unThicknessvalore per lasciare uno spazio tra il frame e il contenuto del frame. Il valore predefinito è 20 unità su tutti i lati.
l'oggetto Frame ha i valori predefiniti HorizontalOptions e VerticalOptions di LayoutOptions.Fill, il che significa che riempirà il Frame contenitore. Con altre impostazioni, la dimensione di Frame è basata sulle dimensioni del contenuto.
Viene Frame illustrato nell'esempio FramedText .
BoxView Visualizza un'area rettangolare di colore specificata dalla relativa Color proprietà.
Se è BoxView vincolato (le relative HorizontalOptions proprietà e VerticalOptions hanno le impostazioni predefinite di LayoutOptions.Fill), BoxView riempie lo spazio disponibile. Se l'oggetto BoxView non è vincolato (con HorizontalOptions le impostazioni e LayoutOptions di Start, Centero End), ha una dimensione predefinita di 40 unità quadrate. Un BoxView oggetto può essere vincolato in una dimensione e non vincolato nell'altro.
Spesso, si impostano le WidthRequest proprietà e HeightRequest di BoxView per assegnargli una dimensione specifica. Questo è illustrato dall'esempio SizedBoxView .
È possibile usare diverse istanze di StackLayout per combinare un BoxView oggetto e più Label istanze di in per Frame visualizzare un particolare colore e quindi inserire ognuna di queste visualizzazioni in un in per ScrollView StackLayout creare l'elenco accattivante di colori visualizzati nell'esempio ColorBlocks:
ScrollView in un oggetto StackLayout?
L'inserimento di un in StackLayout un ScrollView è comune, ma l'inserimento di un in ScrollView un StackLayout è anche conveniente. In teoria, ciò non dovrebbe essere possibile perché gli elementi figlio di un verticale StackLayout non sono vincolati verticalmente. Ma un ScrollView oggetto deve essere vincolato verticalmente. Deve essere data un'altezza specifica in modo che possa quindi determinare le dimensioni del figlio per lo scorrimento.
Il trucco consiste nel dare al ScrollView figlio di un'impostazione StackLayout VerticalOptions di FillAndExpand. Questo è illustrato nell'esempio BlackCat .
L'esempio BlackCat illustra anche come definire e accedere alle risorse del programma incorporate nella libreria condivisa. Questa operazione può essere ottenuta anche con i progetti di asset condivisi (SAP), ma il processo è un po' più complicato, come dimostra l'esempio BlackCatSap .