Sebelumnya

Berikutnya

Latihan - Menggunakan StackLayout untuk membangun antarmuka pengguna

Selesai

Dalam latihan ini, Anda menggunakan kontainer berlapis StackLayout untuk mengatur tampilan di Antarmuka Pengguna (UI) Anda. Cuplikan layar pertama menunjukkan tata letak yang diterapkan oleh proyek awal, dan yang kedua menunjukkan tata letak untuk proyek yang telah selesai. Tugas Anda adalah menggunakan kontainer StackLayout dan LayoutOptions untuk mengubah proyek awal menjadi versi yang telah selesai.

Menjelajahi solusi awal

Solusi awal berisi aplikasi kalkulator tip yang berfungsi penuh. Mulailah dengan menjelajahi UI untuk memahami apa yang dilakukan aplikasi.

1. Dengan menggunakan Visual Studio, buka solusi awal di folder exercise2/TipCalculator di repositori yang Anda klon di awal latihan sebelumnya.

2. Buat dan jalankan aplikasi pada sistem operasi pilihan Anda.

3. Masukkan nomor ke dalam kotak teks dan gunakan aplikasi untuk melihat cara kerja aplikasi.

4. Lakukan eksperimen dengan tombol jumlah tip dan penggeser.

5. Setelah selesai, tutup aplikasi.

6. Buka MainPage.xaml. Perhatikan bahwa semua tampilan ditempatkan menjadi satu VerticalStackLayout, seperti yang ditunjukkan oleh markup XAML berikut:

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

Memperbaiki antarmuka pengguna

Setelah melihat aplikasi berjalan, Anda dapat membuatnya terlihat lebih baik dengan menambahkan HorizontalStackLayout kontainer. Tujuannya adalah untuk membuat aplikasi terlihat seperti cuplikan layar di awal lab.

1. Buka file MainPage.xaml.

2. Tambahkan unit pengisi 40 dan unit spasi 10 ke VerticalStackLayout:

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

3. Tambahkan HorizontalStackLayout untuk mengelompokkan Label yang bertuliskan Tagihan dengan bidang Entry di bawahnya. Atur properti Spacing ke 10.

4. Atur WidthRequest dari TagihanLabel ke 100 dan properti VerticalOptions ke Center. Perubahan ini memastikan bahwa label selaras secara vertikal dengan Entry bidang .

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

5. Tambahkan HorizontalStackLayout lain untuk mengelompokkan Label yang bertuliskan Tip dengan Label bernama tipOutput. Atur properti Spacing ke 10, dan properti Margin ke 0,20,0,0.

6. Atur WidthRequest dari TipLabel ke 100

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

7. Gunakan HorizontalStackLayout untuk mengelompokkan Label yang bertuliskan Total dengan Label bernama totalOutput. Atur properti Spacing ke 10.

8. Atur WidthRequest dari TotalLabel ke 100

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

9. Tambahkan HorizontalStackLayout lain untuk mengelompokkan Label yang bertuliskan Persentase Tip dengan Label bernama tipPercent.

10. Atur VerticalOptions properti ini HorizontalStackLayout ke End dan atur properti ke Spacing10:

11. Atur WidthRequest dari Persentase TipLabel ke 100

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

12. Gunakan HorizontalStackLayout untuk mengelompokkan Button dengan keterangan 15% dan Button dengan keterangan 20%.

13. Atur properti Margin dari StackLayout ini ke 0,20,0,0, dan properti Spacing ke 10:

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

14. Tambahkan HorizontalStackLayout terakhir untuk mengelompokkan Button dengan keterangan, Pembulatan ke Bawah dan Button dengan keterangan, Pembulatan ke Atas.. Atur properti Margin dari StackLayout ini ke 0,20,0,0, dan properti Spacing ke 10:

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

15. Pada keempat kontrol tombol, atur properti HorizontalOptions ke Center dan properti WidthRequest ke 150. Misalnya:

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

Markup XAML lengkap untuk halaman konten akan terlihat seperti ini:

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

Periksa hasilnya

Jalankan aplikasi lagi dan lihat perbedaan di antarmuka pengguna. Verifikasi bahwa kontrol diselaraskan dengan benar, dan berukuran tepat serta diberi spasi.

Anda menggunakan kontainer VerticalStackLayout dan HorizontalStackLayout untuk meningkatkan estetika antarmuka pengguna yang ada. Tata letak ini adalah panel tata letak paling sederhana, tetapi cukup kuat untuk menghasilkan antarmuka pengguna yang masuk akal.

Lanjutkan