Bagikan melalui

Tutorial: Mulai menggunakan Perancang Formulir Windows

  • Artikel

Perancang Formulir Windows menyediakan banyak alat untuk membuat aplikasi Formulir Windows. Artikel ini menggambarkan cara membuat aplikasi dengan menggunakan berbagai alat yang disediakan oleh perancang, termasuk tugas-tugas berikut:

  • Susun kontrol dengan menggunakan snapline.
  • Selesaikan tugas perancang dengan menggunakan tag pintar.
  • Atur margin dan pengisi untuk kontrol.
  • Atur kontrol dengan menggunakan TableLayoutPanel kontrol.
  • Partisi tata letak kontrol Anda dengan menggunakan kontrol SplitContainer.
  • Navigasikan tata letak Anda dengan jendela Kerangka Dokumen.
  • Kontrol posisi dengan ukuran dan tampilan informasi lokasi.
  • Atur nilai properti dengan menggunakan jendela Properti.

Setelah selesai, Anda akan memiliki kontrol kustom yang telah dirakit dengan menggunakan banyak fitur tata letak yang tersedia di Formulir Windows Designer. Kontrol ini menerapkan antarmuka pengguna (UI) untuk kalkulator sederhana. Gambar berikut memperlihatkan tata letak umum kontrol kalkulator:

Screenshot of the completed user interface for the calculator control.

Tip

Jika Anda adalah pengembang C++ dan mencari tutorial untuk membantu Anda membuat aplikasi Windows yang menyertakan formulir dan kontrol, lihat Membuat aplikasi MFC berbasis formulir. Untuk informasi umum lainnya, lihat Gambaran Umum pemrograman Windows di C++.

Membuat proyek kontrol kustom

Langkah pertama adalah membuat proyek kontrol DemoCalculator.

  1. Buka Visual Studio dan buat proyek Pustaka Kontrol Formulir Windows baru dengan menggunakan templat .NET Framework untuk C# atau Visual Basic. Beri nama proyek DemoCalculatorLib.

    Screenshot of the Windows Forms Control Library template in Visual Studio.

  2. Untuk mengganti nama file, di Penjelajah Solusi, klik kanan UserControl1.vb atau UserControl1.cs, pilih Ganti Nama, dan ubah nama file menjadi DemoCalculator.vb atau DemoCalculator.cs. Pilih Ya saat Anda ditanya apakah Anda ingin mengganti nama semua referensi ke elemen kode "UserControl1".

Perancang Formulir Windows menampilkan permukaan perancang untuk kontrol DemoCalculator. Dalam tampilan ini, Anda dapat merancang tampilan kontrol secara grafis dengan memilih kontrol dan komponen dari Toolbox dan menempatkannya di permukaan perancang. Untuk informasi selengkapnya tentang kontrol kustom, lihat Varietas kontrol kustom.

Mendesain tata letak kontrol

