Esercizio - Usare Grid per compilare un'interfaccia utente

Completato

In questo esercizio, si userà un layout Grid per disporre le visualizzazioni nell'interfaccia utente. Si inizia con un'altra versione del progetto TipCalculator, modificandola per rendere l'interfaccia utente più intuitiva. I pulsanti vengono inoltre spostati nella parte inferiore della pagina. Questa volta si userà un layout Grid, invece di VerticalStackLayout e HorizontalStackLayout. L'immagine seguente mostra l'interfaccia utente iniziale e l'interfaccia utente risultante dall'esecuzione della procedura descritta in questo esercizio:

Aprire la soluzione iniziale

La soluzione iniziale contiene un'app per il calcolo della mancia completamente funzionale.

1. In Visual Studio aprire la soluzione iniziale nella cartella exercise3/TipCalculator nel repository clonato all'inizio dell'esercizio precedente.

2. Aprire MainPage.xaml. Si noti che tutte le visualizzazioni sono contenute in un unico pannello VerticalStackLayout:

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

Creare un layout Grid

1. Modificare il pannello di layout da VerticalStackLayout a Grid con spaziatura di 40 unità.

2. Definire sette righe e due colonne per la Grid. Impostare le dimensioni Auto per tutte le righe eccetto la quarta. La quarta riga deve usare Star in modo da ottenere tutto lo spazio rimanente disponibile nella griglia. Impostare le dimensioni Star per entrambe le colonne.

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

Posizionare le visualizzazioni nelle celle

1. Aggiungere le impostazioni per Grid.Row e Grid.Column a ognuna delle visualizzazioni per assegnarle alla cella appropriata nel layout Grid. Per stabilire dove posizionare ogni visualizzazione, usare lo screenshot seguente:

   

   L'esempio seguente mostra come impostare la posizione per Conto Label e la visualizzazione billInput Entry:

   ...
   <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. Allineare Conto Label e Entry impostando la proprietà VerticalOptions su Center Etichetta.

3. Aggiungere un'impostazione di Grid.ColumnSpan all'elemento Slider in modo che si estenda su due colonne:

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

4. Individuare la vista Label con il testo Percentuale di mancia. Impostarla in modo che occupi la posizione in basso a sinistra nel rettangolo:

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

5. Individuare la Label denominata tipPercent. Impostarla in modo che occupi la posizione in basso a destra nel rettangolo:

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

6. Impostare la proprietà Margin per tutti e quattro i pulsanti su 5.

Il markup XAML (Extensible Application Markup Language) completo per la pagina dovrebbe essere simile al seguente:

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

Esaminare i risultati

Eseguire l'applicazione e osservare le differenze nell'interfaccia utente. È stato usato un layout Grid per migliorare l'estetica di un'interfaccia utente esistente. Il layout Grid è più efficace di StackLayout. In particolare, Grid consente di allineare le visualizzazioni nelle righe molto più facilmente.