Övning – Använda StackLayout för att skapa ett användargränssnitt

  • 10 minuter

I den här övningen använder du kapslade StackLayout containrar för att ordna vyerna i användargränssnittet . Den första skärmbilden visar layouten som implementerats av startprojektet, och den andra visar layouten för det slutförda projektet. Ditt jobb är att använda StackLayout containrar och LayoutOptions omvandla startprojektet till den färdiga versionen.

Skärmbild som visar startlösningen med alla etiketter placerade lodrätt i närheten. Bredvid den är den färdiga lösningen med kontroller justerade och placerade på ett mer intuitivt sätt.

Utforska startlösningen

Startlösningen innehåller en fullt fungerande tipskalkylatorapp. Börja med att utforska användargränssnittet för att förstå vad appen gör.

  1. Använd Visual Studio och öppna startlösningen i mappen exercise2/TipCalculator på lagringsplatsen som du klonade i början av föregående övning.

  2. Skapa och kör appen på önskat operativsystem.

  3. Ange ett tal i textrutan och använd appen för att se hur det fungerar.

  4. Experimentera med knapparna för spetsmängd och skjutreglaget.

  5. Stäng appen när du är klar.

  6. Öppna MainPage.xaml. Observera att alla vyer är placerade i en VerticalStackLayout, enligt följande XAML-markering:

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

Åtgärda användargränssnittet

Nu när du har sett appen köras kan du få den att se bättre ut genom att lägga till HorizontalStackLayout containrar. Målet är att appen ska se ut som skärmbilden i början av labbet.

  1. Öppna filen MainPage.xaml.

  2. Lägg till 40 enheter med utfyllnad och 10 avståndsenheter till VerticalStackLayout:

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

  3. Lägg till en HorizontalStackLayout för att gruppera Label som säger Faktura med fältet Entry under. Ange egenskapen Spacing till 10.

  4. WidthRequest Ange för fakturan Label till 100 och egenskapen VerticalOptions till Center. Dessa ändringar säkerställer att etiketten justeras lodrätt med fältet Entry .

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

  5. Lägg till en annan HorizontalStackLayout för att gruppera Label som säger Tips med namnet Label tipOutput. Spacing Ange egenskapen till 10och egenskapen Margin till 0,20,0,0.

  6. Ställ in tipset WidthRequest Label på 100

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

  7. Använd a HorizontalStackLayout för att gruppera Label det som säger Total med namnet Label totalOutput. Ange egenskapen Spacing till 10.

  8. Ange totalsumman WidthRequest Label till100

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

  9. Lägg till en annan HorizontalStackLayout för att gruppera Label som säger Tipsprocent med namnet Label tipPercent.

  10. VerticalOptions Ange egenskapen för detta HorizontalStackLayout till End och ange Spacing egenskapen till 10:

  11. Ange tipsprocenten WidthRequest Label till100

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

  12. Använd en HorizontalStackLayout för att gruppera Button med bildtexten 15 % och Button med bildtexten 20 %.

  13. Margin Ange egenskapen för detta StackLayout till 0,20,0,0, och egenskapen Spacing till 10:

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

  14. Lägg till en final HorizontalStackLayout för att gruppera Button med bildtexten Avrunda nedåt och Button med bildtexten Avrunda uppåt.. Margin Ange egenskapen för detta StackLayout till 0,20,0,0, och egenskapen Spacing till 10:

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

  15. På alla fyra knappkontrollerna anger du HorizontalOptions egenskapen till Center och egenskapen WidthRequest till 150. Till exempel:

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

Den fullständiga XAML-markeringen (Extensible Application Markup Language) för innehållssidan bör se ut så här:

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

Granska resultaten

Kör appen igen och titta på skillnaderna i användargränssnittet. Kontrollera att kontrollerna är korrekt justerade och har rätt storlek och blanksteg.

Du använde VerticalStackLayout och HorizontalStackLayout containrar för att förbättra estetiken i ett befintligt användargränssnitt. Dessa layouter är de enklaste layoutpanelerna, men är tillräckligt kraftfulla för att skapa ett rimligt användargränssnitt.