Esercizio - Usare StackLayout per creare un'interfaccia utente

  • 10 minuti

In questo esercizio si useranno contenitori StackLayout annidati per disporre le visualizzazioni nell'interfaccia utente. Il primo screenshot mostra il layout implementato dal progetto iniziale, mentre il secondo mostra il layout per il progetto completato. L'obiettivo dell'esercizio consiste nell'usare contenitori StackLayout e LayoutOptions per trasformare il progetto iniziale nella versione completata.

Screenshot che mostra la soluzione iniziale con tutte le etichette posizionate verticalmente in prossimità. Accanto a essa, vi è la soluzione completata con i controlli allineati e posizionati in modo più intuitivo.

Esplorare la soluzione iniziale

La soluzione iniziale contiene un'app per il calcolo della mancia completamente funzionale. Per iniziare, esplorare l'interfaccia utente per comprendere il funzionamento dell'app.

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

  2. Compilare ed eseguire l'app nel sistema operativo preferito.

  3. Immettere un numero nella casella di testo e usare l'app per verificarne il funzionamento.

  4. Fare pratica con i pulsanti dell'importo della mancia e con il dispositivo di scorrimento.

  5. Al termine, chiudere l'app.

  6. Aprire MainPage.xaml. Si noti che tutte le visualizzazioni sono inserite in un unico contenitore VerticalStackLayout, come illustrato dal markup XAML 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">
    <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>

Correggere l'interfaccia utente

Dopo aver visto l'app in esecuzione, è possibile migliorarne l'aspetto mediante l'aggiunta di contenitori HorizontalStackLayout. L'obiettivo è rendere l'app simile allo screenshot mostrato all'inizio del lab.

  1. Aprire il file MainPage.xaml.

  2. Aggiungere 40 unità di spaziatura interna e 10 unità di spaziatura al contenitore VerticalStackLayout:

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

  3. Aggiungere un contenitore HorizontalStackLayout per raggruppare la Label denominata Bill con il campo Entry sotto di essa. Impostare la proprietà Spacing su 10.

  4. Impostare la proprietà WidthRequest del Conto Label su 100 e la proprietà VerticalOptions su Center. In questo modo l'etichetta verrà allineata in verticale al campo Entry.

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

  5. Aggiungere un altro contenitore HorizontalStackLayout per raggruppare la Label denominata Tip con la Label denominata tipOutput. Impostare la proprietà Spacing su 10 e la proprietà Margin su 0,20,0,0.

  6. Impostare la proprietà WidthRequest della Mancia Label su 100

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

  7. Usare un contenitore HorizontalStackLayout per raggruppare la Label denominata Total con la Label denominata totalOutput. Impostare la proprietà Spacing su 10.

  8. Impostare la proprietà WidthRequest del Totale Label su 100

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

  9. Aggiungere un altro contenitore HorizontalStackLayout per raggruppare la Label denominata Percentage con la Label denominata tipPercent.

  10. Impostare la proprietà VerticalOptions di questo contenitore HorizontalStackLayout su End e la proprietà Spacing su 10:

  11. Impostare la proprietà WidthRequest della Percentuale mancia Label su 100

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

  12. Usare un contenitore HorizontalStackLayout per raggruppare il Button con la didascalia 15% e il Button con la didascalia 20%.

  13. Impostare la proprietà Margin di questo contenitore StackLayoutsu 0,20,0,0 e la proprietà Spacing su 10:

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

  14. Aggiungere un contenitore HorizontalStackLayout finale per raggruppare il Button con la didascalia Round Down e il Button con la didascalia Round Up. Impostare la proprietà Margin di questo contenitore StackLayoutsu 0,20,0,0 e la proprietà Spacing su 10:

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

  15. In tutti e quattro i pulsanti impostare la proprietà HorizontalOptions su Center e la proprietà WidthRequest su 150. Ad esempio:

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

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

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

Esaminare i risultati

Eseguire nuovamente l'app e osservare le differenze nell'interfaccia utente. Verificare che i controlli siano allineati correttamente, con le dimensioni e la spaziatura corrette.

Sono stati usati i contenitori VerticalStackLayout e HorizontalStackLayout per migliorare l'estetica di un'interfaccia utente esistente. Questi layout sono pannelli di layout semplicissimi ma comunque in grado di produrre un'interfaccia utente sensata.