Ordna vyer med StackLayout

Slutförd

Att stapla vyer i en lodrät eller vågrät lista är en vanlig design för användargränssnitt. Tänk på några vanliga sidor i program. Exempel är inloggnings-, register- och inställningssidor. Alla dessa sidor innehåller vanligtvis staplat innehåll. I den här lektionen får du lära dig hur du ordnar vyer i en lodrät eller vågrät lista med hjälp StackLayout av och de optimerade StackLayout-kontrollerna VerticalStackLayout och HorizontalStackLayout.

Vad är en StackLayout, VerticalStackLayout och HorizontalStackLayout?

StackLayout är en layoutcontainer som organiserar underordnade vyer från vänster till höger eller uppifrån och ned. Riktningen baseras på dess Orientation egenskap och standardvärdet är uppifrån och ned. Följande bild visar en konceptuell vy över en lodrät StackLayout.

• StackLayout har en lista över Children som den ärver från basklassen Layout<T>. Listan lagrar vyer, vilket är användbart eftersom de flesta gränssnittselement som du arbetar med i .NET Multi-platform App UI (MAUI) härleds från View. Layoutpaneler härleds också från View, vilket innebär att du kan kapsla paneler om du behöver.

• VerticalStackLayout och HorizontalStackLayout är de layouter du föredrar att använda när du vet att din orientering inte kommer att ändras, eftersom de är optimerade för prestanda.

Så här lägger du till vyer i en StackLayout

I .NET MAUI kan du lägga till vyer i en StackLayout I C#-kod eller i XAML (Extensible Application Markup Language). Här är ett exempel på tre vyer som lagts till med hjälp av kod:

<StackLayout x:Name="stack">
</StackLayout>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var a = new BoxView { Color = Colors.Silver, HeightRequest = 40 };
        var b = new BoxView { Color = Colors.Blue, HeightRequest = 40 };
        var c = new BoxView { Color = Colors.Gray, HeightRequest = 40 };

        stack.Children.Add(a);
        stack.Children.Add(b);
        stack.Children.Add(c);
    }
}

Du kan lägga till vyerna i Children samlingen och StackLayout automatiskt placerar vyerna i en lodrät lista. Så här ser det ut på en Android-enhet:

Om du vill göra samma sak i XAML kapsla in underordnade i taggarna StackLayout . XAML-parsern lägger automatiskt till de kapslade vyerna i Children samlingen eftersom Children det är ContentProperty för alla layoutpaneler. Här är ett exempel på samma tre vyer som läggs till i en StackLayout i XAML:

<StackLayout>
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

Så här sorteras vyer i en StackLayout

Ordningen på vyerna Children i samlingen avgör deras layoutordning när de återges. För vyer som lagts till i XAML används textordningen. För underordnade som har lagts till i kod avgör den ordning i vilken du anropar Add metoden layoutordningen.

Så här ändrar du utrymmet mellan vyer i en StackLayout

Det är vanligt att vilja ha lite utrymme mellan underordnade i en StackLayout. StackLayout låter dig styra utrymmet mellan varje underordnad Spacing med hjälp av egenskapen . Standardvärdet är noll enheter, men du kan ställa in det på det som ser bra ut för dig. Här är ett exempel på hur du Spacing anger egenskapen till 30 i XAML:

<StackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

Följande skärmbild visar hur användargränssnittet skulle renderas på Android:

Så här ställer du in orienteringen för en StackLayout

StackLayout låter dig ordna underordnade i antingen en kolumn eller en rad. Du styr det här beteendet genom att ange dess Orientation egenskap. Hittills har vi bara visat en lodrät StackLayout.

Vertical används som standard. Om du uttryckligen Orientation anger till Vertical är upp till dig. Vissa programmerare föredrar en explicit inställning för att göra koden mer självdokumenterande.

Här är ett exempel på Orientation hur du anger till Horizontal i XAML:

<StackLayout x:Name="stack" Orientation="Horizontal">
    <BoxView Color="Silver" WidthRequest="40"/>
    <BoxView Color="Blue" WidthRequest="40"/>
    <BoxView Color="Gray" WidthRequest="40"/>
</StackLayout>

Kommentar

Enligt beskrivningen i föregående övning gör ändringen i orienteringen StackPanel att den ignorerar egenskaperna för HeightRequest varje BoxView. I stället anger WidthRequestdu . Följande skärmbild visar hur användargränssnittet renderas på en Android-enhet:

Ange layoutalternativ för en vy i en StackLayout

Varje vy har en VerticalOptions och HorizontalOptions -egenskap. Du kan använda de här egenskaperna för att ange positionen för vyn i det rektangulära visningsområdet som tillhandahålls av layoutpanelen.

Som tidigare nämnts beror StackLayoutbeteendet LayoutOptions för egenskaperna på Orientation egenskapen StackLayoutför . StackLayout använder egenskapen LayoutOptions i motsatt riktning mot dess Orientation. Som standard allokeras inte ett element i en stacklayout något extra utrymme i samma riktning som Orientation stacklayouten. Om du tilldelar en position för den riktningen i det här standardfallet ändras inte återgivningen av elementet. Renderingen ändras dock när positionen kombineras med expansion.

Hur är det med expansion?

Kom ihåg från en tidigare enhet att LayoutOptions struct innehåller en bool egenskap som heter Expands som nu är föråldrad i .NET MAUI. När du anger VerticalOptions och HorizontalOptionskan du märka LayoutOptions av StartAndExpand, CenterAndExpand, EndAndExpandoch FillAndExpand. Om du anger LayoutOptions något av dessa AndExpand alternativ ignoreras alternativet och den första delen av LayoutOptions används, till exempel Start, Center, Endeller Fill. Om du migrerar från Xamarin.Forms bör du ta bort alla AndExpand från dessa egenskaper. Senare i modulen ser vi hur du uppnår liknande funktioner när vi lär oss mer om Grid.

Optimerade StackLayouts

Som tidigare VerticalStackLayout nämnts är och HorizontalStackLayout optimerade StackLayout kontroller med fördefinierade orienteringar. Vi rekommenderar att du använder dessa kontroller när det är möjligt för bästa layoutprestanda. Dessa layouter har funktionerna LayoutOptions i och Spacing som de vanliga StackLayout har.

<VerticalStackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40"/>
</VerticalStackLayout>

<HorizontalStackLayout Spacing="30">
    <BoxView Color="Silver" WidthRequest="40" />
    <BoxView Color="Blue" WidthRequest="40" />
    <BoxView Color="Gray" WidthRequest="40" />
</HorizontalStackLayout>