Xamarin.Forms Tutorial Kisi

Sebelum mencoba tutorial ini, Anda seharusnya berhasil menyelesaikan:

Buat mulai cepat aplikasi pertama Xamarin.Forms Anda.

Dalam tutorial ini, Anda akan mempelajari cara:

Buat Xamarin.FormsGrid di XAML.
Tentukan kolom dan baris untuk Grid.
Rentang konten di beberapa kolom atau beberapa baris di Grid.

Anda akan menggunakan Visual Studio 2019, atau Visual Studio untuk Mac, untuk membuat aplikasi sederhana yang menunjukkan cara mengontrol tata letak dalam Grid. Cuplikan layar berikut menunjukkan aplikasi akhir:

Anda juga akan menggunakan XAML Hot Reload untuk Xamarin.Forms melihat perubahan UI tanpa membangun kembali aplikasi Anda.

Membuat kisi

Tersisa 8 menit

Grid adalah tata letak yang menata turunannya ke dalam baris dan kolom, yang dapat memiliki ukuran proporsional atau absolut. Secara default, berisi Grid satu baris dan satu kolom.

Visual Studio
Visual Studio untuk Mac

Untuk menyelesaikan tutorial ini, Anda harus memiliki Visual Studio 2019 (rilis terbaru), dengan pengembangan Seluler dengan beban kerja .NET terinstal. Selain itu, Anda akan memerlukan Mac berpasangan untuk membangun aplikasi tutorial di iOS. Untuk informasi tentang menginstal platform Xamarin, lihat Menginstal Xamarin. Untuk informasi tentang menyambungkan Visual Studio 2019 ke host build Mac, lihat Memasangkan ke Mac untuk pengembangan Xamarin.iOS.

Luncurkan Visual Studio, dan buat aplikasi kosong Xamarin.Forms baru bernama GridTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama GridTutorial. Menggunakan nama yang berbeda akan mengakibatkan kesalahan build saat Anda menyalin kode dari tutorial ini ke dalam solusi.

Untuk informasi selengkapnya tentang pustaka .NET Standard yang dibuat, lihat Anatomi aplikasiXamarin.Forms di Xamarin.Forms Mulai Cepat Deep Dive.
Di Penjelajah Solusi, dalam proyek GridTutorial, klik dua kali MainPage.xaml untuk membukanya. Kemudian, di MainPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Label dalam Grid. Secara default, memposisikan Grid tampilan turunannya dalam satu lokasi. Oleh karena itu, Grid yang berisi beberapa anak harus menentukan kolom dan baris, yang akan dibahas dalam latihan berikutnya. Selain itu, Margin properti menunjukkan posisi penyajian dari Grid dalam ContentPage.

Catatan

Selain Margin properti , Padding properti juga dapat diatur pada Grid. Nilai Padding properti menentukan jarak antara batas dan turunannya Grid . Untuk informasi selengkapnya, lihat Margin dan Padding.
Di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang mirip tombol Putar) untuk meluncurkan aplikasi di dalam simulator jarak jauh iOS yang Anda pilih atau emulator Android:

Untuk informasi selengkapnya tentang Grid, lihat Xamarin.Forms Kisi.

Untuk menyelesaikan tutorial ini, Anda harus menginstal Visual Studio untuk Mac (rilis terbaru), dengan dukungan platform iOS dan Android. Selain itu, Anda juga akan memerlukan Xcode (rilis terbaru). Untuk informasi selengkapnya tentang menginstal platform Xamarin, lihat Menginstal Xamarin.

Luncurkan Visual Studio untuk Mac, dan buat aplikasi kosong Xamarin.Forms baru bernama GridTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama GridTutorial. Menggunakan nama yang berbeda akan mengakibatkan kesalahan build saat Anda menyalin kode dari tutorial ini ke dalam solusi.

