Bagikan melalui

Panduan: Menata letak kontrol dengan padding, margin, dan properti AutoSize

  • Artikel

Penempatan kontrol yang tepat pada formulir Anda adalah prioritas tinggi untuk banyak aplikasi. Perancang Formulir Windows di Visual Studio memberi Anda banyak alat tata letak untuk menyelesaikan ini. Tiga yang paling penting adalah Marginproperti , , Paddingdan AutoSize , yang ada di semua kontrol Formulir Windows.

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.

Ilustrasi berikut ini memperlihatkan Padding properti dan Margin pada kontrol.

Padding And Margin for Windows Forms Controls

Properti AutoSize memberi tahu kontrol untuk secara otomatis mengukur dirinya sendiri ke kontennya. Ini tidak akan mengubah ukuran dirinya menjadi lebih kecil dari nilai properti aslinya Size , dan itu akan memperhitungkan nilai propertinya Padding .

Prasyarat

Anda memerlukan Visual Studio untuk menyelesaikan panduan ini.

Membuat proyek

  1. Di Visual Studio, buat proyek Aplikasi Windows yang disebut LayoutExample.

  2. Pilih formulir di Formulir Windows Designer.

Mengatur margin untuk kontrol

Anda dapat mengatur jarak default antara kontrol Anda menggunakan Margin properti . Saat Anda memindahkan kontrol cukup dekat dengan kontrol lain, Anda akan melihat snapline yang memperlihatkan margin untuk dua kontrol tersebut. Kontrol yang Anda pindahkan juga akan diposisikan ke jarak yang ditentukan oleh margin.

Menyusun kontrol pada formulir Anda menggunakan properti Margin

  1. Seret dua Button kontrol dari Kotak Alat ke formulir Anda.

  2. Pilih salah Button satu kontrol dan pindahkan dekat dengan kontrol lainnya, hingga hampir menyentuh.

    Amati snapline yang muncul di antaranya. Jarak ini adalah jumlah dari nilai dua kontrol Margin . Kontrol yang Anda pindahkan melekat ke jarak ini. Untuk detailnya, lihat Panduan: Mengatur Kontrol di Formulir Windows Menggunakan Snapline.

  3. Margin Ubah properti salah satu kontrol dengan memperluas Margin entri di jendela Properti dan mengatur All properti menjadi 20.

  4. Pilih salah Button satu kontrol dan pindahkan dekat dengan kontrol lainnya.

    Snapline yang menentukan jumlah nilai margin lebih panjang dan kontrol diposisikan ke jarak yang lebih besar dari kontrol lainnya.

  5. Margin Ubah properti kontrol yang dipilih dengan memperluas Margin entri di jendela Properti dan mengatur Top properti menjadi 5.

  6. Pindahkan kontrol yang dipilih di bawah kontrol lain dan amati bahwa snapline lebih pendek. Pindahkan kontrol yang dipilih ke sebelah kiri kontrol lain dan amati bahwa snapline mempertahankan nilai yang diamati di langkah 4.

  7. Anda dapat mengatur masing-masing aspek Margin properti, , Left, TopRight, Bottom, ke nilai yang berbeda, atau Anda dapat mengatur semuanya ke nilai yang sama dengan All properti .

Mengatur padding untuk kontrol

Untuk mencapai tata letak yang tepat yang diperlukan untuk aplikasi Anda, kontrol Anda akan sering berisi kontrol anak. Saat Anda ingin menentukan kedekatan batas kontrol anak ke batas kontrol induk, gunakan properti kontrol Padding induk bersama dengan properti kontrol Margin turunan. Properti Padding ini juga digunakan untuk mengontrol kedekatan konten kontrol (misalnya, Button properti kontrol Text ) ke batasnya.

Mengatur kontrol pada formulir Anda menggunakan padding

  1. Button Seret kontrol dari Kotak Alat ke formulir Anda.

  2. Ubah nilai Button properti kontrol AutoSize menjadi true.

  3. Padding Ubah properti dengan memperluas Padding entri di jendela Properti dan mengatur All properti menjadi 5.

    Kontrol diperluas untuk memberikan ruang untuk padding baru.

  4. GroupBox Seret kontrol dari Kotak Alat ke formulir Anda. Button Seret kontrol dari Kotak Alat ke GroupBox kontrol. Posisikan Button kontrol sehingga memerah dengan sudut GroupBox kanan bawah kontrol.

    Amati snapline yang muncul saat Button kontrol mendekati batas GroupBox bawah dan kanan kontrol. Snapline ini sesuai dengan Margin properti .Button

  5. GroupBox Ubah properti kontrol Padding dengan memperluas Padding entri di jendela Properti dan mengatur All properti menjadi 20.

  6. Button Pilih kontrol dalam GroupBox kontrol dan pindahkan ke tengah GroupBox.

    Snapline muncul pada jarak yang lebih jauh dari batas GroupBox kontrol. Jarak ini adalah jumlah Button properti kontrol Margin dan GroupBox properti kontrol Padding .

