Panduan: Mengatur kontrol pada Formulir Windows menggunakan snapline

Artikel
06/02/2023

Penempatan kontrol yang tepat pada formulir Anda adalah prioritas tinggi untuk banyak aplikasi. Perancang Formulir Windows memberi Anda banyak alat tata letak untuk menyelesaikan ini. Salah satu yang paling penting adalah fitur tersebut SnapLine .

Snapline menunjukkan dengan tepat di mana harus menyusun kontrol dengan kontrol lain. Mereka juga menunjukkan kepada Anda jarak yang direkomendasikan untuk margin antar kontrol, seperti yang ditentukan oleh panduan Antarmuka Pengguna Windows.

Snapline memudahkan untuk menyelaraskan kontrol Anda, untuk tampilan dan perilaku profesional yang tajam (tampilan dan nuansa).

Membuat proyek

Di Visual Studio, buat proyek aplikasi berbasis Windows yang disebut "SnaplineExample".
Pilih formulir di Desainer Formulir.

Kontrol spasi dan perataan

Snapline memberi Anda cara yang akurat dan intuitif untuk menyelaraskan kontrol pada formulir Anda. Mereka muncul saat Anda memindahkan kontrol atau kontrol yang dipilih di dekat posisi yang akan selaras dengan kontrol atau set kontrol lain. Pilihan Anda akan "memposisikan" ke posisi yang disarankan saat Anda memindahkannya melewati kontrol lain.

Untuk mengatur kontrol menggunakan snapline

Button Seret kontrol dari Kotak Alat ke formulir Anda.
Pindahkan Button kontrol ke sudut kanan bawah formulir. Perhatikan snapline yang muncul saat Button kontrol mendekati batas bawah dan kanan formulir. Snapline ini menampilkan jarak yang direkomendasikan antara batas kontrol dan formulir.
Pindahkan kontrol di Button sekitar batas formulir dan catat tempat snapline muncul. Setelah selesai, pindahkan kontrol di Button dekat bagian tengah formulir.
Seret kontrol lain Button dari Kotak Alat ke formulir Anda.
Pindahkan kontrol kedua Button hingga hampir rata dengan kontrol pertama. Perhatikan garis besar yang muncul di garis besar teks kedua tombol, dan perhatikan bahwa kontrol yang Anda pindahkan diposisikan ke posisi yang sama persis dengan kontrol lainnya.
Pindahkan kontrol kedua Button hingga diposisikan tepat di atas kontrol pertama. Perhatikan garis jepret yang muncul di sepanjang tepi kiri dan kanan kedua tombol, dan perhatikan bahwa kontrol yang Anda pindahkan diposisikan ke posisi yang sama persis dengan kontrol lainnya.
Pilih salah Button satu kontrol dan pindahkan dekat dengan kontrol lainnya, hingga hampir menyentuh. Perhatikan snapline yang muncul di antaranya. Jarak ini adalah jarak yang direkomendasikan antara batas kontrol. Perhatikan juga bahwa kontrol yang Anda pindahkan snap ke posisi ini.
Seret dua Panel kontrol dari Kotak Alat ke formulir Anda.
Pindahkan Panel salah satu kontrol hingga hampir rata dengan kontrol pertama. Perhatikan garis jepret yang muncul di sepanjang tepi atas dan bawah kedua kontrol, dan perhatikan bahwa kontrol yang Anda pindahkan diposisikan ke posisi yang sama persis dengan kontrol lainnya.

Ratakan ke margin formulir dan kontainer

Snapline membantu Anda menyelaraskan kontrol anda untuk membentuk dan margin kontainer secara konsisten.

Pilih salah Button satu kontrol dan pindahkan ke batas kanan formulir hingga snapline muncul. Jarak snapline dari batas kanan adalah jumlah properti kontrol Margin dan nilai properti formulir Padding .

Catatan