Kontrol DemoCalculator berisi beberapa kontrol Formulir Windows. Dalam prosedur ini, Anda akan mengatur kontrol dengan menggunakan Formulir Windows Designer.

  1. Di Perancang Formulir Windows, ubah kontrol DemoCalculator ke ukuran yang lebih besar dengan memilih handel ukuran di sudut kanan bawah dan seret ke bawah dan ke kanan. Di sudut kanan bawah Visual Studio, temukan informasi ukuran dan lokasi untuk kontrol. Atur ukuran kontrol ke lebar 500 dan tinggi 400 dengan melihat informasi ukuran saat Anda mengubah ukuran kontrol.

  2. Di Toolbox, pilih node Kontainer untuk membukanya. Pilih kontrol SplitContainer dan seret ke permukaan perancang.

    SplitContainer diletakkan di permukaan perancang kontrol DemoCalculator.

    Tip

    Ukuran kontrol SplitContainer itu sendiri sesuai dengan ukuran kontrol DemoCalculator. Lihat jendela Properti untuk melihat pengaturan properti untuk kontrol SplitContainer. Cari properti Dock. Nilainya adalah DockStyle.Fill, yang berarti kontrol SplitContainer akan selalu mengukur dirinya sendiri ke batas kontrol DemoCalculator. Mengubah ukuran kontrol DemoCalculator untuk memverifikasi perilaku ini.

  3. Di jendela Properti, ubah nilai properti Dock menjadi None.

    Kontrol SplitContainer menyusut ke ukuran defaultnya dan tidak lagi mengikuti ukuran kontrol DemoCalculator.

  4. Pilih glyph tag pintar (Smart Tag Glyph) di sudut SplitContainer kanan atas kontrol. Pilih Dock di Kontainer Induk untuk mengatur properti Dock menjadi Fill.

    Kontrol SplitContainer mengaitkan batas kontrol DemoCalculator.

    Catatan

    Beberapa kontrol menawarkan tag pintar untuk memfasilitasi desain. Untuk informasi selengkapnya, lihat Panduan: Melakukan tugas umum dengan menggunakan Tag Cerdas pada kontrol Formulir Windows.

  5. Pilih batas vertikal di antara panel dan seret ke kanan, sehingga panel kiri mengambil sebagian besar ruang.

    SplitContainer membagi kontrol DemoCalculator menjadi dua panel dengan batas yang dapat dipindah yang memisahkannya. Panel di sebelah kiri memegang tombol dan layar kalkulator, dan panel di sebelah kanan menunjukkan rekaman operasi aritmatika yang dilakukan oleh pengguna.

  6. Di jendela Properti, ubah nilai properti BorderStyle menjadi Fixed3D.

  7. Di Toolbox, pilih node Kontrol Umum untuk membukanya. Pilih kontrol ListView dan seret ke panel kanan kontrol SplitContainer.

  8. Pilih glif tag pintar kontrol ListView. Di panel tag pintar, ubah pengaturan View menjadi Details.

  9. Di panel tag pintar, pilih Edit Kolom.

    Kotak dialog Editor Kumpulan ColumnHeader terbuka.

  10. Dalam kotak dialog Editor Kumpulan ColumnHeader, pilih Tambahkan untuk menambahkan kolom ke kontrol ListView. Ubah nilai properti Text kolom menjadi Riwayat. Pilih OK untuk membuat kolom.

  11. Di panel tag pintar, pilih Dock di Kontainer Induk, lalu pilih glif tag pintar untuk menutup panel tag pintar.

  12. Dari node KontainerToolbox, seret kontrol TableLayoutPanel ke panel kiri kontrol SplitContainer.

    Kontrol TableLayoutPanel akan muncul di permukaan perancang dengan panel tag pintar terbuka. Kontrol TableLayoutPanel mengatur kontrol turunannya dalam kisi. Kontrol TableLayoutPanel menahan tampilan dan tombol kontrol DemoCalculator. Untuk informasi selengkapnya, lihat Panduan: Menyusun kontrol dengan menggunakan TableLayoutPanel.

  13. Pilih Edit Baris dan Kolom pada panel tag pintar.

    Kotak dialog Gaya Kolom dan Baris terbuka.

  14. Pilih tombol Tambahkan hingga lima kolom ditampilkan. Pilih kelima kolom, lalu pilih Persen dalam kotak Jenis Ukuran. Atur nilai Persen ke 20. Tindakan ini mengatur setiap kolom ke lebar yang sama.

  15. Di bawah Tampilkan, pilih Baris.

  16. Pilih Tambahkan hingga lima baris ditampilkan. Pilih kelima baris, dan pilih Persen dalam kotak Jenis Ukuran. Atur nilai Persen ke 20. Tindakan ini mengatur setiap baris ke tinggi yang sama.

  17. Pilih OK untuk menerima perubahan Anda, lalu pilih glif tag pintar untuk menutup panel tag pintar.

  18. Di jendela Properti, ubah nilai properti Dock menjadi Fill.

Mengisi kontrol

Setelah tata letak kontrol disiapkan, Anda dapat mengisi kontrol DemoCalculator dengan tombol dan tampilan.

  1. Di Toolbox, pilih ikon kontrol TextBox.

    Kontrol TextBox ditempatkan di sel pertama kontrol TableLayoutPanel.

  2. Di jendela Properti, ubah nilai properti ColumnSpan kontrol TextBox menjadi 5.

    Kontrol TextBox berpindah ke posisi yang berpusat di barisnya.

  3. Ubah nilai properti Anchor kontrol TextBox menjadi Left, Right.

    Kontrol TextBox diperluas secara horizontal agar dapat menjangkau kelima kolom.

  4. Ubah nilai properti TextAlign kontrol TextBox menjadi Right.

  5. Di jendela Properti, perluas node properti Font. Atur Size ke 14, dan atur Bold ke true untuk kontrol TextBox.

  6. Pilih kontrol TableLayoutPanel.

  7. Di Toolbox, pilih ikon Button.

    Kontrol Button ditempatkan di sel terbuka kontrol TableLayoutPanel berikutnya.

  8. Di Toolbox, pilih ikon Button empat kali lagi untuk mengisi baris kedua kontrol TableLayoutPanel.

  9. Pilih kelima kontrol Button dengan memilihnya sambil menahan tombol Shift. Tekan Ctrl+C untuk menyalin kontrol Button ke clipboard.

  10. Tekan Ctrl+V tiga kali untuk menempelkan salinan kontrol Button ke baris kontrol TableLayoutPanel yang tersisa.

  11. Pilih 20 kontrol Button dengan memilihnya sambil menahan tombol Shift.

  12. Di jendela Properti, ubah nilai properti Dock menjadi Fill.

    Semua kontrol Button merapat untuk mengisi sel yang berisi.

  13. Di jendela Properti, perluas node properti Margin. Atur nilai All menjadi 5.

    Semua Button kontrol berukuran lebih kecil untuk membuat margin yang lebih besar di antaranya.

  14. Pilih button10 dan button20, lalu tekan Hapus untuk menghapusnya dari tata letak.

  15. Pilih button5 dan button15, lalu ubah nilai properti RowSpan menjadi 2. Tombol ini mewakili tombol Hapus dan = untuk kontrol DemoCalculator.