Kontrol ukuran secara otomatis

Dalam beberapa aplikasi, ukuran kontrol tidak akan sama pada waktu proses seperti pada waktu desain. Teks Button kontrol, misalnya, dapat diambil dari database, dan panjangnya tidak diketahui sebelumnya.

AutoSize Ketika properti diatur ke true, kontrol akan mengukur dirinya sendiri ke kontennya. Untuk informasi selengkapnya, lihat Gambaran Umum Properti Ukuran Otomatis.

Mengatur kontrol pada formulir Anda menggunakan properti AutoSize

  1. Button Seret kontrol dari Kotak Alat ke formulir Anda.

  2. Ubah nilai Button properti kontrol AutoSize menjadi true.

  3. Button Ubah properti kontrol Text ke tombol Ini memiliki string panjang untuk properti Teksnya.

    Saat Anda menerapkan perubahan, Button kontrol mengubah ukurannya sendiri agar pas dengan teks baru.

  4. Seret kontrol lain Button dari Kotak Alat ke formulir Anda.

  5. Button Ubah properti kontrol Text menjadi "Tombol ini memiliki string panjang untuk properti Teksnya."

    Saat Anda menerapkan perubahan, Button kontrol tidak mengubah ukurannya sendiri, dan teks diklip oleh tepi kanan kontrol.

  6. Padding Ubah properti dengan memperluas Padding entri di jendela Properti dan mengatur All properti menjadi 5.

    Teks di interior kontrol dipotong di keempat sisi.

  7. Button Ubah properti kontrol AutoSize menjadi true.

    Button Kontrol mengubah ukuran dirinya sendiri untuk mencakup seluruh string. Selain itu, padding telah ditambahkan di sekitar teks, menyebabkan Button kontrol meluas ke keempat arah.

  8. Button Seret kontrol dari Kotak Alat ke formulir Anda. Posisikan di dekat sudut kanan bawah formulir.

  9. Ubah nilai Button properti kontrol AutoSize menjadi true.

  10. Atur Button properti kontrol Anchor ke Right, Bottom.

  11. Button Ubah properti kontrol Text menjadi "Tombol ini memiliki string panjang untuk properti Teksnya."

Saat Anda melakukan perubahan, Button kontrol mengubah ukuran dirinya sendiri ke arah kiri. Secara umum, ukuran otomatis akan meningkatkan ukuran kontrol ke arah yang berlawanan dengan pengaturan propertinya Anchor .

Properti AutoSize dan AutoSizeMode

Beberapa kontrol mendukung AutoSizeMode properti , yang memberi Anda kontrol yang lebih halus atas perilaku ukuran kontrol otomatis.

Menggunakan properti AutoSizeMode

  1. Panel Seret kontrol dari Kotak Alat ke formulir Anda.

  2. Atur nilai Panel properti kontrol AutoSize ke true.

  3. Button Seret kontrol dari Kotak Alat ke Panel kontrol.

  4. Tempatkan Button kontrol di dekat sudut Panel kanan bawah kontrol.

  5. Panel Pilih kontrol dan ambil handel ukuran kanan bawah. Mengubah ukuran Panel kontrol menjadi lebih besar dan lebih kecil.

    Catatan

    Anda dapat dengan bebas mengubah ukuran Panel kontrol, tetapi Anda tidak dapat mengukurnya lebih kecil dari posisi Button sudut kanan bawah kontrol. Perilaku ini ditentukan oleh nilai AutoSizeMode default properti, yaitu GrowOnly.

  6. Atur nilai Panel properti kontrol AutoSizeMode ke GrowAndShrink.

    Ukuran Panel kontrol itu sendiri untuk mengelilingi Button kontrol. Anda tidak dapat mengubah ukuran Panel kontrol.

  7. Button Seret kontrol ke sudut Panel kiri atas kontrol.

    Panel Kontrol mengubah ukuran ke Button posisi baru kontrol.

Langkah berikutnya

Ada banyak fitur tata letak lainnya untuk mengatur kontrol di aplikasi Formulir Windows Anda. Berikut adalah beberapa kombinasi yang mungkin Anda coba:

Baca juga