Opzioni di layout in Xamarin.Forms

Scaricare l'esempio

Ogni Xamarin.Forms visualizzazione ha proprietà HorizontalOptions e VerticalOptions, di tipo LayoutOptions. Questo articolo illustra l'effetto che ogni valore LayoutOptions ha sull'allineamento e l'espansione di una visualizzazione.

Panoramica

La LayoutOptions struttura incapsula due preferenze di layout:

• Allineamento: allineamento preferito della visualizzazione, che ne determina la posizione e le dimensioni all'interno del layout padre.
• Espansione : usata solo da un StackLayoutoggetto e indica se la visualizzazione deve usare spazio aggiuntivo, se disponibile.

Queste preferenze di layout possono essere applicate a un Viewoggetto , rispetto al relativo elemento padre, impostando la HorizontalOptions proprietà o VerticalOptions di View su uno dei campi pubblici dalla LayoutOptions struttura. I campi pubblici sono i seguenti:

• Start
• Center
• End
• Fill
• StartAndExpand
• CenterAndExpand
• EndAndExpand
• FillAndExpand

I Startcampi , Center, Ende Fill vengono usati per definire l'allineamento della visualizzazione all'interno del layout padre:

• Per l'allineamento orizzontale, Start posiziona l'oggetto View sul lato sinistro del layout padre e, per l'allineamento verticale, posiziona l'oggetto View nella parte superiore del layout padre.
• Per l'allineamento orizzontale e verticale, Center centra orizzontalmente o verticalmente l'oggetto View.
• Per l'allineamento orizzontale, End posiziona l'oggetto View sul lato destro del layout padre e, per l'allineamento verticale, posiziona l'oggetto View nella parte inferiore del layout padre.
• Per l'allineamento orizzontale, Fill assicura che riempia View la larghezza del layout padre e per l'allineamento verticale, garantisce che riempia l'altezza View del layout padre.

I StartAndExpandvalori , CenterAndExpand, EndAndExpande FillAndExpand vengono usati per definire la preferenza di allineamento e se la vista occupa più spazio se disponibile all'interno dell'elemento padre StackLayout.

Nota

Il valore predefinito delle proprietà HorizontalOptions e VerticalOptions di una vista è LayoutOptions.Fill.

Allineamento

L'allineamento controlla il modo in cui una visualizzazione viene posizionata all'interno del layout padre quando il layout padre contiene spazio inutilizzato, ovvero il layout padre è maggiore della dimensione combinata di tutti i relativi elementi figlio.

Un StackLayout oggetto rispetta solo i Startcampi , Center, Ende FillLayoutOptions nelle visualizzazioni figlio che si trovano nella direzione opposta all'orientamento StackLayout . Di conseguenza, le visualizzazioni figlio all'interno di un oggetto orientato verticalmente StackLayout possono impostare le relative HorizontalOptions proprietà su uno dei Startcampi , Center, Endo Fill . Analogamente, le visualizzazioni figlio all'interno di un oggetto orientato StackLayout orizzontalmente possono impostare le relative VerticalOptions proprietà su uno dei Startcampi , Center, Endo Fill .

Un StackLayout oggetto non rispetta i Startcampi , EndCenter, e FillLayoutOptions nelle visualizzazioni figlio che si trovano nella stessa direzione dell'orientamentoStackLayout. Pertanto, un orientamento StackLayout verticale ignora i Startcampi , Center, Endo Fill se sono impostati sulle VerticalOptions proprietà delle visualizzazioni figlio. Analogamente, un oggetto orientato StackLayout orizzontalmente ignora i Startcampi , Center, Endo Fill se sono impostati sulle HorizontalOptions proprietà delle visualizzazioni figlio.

Nota

LayoutOptions.Fill in genere esegue l'override delle richieste di dimensioni specificate usando le HeightRequest proprietà e WidthRequest .

L'esempio di codice XAML seguente illustra un orientamento verticale in StackLayout cui ogni elemento figlio Label imposta la proprietà HorizontalOptions su uno dei quattro campi di allineamento della LayoutOptions struttura:

