Bagikan melalui

Panduan: Mengatur tata letak kontrol dengan padding, margin, dan properti AutoSize

Penempatan kontrol yang tepat pada formulir Anda adalah prioritas tinggi untuk banyak aplikasi. Windows Forms Designer di Visual Studio memberi Anda banyak alat tata letak untuk mencapai tujuan tersebut. Tiga yang paling penting adalah properti Margin, Padding, dan AutoSize, yang ada di semua kontrol Windows Forms.

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.

Ilustrasi berikut ini memperlihatkan properti Padding dan Margin pada kontrol.

Padding dan Margin untuk Kontrol Formulir Windows

Properti AutoSize memberi tahu kontrol untuk menyesuaikan ukurannya secara otomatis sesuai dengan isinya. Elemen ini tidak akan mengubah ukurannya menjadi lebih kecil dari nilai properti Size aslinya, dan elemen ini akan memperhitungkan nilai dari properti Padding.

Prasyarat

Anda memerlukan Visual Studio untuk menyelesaikan panduan ini.

Membuat proyek

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

  2. Pilih form di Windows Forms Designer.

Mengatur margin untuk elemen kontrol

Anda dapat mengatur jarak default antara kontrol Anda menggunakan properti Margin. 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 kontrol Button dari kotak Alat ke formulir Anda.

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

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

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

  4. Pilih salah satu kontrol Button 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. Ubah properti kontrol yang dipilih dengan memperluas entri di jendela Properti dan mengatur properti ke 5.

  6. Pindahkan kontrol yang dipilih ke posisi di bawah kontrol lainnya dan perhatikan bahwa garis panduan 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 properti Margin, Left, Top, Right, Bottom, ke nilai yang berbeda, atau Anda dapat mengatur semuanya ke nilai yang sama dengan properti All.

Mengatur padding untuk komponen

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

Mengatur kontrol pada formulir Anda menggunakan padding

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

  2. Ubah nilai properti Button kontrol AutoSize menjadi true.

  3. Ubah properti dengan memperluas entri di jendela Properti dan mengatur properti ke 5.

    Kontrol diperluas untuk memberikan ruang untuk padding baru.

  4. Seret kontrol GroupBox dari Kotak Alat ke dalam formulir Anda. Seret kontrol dari Kotak Alat ke kontrol . Posisikan kontrol Button agar rata dengan sudut kanan bawah kontrol GroupBox.

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

  5. Ubah properti kontrol dengan memperluas entri di jendela Properti dan mengatur properti ke 20.

  6. Pilih kontrol Button di dalam kontrol GroupBox dan geser ke arah tengah GroupBox.

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

Kontrol ukuran secara otomatis

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

Ketika properti AutoSize diatur ke true, kontrol akan menyesuaikan ukurannya dengan kontennya. Untuk informasi selengkapnya, lihat Gambaran Umum Properti AutoSize.

Mengatur kontrol pada formulir Anda menggunakan properti AutoSize

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

  2. Ubah nilai properti Button kontrol AutoSize menjadi true.

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

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

  4. Seret kontrol Button lain dari kotak alat ke formulir Anda.

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

    Saat Anda mengkomit perubahan, kontrol Button tidak mengubah ukurannya secara otomatis, dan teks terpotong di tepi kanan kontrol.

  6. Ubah properti dengan memperluas entri di jendela Properti dan mengatur properti ke 5.

    Teks di bagian dalam kontrol antarmuka terpotong di keempat sisi.

  7. Ubah properti Button kontrol AutoSize menjadi true.

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

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

  9. Ubah nilai properti Button kontrol AutoSize menjadi true.

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

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

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

Properti AutoSize dan AutoSizeMode dalam Pemrograman

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

Menggunakan properti AutoSizeMode

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

  2. Atur nilai properti Panel kontrol AutoSize ke benar.

  3. Seret kontrol dari Kotak Alat ke kontrol .

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

  5. Pilih kontrol Panel dan seret pegangan penyesuai ukuran di kanan bawah. Mengubah ukuran kontrol Panel menjadi lebih besar dan lebih kecil.

    Nota

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

  6. Atur nilai properti Panel kontrol AutoSizeMode ke GrowAndShrink.

    Kontrol Panel mengubah ukurannya sendiri untuk mengelilingi kontrol Button. Anda tidak dapat mengubah ukuran kontrol Panel.

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

    Kontrol Panel mengubah ukurannya sesuai dengan posisi baru kontrol Button.

Langkah selanjutnya

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

Lihat juga