Menggunakan jendela Kerangka Dokumen

Saat kontrol atau formulir Anda diisi dengan beberapa kontrol, Anda mungkin merasa lebih mudah untuk menavigasi tata letak Anda dengan jendela Kerangka Dokumen.

  1. Pada bilah menu, pilih Tampilkan>Windows Lainnya>Kerangka Dokumen.

    Jendela Kerangka Dokumen memperlihatkan tampilan pohon kontrol DemoCalculator dan kontrol konstituennya. Kontrol kontainer seperti SplitContainer menunjukkan kontrol turunannya sebagai subnode di pohon. Anda juga dapat mengganti nama kontrol dengan menggunakan jendela Kerangka Dokumen.

  2. Di jendela Kerangka Dokumen, klik kanan button1, lalu pilih Ganti Nama. Ubah namanya menjadi sevenButton.

  3. Menggunakan jendela Kerangka Dokumen, ganti nama kontrol Button dari nama yang dibuat perancang menjadi nama produksi sesuai dengan daftar berikut:

    • button1 menjadi sevenButton

    • button2 menjadi eightButton

    • button3 menjadi nineButton

    • button4 menjadi divisionButton

    • button5 menjadi clearButton

    • button6 menjadi fourButton

    • button7 menjadi fiveButton

    • button8 menjadi sixButton

    • button9 menjadi multiplicationButton

    • button11 menjadi oneButton

    • button12 menjadi twoButton

    • button13 menjadi threeButton

    • button14 menjadi subtractionButton

    • button15 menjadi equalsButton

    • button16 menjadi zeroButton

    • button17 menjadi changeSignButton

    • button18 menjadi decimalButton

    • button19 menjadi additionButton

  4. Dengan menggunakan jendela Kerangka Dokumen dan Properti, ubah nilai properti Text untuk setiap nama kontrol Button sesuai daftar berikut:

    • Mengubah properti teks kontrol sevenButton menjadi 7

    • Mengubah properti teks kontrol eightButton menjadi 8

    • Mengubah properti teks kontrol nineButton menjadi 9

    • Mengubah properti teks kontrol divisionButton menjadi / (garis miring)

    • Mengubah properti teks kontrol clearButton menjadi Hapus

    • Mengubah properti teks kontrol fourButton menjadi 4

    • Mengubah properti teks kontrol fiveButton menjadi 5

    • Mengubah properti teks kontrol sixButton menjadi 6

    • Mengubah properti teks kontrol multiplicationButton menjadi * (tanda bintang)

    • Mengubah properti teks kontrol oneButton menjadi 1

    • Mengubah properti teks kontrol twoButton menjadi 2

    • Mengubah properti teks kontrol threeButton menjadi 3

    • Mengubah properti teks kontrol subtractionButton menjadi - (tanda hubung)

    • Mengubah properti teks kontrol equalsButton menjadi = (tanda sama dengan)

    • Mengubah properti teks kontrol zeroButton menjadi 0

    • Mengubah properti teks kontrol changeSignButton menjadi +/-

    • Mengubah properti teks kontrol decimalButton menjadi . (titik)

    • Mengubah properti teks kontrol additionButton menjadi + (tanda plus)

  5. Pada permukaan perancang, pilih semua kontrol Button dengan memilihnya sambil menahan tombol Shift.

  6. Di jendela Properti, perluas node properti Font. Atur Size ke 14, dan atur Bold ke true untuk semua kontrol Button.

