Layout

Le classi di layout dell'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) consentono di disporre e raggruppare i controlli dell'interfaccia utente nell'applicazione. La scelta di una classe di layout richiede la conoscenza del modo in cui il layout posiziona gli elementi figlio e il modo in cui il layout ridimensiona gli elementi figlio. Inoltre, potrebbe essere necessario annidare i layout per creare il layout desiderato.

StackLayout

Un StackLayout oggetto organizza gli elementi in uno stack unidimensionale, orizzontalmente o verticalmente. La Orientation proprietà specifica la direzione degli elementi e l'orientamento predefinito è Vertical. StackLayout viene in genere usato per disporre una sottosezione dell'interfaccia utente in una pagina.

Il codice XAML seguente illustra come creare un oggetto verticale StackLayout contenente tre Label oggetti:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

In , se le dimensioni di un StackLayoutelemento non sono impostate in modo esplicito, si espande per riempire la larghezza disponibile o l'altezza se la Orientation proprietà è impostata su Horizontal.

Un StackLayout oggetto viene spesso usato come layout padre, che contiene altri layout figlio. Tuttavia, un StackLayout oggetto non deve essere utilizzato per riprodurre un Grid layout utilizzando una combinazione di StackLayout oggetti . Il codice seguente illustra un esempio di questa procedura non valida:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

L'operazione risulta dispendiosa poiché vengono eseguiti calcoli di layout non necessari. Al contrario, il layout desiderato può essere ottenuto meglio usando un oggetto Grid.

Per altre informazioni, vedere StackLayout.

HorizontalStackLayout

Un HorizontalStackLayout oggetto organizza le viste figlio in uno stack orizzontale unidimensionale ed è un'alternativa più efficiente a un oggetto StackLayout. HorizontalStackLayout viene in genere usato per disporre una sottosezione dell'interfaccia utente in una pagina.

Il codice XAML seguente illustra come creare un HorizontalStackLayout oggetto contenente visualizzazioni figlio diverse:

<HorizontalStackLayout Margin="20">
   <Rectangle Fill="Red"
              HeightRequest="30"
              WidthRequest="30" />
   <Label Text="Red"
          FontSize="18" />
</HorizontalStackLayout>

In , HorizontalStackLayoutse le dimensioni di un elemento non sono impostate in modo esplicito, si espande per riempire l'altezza disponibile.

Per altre informazioni, vedere HorizontalStackLayout.

VerticalStackLayout

Un VerticalStackLayout oggetto organizza le viste figlio in uno stack verticale unidimensionale ed è un'alternativa più efficiente a un oggetto StackLayout. VerticalStackLayout viene in genere usato per disporre una sottosezione dell'interfaccia utente in una pagina.

Il codice XAML seguente illustra come creare un VerticalStackLayout oggetto contenente tre Label oggetti:

<VerticalStackLayout Margin="20,35,20,25">
    <Label Text="The VericalStackLayout has its Margin property set, to control the rendering position of the VerticalStackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the VerticalStackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the VerticalStackLayout." />
</VerticalStackLayout>

In , se le dimensioni di un VerticalStackLayoutelemento non sono impostate in modo esplicito, si espande per riempire la larghezza disponibile.

Per altre informazioni, vedere VerticalStackLayout.

Griglia

Un Grid oggetto viene utilizzato per la visualizzazione di elementi in righe e colonne, che possono avere dimensioni proporzionali o assolute. Le righe e le colonne di una griglia vengono specificate con le RowDefinitions proprietà e ColumnDefinitions .

Per posizionare gli elementi in celle specifiche Grid , utilizzare le Grid.Column proprietà associate e Grid.Row . Per fare in modo che gli elementi si estendono su più righe e colonne, usare le Grid.RowSpan proprietà associate e Grid.ColumnSpan .

Nota

Un Grid layout non deve essere confuso con le tabelle e non deve presentare dati tabulari.

Il codice XAML seguente illustra come creare un oggetto Grid con due righe e due colonne:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

In questo esempio il ridimensionamento funziona come segue:

• Ogni riga ha un'altezza esplicita di 50 unità indipendenti dal dispositivo.
• La larghezza della prima colonna è impostata su Autoe pertanto è larga quanto richiesto per i relativi elementi figlio. In questo caso, sono 200 unità indipendenti dal dispositivo per contenere la larghezza del primo Labeloggetto .

Lo spazio può essere distribuito all'interno di una colonna o di una riga usando il ridimensionamento automatico, che consente alle colonne e alle righe di adattarsi al contenuto. Ciò si ottiene impostando l'altezza di un RowDefinitionoggetto o la larghezza di un ColumnDefinitionoggetto su Auto. Il ridimensionamento proporzionale può essere usato anche per distribuire lo spazio disponibile tra le righe e le colonne della griglia in base alle proporzioni ponderate. Questa operazione viene ottenuta impostando l'altezza di un RowDefinitionoggetto o la larghezza di un ColumnDefinitionoggetto su un valore che usa l'operatore * .

Attenzione

Provare a verificare che il minor numero possibile di righe e colonne sia impostato sulla Auto dimensione. Ogni riga o colonna ridimensionata automaticamente causerà l'esecuzione di ulteriori calcoli di layout da parte del motore di layout. Usare invece righe e colonne con dimensioni fisse, se possibile. In alternativa, impostare righe e colonne per occupare una quantità proporzionale di spazio con il GridUnitType.Star valore di enumerazione .

Per altre informazioni, vedere Grid.

FlexLayout

Un FlexLayout oggetto è simile a in StackLayout in quanto visualizza gli elementi figlio orizzontalmente o verticalmente in uno stack. Tuttavia, un FlexLayout può anche eseguire il wrapping dei relativi elementi figlio se sono presenti troppi elementi per adattarsi a una singola riga o colonna e consente anche un controllo più granulare delle dimensioni, dell'orientamento e dell'allineamento dei relativi elementi figlio.

