Posisi dan tata letak kontrol (Formulir Windows .NET)

Penempatan kontrol dalam Formulir Windows ditentukan tidak hanya oleh kontrol, tetapi juga oleh induk kontrol. Artikel ini menjelaskan berbagai pengaturan yang disediakan oleh kontrol dan berbagai jenis kontainer induk yang memengaruhi tata letak.

Penting

Dokumentasi Panduan Desktop untuk .NET 7 dan .NET 6 sedang dibangun.

Posisi dan ukuran tetap

Posisi kontrol yang muncul pada induk ditentukan oleh nilai Location properti relatif terhadap kiri atas permukaan induk. Koordinat posisi kiri atas di induk adalah (x0,y0). Ukuran kontrol ditentukan oleh Size properti dan mewakili lebar dan tinggi kontrol.

Saat kontrol ditambahkan ke induk yang memberlakukan penempatan otomatis, posisi dan ukuran kontrol diubah. Dalam hal ini, posisi dan ukuran kontrol mungkin tidak disesuaikan secara manual, tergantung pada jenis induknya.

Properti MaximumSize dan MinimumSize membantu mengatur ruang minimum dan maksimum yang dapat digunakan kontrol.

Margin dan Padding

Ada dua properti kontrol yang membantu penempatan kontrol yang tepat: Margin dan Padding.

Properti Margin menentukan ruang di sekitar kontrol yang menjaga kontrol lain jarak yang ditentukan dari batas kontrol.

Properti Padding menentukan ruang di interior kontrol yang menjaga konten kontrol (misalnya, nilai propertinya Text ) jarak yang ditentukan dari batas kontrol.

Gambar berikut menunjukkan Margin properti dan Padding pada kontrol.

Visual Studio Designer akan menghormati properti ini saat Anda memosisikan dan mengubah ukuran kontrol. Snapline muncul sebagai panduan untuk membantu Anda tetap berada di luar margin kontrol yang ditentukan. Misalnya, Visual Studio menampilkan snapline saat Anda menyeret kontrol di samping kontrol lain:

Penempatan dan ukuran otomatis

Kontrol dapat ditempatkan secara otomatis dalam induknya. Beberapa penempatan paksa kontainer induk sementara yang lain menghormati pengaturan kontrol yang memandu penempatan. Ada dua properti pada kontrol yang membantu penempatan dan ukuran otomatis dalam induk: Dock dan Anchor.

Urutan gambar dapat memengaruhi penempatan otomatis. Urutan di mana kontrol digambar ditentukan oleh indeks kontrol dalam koleksi induk Controls . Indeks ini dikenal sebagai Z-order. Setiap kontrol digambar dalam urutan terbalik yang muncul dalam koleksi. Artinya, koleksi ini adalah koleksi pertama yang digambar terakhir dan terakhir di gambar pertama.

Properti MinimumSize dan MaximumSize membantu mengatur ruang minimum dan maksimum yang dapat digunakan kontrol.

Tambatkan

Properti Dock mengatur batas kontrol mana yang selaras dengan sisi induk yang sesuai, dan bagaimana kontrol diubah ukurannya dalam induk.

Ketika kontrol ditampung, kontainer menentukan ruang yang harus ditempati dan mengubah ukuran dan menempatkan kontrol. Lebar dan tinggi kontrol masih dihormati berdasarkan gaya docking. Misalnya, jika kontrol ditampung ke bagian atas, Height kontrol dihormati tetapi Width disesuaikan secara otomatis. Jika kontrol ditampar ke kiri, Width kontrol dihormati tetapi Height disesuaikan secara otomatis.

Kontrol Location tidak dapat diatur secara manual karena menambatkan kontrol secara otomatis mengontrol posisinya.

Kontrol Z-order memang mempengaruhi docking. Karena kontrol yang ditampung ditata, kontrol menggunakan ruang apa yang tersedia untuk mereka. Misalnya, jika kontrol digambar terlebih dahulu dan ditampar ke bagian atas, kontrol akan mengambil seluruh lebar kontainer. Jika kontrol berikutnya ditampung ke kiri, kontrol tersebut memiliki lebih sedikit ruang vertikal yang tersedia untuk kontrol tersebut.

Jika kontrol Z-order dibalik, kontrol yang ditampung ke kiri sekarang memiliki lebih banyak ruang awal yang tersedia. Kontrol menggunakan seluruh tinggi kontainer. Kontrol yang ditampung ke bagian atas memiliki lebih sedikit ruang horizontal yang tersedia untuknya.

Saat kontainer tumbuh dan menyusut, kontrol yang ditautkan ke kontainer diposisikan ulang dan diubah ukurannya untuk mempertahankan posisi dan ukuran yang berlaku.

