Posisi dan tata letak kontrol

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.

Posisi dan ukuran tetap

Posisi kontrol yang muncul pada permukaan induk ditentukan oleh nilai properti Location relatif terhadap bagian kiri atas permukaan induk. Koordinat posisi kiri atas kontrol di induk adalah (x0,y0). Ukuran kontrol ditentukan oleh properti Size 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 agar kontrol lain berada pada jarak yang ditentukan dari batas kontrol.

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

Gambar berikut menunjukkan properti Margin dan Padding pada kontrol.

Visual Studio Designer 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 komponen induknya. Beberapa kontainer induk memaksa penempatan sementara yang lain menghormati pengaturan kontrol yang mengarahkan 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.

Dok

Properti Dock menetapkan batas kontrol mana yang disejajarkan dengan sisi yang sesuai dari induknya, dan bagaimana kontrol tersebut diubah ukurannya di dalam induk tersebut.

Ketika kontrol ditambatkan, kontainer menentukan ruang yang harus ditempati dan menyesuaikan ukuran serta memosisikan kontrol. Lebar dan tinggi kontrol tetap dipertahankan sesuai gaya docking. Misalnya, jika kontrol diposisikan di 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 mengatur posisi.

Kontrol Z-order memang mempengaruhi docking. Saat kontrol yang ditempatkan ditata, mereka menggunakan seluruh ruang yang tersedia. Misalnya, jika kontrol digambar terlebih dahulu dan dipasangkan ke bagian atas, kontrol mengambil seluruh lebar wadah. Jika kontrol berikutnya ditampung ke kiri, kontrol tersebut memiliki ruang vertikal yang lebih sedikit tersedia.

Jika kontrol Z-order dibalik, kontrol yang diposisikan di sebelah 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 ditempatkan pada sisi kontainer yang sama, kontrol tersebut ditumpuk berdasarkan Z-order.

Jangkar

Penahanan kontrol memungkinkan Anda mengikat kontrol ke satu atau beberapa sisi kontainer induk. Saat kontainer berubah ukuran, kontrol anak yang terpasang mempertahankan jaraknya ke sisi terpasang.

Kontrol dapat dipasangkan ke satu atau beberapa sisi, tanpa ada 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 properti AutoSizeMode.

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

Perilaku yang selalu benar	Deskripsi
Ukuran otomatis adalah fitur waktu proses.	Ini berarti kontrol tidak pernah bertambah besar atau mengecil dan setelah itu tidak memiliki efek lebih lanjut.
Jika kontrol berubah ukuran, nilai properti Location selalu tetap konstan.	Ketika isi kontrol menyebabkan kontrol tersebut membesar, kontrol akan tumbuh ke kanan dan ke bawah. Kontrol tidak berkembang ke arah kiri.
Properti Dock dan Anchor dihormati dalam kondisi AutoSize adalah true.	Nilai properti Location kontrol disesuaikan dengan nilai yang benar. Label Kontrol adalah pengecualian untuk aturan ini. Ketika Anda menetapkan nilai properti Label kontrol AutoSize yang di-dock ke true, kontrol Label tidak akan memperluas.
Properti MaximumSize dan MinimumSize pada kontrol selalu diperhatikan, terlepas dari nilai properti AutoSize-nya.	Properti MaximumSize dan MinimumSize tidak terpengaruh oleh AutoSize.
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 menyusut ke titik, dan tidak akan terlihat dengan mudah.
Jika kontrol tidak menerapkan GetPreferredSize metode , GetPreferredSize metode mengembalikan nilai terakhir yang ditetapkan ke Size properti .	Ini berarti bahwa pengaturan AutoSize ke true tidak berpengaruh.
Kontrol dalam sel TableLayoutPanel akan selalu menyusut agar pas di sel tersebut sampai mencapai ukuran MinimumSize.	Ukuran ini diberlakukan sebagai ukuran maksimum. Ini tidak terjadi ketika sel adalah bagian dari baris atau kolom AutoSize.

Properti AutoSizeMode

