Mengatur tampilan dengan Grid
Sebagai contoh, saat ini Anda sedang membangun halaman yang menampilkan gambar dalam kisi 7x5. Anda dapat membuat halaman ini dengan beberapa kontainer StackLayout horizontal dan vertikal. Namun, proses pengodedannya dapat melelahkan dan dapat menyebabkan masalah performa karena persyaratan memori serta pemrosesan beberapa panel tata letak. Panel Grid tata letak adalah pilihan yang lebih baik untuk antarmuka pengguna yang memerlukan baris dan kolom. Dalam unit ini, Anda mempelajari cara menentukan Grid tampilan posisi dan di dalam selnya.
Apa yang dimaksud dengan Kisi?
adalah Grid panel tata letak yang terdiri dari baris dan kolom. Ilustrasi berikut ini menunjukkan tampilan konseptual kisi.
Anda menempatkan tampilan di sel yang dibuat dari persimpangan baris dan kolom. Misalnya, jika Anda membuat yang Grid memiliki tiga kolom dan dua baris, ada enam sel yang tersedia untuk tampilan. Ukuran baris dan kolom tersebut bisa berbeda, atau bisa diatur agar secara otomatis beradaptasi dengan ukuran turunan yang ditempatkan di dalamnya. Tampilan turunan dapat menempati satu sel atau membentang di banyak sel. Fleksibilitas ini membuat Grid menjadi pilihan yang baik untuk digunakan sebagai panel tata letak akar banyak aplikasi.
Cara menentukan baris dan kolom Kisi
Saat membuat Grid, Anda bisa menentukan setiap baris dan kolom satu per satu. Sistem ini memberi Anda kontrol penuh atas tinggi setiap baris dan lebar setiap kolom. Setiap Grid memiliki kumpulan objek RowDefinition dan ColumnDefinition yang menentukan bentuk kisi. Anda akan mengisi koleksi ini dengan instans RowDefinition dan ColumnDefinition, dengan masing-masing instans tersebut mewakili baris atau kolom di antarmuka pengguna Anda.
Berikut adalah dua cuplikan kode yang menunjukkan definisi kelas RowDefinition dan ColumnDefinition:
public sealed class RowDefinition : ...
{
...
public GridLength Height { get; set; }
}
public sealed class ColumnDefinition : ...
{
...
public GridLength Width { get; set; }
}
Perhatikan bahwa RowDefinition memiliki properti yang disebut Height dan ColumnDefinition memiliki properti yang disebut Width. Properti tersebut akan Anda gunakan untuk mengatur tinggi baris dan lebar kolom, seperti yang dijelaskan di bagian berikut.
Apa yang dimaksud dengan GridLength?
Tipe data properti Width dan Height adalah GridLength. Tipe ini berisi dua properti: GridUnitType dan Value. Berikut ini adalah cuplikan kode yang menunjukkan sebagian definisi jenis.
public struct GridLength
{
...
public GridUnitType GridUnitType { get; }
public double Value { get; }
}
Anda dapat mengatur properti GridUnitType ke salah satu nilai berikut:
AbsoluteAutoStar
Mari kita perhatikan setiap nilai ini.
Absolute GridUnitType
Absolute menentukan bahwa baris atau kolom harus diperbaiki dalam ukuran. Anda menggunakan Value properti untuk menunjukkan ukurannya. Berikut adalah contoh yang menunjukkan cara mengatur tinggi baris agar ukurannya menjadi ukuran unit perangkat 100 di C#. Perhatikan bagaimana Anda menggunakan konstruktor GridLength, yang mengambil nilai numerik. Konstruktor ini diatur GridUnitType ke untuk Absolute Anda secara otomatis.
var row = new RowDefinition() { Height = new GridLength(100) };
Di XAML, Anda hanya akan memberikan nilai numerik. Pengurai XAML memanggil pengonversi jenis untuk membuat GridLength instans. Berikut adalah contoh yang menunjukkan tindakan yang sama di XAML:
<RowDefinition Height="100" />
Auto GridUnitType
Auto secara otomatis mengukur baris atau kolom agar pas dengan tampilan anak Anda. Memindai Grid semua tampilan anak di baris atau kolom tersebut, memilih tampilan terbesar, lalu membuat baris atau kolom cukup besar agar pas dengan anak tersebut. Nilai numerik akan diabaikan saat Anda membuat definisi baris dalam kode. Anda dapat menggunakan nilai apa pun. Berikut adalah contoh yang menunjukkan cara mengatur tinggi suatu baris agar ukurannya diatur secara otomatis di C#. Perhatikan bahwa kami memilih 1 untuk nilai secara acak.
var row = new RowDefinition() { Height = new GridLength(1, GridUnitType.Auto) };
Di XAML, Anda akan menggunakan nilai Auto. Berikut adalah contoh yang menunjukkan tindakan yang sama di XAML.
<RowDefinition Height="Auto" />
Star GridUnitType
Star memberi Anda ukuran yang proporsional. Dalam ukuran proporsional, total ruang yang tersedia dan rasio yang diminta setiap baris atau kolom menentukan ukurannya. Dalam percakapan, orang sering menyebut ukuran bintang ini alih-alih ukuran proporsional.
Mari kita telusuri proses penggunaan ukuran yang proporsional untuk baris dalam kisi.
Menentukan ruang yang tersedia:
Gridakan memindai semua baris yang tidak menggunakan pengukuran bintang. Selain itu, juga menambah tinggi semua baris dan mengurangi total tingginyaGriditu sendiri. Hitungan ini menyediakan jumlah ruang yang tersedia untuk semua baris yang berukuran bintang.Membagi ruang yang tersedia: Kemudian
Gridakan membagi ruang yang tersedia di antara semua baris yang berukuran bintang berdasarkan pengaturanValueuntuk setiap baris. Katakanlah propertiValueberperan sebagai pengali yang menentukan rasio di antara semua baris yang ditentukan sebagai ukuran bintang. Misalnya, jika kita memiliki dua baris berukuran bintang, dan kedua baris tersebut memiliki1sebagai pengali, ruang yang tersedia akan dibagi secara merata. Tetapi, jika salah satu dari baris tersebut memiliki2sebagai Nilai, baris tersebut akan mendapatkan dua kali lebih banyak ruang seperti baris yang lain.
Berikut ini adalah contoh yang menunjukkan cara mengatur tinggi baris agar menjadi 2 Star di C#:
var row = new RowDefinition() { Height = new GridLength(2, GridUnitType.Star) };
Di XAML, Anda menggunakan simbol * untuk menunjukkan ukuran bintang. Anda menggabungkan nilai dan * dalam satu string, dan pengonversi jenis akan membuat GridLength untuk Anda. Berikut contoh yang sama di XAML.
<RowDefinition Height="2*" />
Koleksi kisi
Setelah menentukan baris dan kolom dengan menggunakan RowDefinition dan ColumnDefinition, Anda dapat menambahkannya ke Grid. Anda menggunakan properti koleksi RowDefinitions dan ColumnDefinitions dari Grid. Pengisian koleksi ini pada umumnya dilakukan di XAML.
Contoh ini menunjukkan cara menentukan empat baris dan menambahkannya ke Grid dengan menggunakan properti RowDefinitions:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
...
</Grid>
Definisi ini dapat disingkat menjadi:
<Grid RowDefinitions="100, Auto, 1*, 2*">
...
</Grid>
XAML yang digunakan untuk menetapkan kolom setara dengan XAML ini, kecuali jika Anda akan menggunakan ColumnDefinitions dan mengatur lebarnya.
Pada runtime, XAML ini menghasilkan Grid dengan empat baris. Baris pertama memiliki tinggi 100 unit perangkat tetap. Baris kedua memiliki tinggi tampilan tertinggi dalam baris. Baris ketiga dan keempat menggunakan ukuran bintang, yang berarti mereka mengambil ruang yang tersedia yang tersisa dan membaginya secara proporsional berdasarkan pengalinya Value . Karena baris ketiga adalah 1* dan baris keempat adalah 2*, baris keempat adalah dua kali tinggi baris ketiga.
Ukuran default baris dan kolom
Ukuran default baris dan kolom adalah ukuran 1*. Misalnya, lihat XAML berikut ini.
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
...
</Grid>
Definisi ini dapat disingkat menjadi:
<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">
...
</Grid>
Karena tidak ada baris atau kolom yang memiliki ukuran yang ditentukan, 1* diterapkan ke semuanya. Pada runtime, konfigurasi ini membuat Grid seragam itu, yang berarti semua baris memiliki tinggi yang sama dan semua kolom memiliki lebar yang sama.
Cara menambahkan tampilan ke Kisi
Saat menambahkan tampilan ke Grid, Anda menambahkannya ke sel tertentu. Sel dibuat pada posisi di mana baris dan kolom bersimpangan. Anda harus mengetahui lokasi sel untuk mengatur posisi tampilan dalam sel. Anda akan menggunakan kombinasi antara nomor baris dan nomor kolom untuk mengidentifikasi sel.
Penomoran baris dan kolom
Penomoran baris dan kolom dimulai dari nol. Penomorannya dimulai dari sudut kiri atas. Berikut adalah ilustrasi yang menunjukkan penomoran untuk Grid dengan empat baris dan dua kolom.
Misalnya, jika kita ingin menambahkan tampilan ke sel kanan bawah, kita bisa menganggap posisi tampilannya adalah row 3 column 1.
Menambahkan tampilan ke Kisi dengan menggunakan properti lampiran
Anda memerlukan cara untuk menentukan nomor baris dan kolom tampilan saat menambahkannya ke kisi. Salah satu solusinya adalah dengan menentukan properti Row dan Column di kelas dasar View sehingga Anda bisa menentukan posisi pada tampilan secara langsung. Teknik ini akan berhasil meskipun bukan pendekatan yang paling efisien. Tampilan tidak selalu berada dalam Grid, sehingga terkadang properti tersebut tidak diperlukan. Pendekatan yang lebih baik adalah dengan menggunakan properti terlampir.
Properti terlampir adalah properti yang ditentukan dalam satu kelas tetapi diatur pada objek dari jenis lain.
Katakanlah bahwa properti terlampir merupakan kumpulan pasangan kunci-nilai yang merupakan bagian dari tampilan. Saat menambahkan tampilan ke Grid, Anda menentukan baris dan kolom. Dengan menggunakan properti lampiran, Anda dapat menambahkan pasangan kunci-nilai dengan kunci Grid.Row dan nilai yang menentukan nomor baris. Grid Ketika siap untuk memposisikan tampilan, ia memeriksa koleksi untuk melihat apakah ada kunci yang disebut Grid.Row. Jika ada, Grid menggunakan nilai untuk memposisikan tampilan.
Contoh ini menunjukkan cara membuat Grid dan menambahkan tampilan dengan menggunakan properti lampiran:
<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">
<BoxView Grid.Row="1" Grid.Column="0" Color="Navy" />
</Grid>
Dalam contoh ini, Grid.Row=1 dan Grid.Column=0 merupakan pasangan kunci-nilai yang ditambahkan ke kumpulan internal BoxView. menggunakan nilai-nilai tersebut Grid untuk menentukan di mana tampilan harus diposisikan. Berikut adalah tampilan Grid jika Anda sudah menjalankan aplikasi di perangkat.
Cara membuat agar tampilan membentangkan beberapa baris atau kolom
Ada dua properti terlampir lainnya yang harus Anda ketahui: Grid.RowSpan dan Grid.ColumnSpan. Properti ini menentukan berapa banyak baris atau kolom yang harus ditempati tampilan. Misalnya, lihat XAML berikut ini.
<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">
<BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Color="Navy" />
</Grid>
Perhatikan bahwa contoh ini mengatur ColumnSpan menjadi 2. Tampilan ini menempati dua kolom mulai dari Column 0. Berikut adalah tampilan Grid jika Anda sudah menjalankan aplikasi di perangkat.
