Panduan: Mengatur Kontrol pada Formulir Windows Menggunakan TableLayoutPanel

Artikel
07/13/2023

Beberapa aplikasi memerlukan formulir dengan tata letak yang mengatur dirinya dengan tepat saat formulir diubah ukurannya atau saat konten berubah ukuran. Saat Anda memerlukan tata letak dinamis dan Anda tidak ingin menangani Layout peristiwa secara eksplisit dalam kode Anda, pertimbangkan untuk menggunakan panel tata letak.

Kontrol FlowLayoutPanel dan TableLayoutPanel kontrol menyediakan cara intuitif untuk mengatur kontrol pada formulir Anda. Keduanya menyediakan kemampuan otomatis yang dapat dikonfigurasi untuk mengontrol posisi relatif kontrol anak yang terkandung di dalamnya, dan keduanya memberi Anda fitur tata letak dinamis pada waktu proses, sehingga mereka dapat mengubah ukuran dan memposisikan ulang kontrol anak saat dimensi formulir induk berubah. Panel tata letak dapat disarangkan dalam panel tata letak, untuk memungkinkan realisasi antarmuka pengguna yang canggih.

FlowLayoutPanel mengatur isinya dalam arah alur tertentu: horizontal atau vertikal. Isinya dapat dibungkus dari satu baris ke baris berikutnya, atau dari satu kolom ke kolom berikutnya. Secara bergantian, kontennya dapat diklip alih-alih dibungkus. Untuk informasi selengkapnya, lihat Panduan: Mengatur Kontrol di Formulir Windows Menggunakan FlowLayoutPanel.

mengatur TableLayoutPanel kontennya dalam kisi, menyediakan fungsionalitas yang mirip dengan elemen tabel> HTML<. Kontrol ini TableLayoutPanel memungkinkan Anda menempatkan kontrol dalam tata letak kisi tanpa mengharuskan Anda menentukan posisi setiap kontrol secara tepat. Sel-selnya disusun dalam baris dan kolom, dan ini dapat memiliki ukuran yang berbeda. Sel dapat digabungkan di seluruh baris dan kolom. Sel dapat berisi apa pun yang dapat dikandung dan bertingkah laku dalam sebagian besar hal lain sebagai kontainer.

Kontrol ini TableLayoutPanel juga menyediakan kemampuan pengubahan ukuran proporsional pada waktu proses, sehingga tata letak Anda dapat berubah dengan lancar saat formulir Anda diubah ukurannya. Ini membuat TableLayoutPanel kontrol sangat cocok untuk tujuan seperti formulir entri data dan aplikasi yang dilokalkan. Untuk informasi selengkapnya, lihat Panduan: Membuat Formulir Windows yang Dapat Diubah Ukurannya untuk Entri dan Panduan Data: Membuat Formulir Windows yang Dapat Dilokalkan.

Secara umum, Anda tidak boleh menggunakan TableLayoutPanel kontrol sebagai kontainer untuk seluruh tata letak. Gunakan TableLayoutPanel kontrol untuk menyediakan kemampuan mengubah ukuran proporsional ke bagian tata letak.

Tugas yang diilustrasikan dalam panduan ini meliputi:

Membuat proyek Formulir Windows
Mengatur Kontrol dalam Baris dan Kolom
Mengatur Properti Baris dan Kolom
Mencakup Baris dan Kolom dengan Kontrol
Penanganan Luapan Otomatis
Menyisipkan Kontrol dengan Mengklik Ganda Kontrol di Kotak Alat
Menyisipkan Kontrol dengan Menggambar Kerangkanya
Menetapkan Ulang Kontrol yang Ada ke Induk Yang Berbeda

Setelah selesai, Anda akan memiliki pemahaman tentang peran yang dimainkan oleh fitur tata letak penting ini.

Membuat Proyek

Langkah pertama adalah membuat proyek dan menyiapkan formulir.

Untuk membuat proyek

Buat proyek Aplikasi Windows yang disebut "TableLayoutPanelExample". Untuk informasi selengkapnya, lihat Cara: Membuat proyek aplikasi Formulir Windows .
Pilih formulir di Desainer Formulir Windows.

Mengatur Kontrol dalam Baris dan Kolom

Kontrol ini TableLayoutPanel memungkinkan Anda untuk dengan mudah mengatur kontrol ke dalam baris dan kolom.

Untuk menyusun kontrol dalam baris dan kolom menggunakan TableLayoutPanel

