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

Ukończone 100 pkt.

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:

   XML

   <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

   XML

   <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 właściwość WidthRequestBillLabel na , a 100VerticalOptions właściwość na Center. Te zmiany zapewniają wyrównanie etykiety w pionie do Entry pola.

   XML

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

5. Dodaj kolejny HorizontalStackLayout element do grupy Label z informacją 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

   XML

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

7. Użyj wartości , HorizontalStackLayout aby zgrupować wartość Label Total z Label nazwą totalOutput. Ustaw właściwość Spacing na 10.

8. Ustaw wartość WidthRequest sumy na Label100

   XML

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

9. Dodaj kolejny HorizontalStackLayout element do grupy Label z informacją Procent porad z nazwaną poradąPercentLabel.

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

    XML

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

12. Użyj elementu , HorizontalStackLayout aby zgrupować obiekt Button z podpisem 15% i Button 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:

    XML

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

14. Dodaj finał HorizontalStackLayout , aby zgrupować element Button z podpisem Round Down i Button 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:

    XML

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

    XML

    <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

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

---

Następna lekcja: Rozmieszczanie widoków za pomocą siatki

Poprzednie Następne