Exercice - Utiliser StackLayout pour créer une interface utilisateur

• 10 minutes

Dans cet exercice, vous utiliser des conteneurs StackLayout imbriqués pour organiser les vues dans votre interface utilisateur. La première capture d’écran montre la disposition implémentée par le projet de démarrage, et la deuxième la disposition du projet terminé. Votre tâche consiste à utiliser des conteneurs StackLayout et LayoutOptions pour convertir le projet de démarrage en sa version terminée.

Explorer la solution de démarrage

La solution de démarrage contient une application de calculatrice de pourboire entièrement fonctionnelle. Commencez par explorer l’interface utilisateur pour comprendre ce que fait l’application.

1. À l’aide de Visual Studio, ouvrez la solution de démarrage dans le dossier exercise2/TipCalculator du dépôt que vous avez cloné au début de l’exercice précédent.

2. Générez et exécutez l’application sur le système d’exploitation de votre choix.

3. Entrez un nombre dans la zone de texte et utilisez l’application pour voir comment elle fonctionne.

4. Testez les boutons de montant de pourboire et le curseur.

5. Fermez l’application une fois que vous avez terminé.

6. Ouvrez MainPage.xaml. Notez que touts les affichages sont placés dans une seule VerticalStackLayout, comme l’illustre le balisage XAML suivant :

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

Corriger l’interface utilisateur

Maintenant que vous avez vu comment s’exécute l’application, vous pouvez l’améliorer en ajoutant des conteneurs HorizontalStackLayout. L’objectif est de faire en sorte que l’application ressemble à la capture d’écran au début du labo.

1. Ouvrez le fichier MainPage.xaml.

2. Ajoutez 40 unités de remplissage et 10 unités d’espacement à la VerticalStackLayout :

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

3. Ajoutez une HorizontalStackLayout pour regrouper la Label indiquant Bill et le champ Entry en dessous. Définissez la propriété Spacing sur 10.

4. Définissez la WidthRequest de l’élément Label Facture sur 100 et la propriété VerticalOptions sur Center. Ces changements garantissent que l’étiquette est alignée verticalement sur le champ Entry.

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

5. Ajoutez une autre HorizontalStackLayout pour regrouper la Label indiquant Tip et la Label nommée tipOutput. Définissez la propriété Spacing sur 10, et la propriété Margin sur 0,20,0,0.

6. Définissez la WidthRequest de l’élément Label Pourboire sur 100.

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

7. Utilisez une HorizontalStackLayout pour regrouper la Label indiquant Total et la Label nommée totalOutput. Définissez la propriété Spacing sur 10.

8. Définissez la WidthRequest de l’élément Label Total sur 100.

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

9. Ajoutez une autre HorizontalStackLayout pour regrouper la Label indiquant Tip Percentage et la Label nommée tipPercent.

10. Définissez la propriété VerticalOptions de HorizontalStackLayout sur End et la propriété Spacing sur 10 :

11. Définissez la WidthRequest de l’élément Label Pourcentage du pourboire sur 100.

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

12. Utilisez une HorizontalStackLayout pour regrouper le Button avec la légende 15%, et le Button avec la légende 20%.

13. Définissez la propriété Margin de cette StackLayout sur 0,20,0,0, et la propriété Spacing sur 10 :

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

14. Ajoutez une HorizontalStackLayout finale pour regrouper le Button avec la légende Round Down, et le Button avec la légende Round Up. Définissez la propriété Margin de cette StackLayout sur 0,20,0,0, et la propriété Spacing sur 10 :

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

15. Sur les quatre contrôles de bouton, définissez la propriété HorizontalOptions sur Center, et la propriété WidthRequest sur 150. Par exemple :

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

Le balisage XAML complet de la page de contenu devrait ressembler à ceci :

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

Examiner les résultats

Réexécutez l’application et regardez les différences dans l’interface utilisateur. Vérifiez que les contrôles sont correctement alignés, dimensionnés et espacés.

Vous avez utilisé des conteneurs VerticalStackLayout et HorizontalStackLayout pour améliorer l’esthétique d’une interface utilisateur existante. Ces dispositions sont les panneaux de disposition les plus simples, mais sont suffisamment puissantes pour produire une interface utilisateur raisonnable.