Sebelumnya

Berikutnya

Latihan - Menggunakan Grid untuk membangun antarmuka pengguna

Selesai

Dalam latihan ini, Anda menggunakan Grid untuk mengatur tampilan di Antarmuka Pengguna (UI) Anda. Anda mulai dengan versi lain dari proyek TipCalculator, dan menyesuaikannya untuk membuat UI lebih intuitif. Anda juga memindahkan tombol ke bagian bawah halaman. Kali ini Anda menggunakan Grid tata letak daripada menggunakan VerticalStackLayout dan HorizontalStackLayout. Gambar berikut menunjukkan antarmuka pengguna awal, dan UI yang dihasilkan dari mengikuti langkah-langkah dalam latihan ini:

Membuka solusi permulaan

Solusi awal berisi aplikasi kalkulator tip yang berfungsi penuh.

1. Menggunakan Visual Studio, buka solusi starter di folder exercise3/TipCalculator di repositori yang Anda kloning di awal latihan sebelumnya.

2. Buka MainPage.xaml. Perhatikan bahwa semua tampilan ditampilkan menggunakan satu panel vertikal StackLayout :

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

Membuat tata letak Kisi

1. Ubah panel tata letak dari VerticalStackLayout ke Grid dengan padding 40 unit.

2. Menentukan tujuh baris dan dua kolom untuk Grid. Membuat semua ukuran baris Auto kecuali baris keempat. Baris keempat harus digunakan Star sehingga mendapatkan semua ruang yang tersisa yang tersedia di kisi. Gunakan ukuran Star untuk kedua kolom.

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

Posisikan tampilan di sel

1. Tambahkan setelan untuk Grid.Row dan Grid.Column ke setiap tampilan untuk menetapkannya ke sel yang sesuai di Grid. Gunakan cuplikan layar berikut untuk membantu Anda menentukan di mana setiap tampilan harus ditempatkan:

   

   Contoh berikut menunjukkan cara mengatur posisi untuk TagihanLabel, dan billInputEntry tampilan:

   ...
   <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. Ratakan TagihanLabel dan Entry dengan mengatur properti VerticalOptions ke Center pada Label.

3. Tambahkan pengaturan untuk Grid.ColumnSpan ke Slider sehingga mencakup dua kolom:

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

4. Label Temukan dengan teks Persentase Tip. Atur sehingga menempati posisi kiri bawah dalam persegi panjangnya:

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

5. Temukan Label bernama tipPercent. Atur sehingga menempati posisi kanan bawah dalam persegi panjangnya:

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

6. Setel properti Margin untuk keempat tombol ke 5.

Markup XAML lengkap untuk halaman akan terlihat seperti ini:

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

Periksa hasilnya

Jalankan aplikasi dan lihat perbedaan dalam antarmuka pengguna. Anda menggunakan Grid untuk meningkatkan estetika antarmuka pengguna yang sudah ada. Grid lebih kuat dari StackLayout. Secara khusus, Grid membuatnya jauh lebih mudah untuk menyelaraskan tampilan di seluruh baris.

Lanjutkan