Jika beberapa kontrol ditampung ke sisi kontainer yang sama, kontrol tersebut ditumpuk sesuai dengan Z-order.

Jangkar

Penahanan kontrol memungkinkan Anda mengikat kontrol ke satu atau beberapa sisi kontainer induk. Saat kontainer berubah ukuran, kontrol anak apa pun akan mempertahankan jaraknya ke sisi berlabuh.

Kontrol dapat berlabuh ke satu atau beberapa sisi, tanpa batasan. Jangkar diatur dengan Anchor properti .

Ukuran otomatis

Properti AutoSize memungkinkan kontrol untuk mengubah ukurannya, jika perlu, agar sesuai dengan ukuran yang ditentukan oleh PreferredSize properti. Anda menyesuaikan perilaku ukuran untuk kontrol tertentu dengan mengatur AutoSizeMode properti .

Hanya beberapa kontrol yang mendukung AutoSize properti . Selain itu, beberapa kontrol yang mendukung AutoSize properti juga mendukung AutoSizeMode properti .

Perilaku selalu benar	Deskripsi
Ukuran otomatis adalah fitur run-time.	Ini berarti tidak pernah tumbuh atau menyusutkan kontrol dan kemudian tidak memiliki efek lebih lanjut.
Jika kontrol mengubah ukuran, nilai propertinya Location selalu tetap konstan.	Ketika konten kontrol menyebabkannya tumbuh, kontrol tumbuh ke kanan dan ke bawah. Kontrol tidak tumbuh di sebelah kiri.
Properti Dock dan Anchor dihormati ketika AutoSize adalah true.	Nilai properti kontrol Location disesuaikan dengan nilai yang benar. Label Kontrol adalah pengecualian untuk aturan ini. Saat Anda mengatur nilai properti kontrol AutoSize yang ditampung Label ke true, Label kontrol tidak akan meregangkan.
Kontrol MaximumSize dan MinimumSize properti selalu dihormati, terlepas dari nilai propertinya AutoSize .	Properti MaximumSize dan MinimumSize tidak dipengaruhi oleh AutoSize properti .
Tidak ada ukuran minimum yang ditetapkan secara default.	Ini berarti bahwa jika kontrol diatur untuk menyusut di bawah AutoSize dan tidak memiliki konten, nilai propertinya Size adalah (0x,0y). Dalam hal ini, kontrol Anda akan menyusut ke titik, dan tidak akan mudah terlihat.
Jika kontrol tidak menerapkan GetPreferredSize metode , GetPreferredSize metode mengembalikan nilai terakhir yang ditetapkan ke Size properti .	Ini berarti bahwa pengaturan AutoSize ke true tidak akan berpengaruh.
Kontrol dalam TableLayoutPanel sel selalu menyusut agar pas di sel hingga MinimumSize tercapai.	Ukuran ini diberlakukan sebagai ukuran maksimum. Ini bukan kasus ketika sel adalah bagian AutoSize dari baris atau kolom.

Properti AutoSizeMode

Properti AutoSizeMode memberikan kontrol yang lebih halus atas perilaku default AutoSize . Properti AutoSizeMode menentukan bagaimana kontrol mengukur sendiri ke kontennya. Konten, misalnya, bisa menjadi teks untuk Button kontrol atau kontrol anak untuk kontainer.

Daftar berikut ini memperlihatkan AutoSizeMode nilai dan perilakunya.

• AutoSizeMode.GrowAndShrink

  Kontrol tumbuh atau menyusut untuk mencakup isinya.

  Nilai MinimumSize dan MaximumSize dihormati, tetapi nilai Size properti saat ini diabaikan.

  Ini adalah perilaku yang sama dengan kontrol dengan AutoSize properti dan tanpa AutoSizeMode properti.

• AutoSizeMode.GrowOnly

  Kontrol tumbuh sebanyak yang diperlukan untuk mencakup isinya, tetapi tidak akan menyusut lebih kecil dari nilai yang ditentukan oleh propertinya Size .

  Ini adalah nilai default untuk AutoSizeMode.

Kontrol yang mendukung properti AutoSize

Tabel berikut ini menjelaskan tingkat dukungan ukuran otomatis menurut kontrol:

