Ćwiczenie — tworzenie interfejsu użytkownika przy użyciu obiektu StackLayout

W tym ćwiczeniu użyjesz zagnieżdżonych StackLayout kontenerów, aby rozmieścić widoki w interfejsie użytkownika. Pierwszy zrzut ekranu przedstawia układ zaimplementowany przez projekt startowy, a drugi przedstawia układ ukończonego projektu. Twoim zadaniem jest użycie StackLayout kontenerów i LayoutOptions przekształcenie projektu początkowego w ukończoną wersję.

Eksplorowanie rozwiązania startowego

Rozwiązanie początkowe zawiera w pełni funkcjonalną aplikację kalkulatora porad. Zacznij od zapoznania się z interfejsem użytkownika, aby zrozumieć, co robi aplikacja.

1. Za pomocą programu Visual Studio otwórz rozwiązanie startowe w folderze exercise2/TipCalculator w repozytorium sklonowanym na początku poprzedniego ćwiczenia.

2. Skompiluj i uruchom aplikację w preferowanym systemie operacyjnym.

3. Wprowadź liczbę w polu tekstowym i użyj aplikacji, aby zobaczyć, jak działa.

4. Poeksperymentuj z przyciskami ilości wskazówek i suwakiem.

5. Po zakończeniu zamknij aplikację.

6. Otwórz plik MainPage.xaml. Zwróć uwagę, że wszystkie widoki są umieszczane w jednym VerticalStackLayoutobiekcie, jak pokazano na poniższej adiustacji XAML:

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

Naprawianie interfejsu użytkownika

Teraz, gdy aplikacja została uruchomiona, możesz poprawić jej wygląd, dodając HorizontalStackLayout kontenery. Celem jest, aby aplikacja wyglądała jak zrzut ekranu na początku laboratorium.

1. Otwórz plik MainPage.xaml .

2. Dodaj 40 jednostki wypełnienia i 10 odstępy między elementami :VerticalStackLayout

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

3. Dodaj element HorizontalStackLayout do grupy Label z informacją Bill z polem Entry poniżej. Ustaw właściwość Spacing na 10.

4. Ustaw WidthRequest dokumentu BillLabel na 100 i właściwość VerticalOptions na Center. Te zmiany zapewniają wyrównanie etykiety w pionie do Entry pola.

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

5. Dodaj kolejny HorizontalStackLayout, aby pogrupować Label, które zawiera tekst Porada, z Label o nazwie tipOutput. Spacing Ustaw właściwość na 10, a Margin właściwość na 0,20,0,0.

6. Ustaw poradę WidthRequestLabel na wartość100

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

7. Użyj HorizontalStackLayout, aby zgrupować Label zawierający Total z Label o nazwie totalOutput. Ustaw właściwość Spacing na 10.

8. Ustaw wartość WidthRequest sumy na Label100

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

9. Dodaj kolejny HorizontalStackLayout do grupy Label z informacją Procent napiwku z nazwą LabeltipPercent.

10. VerticalOptions Ustaw właściwość na HorizontalStackLayoutEnd wartość i ustaw Spacing właściwość na 10:

11. WidthRequest Ustaw wartość procentową Label porady na100

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

12. Użyj HorizontalStackLayout aby zgrupować Button z podpisem 15% i Button z podpisem 20%.

13. Margin Ustaw właściwość tej StackLayout właściwości na 0,20,0,0, a Spacing właściwość na 10:

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

14. Dodaj końcowy HorizontalStackLayout, aby zgrupować Button z podpisem Round Down oraz Button z podpisem Round Up. Margin Ustaw właściwość tej StackLayout właściwości na 0,20,0,0, a Spacing właściwość na 10:

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

15. We wszystkich czterech kontrolkach przycisku ustaw HorizontalOptions właściwość na Center , a WidthRequest właściwość na 150. Na przykład:

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

Pełny znacznik języka znaczników aplikacji rozszerzalnej (XAML) dla strony zawartości powinien wyglądać następująco:

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

Sprawdzanie wyników

Ponownie uruchom aplikację i przyjrzyj się różnicom w interfejsie użytkownika. Sprawdź, czy kontrolki są prawidłowo wyrównane i mają prawidłowy rozmiar i odstępy.

Użyliśmy VerticalStackLayout kontenerów i HorizontalStackLayout ulepszyliśmy estetykę istniejącego interfejsu użytkownika. Te układy są najprostszymi panelami układów, ale są wystarczająco wydajne, aby utworzyć rozsądny interfejs użytkownika.