Jika properti formulir Padding diatur ke 0,0,0,0, Formulir Windows Designer memberikan bentuk nilai bayangan Padding 9,9,9,9,9. Untuk mengambil alih perilaku ini, tetapkan nilai selain 0,0,0,0.
Ubah nilai Button properti kontrol Margin dengan memperluas Margin entri di jendela Properti dan mengatur All properti ke 0. Untuk detailnya, lihat Panduan: Meletakkan Kontrol Formulir Windows dengan Padding, Margin, dan Properti Ukuran Otomatis.
Pindahkan Button kontrol mendekati batas kanan formulir hingga snapline muncul. Jarak ini sekarang diberikan oleh nilai properti formulir Padding .
GroupBox Seret kontrol dari Kotak Alat ke formulir Anda.
Ubah nilai GroupBox properti kontrol Padding dengan memperluas Padding entri di jendela Properti dan mengatur All properti menjadi 10.
Button Seret kontrol dari Kotak Alat ke GroupBox kontrol.
Pindahkan Button kontrol mendekati batas GroupBox kanan kontrol hingga snapline muncul. Pindahkan Button kontrol dalam GroupBox kontrol dan catat tempat snapline muncul.

Meratakan ke kontrol yang dikelompokkan

Anda dapat menggunakan snapline untuk meratakan kontrol yang dikelompokkan serta kontrol dalam GroupBox kontrol.

Pilih dua kontrol pada formulir Anda. Pindahkan pilihan di sekitar dan catat snapline yang muncul antara pilihan Anda dan kontrol lainnya.
GroupBox Seret kontrol dari Kotak Alat ke formulir Anda.
Button Seret kontrol dari Kotak Alat ke GroupBox kontrol.
Pilih salah Button satu kontrol dan pindahkan di GroupBox sekitar kontrol. Perhatikan snapline yang muncul di tepi GroupBox kontrol. Perhatikan juga snapline yang muncul di tepi Button kontrol yang dimuat oleh GroupBox kontrol. Kontrol yang merupakan turunan dari kontrol kontainer juga mendukung snapline.

Menggunakan snapline untuk menempatkan kontrol dengan menguraikan ukurannya

Di Kotak Alat, klik Button ikon kontrol. Jangan seret ke formulir.
Gerakkan penunjuk mouse ke atas permukaan desain formulir. Perhatikan bahwa penunjuk berubah menjadi crosshair dengan Button ikon kontrol terpasang. Perhatikan juga snapline yang tampaknya menyarankan posisi yang selaras untuk Button kontrol.
Klik dan tahan tombol mouse.
Seret penunjuk mouse di sekitar formulir. Perhatikan bahwa kerangka digambar, menunjukkan posisi dan ukuran kontrol.
Seret penunjuk hingga rata dengan kontrol lain pada formulir. Perhatikan bahwa snapline tampaknya menunjukkan perataan.
Rilis tombol mouse. Kontrol dibuat pada posisi dan ukuran yang ditunjukkan oleh kerangka.

Menggunakan snapline saat menyeret kontrol dari Kotak Alat

Button Seret kontrol dari Kotak Alat ke formulir Anda, tetapi jangan lepaskan tombol mouse.
Gerakkan penunjuk mouse ke atas permukaan desain formulir. Perhatikan bahwa penunjuk berubah untuk menunjukkan posisi di mana kontrol baru Button akan dibuat.
Seret penunjuk mouse di sekitar formulir. Perhatikan snapline yang muncul untuk menyarankan posisi yang diratakan untuk Button kontrol. Temukan posisi yang selaras dengan kontrol lain.
Rilis tombol mouse. Kontrol dibuat pada posisi yang ditunjukkan oleh snapline.

Mengubah ukuran kontrol menggunakan snapline

Button Seret kontrol dari Kotak Alat ke formulir Anda.
Mengubah ukuran Button kontrol dengan mengambil salah satu gagang ukuran sudut dan menyeret. Untuk detailnya, lihat Cara: Mengubah Ukuran Kontrol pada Formulir Windows.
Seret gagang pengatur ukuran hingga salah Button satu batas kontrol diratakan dengan kontrol lain. Perhatikan bahwa snapline muncul. Perhatikan juga bahwa handel ukuran diposisikan ke posisi yang ditunjukkan oleh snapline.
Ubah ukuran kontrol ke Button arah yang berbeda dan ratakan gagang ukuran ke kontrol yang berbeda. Perhatikan bagaimana snapline muncul dalam berbagai orientasi untuk menunjukkan perataan.

Meratakan label ke teks kontrol