Properti AutoSizeMode memberikan kontrol yang lebih rinci atas perilaku AutoSize default. Properti AutoSizeMode menentukan bagaimana elemen kontrol menyesuaikan ukurannya dengan kontennya. Isi, misalnya, bisa berupa teks untuk kontrol Button atau kontrol bawahan untuk sebuah wadah.

Daftar berikut ini memperlihatkan AutoSizeMode nilai dan perilakunya.

• AutoSizeMode.GrowAndShrink

  Kontrol mengembang atau menyusut untuk mencakup isinya.

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

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

• AutoSizeMode.GrowOnly

  Kontrol mengembang sebanyak yang diperlukan untuk mencakup kontennya, tetapi tidak akan menyusut lebih kecil dari nilai yang ditentukan oleh properti Size.

  Ini adalah nilai default untuk AutoSizeMode.

Kontrol yang mendukung properti AutoSize

Tabel berikut ini menjelaskan tingkat dukungan ukuran otomatis menurut kontrol:

Pengendalian	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	❌	❌

Fitur Ukuran Otomatis di lingkungan desain

Tabel berikut ini menjelaskan perilaku ukuran kontrol pada waktu desain, berdasarkan nilai properti AutoSize dan AutoSizeMode.

Ambil alih properti SelectionRules 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. Ketika properti Size diatur, pengguna hanya dapat meningkatkan ukuran kontrol.
false atau AutoSize tersembunyi	Tidak dapat diterapkan.	Pengguna dapat mengubah ukuran kontrol pada waktu desain.

Nota

Untuk memaksimalkan produktivitas, Windows Forms Designer di Visual Studio membayangi properti AutoSize untuk kelas Form. Pada waktu desain, formulir berperilaku seolah-olah properti AutoSize diatur ke false, terlepas dari pengaturan aktualnya. Pada saat runtime, tidak ada akomodasi khusus yang diberikan, dan properti AutoSize diterapkan sesuai dengan konfigurasi properti yang ditentukan.

Kontainer: Formulir

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

Sebagian besar waktu formulir memiliki pegangan di tepi yang memungkinkan pengguna mengubah ukuran formulir. Properti Anchor kontrol memungkinkan kontrol tumbuh dan menyusut saat ukuran formulir berubah.

Kontainer: Panel

Panel Kontrol ini mirip dengan formulir karena hanya mengelompokkan kontrol saja. Ini mendukung gaya penempatan manual dan otomatis yang sama seperti pada formulir. Untuk informasi selengkapnya, lihat bagian Kontainer: Formulir .

Panel berpadu tanpa masalah dengan induknya, dan panel tersebut memotong area kontrol apa pun yang berada di luar 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 BorderStyle yang diatur untuk menunjukkan batasan 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 seperti pada 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. Sebagai alternatif, Anda dapat memotong alih-alih membungkus isinya.

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

Kontrol FlowLayoutPanel secara otomatis menyesuaikan ukurannya dengan kontennya saat Anda mengatur properti AutoSize ke true. Ini juga menyediakan FlowBreak properti untuk kontrol turunannya. Mengatur nilai properti FlowBreak menjadi true menyebabkan kontrol FlowLayoutPanel berhenti menyusun kontrol dalam arah alur saat ini dan beralih ke baris atau kolom berikutnya.

Gambar di atas memiliki dua kontrol FlowLayoutPanel dengan properti 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 memberikan kontrol di panel kemampuan untuk mengubah ukuran secara proporsional, sehingga mereka dapat merespons perubahan seperti pengubahan ukuran kontrol induk atau perubahan panjang teks karena lokalisasi.

Kontrol Windows Forms apa pun dapat menjadi anak dari kontrol TableLayoutPanel, termasuk instans TableLayoutPanellainnya. 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 berisi tabel dengan properti CellBorderStyle yang telah diatur untuk menunjukkan batas setiap sel.

Kontainer: Pisahkan kontainer

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

Dengan kontrol SplitContainer, 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

TabControl menampilkan beberapa tab, seperti pembagi dalam buku catatan atau label dalam sekumpulan map 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 objek TabPage.