Kontrol	AutoSize Didukung	AutoSizeMode Didukung
Button	✔️	✔️
CheckedListBox	✔️	✔️
FlowLayoutPanel	✔️	✔️
Form	✔️	✔️
GroupBox	✔️	✔️
Panel	✔️	✔️
TableLayoutPanel	✔️	✔️
CheckBox	✔️	❌
DomainUpDown	✔️	❌
Label	✔️	❌
LinkLabel	✔️	❌
MaskedTextBox	✔️	❌
NumericUpDown	✔️	❌
RadioButton	✔️	❌
TextBox	✔️	❌
TrackBar	✔️	❌
CheckedListBox	❌	❌
ComboBox	❌	❌
DataGridView	❌	❌
DateTimePicker	❌	❌
ListBox	❌	❌
ListView	❌	❌
MaskedTextBox	❌	❌
MonthCalendar	❌	❌
ProgressBar	❌	❌
PropertyGrid	❌	❌
RichTextBox	❌	❌
SplitContainer	❌	❌
TabControl	❌	❌
TabPage	❌	❌
TreeView	❌	❌
WebBrowser	❌	❌
ScrollBar	❌	❌

Ukuran Otomatis di lingkungan desain

Tabel berikut ini menjelaskan perilaku ukuran kontrol pada waktu desain, berdasarkan nilai properti dannya AutoSizeAutoSizeMode .

Ambil alih SelectionRules properti untuk menentukan apakah kontrol tertentu berada dalam status yang dapat diubah ukuran pengguna. Dalam tabel berikut, "tidak dapat mengubah ukuran" berarti Moveable hanya, "dapat mengubah ukuran" berarti AllSizeable dan Moveable.

AutoSize Pengaturan	AutoSizeMode Pengaturan	Perilaku
true	Properti tidak tersedia.	Pengguna tidak dapat mengubah ukuran kontrol pada waktu desain, kecuali untuk kontrol berikut: - TextBox - MaskedTextBox - RichTextBox - TrackBar
true	GrowAndShrink	Pengguna tidak dapat mengubah ukuran kontrol pada waktu desain.
true	GrowOnly	Pengguna dapat mengubah ukuran kontrol pada waktu desain. Size Ketika properti diatur, pengguna hanya dapat meningkatkan ukuran kontrol.
false atau AutoSize tersembunyi	Tidak dapat diterapkan.	Pengguna dapat mengubah ukuran kontrol pada waktu desain.

Catatan

Untuk memaksimalkan produktivitas, Formulir Windows Designer di Visual Studio membayangi AutoSize properti untuk kelas tersebutForm. Pada waktu desain, formulir berperilaku seolah-olah AutoSize properti diatur ke false, terlepas dari pengaturan aktualnya. Pada runtime, tidak ada akomodasi khusus yang dibuat, dan AutoSize properti diterapkan seperti yang ditentukan oleh pengaturan properti.

Kontainer: Formulir

Form adalah objek utama Formulir Windows. Aplikasi Formulir Windows biasanya akan memiliki formulir yang ditampilkan setiap saat. Formulir berisi kontrol dan menghormati Location properti dan Size kontrol untuk penempatan manual. Formulir juga merespons properti Dock untuk penempatan otomatis.

Sebagian besar waktu formulir akan memiliki genggaman di tepi yang memungkinkan pengguna mengubah ukuran formulir. Properti Anchor kontrol akan membiarkan kontrol tumbuh dan menyusut saat formulir diubah ukurannya.

Kontainer: Panel

Panel Kontrolnya mirip dengan formulir karena hanya mengelompokkan kontrol bersama-sama. Ini mendukung gaya penempatan manual dan otomatis yang sama dengan yang dilakukan formulir. Untuk informasi selengkapnya, lihat bagian Kontainer: Formulir .

Panel berpadu dengan mulus dengan induk, dan itu memotong area kontrol apa pun yang jatuh dari batas panel. Jika kontrol berada di luar batas panel dan AutoScroll diatur ke true, bilah gulir muncul dan pengguna dapat menggulir panel.

Tidak seperti kontrol kotak grup, panel tidak memiliki keterangan dan batas.

Gambar di atas memiliki panel dengan properti yang BorderStyle diatur untuk menunjukkan batas panel.

Kontainer: Kotak grup

Kontrol GroupBox menyediakan pengelompokan yang dapat diidentifikasi untuk kontrol lain. Biasanya, Anda menggunakan kotak grup untuk membavisi formulir berdasarkan fungsi. Misalnya, Anda mungkin memiliki formulir yang mewakili informasi pribadi dan bidang yang terkait dengan alamat akan dikelompokkan bersama-sama. Pada waktu desain, mudah untuk memindahkan kotak grup bersama dengan kontrol yang terkandung.

Kotak grup mendukung gaya penempatan manual dan otomatis yang sama dengan yang dilakukan formulir. Untuk informasi selengkapnya, lihat bagian Kontainer: Formulir . Kotak grup juga memotong bagian mana pun dari kontrol yang berada di luar batas panel.