Untuk informasi selengkapnya tentang pustaka .NET Standard yang dibuat, lihat Anatomi aplikasiXamarin.Forms di Xamarin.Forms Mulai Cepat Deep Dive.
Di Solution Pad, dalam proyek GridTutorial , klik dua kali MainPage.xaml untuk membukanya. Kemudian, di MainPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Label dalam Grid. Secara default, memposisikan Grid tampilan turunannya dalam satu lokasi. Oleh karena itu, Grid yang berisi beberapa anak harus menentukan kolom dan baris, yang akan dibahas dalam latihan berikutnya. Selain itu, Margin properti menunjukkan posisi penyajian dari Grid dalam ContentPage.

Catatan

Selain Margin properti , Padding properti juga dapat diatur pada Grid. Nilai Padding properti menentukan jarak antara tampilan di Grid. Untuk informasi selengkapnya, lihat Margin dan Padding.
Di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerubungi tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Untuk informasi selengkapnya tentang Grid, lihat Xamarin.Forms Kisi.

Tentukan kolom dan baris

Tersisa 6 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Grid deklarasi untuk menentukan kolom dan baris, dan menempatkan konten di kolom dan baris:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Kode ini menentukan kolom dan baris untuk Gridinstans Label , dan posisi dalam kolom dan baris tertentu. Data kolom dan baris disimpan di ColumnDefinitions properti dan RowDefinitions , yang masing-masing merupakan kumpulan ColumnDefinition objek dan RowDefinition . Lebar masing-masing ColumnDefinition diatur oleh ColumnDefinition.Width properti , dan tinggi masing-masing RowDefinition diatur oleh RowDefinition.Height properti . Nilai lebar dan tinggi yang valid adalah:
- Auto, yang mengukur kolom atau baris agar pas dengan konten.
- Nilai proporsional, yang mengukur kolom dan baris sebagai proporsi ruang yang tersisa. Nilai proporsional ditunjukkan dengan diakhir *dengan .
- Nilai absolut, yang mengukur kolom atau baris dengan nilai tetap tertentu.
Oleh karena itu, dalam kode di atas, setiap kolom memiliki lebar setengah Grid, sementara setiap baris memiliki tinggi 50 unit perangkat independen.

Posisi masing-masing Label dalam Grid ditentukan dengan Grid.Column properti dan Grid.Row terlampir, menggunakan indeks berbasis nol. Oleh karena itu, kolom pertama adalah kolom 0, dan baris pertama adalah baris 0. Yang pertama Label tidak memiliki properti terlampir ini, karena setiap tampilan anak yang tidak mengaturnya akan secara otomatis dirender di kolom 0, baris 0.

Catatan

Penspasian antara kolom dan baris dalam Grid dapat diatur dengan ColumnSpacing properti dan RowSpacing . Untuk informasi selengkapnya, lihat Penspasian di Xamarin.Forms panduan Kisi.
Jika aplikasi masih berjalan, simpan perubahan pada file dan antarmuka pengguna aplikasi akan diperbarui secara otomatis di simulator atau emulator Anda. Jika tidak, di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS jarak jauh yang Anda pilih atau emulator Android:

Di MainPage.xaml, ubah Grid deklarasi untuk menentukan kolom dan baris, dan menempatkan konten di kolom dan baris:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Kode ini menentukan kolom dan baris untuk Gridinstans Label , dan posisi dalam kolom dan baris tertentu. Data kolom dan baris disimpan di ColumnDefinitions properti dan RowDefinitions , yang masing-masing merupakan kumpulan ColumnDefinition objek dan RowDefinition . Lebar masing-masing ColumnDefinition diatur oleh ColumnDefinition.Width properti , dan tinggi masing-masing RowDefinition diatur oleh RowDefinition.Height properti . Nilai lebar dan tinggi yang valid adalah:
- Auto, yang mengukur kolom atau baris agar pas dengan konten.
- Nilai proporsional, yang mengukur kolom dan baris sebagai proporsi ruang yang tersisa. Nilai proporsional ditunjukkan dengan diakhir *dengan .
- Nilai absolut, yang mengukur kolom atau baris dengan nilai tetap tertentu.
Oleh karena itu, dalam kode di atas, setiap kolom memiliki lebar setengah Grid, sementara setiap baris memiliki tinggi 50 unit perangkat independen.

