Oefening: Grid gebruiken om een gebruikersinterface te bouwen

Voltooid

In deze oefening gebruikt u een Grid opdracht om de weergaven in uw gebruikersinterface (UI) te rangschikken. U begint met een andere versie van het TipCalculator-project en past het aan om de gebruikersinterface intuïtiever te maken. U verplaatst ook de knoppen naar de onderkant van de pagina. Deze keer gebruikt u een Grid indeling in plaats van en VerticalStackLayoutHorizontalStackLayout . In de volgende afbeelding ziet u de eerste gebruikersinterface en de gebruikersinterface die het resultaat is van het volgen van de stappen in deze oefening:

Open de startersoplossing

De startersoplossing bevat een volledig functionele tipcalculator-app.

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

2. Open MainPage.xaml. U ziet dat alle weergaven worden weergegeven met één VerticalStackLayout deelvenster:

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

Een rasterindeling maken

1. Wijzig het indelingspaneel van VerticalStackLayout in Grid met opvulling van 40 eenheden.

2. Definieer zeven rijen en twee kolommen voor de Grid. Maak de grootte van alle rijen Auto , behalve de vierde rij. De vierde rij moet worden gebruikt Star , zodat alle resterende ruimte beschikbaar is in het raster. Gebruik Star de grootte voor beide kolommen.

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

De weergaven in de cellen plaatsen

1. Voeg instellingen toe voor Grid.Row en Grid.Column aan elk van de weergaven om deze toe te wijzen aan de juiste cel in de Grid. Gebruik de volgende schermopname om te bepalen waar elke weergave moet worden geplaatst:

   

   In het volgende voorbeeld ziet u hoe u de positie voor de factuurLabelen de billInputEntry weergave instelt:

   ...
   <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. Lijn de factuurLabel uit en Entry stel de VerticalOptions eigenschap Center in op het label.

3. Voeg een instelling toe voor Grid.ColumnSpan de Slider instelling zodat deze twee kolommen omvat:

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

4. Zoek het Label met het teksttippercentage. Stel deze zo in dat deze de positie linksonder in de rechthoek inneemt:

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

5. Zoek de Label benoemde tipPercent. Stel deze zo in dat deze de rechterbenedenhoek inneemt in de rechthoek:

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

6. Stel de Margin eigenschap voor alle vier de knoppen in op 5.

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

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

De resultaten bekijken

Voer de toepassing uit en bekijk de verschillen in de gebruikersinterface. U hebt een Grid gebruikt om de esthetische elementen van een bestaande gebruikersinterface te verbeteren. Grid is krachtiger dan StackLayout. Met name maakt Grid het veel eenvoudiger om weergaven uit te lijnen tussen rijen.