TableLayoutPanel Seret kontrol dari Kotak Alat ke formulir Anda. Perhatikan bahwa, secara default, TableLayoutPanel kontrol memiliki empat sel.
Button Seret kontrol dari Kotak Alat ke TableLayoutPanel kontrol dan letakkan ke salah satu sel. Perhatikan bahwa Button kontrol dibuat di dalam sel yang Anda pilih.
Seret tiga kontrol lagi Button dari Kotak Alat ke TableLayoutPanel dalam kontrol, sehingga setiap sel berisi tombol.
Ambil handel ukuran vertikal di antara dua kolom dan pindahkan ke kiri. Perhatikan bahwa Button kontrol di kolom pertama diubah ukurannya menjadi lebar yang lebih kecil, sementara ukuran Button kontrol di kolom kedua tidak berubah.
Ambil handel ukuran vertikal di antara dua kolom dan pindahkan ke kanan. Perhatikan bahwa Button kontrol di kolom pertama kembali ke ukuran aslinya, sementara Button kontrol di kolom kedua dipindahkan ke kanan.
Pindahkan gagang pengatur ukuran horizontal ke atas dan ke bawah untuk melihat efek pada kontrol di panel.

Memosisikan Kontrol Dalam Sel Menggunakan Docking dan Anchoring

Perilaku penahanan kontrol anak dalam berbeda TableLayoutPanel dari perilaku di kontrol kontainer lainnya. Perilaku docking kontrol anak sama dengan kontrol kontainer lainnya.

Memosisikan kontrol dalam sel

Pilih kontrol Button pertama. Ubah nilai propertinya Dock menjadi Fill. Perhatikan bahwa Button kontrol diperluas untuk mengisi selnya.
Pilih salah satu kontrol lainnya Button . Ubah nilai propertinya Anchor menjadi Right. Perhatikan bahwa itu dipindahkan sehingga batas kanannya berada di dekat batas kanan sel. Jarak antara batas adalah jumlah Button properti kontrol Margin dan properti panel Padding .
Ubah nilai Button properti kontrol Anchor menjadi Right dan Left. Perhatikan bahwa kontrol berukuran ke lebar sel, dengan nilai dan Padding diperhitungkanMargin.
Ulangi langkah 2 dan 3 dengan Top gaya dan Bottom .

Mengatur Properti Baris dan Kolom

Anda dapat mengatur properti baris dan kolom individual dengan menggunakan RowStyles koleksi dan ColumnStyles .

Untuk mengatur properti baris dan kolom

TableLayoutPanel Pilih kontrol di Formulir Windows Designer.
Di jendela Properti, buka ColumnStyles koleksi dengan mengklik tombol elipsis () di samping entri Kolom.
Pilih kolom pertama dan ubah nilai propertinya SizeType menjadi AutoSize. Klik OK untuk menerima perubahan. Perhatikan bahwa lebar kolom pertama dikurangi agar pas dengan Button kontrol. Perhatikan juga bahwa lebar kolom tidak dapat diubah ukurannya.
Di jendela Properti , buka ColumnStyles koleksi dan pilih kolom pertama. Ubah nilai propertinya SizeType menjadi Percent. Klik OK untuk menerima perubahan. Mengubah ukuran kontrol menjadi TableLayoutPanel lebar yang lebih besar dan perhatikan bahwa lebar kolom pertama diperluas. Mengubah ukuran TableLayoutPanel kontrol ke lebar yang lebih kecil dan perhatikan bahwa tombol di kolom pertama berukuran pas dengan sel. Perhatikan juga bahwa lebar kolom dapat diubah ukurannya.
Di jendela Properti , buka ColumnStyles koleksi dan pilih semua kolom yang tercantum. Atur nilai setiap SizeType properti ke Percent. Klik OK untuk menerima perubahan. Ulangi dengan RowStyles koleksi.
Ambil salah satu gagang pengukur ukuran sudut dan mengubah ukuran lebar dan tinggi TableLayoutPanel kontrol. Perhatikan bahwa baris dan kolom diubah ukurannya TableLayoutPanel saat ukuran kontrol berubah. Perhatikan juga bahwa baris dan kolom dapat diubah ukurannya dengan gagang ukuran horizontal dan vertikal.

Mencakup Baris dan Kolom dengan Kontrol

TableLayoutPanel Kontrol menambahkan beberapa properti baru ke kontrol pada waktu desain. Dua properti ini adalah RowSpan dan ColumnSpan. Anda dapat menggunakan properti ini untuk membuat kontrol mencakup lebih dari satu baris atau kolom.

Untuk menjangkau baris dan kolom dengan kontrol

Button Pilih kontrol di baris pertama dan kolom pertama.
Di jendela Properti, ubah nilai properti menjadi ColumnSpan2. Perhatikan bahwa Button kontrol mengisi kolom pertama dan kolom kedua. Perhatikan juga daripada baris tambahan telah ditambahkan untuk mengakomodasi perubahan ini.
Ulangi langkah 2 untuk RowSpan properti .

Menyisipkan Kontrol dengan Mengklik Ganda Kontrol di Kotak Alat

Anda dapat mengisi kontrol dengan TableLayoutPanel mengklik dua kali kontrol di Kotak Alat.