Serangkaian instruksi ini menyelesaikan desain kontrol DemoCalculator. Yang tersisa hanyalah menyediakan logika kalkulator.

Menerapkan penanganan aktivitas

Tombol pada kontrol DemoCalculator memiliki penanganan aktivitas yang dapat digunakan untuk menerapkan banyak logika kalkulator. Perancang Formulir Windows memungkinkan Anda menerapkan stub semua penanganan aktivitas untuk semua tombol dengan satu pilihan.

  1. Pada permukaan perancang, pilih semua kontrol Button dengan memilihnya sambil menahan tombol Shift.

  2. Pilih salah satu kontrol Button.

    Editor Kode terbuka untuk penanganan aktivitas yang dihasilkan oleh perancang.

Menguji kontrol

Karena kontrol DemoCalculator mewarisi dari kelas UserControl, Anda dapat menguji perilakunya dengan Kontainer Pengujian UserControl. Untuk informasi selengkapnya, lihat Cara: Menguji perilaku run-time UserControl.

  1. Tekan F5 untuk membuat dan menjalankan kontrol DemoCalculator di Kontainer Pengujian UserControl.

  2. Pilih batas antara panel SplitContainer dan seret ke kiri dan kanan. TableLayoutPanel dan semua kontrol turunannya mengubah ukuran diri agar sesuai dengan ruang yang tersedia.

  3. Setelah selesai menguji kontrol, pilih Tutup.

Menggunakan kontrol pada formulir

Kontrol DemoCalculator dapat digunakan dalam kontrol komposit lain atau pada formulir. Prosedur berikut akan menjelaskan cara menggunakannya.

Membuat proyek

Langkah pertama adalah membuat aplikasi baru. Anda akan menggunakan proyek ini untuk membuat aplikasi yang menunjukkan kontrol kustom Anda.

  1. Buat proyek Aplikasi Formulir Windows baru dan beri nama DemoCalculatorTest.

  2. Di Penjelajah Solusi, klik kanan proyek DemoCalculatorTest, lalu pilih Tambahkan>Referensi Proyek untuk membuka kotak dialog Manajer Referensi.

  3. Buka tab Proyek, lalu pilih proyek DemoCalculatorLib untuk menambahkan referensi ke proyek pengujian.

  4. Di Penjelajah Solusi, klik kanan DemoCalculatorTest, lalu pilih Atur sebagai Proyek StartUp.

  5. Dalam Perancang Formulir Windows, tingkatkan ukuran formulir menjadi sekitar 700 x 500.

Menggunakan kontrol dalam tata letak formulir

Untuk menggunakan kontrol DemoCalculator dalam aplikasi, Anda perlu menempatkannya pada formulir.

  1. Di Toolbox, perluas node Komponen DemoCalculatorLib.

  2. Seret kontrol DemoCalculator dari Toolbox ke formulir Anda. Pindahkan kontrol ke sudut kiri atas formulir. Saat kontrol dekat dengan batas formulir, snapline akan muncul. Snapline menunjukkan jarak properti Padding formulir dan properti Margin kontrol. Posisikan kontrol di lokasi yang ditunjukkan oleh snapline.

    Untuk informasi selengkapnya, lihat Panduan: Menyusun kontrol dengan menggunakan snapline.

  3. Seret kontrol Button dari Toolbox dan letakkan ke formulir.

  4. Pindahkan kontrol di Button sekitar kontrol DemoCalculator dan amati tempat snapline muncul. Anda dapat menyelaraskan kontrol dengan tepat dan mudah dengan menggunakan fitur ini. Hapus kontrol Button saat Anda selesai.

  5. Klik kanan kontrol DemoCalculator, lalu pilih Properti.

  6. Ubah nilai properti Dock menjadi Fill.

  7. Pilih formulir, lalu perluas node properti Padding. Ubah nilai Semua menjadi 20.

    Ukuran kontrol DemoCalculator dikurangi untuk mengakomodasi nilai Padding baru formulir.

  8. Mengubah ukuran formulir dengan menyeret berbagai handel ukuran ke posisi yang berbeda. Amati cara kontrol DemoCalculator diubah ukurannya agar pas.

Langkah berikutnya

Artikel ini telah menunjukkan cara membuat antarmuka pengguna untuk kalkulator sederhana. Untuk melanjutkan, Anda dapat memperluas fungsionalitasnya dengan menerapkan logika kalkulator, lalu menerbitkan aplikasi dengan menggunakan ClickOnce. Atau, lanjutkan ke tutorial lain di mana Anda membuat penampil gambar dengan menggunakan Formulir Windows.

Baca juga