Tidak seperti kontrol panel, kotak grup tidak memiliki kemampuan untuk menggulir konten dan menampilkan bilah gulir.

Kontainer: Tata Letak Alur

Kontrol FlowLayoutPanel mengatur isinya dalam arah aliran horizontal atau vertikal. Anda dapat membungkus konten kontrol dari satu baris ke baris berikutnya, atau dari satu kolom ke kolom berikutnya. Secara bergantian, Anda dapat mengklip alih-alih membungkus isinya.

Anda dapat menentukan arah alur dengan mengatur nilai FlowDirection properti . FlowLayoutPanel Kontrol membalikkan arah alurnya dengan benar dalam tata letak Kanan-ke-Kiri (RTL). Anda juga dapat menentukan apakah FlowLayoutPanel konten kontrol dibungkus atau diklip dengan mengatur nilai WrapContents properti.

FlowLayoutPanel Kontrol secara otomatis mengukur ke kontennya saat Anda mengatur properti ke AutoSizetrue. Ini juga menyediakan FlowBreak properti untuk kontrol turunannya. Mengatur nilai FlowBreak properti untuk true menyebabkan FlowLayoutPanel kontrol berhenti meletakkan kontrol ke arah alur saat ini dan membungkus ke baris atau kolom berikutnya.

Gambar di atas memiliki dua FlowLayoutPanel kontrol dengan properti yang BorderStyle diatur untuk menunjukkan batas kontrol.

Kontainer: Tata letak tabel

Kontrol TableLayoutPanel mengatur kontennya dalam kisi. Karena tata letak dilakukan pada waktu desain dan waktu proses, tata letak dapat berubah secara dinamis saat lingkungan aplikasi berubah. Ini memberi kontrol di panel kemampuan untuk mengubah ukuran secara proporsional, sehingga mereka dapat merespons perubahan seperti pengubahan ukuran kontrol induk atau perubahan panjang teks karena pelokalan.

Kontrol Formulir Windows apa pun dapat menjadi turunan dari TableLayoutPanel kontrol, termasuk instans lain dari TableLayoutPanel. Ini memungkinkan Anda membangun tata letak canggih yang beradaptasi dengan perubahan pada waktu proses.

Anda juga dapat mengontrol arah ekspansi (horizontal atau vertikal) setelah TableLayoutPanel kontrol penuh dengan kontrol turunan. Secara default, TableLayoutPanel kontrol meluas ke bawah dengan menambahkan baris.

Anda dapat mengontrol ukuran dan gaya baris dan kolom dengan menggunakan RowStyles properti dan ColumnStyles . Anda dapat mengatur properti baris atau kolom satu per satu.

Kontrol TableLayoutPanel menambahkan properti berikut ke kontrol turunannya: Cell, , ColumnRow, ColumnSpan, dan RowSpan.

Gambar di atas memiliki tabel dengan properti yang CellBorderStyle diatur untuk menunjukkan batas setiap sel.

Kontainer: Pisahkan kontainer

Kontrol Formulir Windows SplitContainer dapat dianggap sebagai kontrol komposit; dua panel dipisahkan oleh bilah bergerak. Ketika penunjuk mouse berada di atas bilah, penunjuk berubah bentuk untuk menunjukkan bahwa bilah dapat bergerak.

SplitContainer Dengan kontrol, Anda dapat membuat antarmuka pengguna yang kompleks; sering kali, pilihan dalam satu panel menentukan objek apa yang ditampilkan di panel lain. Pengaturan ini efektif untuk menampilkan dan menelusuri informasi. Memiliki dua panel memungkinkan Anda menggabungkan informasi di area, dan bilah, atau "pemisah", memudahkan pengguna untuk mengubah ukuran panel.

Gambar di atas memiliki kontainer terpisah untuk membuat panel kiri dan kanan. Panel kanan berisi kontainer terpisah kedua dengan diatur Orientation ke Vertical. Properti BorderStyle diatur untuk menunjukkan batas setiap panel.

Kontainer: Kontrol tab

Menampilkan TabControl beberapa tab, seperti pembagi dalam buku catatan atau label dalam sekumpulan folder dalam kabinet pengarsipan. Tab dapat berisi gambar dan kontrol lainnya. Gunakan kontrol tab untuk menghasilkan jenis kotak dialog beberapa halaman yang muncul di banyak tempat di sistem operasi Windows, seperti Panel Kontrol dan Properti Tampilan. Selain itu, TabControl dapat digunakan untuk membuat halaman properti, yang digunakan untuk mengatur sekelompok properti terkait.

Properti terpenting dari TabControl adalah TabPages, yang berisi tab individual. Setiap tab individual adalah TabPage objek.