Condividi tramite

Allineare e posizionare i controlli MAUI .NET

  • Articolo

Ogni controllo dell'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) che deriva da View, che include visualizzazioni e layout, ha HorizontalOptions proprietà e VerticalOptions di tipo LayoutOptions. La LayoutOptions struttura incapsula l'allineamento preferito di una visualizzazione, che ne determina la posizione e le dimensioni all'interno del layout padre quando il layout padre contiene spazio inutilizzato, ovvero il layout padre è maggiore della dimensione combinata di tutti gli elementi figlio.

Inoltre, i controlli di posizione delle Margin proprietà e Padding relativi ai controlli adiacenti o figlio. Per altre informazioni, vedere Controlli posizione.

Allineare le visualizzazioni nei layout

L'allineamento di un Viewoggetto , relativo al relativo elemento padre, può essere controllato impostando la HorizontalOptions proprietà o VerticalOptions di View su uno dei campi pubblici dalla LayoutOptions struttura. I campi pubblici sono Start, Center, Ende Fill.

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.

Nota

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

Un StackLayout oggetto rispetta solo i Startcampi , Center, Ende Fill LayoutOptions 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 Fill LayoutOptions 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.

Importante

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

L'esempio 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>
  ...
  <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>

Lo screenshot seguente mostra l'allineamento risultante di ogni Label:

Screenshot delle opzioni di layout di allineamento.

Controlli posizione

Controlli di posizione delle Margin proprietà e Padding relativi ai controlli adiacenti o figlio. I margini e la spaziatura interna sono concetti di layout correlati:

  • La Margin proprietà rappresenta la distanza tra un elemento e i relativi elementi adiacenti e viene utilizzata per controllare la posizione di rendering dell'elemento e la posizione di rendering dei relativi vicini. Margin i valori possono essere specificati nei layout e nelle visualizzazioni.
  • La Padding proprietà rappresenta la distanza tra un elemento e i relativi elementi figlio e viene utilizzata per separare il controllo dal relativo contenuto. Padding I valori possono essere specificati in pagine, layout e visualizzazioni.

Il diagramma seguente illustra i due concetti:

Concetti relativi a margini e spaziatura interna.

Nota

Margin i valori sono additivi. Pertanto, se due elementi adiacenti specificano un margine di 20 unità indipendenti dal dispositivo, la distanza tra gli elementi sarà di 40 unità indipendenti dal dispositivo. Inoltre, i valori di margine e riempimento sono additivi quando vengono applicati entrambi, in quanto la distanza tra un elemento e qualsiasi contenuto sarà il margine più spaziatura interna.

Le Margin proprietà e Padding sono entrambe di tipo Thickness. Esistono tre possibilità per la creazione di una Thickness struttura:

  • Creare una Thickness struttura definita da un singolo valore uniforme. Il singolo valore viene applicato ai lati sinistro, superiore, destro e inferiore dell'elemento.
  • Creare una Thickness struttura definita da valori orizzontali e verticali. Il valore orizzontale viene applicato simmetricamente ai lati sinistro e destro dell'elemento, con il valore verticale applicato simmetricamente ai lati superiore e inferiore dell'elemento.
  • Creare una Thickness struttura definita da quattro valori distinti applicati ai lati sinistro, superiore, destro e inferiore dell'elemento.

L'esempio XAML seguente illustra tutte e tre le possibilità:

<StackLayout Padding="0,20,0,0">
  <!-- Margin defined by a single uniform value. -->
  <Label Text=".NET MAUI" Margin="20" />
  <!-- Margin defined by horizontal and vertical values. -->  
  <Label Text=".NET for iOS" Margin="10,15" />
  <!-- Margin defined by four distinct values that are applied to the left, top, right, and bottom. -->  
  <Label Text=".NET for Android" Margin="0,20,15,5" />
</StackLayout>

Il codice C# equivalente è il seguente:

StackLayout stackLayout = new StackLayout
{
  Padding = new Thickness(0,20,0,0)
};
// Margin defined by a single uniform value.
stackLayout.Add(new Label { Text = ".NET MAUI", Margin = new Thickness(20) });
// Margin defined by horizontal and vertical values.
stackLayout.Add(new Label { Text = ".NET for iOS", Margin = new Thickness(10,25) });
// Margin defined by four distinct values that are applied to the left, top, right, and bottom.
stackLayout.Add(new Label { Text = ".NET for Android", Margin = new Thickness(0,20,15,5) });

Nota

Thickness i valori possono essere negativi, che in genere ritaglia o sovraselabora il contenuto.