Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) VerticalStackLayout organizza le viste figlio in uno stack verticale unidimensionale ed è un'alternativa più performante rispetto a un StackLayout. Inoltre, un VerticalStackLayout può essere usato come layout principale che contiene altri layout secondari.
Definisce VerticalStackLayout le proprietà seguenti:
-
Spacing, di tipodouble, indica la quantità di spazio tra ciascuna vista figlia. Il valore predefinito di questa proprietà è 0.
Questa proprietà è supportata da un oggetto BindableProperty, il che significa che può essere il target di associazioni dati e di stili.
Il codice XAML seguente illustra come creare un oggetto VerticalStackLayout contenente visualizzazioni figlio diverse:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
<VerticalStackLayout Margin="20">
<Label Text="Primary colors" />
<Rectangle Fill="Red"
HeightRequest="30"
WidthRequest="300" />
<Rectangle Fill="Yellow"
HeightRequest="30"
WidthRequest="300" />
<Rectangle Fill="Blue"
HeightRequest="30"
WidthRequest="300" />
<Label Text="Secondary colors" />
<Rectangle Fill="Green"
HeightRequest="30"
WidthRequest="300" />
<Rectangle Fill="Orange"
HeightRequest="30"
WidthRequest="300" />
<Rectangle Fill="Purple"
HeightRequest="30"
WidthRequest="300" />
</VerticalStackLayout>
</ContentPage>
In questo esempio viene creato un oggetto VerticalStackLayout contenente Label oggetti e Rectangle . Per impostazione predefinita, non vi è spazio tra le visualizzazioni figlie.
Annotazioni
Il valore della Margin proprietà rappresenta la distanza tra un elemento e i relativi elementi adiacenti. Per altre informazioni, vedere Controlli posizione.
Spazio tra le visualizzazioni figlio
La spaziatura tra le viste figlio in un VerticalStackLayout può essere modificata impostando la proprietà Spacing su un valore double.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
<VerticalStackLayout Margin="20"
Spacing="10">
<Label Text="Primary colors" />
<Rectangle Fill="Red"
HeightRequest="30"
WidthRequest="300" />
<Rectangle Fill="Yellow"
HeightRequest="30"
WidthRequest="300" />
<Rectangle Fill="Blue"
HeightRequest="30"
WidthRequest="300" />
<Label Text="Secondary colors" />
<Rectangle Fill="Green"
HeightRequest="30"
WidthRequest="300" />
<Rectangle Fill="Orange"
HeightRequest="30"
WidthRequest="300" />
<Rectangle Fill="Purple"
HeightRequest="30"
WidthRequest="300" />
</VerticalStackLayout>
</ContentPage>
In questo esempio viene creato un VerticalStackLayout contenente gli oggetti Label e Rectangle che hanno dieci unità di spazio indipendenti dal dispositivo tra le visualizzazioni figlio:
Suggerimento
La proprietà Spacing può essere impostata su valori negativi per consentire la sovrapposizione delle viste figlie.
Posizionare e ridimensionare le visualizzazioni figlio
Le dimensioni e la posizione delle viste figlio all'interno di un VerticalStackLayout dipendono dai valori delle proprietà HeightRequest e WidthRequest delle viste figlio, e dai valori delle loro proprietà HorizontalOptions. In un VerticalStackLayout, le viste figlie si espandono per riempire la larghezza disponibile quando le loro dimensioni non vengono impostate in modo esplicito.
Le HorizontalOptions proprietà di un VerticalStackLayout, e le relative viste figlio, possono essere impostate sui campi della LayoutOptions struct, che incapsula una preferenza di layout di allineamento preferito. Questa preferenza di layout determina la posizione e le dimensioni di una visualizzazione figlio all'interno del relativo layout padre.
Suggerimento
Non impostare la HorizontalOptions proprietà di un oggetto VerticalStackLayout a meno che non sia necessario. Il valore predefinito di LayoutOptions.Fill consente l'ottimizzazione del layout ottimale. La modifica di questa proprietà ha un costo e utilizza la memoria, anche quando viene impostata di nuovo sul valore predefinito.
L'esempio XAML seguente imposta le preferenze di allineamento per ogni vista figlio in VerticalStackLayout:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
<VerticalStackLayout Margin="20"
Spacing="6">
<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" />
</VerticalStackLayout>
</ContentPage>
In questo esempio, le preferenze di allineamento vengono impostate sugli Label oggetti per controllarne la posizione all'interno di VerticalStackLayout. I campi Start, Center, End e Fill vengono usati per definire l'allineamento degli oggetti all'interno del VerticalStackLayout padre Label:
Un VerticalStackLayout rispetta solo le preferenze di allineamento sulle viste figlio che sono in direzione opposta rispetto all'orientamento del layout. Di conseguenza, le Label visualizzazioni figlio all'interno dell'insieme VerticalStackLayout impostano le relative HorizontalOptions proprietà su uno dei campi di allineamento:
-
Start, che posiziona l'oggetto Label sul lato sinistro dell'oggetto VerticalStackLayout. -
Center, che centra il Label nel VerticalStackLayout. -
End, che posiziona l'oggetto Label sul lato destro dell'oggetto VerticalStackLayout. -
Fill, che garantisce che Label riempia la larghezza di VerticalStackLayout.
Annidare oggetti VerticalStackLayout
Un VerticalStackLayout elemento può essere utilizzato come layout principale che contiene altri layout figlio annidati.
Il codice XAML seguente mostra un esempio di annidamento di oggetti HorizontalStackLayout in un oggetto VerticalStackLayout:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
<VerticalStackLayout Margin="20"
Spacing="6">
<Label Text="Primary colors" />
<Border Stroke="Black"
Padding="5">
<HorizontalStackLayout Spacing="15">
<Rectangle Fill="Red"
HeightRequest="30"
WidthRequest="30" />
<Label Text="Red"
FontSize="18" />
</HorizontalStackLayout>
</Border>
<Border Stroke="Black"
Padding="5">
<HorizontalStackLayout Spacing="15">
<Rectangle Fill="Yellow"
HeightRequest="30"
WidthRequest="30" />
<Label Text="Yellow"
FontSize="18" />
</HorizontalStackLayout>
</Border>
<Border Stroke="Black"
Padding="5">
<HorizontalStackLayout Spacing="15">
<Rectangle Fill="Blue"
HeightRequest="30"
WidthRequest="30" />
<Label Text="Blue"
FontSize="18" />
</HorizontalStackLayout>
</Border>
</VerticalStackLayout>
</ContentPage>
In questo esempio, l'elemento padre VerticalStackLayout contiene oggetti annidati HorizontalStackLayout all'interno Border di oggetti :
Importante
Più in profondità si annidano gli oggetti di layout, maggiore sarà il numero di calcoli di layout effettuati, che potrebbero influire sulle prestazioni. Per altre informazioni, vedere Scegliere il layout corretto.
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile in GitHub, in cui è anche possibile creare ed esaminare i problemi e le richieste pull. Per ulteriori informazioni, vedere la guida per i collaboratori.
