Ćwiczenie — tworzenie interfejsu użytkownika przy użyciu usługi Grid

W tym ćwiczeniu użyjesz elementu , Grid aby rozmieścić widoki w interfejsie użytkownika. Zaczynasz od innej wersji projektu TipCalculator i dostosujesz go, aby interfejs użytkownika był bardziej intuicyjny. Możesz również przenieść przyciski do dołu strony. Tym razem użyjesz Grid układu, a nie użyj polecenia VerticalStackLayout i HorizontalStackLayout. Na poniższej ilustracji przedstawiono początkowy interfejs użytkownika i interfejs użytkownika, który wynika z wykonywania kroków w tym ćwiczeniu:

Otwieranie rozwiązania startowego

Rozwiązanie początkowe zawiera w pełni funkcjonalną aplikację kalkulatora porad.

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

2. Otwórz plik MainPage.xaml. Zwróć uwagę, że wszystkie widoki są wyświetlane przy użyciu jednego VerticalStackLayout panelu:

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

Tworzenie układu siatki

1. Zmień panel układu z VerticalStackLayout na Grid z dopełnienie 40 jednostek.

2. Zdefiniuj siedem wierszy i dwie kolumny dla elementu Grid. Ustaw rozmiar wszystkich wierszy Auto z wyjątkiem czwartego wiersza. Czwarty wiersz powinien być używany Star , aby uzyskać całe pozostałe miejsce dostępne w siatce. Użyj Star określania rozmiaru dla obu kolumn.

   <Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
         ColumnDefinitions="*, *"
         Padding="40">
       ...
   </Grid>
   

Pozycjonowanie widoków w komórkach

1. Dodaj ustawienia dla Grid.Row i Grid.Column do każdego z widoków, aby przypisać je do odpowiedniej komórki w obiekcie Grid. Skorzystaj z poniższego zrzutu ekranu, aby określić, gdzie należy umieścić każdy widok:

   

   W poniższym przykładzie pokazano, jak ustawić pozycję dla rachunku Labeli billInputEntry widok:

   ...
   <Label Text="Bill" Grid.Row="0" Grid.Column="0"/>
   <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>
   ...
   

2. Wyrównuj rachunek i ustawiając Label właściwość na Entry etykietęVerticalOptions.Center

3. Dodaj ustawienie dla Grid.ColumnSpan elementu , Slider aby obejmowało dwie kolumny:

   <Slider ... Grid.ColumnSpan="2" ... />
   

4. Znajdź element Label z tekstem Procent porad. Ustaw ją tak, aby zajmowała pozycję w lewym dolnym rogu prostokąta:

   <Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" ... />
   

5. Znajdź element o nazwie Label. Ustaw ją tak, aby zajmowała prawą dolną pozycję w swoim prostokątze:

   <Label x:Name="tipPercent" VerticalOptions="End" HorizontalOptions="End" ... />
   

6. Margin Ustaw właściwość dla wszystkich czterech przycisków na 5wartość .

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

<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">
    <Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
          ColumnDefinitions="*, *"
          Padding="40">

        <Label Text="Bill" VerticalOptions="Center" Grid.Row="0" Grid.Column="0"/>
        <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>

        <Label Text="Tip" Grid.Row="1" Grid.Column="0"/>
        <Label x:Name="tipOutput" Text="0.00" Grid.Row="1" Grid.Column="1"/>

        <Label Text="Total" Grid.Row="2" Grid.Column="0"/>
        <Label x:Name="totalOutput" Text="0.00" Grid.Row="2" Grid.Column="1"/>

        <Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" Grid.Row="3" Grid.Column="0"/>
        <Label x:Name="tipPercent" Text="15%" VerticalOptions="End" HorizontalOptions="End" Grid.Row="3" Grid.Column="1"/>
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"/>

        <Button Text="15%" Clicked="OnNormalTip" Margin="5" Grid.Row="5" Grid.Column="0"/>
        <Button Text="20%" Clicked="OnGenerousTip" Margin="5" Grid.Row="5" Grid.Column="1"/>

        <Button x:Name="roundDown" Margin="5" Text="Round Down" Grid.Row="6" Grid.Column="0"/>
        <Button x:Name="roundUp"   Margin="5" Text="Round Up" Grid.Row="6" Grid.Column="1"/>

    </Grid>
</ContentPage>

Sprawdzanie wyników

Uruchom aplikację i przyjrzyj się różnicom w interfejsie użytkownika. Użyto elementu Grid , aby poprawić estetykę istniejącego interfejsu użytkownika. Grid jest bardziej zaawansowany niż StackLayout. W szczególności Grid ułatwia wyrównanie widoków między wierszami.