Il codice XAML seguente mostra come creare un FlexLayout oggetto che visualizza le visualizzazioni in una singola colonna:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

In questo esempio il layout funziona come segue:

• La Direction proprietà è impostata su Column, che determina la disposizione degli elementi figlio di FlexLayout in una singola colonna di elementi.
• La AlignItems proprietà è impostata su Center, che fa sì che ogni elemento venga centrato orizzontalmente.
• La JustifyContent proprietà è impostata su SpaceEvenly, che alloca equamente tutti gli spazi verticali rimanenti tra tutti gli elementi e sopra il primo elemento e sotto l'ultimo elemento.

Per altre informazioni, vedere FlexLayout.

AbsoluteLayout

Un AbsoluteLayout oggetto viene utilizzato per posizionare e ridimensionare gli elementi utilizzando valori espliciti o valori relativi alle dimensioni del layout. La posizione viene specificata dall'angolo superiore sinistro del figlio rispetto all'angolo superiore sinistro dell'oggetto AbsoluteLayout.

Un AbsoluteLayout oggetto deve essere considerato come un layout speciale da utilizzare solo quando è possibile imporre una dimensione agli elementi figlio o quando la dimensione dell'elemento non influisce sul posizionamento di altri elementi figlio. Un uso standard di questo layout consiste nel creare una sovrimpressione, che copre la pagina con altri controlli, forse per proteggere l'utente dall'interazione con i normali controlli nella pagina.

Importante

Le HorizontalOptions proprietà e VerticalOptions non hanno alcun effetto sugli elementi figlio di un oggetto AbsoluteLayout.

All'interno di , AbsoluteLayoutla AbsoluteLayout.LayoutBounds proprietà associata viene utilizzata per specificare la posizione orizzontale, la posizione verticale, la larghezza e l'altezza di un elemento. Inoltre, la AbsoluteLayout.LayoutFlags proprietà associata specifica come verranno interpretati i limiti del layout.

Il codice XAML seguente illustra come disporre gli elementi in un oggetto AbsoluteLayout:

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

In questo esempio il layout funziona come segue:

• A ogni BoxView viene assegnata una dimensione esplicita di 100x100 e viene visualizzata nella stessa posizione, allineata al centro orizzontalmente.
• Il rosso BoxView viene ruotato di 30 gradi e il verde BoxView viene ruotato di 60 gradi.
• In ogni BoxView, la AbsoluteLayout.LayoutFlags proprietà associata è impostata su PositionProportional, a indicare che la posizione è proporzionale allo spazio rimanente dopo larghezza e altezza.

Attenzione

Evitare di usare la AbsoluteLayout.AutoSize proprietà quando possibile, perché farà in modo che il motore di layout esegua calcoli di layout aggiuntivi.

Per altre informazioni, vedere AbsoluteLayout.

BindableLayout

Un BindableLayout consente a qualsiasi classe di layout che deriva dalla Layout classe di generare il contenuto associandolo a una raccolta di elementi, con l'opzione per impostare l'aspetto di ogni elemento con un oggetto DataTemplate.

Un layout associabile viene popolato con i dati impostandone la ItemsSource proprietà su qualsiasi raccolta che implementa IEnumerablee associandola a una Layoutclasse derivata da . L'aspetto di ogni elemento nel layout associabile può essere definito impostando la BindableLayout.ItemTemplate proprietà associata su un oggetto DataTemplate.

Il codice XAML seguente illustra come associare un StackLayout oggetto a una raccolta di elementi e definirne l'aspetto con un oggetto DataTemplate:

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"
                   Aspect="AspectFill"
                   WidthRequest="44"
                   HeightRequest="44" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

I layout associabili devono essere usati solo quando la raccolta di elementi da visualizzare è ridotta e lo scorrimento e la selezione non sono necessari.

Per altre informazioni, vedere BindableLayout.

Layout personalizzati

In .NET MAUI le classi di layout derivano dalla classe astratta Layout . Questa classe delega il layout e la misurazione multipiattaforma a una classe di gestione layout. Ogni classe di gestione layout implementa l'interfaccia ILayoutManager , che specifica che Measure e ArrangeChildren le implementazioni devono essere fornite:

• L'implementazione Measure chiama IView.Measure in ogni visualizzazione del layout e restituisce le dimensioni totali del layout in base ai vincoli.
• L'implementazione ArrangeChildren determina la posizione di ogni visualizzazione all'interno dei limiti del layout e le chiamate Arrange a ogni visualizzazione con i limiti appropriati. Il valore restituito è la dimensione effettiva del layout.

I layout di .NET MAUI hanno gestori di layout predefiniti per gestire il layout. Tuttavia, a volte è necessario organizzare il contenuto della pagina usando un layout non fornito da .NET MAUI. A tale scopo, è possibile scrivere un layout personalizzato. Per altre informazioni, vedere Layout personalizzati.

Trasparenza dell'input

Ogni elemento visivo ha una InputTransparent proprietà associabile usata per definire se l'elemento può ricevere input. Il valore predefinito è false, assicurandosi che l'elemento possa ricevere input. Quando questa proprietà si trova true su un elemento, l'elemento non riceverà alcun input. L'input verrà invece passato a tutti gli elementi che si trovano visivamente dietro l'elemento.

La Layout classe da cui derivano tutti i layout ha una CascadeInputTransparent proprietà associabile che controlla se gli elementi figlio ereditano la trasparenza di input del layout. Il valore predefinito è true, assicurandosi che l'impostazione della InputTransparent proprietà su true una classe di layout comporterà la mancata ricezione di alcun input in tutti gli elementi all'interno del layout.