Bagikan melalui

Ringkasan Bab 17. Menguasai Kisi

  • Artikel

Catatan

Buku ini diterbitkan pada musim semi 2016, dan belum diperbarui sejak saat itu. Ada banyak dalam buku yang tetap berharga, tetapi beberapa materi sudah kedaluarsa, dan beberapa topik tidak lagi sepenuhnya benar atau lengkap.

Grid adalah mekanisme tata letak yang kuat yang mengatur turunannya ke dalam baris dan kolom sel. Tidak seperti elemen HTML table serupa, Grid hanya untuk tujuan tata letak daripada presentasi.

Kisi dasar

Grid berasal dari Layout<View>, yang mendefinisikan Children properti yang Grid mewarisi. Anda dapat mengisi koleksi ini di XAML atau kode.

Kisi di XAML

Definisi Grid dalam XAML umumnya dimulai dengan mengisi RowDefinitions dan ColumnDefinitions koleksi Grid dengan RowDefinition objek dan ColumnDefinition . Ini adalah cara Anda menetapkan jumlah baris dan kolom Grid, dan propertinya.

RowDefinition memiliki Height properti dan ColumnDefinition memiliki Width properti, kedua jenis GridLength, struktur.

Di XAML, mengonversi GridLengthTypeConverter string teks sederhana menjadi GridLength nilai. Di balik layar, GridLength konstruktor membuat GridLength nilai berdasarkan angka dan nilai jenis GridUnitType, enumerasi dengan tiga anggota:

  • Absolute — lebar atau tinggi ditentukan dalam unit independen perangkat (angka dalam XAML)
  • Auto — tinggi atau lebar diotomatiskan berdasarkan konten sel ("Otomatis" di XAML)
  • Star — tinggi atau lebar sisa dialokasikan secara proporsional (angka dengan "*", disebut bintang, dalam XAML)

Setiap anak Grid juga harus diberi baris dan kolom (baik secara eksplisit maupun implisit). Rentang baris dan rentang kolom bersifat opsional. Ini semua ditentukan menggunakan properti yang dapat diikat terlampir — properti yang ditentukan oleh Grid tetapi diatur pada turunan dari Grid. Grid menentukan empat properti yang dapat diikat terlampir statis:

Dalam kode, program dapat menggunakan delapan metode statis untuk mengatur dan mendapatkan nilai-nilai ini:

Di XAML Anda menggunakan atribut berikut untuk mengatur nilai-nilai ini:

  • Grid.Row
  • Grid.Column
  • Grid.RowSpan
  • Grid.ColumnSpan

Sampel SimpleGridDemo menunjukkan pembuatan dan inisialisasi Grid di XAML.

Mewarisi GridPadding properti dari Layout dan menentukan dua properti tambahan yang menyediakan penspasian antara baris dan kolom:

Koleksi RowDefinitions dan ColumnDefinitions tidak benar-benar diperlukan. Jika tidak ada, Grid membuat baris dan kolom untuk Grid anak-anak dan memberi mereka semua default GridLength "*" (bintang).

Kisi dalam kode

Sampel GridCodeDemo menunjukkan cara membuat dan mengisi Grid kode. Anda dapat mengatur properti terlampir untuk setiap anak secara langsung, atau tidak langsung dengan memanggil metode tambahan Add seperti yang ditentukan oleh antarmuka Grid.IGridList<T>.Add

Bagan batang Kisi

Sampel GridBarChart menunjukkan cara menambahkan beberapa BoxView elemen ke Grid menggunakan metode massal AddHorizontal . Secara default, elemen-elemen ini BoxView memiliki lebar yang sama. Tinggi masing-masing BoxView dapat dikontrol agar menyerupai bagan batang.

dalam Gridsampel GridBarChart berbagi AbsoluteLayout induk dengan yang awalnya tidak terlihat Frame. Program ini juga mengatur TapGestureRecognizer pada masing-masing BoxView untuk menggunakan Frame untuk menampilkan informasi tentang bilah yang diketuk.

Perataan di Kisi

Sampel GridAlignment menunjukkan cara menggunakan VerticalOptions properti dan HorizontalOptions untuk meratakan turunan Grid dalam sel.

Sampel SpasiButtons sama dengan elemen spasi yang berpusat Button di dalam Grid sel.

Pembagi dan batas sel

Grid tidak menyertakan fitur yang menggambar pembagi atau batas sel. Namun, Anda dapat membuat sendiri.

GridCellDividers menunjukkan cara menentukan baris dan kolom tambahan khusus untuk elemen tipis BoxView untuk meniru garis pembagian.

Program GridCellBorders tidak membuat sel tambahan tetapi sebaliknya meratakan BoxView elemen di setiap sel untuk meniru batas sel.

Contoh Kisi kehidupan nyata

Sampel KeypadGrid menggunakan Grid untuk menampilkan keypad:

Cuplikan layar tiga kali Keypad Grid

Menanggapi perubahan orientasi

Grid dapat membantu menyusun program untuk merespons perubahan orientasi. Sampel GridRgbSliders menunjukkan teknik yang memindahkan elemen antara baris kedua ponsel berorientasi potret dan kolom kedua ponsel berorientasi lanskap.

Program ini menginisialisasi Slider elemen ke rentang 0 hingga 255, dan menggunakan pengikatan data untuk menampilkan nilai slider dalam heksadesimal. Slider Karena nilainya adalah titik mengambang, dan string pemformatan .NET untuk heksadesimal hanya berfungsi dengan bilangan bulat, DoubleToIntConvert kelas di Xamarin.Formspustaka Book.Toolkit membantu.