Untuk menyisipkan kontrol dengan mengklik ganda di Kotak Alat

TableLayoutPanel Seret kontrol dari Kotak Alat ke formulir Anda.
Button Klik dua kali ikon kontrol di Kotak Alat. Perhatikan bahwa kontrol tombol baru muncul di TableLayoutPanel sel pertama kontrol.
Klik dua kali beberapa kontrol lainnya di Kotak Alat. Perhatikan bahwa kontrol baru muncul secara berturut-turut di TableLayoutPanel sel kontrol yang tidak ditempati. Perhatikan juga bahwa TableLayoutPanel kontrol diperluas untuk mengakomodasi kontrol baru jika tidak ada sel yang terbuka yang tersedia.

Penanganan Luapan Otomatis

Saat Anda menyisipkan kontrol ke TableLayoutPanel dalam kontrol, Anda mungkin kehabisan sel kosong untuk kontrol baru Anda. TableLayoutPanel Kontrol menangani situasi ini secara otomatis dengan meningkatkan jumlah sel.

Untuk mengamati penanganan otomatis luapan

Jika masih ada sel kosong dalam TableLayoutPanel kontrol, lanjutkan menyisipkan kontrol baru Button hingga TableLayoutPanel kontrol penuh.
TableLayoutPanel Setelah kontrol penuh, klik Button dua kali ikon di Kotak Alat untuk menyisipkan kontrol lainButton. Perhatikan bahwa TableLayoutPanel kontrol membuat sel baru untuk mengakomodasi kontrol baru. Sisipkan beberapa kontrol lagi dan amati perilaku mengubah ukuran.
Ubah nilai properti GrowStyle kontrol TableLayoutPanel menjadi FixedSize. Button Klik dua kali ikon di Kotak Alat untuk menyisipkan Button kontrol hingga TableLayoutPanel kontrol penuh. Klik dua Button kali ikon di Kotak Alat lagi. Perhatikan bahwa Anda menerima pesan kesalahan dari Formulir Windows Designer yang memberi tahu Anda bahwa baris dan kolom tambahan tidak dapat dibuat.

Menyisipkan Kontrol dengan Menggambar Kerangkanya

Anda dapat menyisipkan kontrol ke dalam TableLayoutPanel kontrol dan menentukan ukurannya dengan menggambar kerangkanya dalam sel.

Untuk menyisipkan Kontrol dengan menggambar kerangkanya

TableLayoutPanel Seret kontrol dari Kotak Alat ke formulir Anda.
Di Kotak Alat, klik Button ikon kontrol. Jangan seret ke formulir.
Gerakkan penunjuk mouse ke TableLayoutPanel atas kontrol. Perhatikan bahwa penunjuk berubah menjadi crosshair dengan Button ikon kontrol terpasang.
Klik dan tahan tombol mouse.
Seret penunjuk mouse untuk menggambar kerangka Button kontrol. Ketika Anda puas dengan ukurannya, lepaskan tombol mouse. Perhatikan bahwa Button kontrol dibuat di sel tempat Anda menggambar kerangka kontrol.

Beberapa Kontrol Dalam Sel Tidak Diizinkan

TableLayoutPanel Kontrol hanya dapat berisi satu kontrol anak per sel.

Untuk menunjukkan bahwa beberapa kontrol dalam sel tidak diizinkan

Button Seret kontrol dari Kotak Alat ke TableLayoutPanel kontrol dan letakkan ke salah satu sel yang ditempati. Perhatikan bahwa TableLayoutPanel kontrol tidak memungkinkan Anda untuk menghilangkan Button kontrol ke dalam sel yang ditempati.

Kontrol Pertukaran

Kontrol ini TableLayoutPanel memungkinkan Anda menukar kontrol yang menempati dua sel yang berbeda.

Untuk menukar kontrol

Seret salah Button satu kontrol dari sel yang ditempati dan jatuhkan ke sel lain yang ditempati. Perhatikan bahwa dua kontrol dipindahkan dari satu sel ke sel lainnya.

Langkah berikutnya

Anda dapat mencapai tata letak yang kompleks menggunakan kombinasi panel tata letak dan kontrol. Saran untuk eksplorasi lebih lanjut meliputi:

Coba mengubah ukuran salah Button satu kontrol ke ukuran yang lebih besar dan catat efek pada tata letak.
Tempelkan pilihan beberapa kontrol ke TableLayoutPanel dalam kontrol dan perhatikan bagaimana kontrol disisipkan.
Panel tata letak dapat berisi panel tata letak lainnya. Bereksperimenlah dengan menghilangkan TableLayoutPanel kontrol ke kontrol yang ada.
Dock TableLayoutPanel kontrol ke formulir induk. Mengubah ukuran formulir dan mencatat efek pada tata letak.

Bagikan melalui