<StackLayout Margin="0,20,0,0">
  ...
  <Label Text="Start" BackgroundColor="Gray" HorizontalOptions="Start" />
  <Label Text="Center" BackgroundColor="Gray" HorizontalOptions="Center" />
  <Label Text="End" BackgroundColor="Gray" HorizontalOptions="End" />
  <Label Text="Fill" BackgroundColor="Gray" HorizontalOptions="Fill" />
</StackLayout>

Il codice C# equivalente è illustrato di seguito:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
    new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
    new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
    new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
  }
};

Il codice restituisce il layout illustrato negli screenshot seguenti:

Espansione

L'espansione controlla se una vista occupa più spazio, se disponibile, all'interno di un oggetto StackLayout. StackLayout Se contiene spazio inutilizzato, ovvero è maggiore della dimensione combinata di tutti i relativi elementi figlio, StackLayout lo spazio inutilizzato viene condiviso equamente da tutte le visualizzazioni figlio che richiedono l'espansione impostando le relative HorizontalOptions proprietà o VerticalOptions su un LayoutOptions campo che utilizza il AndExpand suffisso . Si noti che quando viene usato tutto lo spazio in StackLayout , le opzioni di espansione non hanno alcun effetto.

Un elemento StackLayout può espandere le viste figlio solo nella direzione del proprio orientamento. Pertanto, un orientamento StackLayout verticale può espandere le visualizzazioni figlio che impostano le relative VerticalOptions proprietà su uno dei StartAndExpandcampi , CenterAndExpand, EndAndExpando FillAndExpand , se contiene StackLayout spazio inutilizzato. Analogamente, un oggetto orientato orizzontalmente StackLayout può espandere le visualizzazioni figlio che impostano le relative HorizontalOptions proprietà su uno dei StartAndExpandcampi , CenterAndExpand, EndAndExpando FillAndExpand , se contiene StackLayout spazio inutilizzato.

Un StackLayout oggetto non può espandere le visualizzazioni figlio nella direzione opposta all'orientamento. Pertanto, su un oggetto orientato verticalmente StackLayout, l'impostazione della HorizontalOptions proprietà in una visualizzazione figlio su StartAndExpand ha lo stesso effetto dell'impostazione della proprietà su Start.

Nota

Si noti che l'abilitazione dell'espansione non modifica le dimensioni di una visualizzazione a meno che non usi LayoutOptions.FillAndExpand.

L'esempio di codice XAML seguente illustra un orientamento StackLayout verticale in cui ogni elemento figlio Label imposta la proprietà VerticalOptions su uno dei quattro campi di espansione della LayoutOptions struttura:

<StackLayout Margin="0,20,0,0">
  ...
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Start" BackgroundColor="Gray" VerticalOptions="StartAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Center" BackgroundColor="Gray" VerticalOptions="CenterAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="End" BackgroundColor="Gray" VerticalOptions="EndAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Fill" BackgroundColor="Gray" VerticalOptions="FillAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
</StackLayout>

Il codice C# equivalente è illustrato di seguito:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
  }
};

Il codice restituisce il layout illustrato negli screenshot seguenti:

Ogni Label occupa la stessa quantità di spazio all'interno di StackLayout. Tuttavia solo l'elemento Label finale che imposta la sua proprietà VerticalOptions su FillAndExpand ha una dimensione diversa. Inoltre, ognuno Label è separato da un piccolo rosso BoxView, che consente di visualizzare facilmente lo Label spazio occupato.

Riepilogo

Questo articolo ha illustrato l'effetto che ogni LayoutOptions valore della struttura ha sull'allineamento e l'espansione di una vista, rispetto al relativo elemento padre. I Startcampi , EndCenter, e Fill vengono usati per definire l'allineamento della visualizzazione all'interno del layout padre e i StartAndExpandcampi , CenterAndExpandEndAndExpand, , e FillAndExpand vengono usati per definire la preferenza di allineamento e per determinare se la visualizzazione occupa più spazio, se disponibile, all'interno di un oggetto StackLayout.

Collegamenti correlati

• LayoutOptions (esempio)
• LayoutOptions