TextBox Seret kontrol dari Kotak Alat ke formulir Anda. Saat Anda menghilangkan kontrol ke TextBox formulir, klik glyph tag pintar dan pilih opsi Atur teks ke textBox1 . Untuk detailnya, lihat Panduan: Melakukan tugas umum menggunakan tindakan perancang.
Label Seret kontrol dari Kotak Alat ke formulir Anda.
Ubah nilai properti AutoSize kontrol Label menjadi true. Perhatikan bahwa batas kontrol disesuaikan agar pas dengan teks tampilan.
Pindahkan Label kontrol ke sebelah kiri TextBox kontrol, sehingga selaras dengan tepi TextBox bawah kontrol. Perhatikan snapline yang muncul di sepanjang tepi bawah dua kontrol.
Pindahkan Label kontrol sedikit ke atas, hingga Label teks dan TextBox teks diratakan. Perhatikan garis bayangan dengan gaya berbeda yang muncul, yang menunjukkan kapan bidang teks kedua kontrol diratakan.

Button Seret kontrol dari Kotak Alat ke formulir Anda. Letakkan di sudut kiri atas formulir.
Tekan panah bawah Ctrl+. Perhatikan bahwa kontrol memindahkan formulir ke posisi perataan horizontal pertama yang tersedia.
Tekan panah bawah Ctrl+hingga kontrol mencapai bagian bawah formulir. Perhatikan posisi yang didudukinya saat bergerak ke bawah formulir.
Tekan panah kanan Ctrl+. Perhatikan bahwa kontrol berpindah di seluruh formulir ke posisi perataan vertikal pertama yang tersedia.
Tekan panah kanan Ctrl+hingga kontrol mencapai sisi formulir. Perhatikan posisi yang didudukinya saat bergerak di seluruh formulir.
Pindahkan kontrol di sekitar formulir dengan kombinasi tombol panah. Perhatikan posisi yang ditempati kontrol dan snapline yang menyertainya.
Tekan tombol panah Shift+untuk mengubah ukuran Button kontrol dengan kenaikan satu piksel.
Tekan tombol panah Ctrl+Shift+untuk mengubah ukuran Button kontrol dalam kenaikan snapline.

Secara selektif menonaktifkan snapline

TableLayoutPanel Seret kontrol dari Kotak Alat ke formulir Anda.
Button Klik dua kali ikon kontrol di Kotak Alat. Perhatikan bahwa kontrol tombol baru muncul di TableLayoutPanel sel pertama kontrol.
Button Klik dua kali ikon kontrol di Kotak Alat dua kali lagi. Ini meninggalkan satu sel kosong dalam TableLayoutPanel kontrol.
Button Seret kontrol dari Kotak Alat ke sel TableLayoutPanel kosong kontrol. Perhatikan bahwa tidak ada snapline yang muncul.
Button Seret kontrol keluar dari TableLayoutPanel kontrol dan pindahkan di TableLayoutPanel sekitar kontrol. Perhatikan bahwa snapline muncul lagi.

Menonaktifkan snapline

Tekan tombol Alt dan saat memindahkan kontrol di sekitar formulir.

Tidak ada snapline yang muncul dan kontrol tidak diposisikan ke posisi perataan potensial.

Untuk menonaktifkan snapline di lingkungan desain

Dari menu Alat, buka kotak dialog Opsi. Pilih Formulir Windows Designer.
Pilih simpul Umum . Di bagian Mode Tata Letak, ubah pilihan dari SnapLines ke SnapToGrid.
Pilih OK untuk menerapkan pengaturan.
Pilih kontrol pada formulir Anda dan pindahkan di sekitar kontrol lain. Perhatikan bahwa snapline tidak muncul.

Langkah berikutnya

Snapline menawarkan cara intuitif untuk menyelaraskan kontrol pada formulir Anda. Saran untuk eksplorasi lebih lanjut meliputi:

Coba menumpuk GroupBox kontrol dalam kontrol lain GroupBox . Tempatkan Button kontrol dalam kontrol turunan GroupBox , dan kontrol lain dalam kontrol induk GroupBox . Pindahkan Button kontrol untuk melihat bagaimana snapline melintasi batas kontainer.
Buat kolom TextBox kontrol dan kolom Label kontrol yang sesuai. Atur nilai Label properti kontrol AutoSize ke true. Gunakan snapline untuk memindahkan Label kontrol sehingga teks yang ditampilkan diratakan dengan teks dalam TextBox kontrol.

Bagikan melalui