Panduan: Mengatur Kontrol pada Formulir Windows Menggunakan FlowLayoutPanel

Artikel
06/02/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.

mengatur TableLayoutPanel kontennya dalam kisi, menyediakan fungsionalitas yang mirip dengan elemen tabel> HTML<. Sel-selnya disusun dalam baris dan kolom, dan ini dapat memiliki ukuran yang berbeda. Untuk informasi selengkapnya, lihat Panduan: Mengatur Kontrol pada Formulir Windows Menggunakan TableLayoutPanel.

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. Tugas yang diilustrasikan dalam panduan ini meliputi:

Membuat proyek Formulir Windows
Mengatur Kontrol Secara Horizontal dan Vertikal
Mengubah Arah Alur
Menyisipkan Hentian Alur
Mengatur Kontrol Menggunakan Padding dan Margin
Menyisipkan Kontrol dengan Mengklik Ganda Kontrol di Kotak Alat
Menyisipkan Kontrol dengan Menggambar Kerangkanya
Menyisipkan Kontrol Menggunakan Caret
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

Di Visual Studio, buat proyek aplikasi berbasis Windows yang disebut "FlowLayoutPanelExample" (File>New>Project>Visual C# atau Visual Basic>Classic Desktop> Formulir Windows Application).
Pilih formulir di Desainer Formulir.

Mengatur Kontrol Secara Horizontal dan Vertikal

Kontrol ini FlowLayoutPanel memungkinkan Anda menempatkan kontrol di sepanjang baris atau kolom tanpa mengharuskan Anda menentukan dengan tepat posisi setiap kontrol individu.

FlowLayoutPanel Kontrol dapat mengubah ukuran atau me-reflow kontrol turunannya saat dimensi formulir induk berubah.

Untuk mengatur kontrol secara horizontal dan vertikal menggunakan FlowLayoutPanel

FlowLayoutPanel Seret kontrol dari Kotak Alat ke formulir Anda.
Button Seret kontrol dari Kotak Alat ke FlowLayoutPaneldalam . Perhatikan bahwa secara otomatis dipindahkan ke sudut kiri atas FlowLayoutPanel kontrol.
Seret kontrol lain Button dari Kotak Alat ke FlowLayoutPaneldalam . Perhatikan bahwa Button kontrol secara otomatis dipindahkan ke posisi di samping kontrol pertama Button . Jika Anda FlowLayoutPanel terlalu sempit agar pas dengan dua kontrol pada baris yang sama, kontrol baru Button secara otomatis dipindahkan ke baris berikutnya.
Seret beberapa kontrol lainnya Button dari Kotak Alat ke FlowLayoutPaneldalam . Lanjutkan menempatkan Button kontrol hingga satu membungkus ke baris berikutnya.
Ubah nilai properti WrapContents kontrol FlowLayoutPanel menjadi false. Perhatikan bahwa kontrol anak tidak lagi mengalir ke baris berikutnya. Sebaliknya, mereka dipindahkan ke baris pertama dan diklip.
Ubah nilai properti WrapContents kontrol FlowLayoutPanel menjadi true. Perhatikan bahwa kontrol anak kembali membungkus ke baris berikutnya.
Kurangi lebar FlowLayoutPanel kontrol hingga semua Button kontrol dipindahkan ke kolom pertama.
Tingkatkan lebar FlowLayoutPanel kontrol hingga semua Button kontrol dipindahkan ke baris pertama. Anda mungkin perlu mengubah ukuran formulir Anda untuk mengakomodasi lebar yang lebih besar.

Mengubah Arah Alur

Properti FlowDirection memungkinkan Anda untuk mengubah arah di mana kontrol diatur. Anda dapat mengatur kontrol anak dari kiri ke kanan, dari kanan ke kiri, dari atas ke bawah, atau dari bawah ke atas.

Untuk mengubah arah alur di FlowLayoutPanel

Ubah nilai properti FlowDirection kontrol FlowLayoutPanel menjadi TopDown. Perhatikan bahwa kontrol anak disusun ulang menjadi satu atau beberapa kolom, tergantung pada tinggi kontrol.
Mengubah ukuran FlowLayoutPanel sehingga tingginya lebih pendek dari kolom Button kontrol. Perhatikan bahwa FlowLayoutPanel mengatur ulang kontrol anak untuk mengalir ke kolom berikutnya. Lanjutkan mengurangi tinggi dan perhatikan bahwa kontrol anak mengalir ke kolom berturut-turut. Ubah nilai properti FlowDirection kontrol FlowLayoutPanel menjadi RightToLeft. Perhatikan bahwa posisi kontrol anak dibalik. Amati tata letak saat Anda mengubah nilai properti menjadi FlowDirection BottomUp.

Menyisipkan Hentian Alur

Kontrol FlowLayoutPanel menyediakan properti FlowBreak ke kontrol turunannya. Mengatur nilai properti FlowBreak untuk true menyebabkan FlowLayoutPanel kontrol berhenti meletakkan kontrol ke arah alur saat ini dan membungkus ke baris atau kolom berikutnya.

Untuk menyisipkan hentian alur

Ubah nilai properti FlowDirection kontrol FlowLayoutPanel menjadi TopDown.
Pilih salah Button satu kontrol di tengah kolom paling kiri.
Atur nilai Button properti FlowBreak kontrol ke true. Perhatikan bahwa kolom rusak dan kontrol mengikuti alur kontrol yang dipilih Button ke kolom berikutnya. Atur nilai Button properti FlowBreak kontrol ke false untuk kembali ke perilaku asli.

Kontrol Pemosisian Menggunakan Docking dan Anchoring

Perilaku docking dan penahanan kontrol anak berbeda dari perilaku di kontrol kontainer lainnya. Docking dan anchoring relatif terhadap kontrol terbesar dalam arah aliran.

Untuk memosisikan kontrol menggunakan docking dan anchoring

Tingkatkan ukuran FlowLayoutPanel hingga Button kontrol disusun dalam kolom.
Pilih kontrol atas Button . Tingkatkan lebarnya sehingga sekitar dua kali lebih lebar dari kontrol lainnya Button .
Pilih kontrol kedua Button . Ubah nilai propertinya Anchor menjadi Right. Perhatikan bahwa batas tersebut dipindahkan sehingga batas kanannya diratakan dengan batas kanan kontrol pertama Button .
Ubah nilai propertinya Anchor menjadi Right dan Left. Perhatikan bahwa ukurannya sama dengan lebar yang sama dengan kontrol pertama Button .
Pilih kontrol ketiga Button . Ubah nilai propertinya Dock menjadi Fill. Perhatikan bahwa ukurannya sama dengan lebar yang sama dengan kontrol pertama Button .

Mengatur Kontrol Menggunakan Padding dan Margin

Anda juga dapat mengatur kontrol dalam kontrol Anda FlowLayoutPanel dengan mengubah Padding properti dan Margin .

Properti Padding memungkinkan Anda mengontrol penempatan kontrol dalam FlowLayoutPanel sel kontrol. Ini menentukan penspasian antara kontrol turunan dan FlowLayoutPanel batas kontrol.

Properti Margin ini memungkinkan Anda mengontrol penspasian antar kontrol.

Untuk mengatur kontrol menggunakan properti Padding dan Margin

Ubah nilai properti Dock kontrol FlowLayoutPanel menjadi Fill. Jika formulir Anda cukup besar, Button kontrol akan dipindahkan ke kolom FlowLayoutPanel pertama kontrol.
Ubah nilai FlowLayoutPanel properti kontrol Padding dengan memperluas Padding entri di jendela Properti dan mengatur All properti menjadi 20. Untuk informasi selengkapnya, lihat Panduan: Meletakkan Kontrol Formulir Windows dengan Padding, Margin, dan Properti Ukuran Otomatis. Perhatikan bahwa kontrol anak dipindahkan ke tengah FlowLayoutPanel kontrol. Nilai yang ditingkatkan Padding untuk properti mendorong kontrol turunan menjauh dari FlowLayoutPanel batas kontrol.
Pilih semua Button kontrol dalam FlowLayoutPanel dan atur nilai Margin properti ke 20. Perhatikan bahwa penspasian antara Button kontrol meningkat, sehingga dipindahkan lebih jauh. Anda mungkin perlu mengubah ukuran FlowLayoutPanel kontrol agar lebih besar untuk melihat semua kontrol anak.

Menyisipkan Kontrol dengan Mengklik Ganda Kontrol di Kotak Alat

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

Untuk menyisipkan kontrol dengan mengklik ganda di Kotak Alat

Button Klik dua kali ikon kontrol di Kotak Alat. Perhatikan bahwa kontrol baru Button muncul di FlowLayoutPanel kontrol.
Klik dua kali beberapa kontrol lainnya di Kotak Alat. Perhatikan bahwa kontrol baru muncul secara berturut-turut dalam FlowLayoutPanel kontrol.

Menyisipkan Kontrol dengan Menggambar Kerangkanya

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

Untuk menyisipkan Kontrol dengan menggambar kerangkanya

Di Kotak Alat, klik Button ikon kontrol. Jangan seret ke formulir.
Gerakkan penunjuk mouse ke FlowLayoutPanel 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 lokasi kontrol yang FlowLayoutPanel terbuka berikutnya.

Menyisipkan Kontrol Menggunakan Bilah Penyisipan

Anda dapat menyisipkan kontrol pada posisi tertentu dalam FlowLayoutPanel kontrol. Saat Anda menyeret kontrol ke FlowLayoutPanel area klien kontrol, bilah penyisipan tampaknya menunjukkan di mana kontrol akan disisipkan.

Untuk menyisipkan kontrol menggunakan tanda sisipan

Button Seret kontrol dari Kotak Alat ke FlowLayoutPanel kontrol dan arahkan ke spasi di antara dua Button kontrol. Perhatikan bahwa bilah penyisipan digambar, menunjukkan di mana Button akan ditempatkan saat dijatuhkan ke FlowLayoutPanel kontrol. Sebelum Anda menjatuhkan kontrol baru Button ke FlowLayoutPanel kontrol, gerakkan penunjuk mouse untuk mengamati cara bilah penyisipan bergerak.
Jatuhkan kontrol baru Button ke FlowLayoutPanel kontrol. Perhatikan bahwa kontrol baru Button tidak selaras dengan yang lain, karena propertinya Margin memiliki nilai yang berbeda.

Menetapkan Ulang Kontrol yang Ada ke Induk Yang Berbeda

Anda dapat menetapkan kontrol yang ada di formulir Anda ke kontrol baru FlowLayoutPanel .

Untuk membandingkan kembali kontrol yang ada

Seret tiga Button kontrol dari Kotak Alat ke formulir. Tempatkanlah mereka di dekat satu sama lain, tetapi biarkan mereka tidak sejajar.
Di Kotak Alat, klik FlowLayoutPanel ikon kontrol. Jangan seret ke formulir.
Gerakkan penunjuk mouse mendekati tiga Button kontrol. Perhatikan bahwa penunjuk berubah menjadi crosshair dengan FlowLayoutPanel ikon kontrol terpasang.
Klik dan tahan tombol mouse.
Seret penunjuk mouse untuk menggambar kerangka FlowLayoutPanel kontrol. Gambar kerangka di sekitar tiga Button kontrol.
Rilis tombol mouse. Perhatikan bahwa ketiga Button kontrol disisipkan ke FlowLayoutPanel dalam kontrol.

Langkah berikutnya

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

Mengubah ukuran salah Button satu kontrol ke ukuran yang lebih besar dan catat efek pada tata letak.
Panel tata letak dapat berisi panel tata letak lainnya. Bereksperimenlah dengan menghilangkan TableLayoutPanel kontrol ke kontrol yang ada.
Dock FlowLayoutPanel kontrol ke formulir induk. Mengubah ukuran formulir dan mencatat efek pada tata letak.
Atur Visible properti salah satu kontrol ke false dan perhatikan bagaimana FlowLayoutPanel reflow sebagai respons.

Bagikan melalui