Posisi masing-masing Label dalam Grid ditentukan dengan Grid.Column properti dan Grid.Row terlampir, menggunakan indeks berbasis nol. Oleh karena itu, kolom pertama adalah kolom 0, dan baris pertama adalah baris 0. Yang pertama Label tidak memiliki properti terlampir ini, karena setiap tampilan anak yang tidak mengaturnya akan secara otomatis dirender di kolom 0, baris 0.

Catatan

Penspasian antara kolom dan baris dalam Grid dapat diatur dengan ColumnSpacing properti dan RowSpacing . Untuk informasi selengkapnya, lihat Penspasian di Xamarin.Forms panduan Kisi.
Jika aplikasi masih berjalan, simpan perubahan pada file dan antarmuka pengguna aplikasi akan diperbarui secara otomatis di simulator atau emulator Anda. Jika tidak, di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Rentang beberapa kolom atau baris

Tersisa 2 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Grid deklarasi untuk menentukan kolom dan baris, dan tempatkan konten yang mencakup kolom dan baris:

<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>

Kode ini menentukan kolom dan baris untuk Gridinstans Label , dan posisi dalam kolom dan baris tertentu. Label Pertama mengatur ColumnSpan properti terlampir sehingga teksnya mencakup beberapa kolom. Properti ColumnSpan diatur ke 2, yang menunjukkan jumlah kolom yang Label akan membentang. Yang kedua Label mengatur RowSpan properti terlampir sehingga teksnya mencakup beberapa baris. Properti RowSpan diatur ke 2, yang menunjukkan jumlah baris yang akan dijangkau Label .

Jika aplikasi masih berjalan, simpan perubahan pada file dan antarmuka pengguna aplikasi akan diperbarui secara otomatis di simulator atau emulator Anda. Jika tidak, di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator jarak jauh iOS yang Anda pilih atau emulator Android:

Di Visual Studio, hentikan aplikasi.

Untuk informasi selengkapnya tentang mencakup kolom dan baris, lihat Baris dan kolom di Xamarin.Forms panduan Kisi .

Di MainPage.xaml, ubah Grid deklarasi untuk menentukan kolom dan baris, dan tempatkan konten yang mencakup kolom dan baris:

<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>

Kode ini menentukan kolom dan baris untuk Gridinstans Label , dan posisi dalam kolom dan baris tertentu. Label Pertama mengatur ColumnSpan properti terlampir sehingga teksnya mencakup beberapa kolom. Properti ColumnSpan diatur ke 2, yang menunjukkan jumlah kolom yang Label akan membentang. Yang kedua Label mengatur RowSpan properti terlampir sehingga teksnya mencakup beberapa baris. Properti RowSpan diatur ke 2, yang menunjukkan jumlah baris yang akan dijangkau Label .

Jika aplikasi masih berjalan, simpan perubahan pada file dan antarmuka pengguna aplikasi akan diperbarui secara otomatis di simulator atau emulator Anda. Jika tidak, di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Di Visual Studio untuk Mac, hentikan aplikasi.

Untuk informasi selengkapnya tentang mencakup kolom dan baris, lihat Baris dan kolom di Xamarin.Forms panduan Kisi .

Selamat!

Selesai 100%!

Selamat atas penyelesaian tutorial ini, di mana Anda belajar cara:

Buat Xamarin.FormsGrid di XAML.
Tentukan kolom dan baris untuk Grid.
Rentang konten di beberapa kolom atau beberapa baris di Grid.

Langkah berikutnya

Untuk mempelajari selengkapnya tentang dasar-dasar pembuatan aplikasi seluler dengan Xamarin.Forms, lanjutkan ke tutorial CollectionView.

ListView Tutorial

Bagikan melalui

Membuat kisi

Tentukan kolom dan baris

Rentang beberapa kolom atau baris

Selamat!

Langkah berikutnya

Tautan terkait