Oefening: StackLayout gebruiken om een gebruikersinterface te bouwen

  • 10 minuten

In deze oefening gebruikt u geneste StackLayout containers om de weergaven in uw gebruikersinterface (UI) te rangschikken. In de eerste schermopname ziet u de indeling die door het startersproject is geïmplementeerd en de tweede toont de indeling voor het voltooide project. Uw taak is om containers te gebruiken StackLayout en LayoutOptions het startersproject om te zetten in de voltooide versie.

Schermopname van de startersoplossing met alle labels verticaal in nabijheid geplaatst. Daarnaast is de voltooide oplossing met besturingselementen uitgelijnd en op een intuïtievere manier geplaatst.

De startersoplossing verkennen

De startersoplossing bevat een volledig functionele tipcalculator-app. Begin met het verkennen van de gebruikersinterface om te begrijpen wat de app doet.

  1. Open met Visual Studio de startersoplossing in de map exercise2/TipCalculator in de opslagplaats die u aan het begin van de vorige oefening hebt gekloond.

  2. Bouw en voer de app uit op uw voorkeursbesturingssysteem.

  3. Voer een getal in het tekstvak in en gebruik de app om te zien hoe het werkt.

  4. Experimenteer met de knoppen voor tiphoeveelheid en de schuifregelaar.

  5. Wanneer u klaar bent, sluit u de app.

  6. Open MainPage.xaml. U ziet dat alle weergaven in één VerticalStackLayoutworden geplaatst, zoals wordt weergegeven met de volgende XAML-markeringen:

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:TipCalculator"
         x:Class="TipCalculator.MainPage">
    <VerticalStackLayout>

        <Label Text="Bill" />
        <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />

        <Label Text="Tip"   />
        <Label x:Name="tipOutput" Text="0.00" />

        <Label Text="Total" />
        <Label x:Name="totalOutput" Text="0.00" />

        <Label Text="Tip Percentage" />
        <Label x:Name="tipPercent" Text="15%" />
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />

        <Button Text="15%" Clicked="OnNormalTip" />
        <Button Text="20%" Clicked="OnGenerousTip" />

        <Button x:Name="roundDown" Text="Round Down" />
        <Button x:Name="roundUp"   Text="Round Up" />

    </VerticalStackLayout>
</ContentPage>

De gebruikersinterface herstellen

Nu u de app hebt uitgevoerd, kunt u deze er beter uitzien door containers toe te voegen HorizontalStackLayout . Het doel is om de app te laten lijken op de schermopname aan het begin van het lab.

  1. Open het bestand MainPage.xaml .

  2. Opvullingseenheden en 40 afstandseenheden toevoegen 10 aan het VerticalStackLayoutvolgende:

    <VerticalStackLayout Padding="40" Spacing="10">

  3. Voeg een HorizontalStackLayout groep toe aan de Labeltekst Bill met het Entry veld eronder. Stel de eigenschap Spacing in op 10.

  4. Stel de WidthRequest factuur Label100op en de VerticalOptions eigenschap op .Center Deze wijzigingen zorgen ervoor dat het label verticaal wordt uitgelijnd met het Entry veld.

    <HorizontalStackLayout Spacing="10">
    <Label Text="Bill" WidthRequest="100" VerticalOptions="Center"/>
    <Entry ... />
</HorizontalStackLayout>

  5. Voeg nog een HorizontalStackLayout toe om de Label tekst Tip met de Label benoemde tipOutput te groeperen. Stel de Spacing eigenschap in op 10, en de Margin eigenschap op 0,20,0,0.

  6. Stel de WidthRequesttipLabel in op 100

    <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
    <Label Text="Tip" WidthRequest="100" />
    <Label .../>
</HorizontalStackLayout>

  7. Gebruik een HorizontalStackLayout om de tekst LabelTotaal te groeperen met de Label benoemde totalOutput. Stel de eigenschap Spacing in op 10.

  8. Stel het WidthRequest totaal inLabel op 100

    <HorizontalStackLayout Spacing="10">
    <Label Text="Total" WidthRequest="100"  />
    <Label .../>
</HorizontalStackLayout>

  9. Voeg nog een HorizontalStackLayout toe om het Labelpuntpercentage met de Label naam tipPercent te groeperen.

  10. Stel de VerticalOptions eigenschap van deze HorizontalStackLayoutEnd eigenschap in op en stel de Spacing eigenschap in op 10:

  11. Stel het WidthRequest tippercentage Label in op100

    <HorizontalStackLayout VerticalOptions="End" Spacing="10">
    <Label Text="Tip Percentage" WidthRequest="100"/>
    <Label ... />
</HorizontalStackLayout>

  12. Gebruik een HorizontalStackLayout groepeer het Button met het bijschrift 15%Button20%.

  13. Stel de Margin eigenschap van dit StackLayout in op 0,20,0,0en de Spacing eigenschap op 10:

    <HorizontalStackLayout  Margin="0,20,0,0" Spacing="10">
    <Button Text="15%" ... />
    <Button Text="20%" ... />
</HorizontalStackLayout>

  14. Voeg een finale HorizontalStackLayout toe om het Button met het bijschrift Round Down en het bijschrift Button te groeperen. Stel de Margin eigenschap van dit StackLayout in op 0,20,0,0en de Spacing eigenschap op 10:

    <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
        <Button ... Text="Round Down" />
        <Button ... Text="Round Up" />
</HorizontalStackLayout>

  15. Stel op alle vier de knopbesturingselementen de HorizontalOptions eigenschap Center in op en de WidthRequest eigenschap op 150. Voorbeeld:

    <Button Text="15%" WidthRequest="150" HorizontalOptions="Center" ... />

De volledige XAML-opmaak (Extensible Application Markup Language) voor de inhoudspagina moet er als volgt uitzien:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TipCalculator"
             x:Class="TipCalculator.MainPage">

    <VerticalStackLayout Padding="40" Spacing="10">

        <HorizontalStackLayout Spacing="10">
            <Label Text="Bill" WidthRequest="100" VerticalOptions="Center" />
            <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Label Text="Tip"  WidthRequest="100" />
            <Label x:Name="tipOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Spacing="10">
            <Label Text="Total" WidthRequest="100"/>
            <Label x:Name="totalOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout VerticalOptions="End" Spacing="10">
            <Label Text="Tip Percentage" WidthRequest="100"/>
            <Label x:Name="tipPercent" Text="15%" />
        </HorizontalStackLayout>
        
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button Text="15%" Clicked="OnNormalTip" WidthRequest="150" HorizontalOptions="Center"/>
            <Button Text="20%" Clicked="OnGenerousTip"  WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>
        
        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button x:Name="roundDown" Text="Round Down" WidthRequest="150" HorizontalOptions="Center"/>
            <Button x:Name="roundUp"   Text="Round Up" WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>

    </VerticalStackLayout>

</ContentPage>

De resultaten bekijken

Voer de app opnieuw uit en bekijk de verschillen in de gebruikersinterface. Controleer of de besturingselementen correct zijn uitgelijnd en de juiste grootte en afstand hebben.

U hebt gebruikt VerticalStackLayout en HorizontalStackLayout containers gebruikt om de esthetische elementen van een bestaande gebruikersinterface te verbeteren. Deze indelingen zijn de eenvoudigste indelingspanelen, maar zijn krachtig genoeg om een redelijke gebruikersinterface te produceren.