Xamarin.Forms Layout

Scaricare l'esempio. Scaricare l'esempio

Xamarin.Forms I layout vengono usati per comporre controlli dell'interfaccia utente in strutture visive.

Le Layout classi e in sono Layout<T> Xamarin.Forms sottotipi specializzati di visualizzazioni che fungono da contenitori per le visualizzazioni e altri layout. La Layout classe stessa deriva da View . Un Layout derivato contiene in genere la logica per impostare la posizione e le dimensioni degli elementi figlio nelle Xamarin.Forms applicazioni.

[! Xamarin.Forms Tipi di layout

Le classi che derivano Layout da possono essere suddivise in due categorie:

Layout con contenuto singolo

Queste classi derivano Layout da , che definisce le proprietà e Padding IsClippedToBounds :

Tipo Descrizione Aspetto
ContentView ContentView contiene un singolo elemento figlio impostato con la Content proprietà . La Content proprietà può essere impostata su qualsiasi View derivato, inclusi altri Layout derivati. ContentView viene usato principalmente come elemento strutturale e funge da classe base per Frame .

Documentazione dell'API / Guida / Esempio
! [Esempio di ContentView] (layouts-images/ContentView.png "ContentView Example".
Codice C# per questa pagina / Pagina XAML
Frame La Frame classe deriva da e visualizza un ContentView bordo, o frame, intorno al relativo elemento figlio. La Frame classe ha un valore predefinito di Padding 20 e definisce anche BorderColor le proprietà , e CornerRadius HasShadow .

Documentazione dell'API / Guida / Esempio
! [Esempio di frame] (layouts-images/Frame.png "Esempio di frame".
Codice C# per questa pagina / Pagina XAML
ScrollView ScrollView è in grado di scorrere il contenuto. Impostare la Content proprietà su una visualizzazione o un layout troppo grande per adattarsi alla schermata. Il contenuto di un ScrollView oggetto è molto spesso un StackLayout . Impostare la Orientation proprietà per indicare se lo scorrimento deve essere verticale, orizzontale o entrambi.

Documentazione dell'API / Guida / Esempio
! [Esempio di ScrollView] (layouts-images/ScrollView.png "ScrollView Example".
Codice C# per questa pagina / Pagina XAML
TemplatedView TemplatedView visualizza il contenuto con un modello di controllo ed è la classe di base per ContentView .

Documentazione dell'API / Guida
! [Esempio di TemplatedView] (layouts-images/TemplatedView.png "TemplatedView Example".
ContentPresenter ContentPresenter è un gestore di layout per le visualizzazioni modello, usato all'interno di un oggetto per contrassegnare la posizione in cui viene ControlTemplate visualizzato il contenuto da presentare.

Documentazione dell'API / Guida
! [Esempio di ContentPresenter] (layouts-images/ContentPresenter.png "ContentPresenter Example".

Layout con più elementi figlio

Queste classi derivano da Layout<View> :

Tipo Descrizione Aspetto
StackLayout StackLayout posiziona gli elementi figlio in uno stack orizzontalmente o verticalmente in base alla Orientation proprietà . La Spacing proprietà determina la spaziatura tra gli elementi figlio e ha un valore predefinito di 6.

Documentazione dell'API / Guida / Esempio
! [Esempio di StackLayout] (layouts-images/StackLayout.png "Esempio di StackLayout".
Codice C# per questa pagina / Pagina XAML
Grid Grid posiziona gli elementi figlio in una griglia di righe e colonne. La posizione di un elemento figlio viene indicata usando le proprietà associate , , e Row Column RowSpan ColumnSpan .

Documentazione dell'API / Guida / Esempio
! [Esempio di griglia] (layouts-images/Grid.png "Grid Example".
Codice C# per questa pagina / Pagina XAML
AbsoluteLayout AbsoluteLayout posiziona gli elementi figlio in posizioni specifiche relative al relativo elemento padre. La posizione di un elemento figlio viene indicata usando le proprietà associate e LayoutBounds LayoutFlags . Un AbsoluteLayout oggetto è utile per animare le posizioni delle visualizzazioni.

Documentazione dell'API / Guida / Esempio
! [Esempio di AbsoluteLayout] (layouts-images/AbsoluteLayout.png "AbsoluteLayout Example".
Codice C# per questa pagina / Pagina XAML con code-behind
RelativeLayout RelativeLayout posiziona gli elementi figlio rispetto a RelativeLayout se stesso o ai relativi elementi di pari livello. La posizione di un elemento figlio viene indicata usando le proprietà associate impostate su oggetti di tipo Constraint e BoundsConstraint .

Documentazione dell'API / Guida / Esempio
! [Esempio relativeLayout] (layouts-images/RelativeLayout.png "Esempio RelativeLayout".
Codice C# per questa pagina / Pagina XAML
FlexLayout FlexLayoutè basato sul modulo CSS Flexible Box Layout Module,comunemente noto come flex layout o flex-box. FlexLayout definisce sei proprietà associabili e cinque proprietà associabili associate che consentono agli elementi figlio di essere impilati o incapsulati con molte opzioni di allineamento e orientamento.

Documentazione dell'API / Guida / Esempio
! [Esempio di FlexLayout] (layouts-images/FlexLayout.png "FlexLayout Example".
Codice C# per questa pagina / Pagina XAML