Weergaven rangschikken met StackLayout

Voltooid

Het stapelen van weergaven in een verticale of horizontale lijst is een algemeen ontwerp voor gebruikersinterfaces. Denk na over enkele algemene pagina's in toepassingen. Voorbeelden hiervan zijn aanmeldings-, register- en instellingenpagina's. Al deze pagina's bevatten doorgaans gestapelde inhoud. In deze les leert u hoe u weergaven in een verticale of horizontale lijst rangschikt met behulp van StackLayout en de geoptimaliseerde StackLayout-besturingselementen VerticalStackLayout en HorizontalStackLayout.

Wat is een StackLayout, VerticalStackLayout en HorizontalStackLayout?

StackLayout is een indelingscontainer die de onderliggende weergaven van links naar rechts of van boven naar beneden ordent. De richting is gebaseerd op Orientation de eigenschap en de standaardwaarde is van boven naar beneden. In de volgende afbeelding ziet u een conceptuele weergave van een verticale StackLayoutweergave.

• StackLayout heeft een lijst Children waarvan deze de basisklasse Layout<T>overneemt. De lijst slaat weergaven op, wat handig is omdat de meeste UI-elementen waarmee u werkt in .NET Multi-Platform App UI (MAUI) zijn afgeleid van View. Lay-outpanelen zijn ook afgeleid van View, wat betekent dat u indien nodig panelen kunt nesten.

• VerticalStackLayout en HorizontalStackLayout zijn de voorkeursindelingen die moeten worden gebruikt wanneer u weet dat uw afdrukstand niet zal veranderen, omdat ze zijn geoptimaliseerd voor prestaties.

Weergaven toevoegen aan een StackLayout

In .NET MAUI kunt u weergaven toevoegen aan een StackLayout in C#-code of in Extensible Application Markup Language (XAML). Hier volgt een voorbeeld van drie weergaven die zijn toegevoegd met behulp van code:

<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);
    }
}

U kunt de weergaven toevoegen aan de Children verzameling en StackLayout de weergaven automatisch in een verticale lijst plaatsen. Dit ziet er als volgt uit op een Android-apparaat:

Als u hetzelfde wilt doen in XAML, nestt u de onderliggende items in de StackLayout tags. De XAML-parser voegt de geneste weergaven automatisch toe aan de Children verzameling, omdat Children dit de ContentProperty voor alle indelingspanelen is. Hier volgt een voorbeeld van dezelfde drie weergaven die worden toegevoegd aan een StackLayout in XAML:

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

Hoe weergaven worden geordend in een StackLayout

De volgorde van de weergaven in de Children verzameling bepaalt de indelingsvolgorde wanneer ze worden weergegeven. Voor weergaven die zijn toegevoegd in XAML, wordt de tekstvolgorde gebruikt. Voor onderliggende items die in code zijn toegevoegd, bepaalt de volgorde waarin u de Add methode aanroept de indelingsvolgorde.

De ruimte tussen weergaven in een StackLayout wijzigen

Het is gebruikelijk om wat ruimte te willen tussen de kinderen van een StackLayout. StackLayout hiermee kunt u de ruimte tussen elk onderliggend element beheren met behulp van de Spacing eigenschap. De standaardwaarde is nuleenheden, maar u kunt deze instellen op alles wat er goed uitziet voor u. Hier volgt een voorbeeld van het instellen van de Spacing eigenschap 30 in XAML:

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

In de volgende schermopname ziet u hoe de gebruikersinterface wordt weergegeven op Android:

De afdrukstand van een StackLayout instellen

StackLayout hiermee kunt u onderliggende items in een kolom of rij rangschikken. U bepaalt dit gedrag door de eigenschap ervan in Orientation te stellen. Tot nu toe hebben we slechts een verticale StackLayoutweergave getoond.

Vertical is de standaardwaarde. Of u dat OrientationVertical nu expliciet instelt voor u. Sommige programmeurs geven de voorkeur aan een expliciete instelling om de code zelfdocumenterend te maken.

Hier volgt een voorbeeld van het instellen van de OrientationHorizontal instelling in XAML:

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

Notitie

Zoals beschreven in de vorige oefening, wordt de wijziging in de richting van de StackPanel oorzaken ervan om de HeightRequest eigenschappen van elke BoxViewoefening te negeren. In plaats daarvan stelt u de WidthRequest. In de volgende schermopname ziet u hoe de gebruikersinterface wordt weergegeven op een Android-apparaat:

De LayoutOptions van een weergave instellen in een StackLayout

Elke weergave heeft een VerticalOptions en HorizontalOptions eigenschap. U kunt deze eigenschappen gebruiken om de positie van de weergave in te stellen in het rechthoekige weergavegebied van het indelingsvenster.

Zoals eerder vermeld, hangt StackLayouthet gedrag van de LayoutOptions eigenschappen af van de Orientation eigenschap van de StackLayout. StackLayoutgebruikt de LayoutOptions eigenschap in de richting tegenover de .Orientation Standaard wordt aan een element in een stack-indeling geen extra ruimte in dezelfde richting toegewezen als de Orientation stack-indeling. Als u een positie voor die richting toewijst in dit standaardscenario, wordt de weergave van het element niet gewijzigd. Er is echter een wijziging in de rendering, wanneer de positie wordt gecombineerd met uitbreiding.

Hoe zit het met uitbreiding?

Zoals u weet uit een eerdere eenheid, bevat de LayoutOptions struct een bool eigenschap Expands die nu verouderd is in .NET MAUI. Wanneer u de VerticalOptions en, ziet u misschien de HorizontalOptions , LayoutOptionsStartAndExpanden CenterAndExpandEndAndExpand.FillAndExpand Als u deze optie instelt LayoutOptions op een van deze AndExpand opties, wordt de optie genegeerd en wordt het eerste deel van de LayoutOptions optie gebruikt, zoals Start, Centerof EndFill. Als u migreert van Xamarin.Forms, moet u al AndExpand deze eigenschappen verwijderen. Verderop in de module zien we hoe we vergelijkbare functionaliteit kunnen bereiken wanneer we meer te weten komen.Grid

Geoptimaliseerde StackLayouts

Zoals eerder vermeld, zijn de VerticalStackLayout en HorizontalStackLayout geoptimaliseerde StackLayout besturingselementen met vooraf gedefinieerde richtingen. We raden u aan deze besturingselementen indien mogelijk te gebruiken voor de beste lay-outprestaties. Deze indelingen hebben de functionaliteit van LayoutOptions en Spacing die van de reguliere StackLayout indeling.

<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>

Kenniscontrole

1.

Hoe kunt u onderliggende weergaven toevoegen aan een StackLayout?

Door onderliggende weergaven toe te voegen aan de ChildViews eigenschap in C#.

Via XAML- of C#-code.

Declareer de onderliggende weergaven en gebruik vervolgens een HorizontalOptions van de weergaven of VerticalOptions afhankelijk van hoe u de weergaven wilt weergeven.

U moet alle vragen beantwoorden voordat uw werk kan worden gecontroleerd.