Tutorial Aplikasi Formulir C # Windows dengan Contoh

Sejauh ini kita telah melihat bagaimana bekerja dengan C# untuk membuat aplikasi berbasis konsol. Namun dalam skenario kehidupan nyata, tim biasanya menggunakan Visual Studio dan C# untuk membuat Formulir Windows atau aplikasi berbasis Web.

Aplikasi bentuk windows adalah aplikasi, yang dirancang untuk dijalankan di komputer. Itu tidak akan berjalan di browser web karena kemudian menjadi aplikasi web.

Tutorial ini akan fokus pada bagaimana kita dapat membuat aplikasi berbasis Windows. Kami juga akan mempelajari beberapa dasar tentang cara bekerja dengan berbagai elemen aplikasi C# Windows.

Dalam tutorial Windows ini, Anda akan belajar-

• Dasar-dasar Formulir Windows
• Halo Dunia dalam Formulir Windows
• Menambahkan Kontrol ke formulir
• Penanganan Peristiwa untuk Kontrol
• Kontrol Pohon dan PictureBox

Dasar-dasar Formulir Windows

Aplikasi formulir Windows adalah aplikasi yang berjalan di komputer desktop. Aplikasi formulir Windows biasanya memiliki kumpulan kontrol seperti label, kotak teks, kotak daftar, dll.

Di bawah ini adalah contoh aplikasi formulir Windows sederhana C#. Ini menunjukkan layar Login sederhana, yang dapat diakses oleh pengguna. Pengguna akan memasukkan kredensial yang diperlukan dan kemudian akan mengklik tombol Login untuk melanjutkan.

Jadi contoh kontrol yang tersedia pada aplikasi di atas

1. Ini adalah kumpulan kontrol label yang biasanya digunakan untuk menggambarkan kontrol yang berdekatan. Jadi dalam kasus kami, kami memiliki 2 kotak teks, dan label digunakan untuk memberi tahu pengguna bahwa satu kotak teks untuk memasukkan nama pengguna dan yang lainnya untuk kata sandi.
2. Kedua textbox tersebut digunakan untuk menampung username dan password yang akan dimasukkan oleh pengguna.
3. Akhirnya, kita memiliki tombol kontrol. Kontrol tombol biasanya memiliki beberapa kode yang dilampirkan untuk melakukan serangkaian tindakan tertentu. Jadi misalnya dalam kasus di atas, kita bisa meminta tombol melakukan tindakan memvalidasi nama pengguna dan kata sandi yang dimasukkan oleh pengguna.

C# Halo Dunia

Sekarang mari kita lihat contoh bagaimana kita dapat mengimplementasikan aplikasi 'hello world' sederhana di Visual Studio. Untuk ini, kita perlu menerapkan langkah-langkah yang disebutkan di bawah

Langkah 1) Langkah pertama melibatkan pembuatan proyek baru di Visual Studio. Setelah meluncurkan Visual Studio, Anda harus memilih opsi menu New->Project.

Langkah 2) Langkah selanjutnya adalah memilih jenis proyek sebagai aplikasi Windows Forms. Di sini kita juga perlu menyebutkan nama dan lokasi proyek kita.

1. Dalam kotak dialog proyek, kita dapat melihat berbagai opsi untuk membuat berbagai jenis proyek di Visual Studio. Klik opsi Windows di sisi kiri.
2. Saat kita mengklik opsi Windows pada langkah sebelumnya, kita akan dapat melihat opsi untuk Aplikasi Windows Forms. Klik opsi ini.
3. Kami akan memberikan nama untuk aplikasi tersebut. Dalam kasus kami, ini adalah DemoApplication. Kami juga akan menyediakan lokasi untuk menyimpan aplikasi kami.
4. Akhirnya, kita klik tombol 'OK' untuk membiarkan Visual Studio membuat proyek kita.

Jika langkah-langkah di atas diikuti, Anda akan mendapatkan output di bawah ini di Visual Studio.

Keluaran:-

Anda akan melihat Perancang Formulir ditampilkan di Visual Studio. Di Form Designer inilah Anda akan mulai membangun aplikasi Windows Forms Anda.

Di Solution Explorer, Anda juga dapat melihat DemoApplication Solution. Solusi ini akan berisi 2 file proyek di bawah ini

1. Aplikasi Formulir bernama Forms1.cs. File ini akan berisi semua kode untuk aplikasi Windows Form.
2. Program utama bernama Program.cs adalah file kode default yang dibuat ketika aplikasi baru dibuat di Visual Studio. Kode ini akan berisi kode startup untuk aplikasi secara keseluruhan.

Di sisi kiri Visual Studio, Anda juga akan melihat ToolBox. Kotak alat berisi semua kontrol yang dapat ditambahkan ke Formulir Windows. Kontrol seperti kotak teks atau label hanyalah beberapa kontrol yang dapat ditambahkan ke Formulir Windows.

Di bawah ini adalah screenshot tampilan Toolbox.

Langkah 3) Pada langkah ini, kita sekarang akan menambahkan label ke Formulir yang akan menampilkan "Hello World." Dari kotak alat, Anda harus memilih kontrol Label dan cukup seret ke Formulir.

Setelah Anda menyeret label ke formulir, Anda dapat melihat label yang disematkan pada formulir seperti yang ditunjukkan di bawah ini.

Langkah 4) Langkah selanjutnya adalah pergi ke properti kontrol dan Ubah teks menjadi 'Hello World'.

Untuk membuka properti kontrol, Anda perlu mengklik kanan kontrol dan memilih opsi menu Properti

• Panel properti juga muncul di Visual Studio. Jadi untuk kontrol label, di kontrol properti, buka bagian Teks dan masukkan “Hello World”.
• Setiap Kontrol memiliki sekumpulan properti yang menjelaskan kontrol.

Jika Anda mengikuti semua langkah di atas dan menjalankan program Anda di Visual Studio, Anda akan mendapatkan output berikut

Keluaran:-

Di output, Anda dapat melihat bahwa Formulir Windows ditampilkan. Anda juga dapat melihat 'Hello World' ditampilkan di formulir.

Menambahkan Kontrol ke formulir

Kita telah melihat cara menambahkan kontrol ke formulir ketika kita menambahkan kontrol label di bagian sebelumnya untuk menampilkan “Hello World.”

Mari kita lihat kontrol lain yang tersedia untuk formulir Windows dan lihat beberapa properti umumnya.

Dalam aplikasi formulir Windows kami dalam contoh C#, kami akan membuat satu formulir yang akan memiliki fungsi berikut.

1. Kemampuan pengguna untuk memasukkan nama dan alamat.
2. Pilihan untuk memilih kota tempat tinggal pengguna
3. Kemampuan pengguna untuk memasukkan opsi untuk jenis kelamin.
4. Opsi untuk memilih kursus yang ingin dipelajari pengguna. Akan ada pilihan untuk C# dan ASP.Net

Jadi, mari kita lihat setiap kontrol secara mendetail dan menambahkannya untuk membuat formulir dengan fungsi yang disebutkan di atas.

Kotak Grup

Kotak grup digunakan untuk kontrol pengelompokan logis ke dalam bagian. Mari kita ambil contoh jika Anda memiliki kumpulan kontrol untuk memasukkan detail seperti nama dan alamat seseorang. Idealnya, ini adalah detail seseorang, jadi Anda ingin memiliki detail ini di bagian terpisah pada Formulir. Untuk tujuan ini, Anda dapat memiliki kotak grup. Mari kita lihat bagaimana kita dapat menerapkan ini dengan contoh yang ditunjukkan di bawah ini

Langkah 1) Langkah pertama adalah menyeret kontrol Groupbox ke Formulir Windows dari kotak alat seperti yang ditunjukkan di bawah ini

Langkah 2) Setelah kotak grup ditambahkan, buka jendela properti dengan mengklik kontrol kotak grup. Di jendela properti, buka properti Teks dan ubah ke “Detail Pengguna”.

Setelah Anda melakukan perubahan di atas, Anda akan melihat output berikut

Keluaran:-

Di output, Anda dapat dengan jelas melihat bahwa Groupbox telah ditambahkan ke formulir. Anda juga dapat melihat bahwa teks kotak grup diubah menjadi “Detail Pengguna”.

Kontrol Label

Berikutnya adalah Kontrol Label. Kontrol label digunakan untuk menampilkan teks atau pesan kepada pengguna pada formulir. Kontrol label biasanya digunakan bersama dengan kontrol lainnya. Contoh umum adalah di mana label ditambahkan bersama dengan kontrol kotak teks.

Label menunjukkan kepada pengguna tentang apa yang diharapkan untuk diisi di kotak teks. Mari kita lihat bagaimana kita dapat menerapkan ini dengan contoh yang ditunjukkan di bawah ini. Kami akan menambahkan 2 label, satu yang akan disebut 'nama' dan yang lainnya disebut 'alamat.' Mereka akan digunakan bersama dengan kontrol kotak teks yang akan ditambahkan di bagian selanjutnya.

Langkah 1) Langkah pertama adalah menyeret kontrol label ke Formulir Windows dari kotak alat seperti yang ditunjukkan di bawah ini. Pastikan Anda menyeret kontrol label 2 kali sehingga Anda dapat memiliki satu untuk 'nama' dan yang lainnya untuk 'alamat'.

Langkah 2) Setelah label ditambahkan, buka jendela properti dengan mengklik kontrol label. Di jendela properti, buka properti Teks dari setiap kontrol label.

Setelah Anda melakukan perubahan di atas, Anda akan melihat output berikut

Keluaran:-

Anda dapat melihat kontrol label yang ditambahkan ke formulir.

Kotak Teks

Kotak teks digunakan untuk memungkinkan pengguna memasukkan beberapa teks pada aplikasi Windows di C#. Mari kita lihat bagaimana kita dapat menerapkan ini dengan contoh yang ditunjukkan di bawah ini. Kami akan menambahkan 2 kotak teks ke formulir, satu untuk Nama dan yang lainnya untuk alamat yang akan dimasukkan untuk pengguna

Langkah 1) Langkah pertama adalah menyeret kontrol kotak teks ke Formulir Windows dari kotak alat seperti yang ditunjukkan di bawah ini

Langkah 2) Setelah kotak teks ditambahkan, buka jendela properti dengan mengklik kontrol kotak teks. Di jendela properti, buka properti Nama dan tambahkan nama yang bermakna ke setiap kotak teks. Misalnya, beri nama kotak teks untuk pengguna sebagai txtName dan untuk alamat sebagai txtAddress. Konvensi penamaan dan standar harus dibuat untuk kontrol karena menjadi lebih mudah untuk menambahkan fungsionalitas tambahan ke kontrol ini, yang akan kita lihat nanti.

Setelah Anda melakukan perubahan di atas, Anda akan melihat output berikut

Keluaran:-

Pada output, Anda dapat dengan jelas melihat bahwa Kotak Teks telah ditambahkan ke formulir.

Kotak daftar

Listbox digunakan untuk menampilkan daftar item pada formulir Windows. Mari kita lihat bagaimana kita dapat menerapkan ini dengan contoh yang ditunjukkan di bawah ini. Kami akan menambahkan kotak daftar ke formulir untuk menyimpan beberapa lokasi kota.

Langkah 1) Langkah pertama adalah menyeret kontrol kotak daftar ke Formulir Windows dari kotak alat seperti yang ditunjukkan di bawah ini

Langkah 2) Setelah kotak daftar ditambahkan, buka jendela properti dengan mengklik kontrol kotak daftar.

1. Pertama, ubah properti dari kontrol kotak Listbox, dalam kasus kami, kami telah mengubahnya menjadi lstCity
2. Klik pada properti Item. Ini akan memungkinkan Anda untuk menambahkan item berbeda yang dapat muncul di kotak daftar. Dalam kasus kami, kami telah memilih item "koleksi".
3. Di Editor Koleksi String, yang muncul, masukkan nama kota. Dalam kasus kami, kami telah memasukkan "Mumbai", "Bangalore" dan "Hyderabad".
4. Terakhir, klik tombol 'OK'.

Setelah Anda melakukan perubahan di atas, Anda akan melihat output berikut

Keluaran:-

Di output, Anda dapat melihat bahwa Listbox telah ditambahkan ke formulir. Anda juga dapat melihat bahwa kotak daftar telah diisi dengan nilai kota.

RadioButton

Sebuah Radiobutton digunakan untuk menampilkan daftar item dari mana pengguna dapat memilih salah satu. Mari kita lihat bagaimana kita dapat menerapkan ini dengan contoh yang ditunjukkan di bawah ini. Kami akan menambahkan tombol radio untuk opsi pria/wanita.

Langkah 1) Langkah pertama adalah menyeret kontrol 'radiobutton' ke Formulir Windows dari kotak alat seperti yang ditunjukkan di bawah ini.

Langkah 2) Setelah Radiobutton ditambahkan, buka jendela properti dengan mengklik kontrol Radiobutton.

1. Pertama, Anda perlu mengubah properti teks dari kedua kontrol Radio. Buka jendela properti dan ubah teks menjadi laki-laki dari satu tombol radio dan teks lainnya menjadi perempuan.
2. Demikian pula, ubah properti nama dari kedua kontrol Radio. Buka jendela properti dan ubah nama menjadi 'rdMale' dari satu tombol radio dan menjadi 'rdfemale' untuk yang lainnya.

Setelah Anda membuat perubahan di atas, Anda akan melihat output berikut

Keluaran:-

Anda akan melihat tombol Radio ditambahkan ke formulir Windows.

Kotak centang

Kotak centang digunakan untuk memberikan daftar opsi di mana pengguna dapat memilih beberapa pilihan. Mari kita lihat bagaimana kita dapat menerapkan ini dengan contoh yang ditunjukkan di bawah ini. Kami akan menambahkan 2 kotak centang ke formulir Windows kami. Kotak centang ini akan memberikan opsi kepada pengguna apakah mereka ingin belajar C# atau ASP.Net.

Langkah 1) Langkah pertama adalah menyeret kontrol kotak centang ke Formulir Windows dari kotak alat seperti yang ditunjukkan di bawah ini

Langkah 2) Setelah kotak centang ditambahkan, buka jendela properti dengan mengklik kontrol Kotak centang.

Di jendela properti,

1. Pertama, Anda perlu mengubah properti teks dari kedua kontrol kotak centang. Buka jendela properti dan ubah teks menjadi C# dan ASP.Net.
2. Demikian pula, ubah properti nama dari kedua kontrol Radio. Buka jendela properti dan ubah nama menjadi chkC dari satu kotak centang dan menjadi chkASP untuk kotak lainnya.

Setelah Anda melakukan perubahan di atas, Anda akan melihat output berikut

Keluaran:-

Tombol

Tombol digunakan untuk memungkinkan pengguna mengklik tombol yang kemudian akan memulai pemrosesan formulir. Mari kita lihat bagaimana kita dapat menerapkan ini dengan contoh yang ditunjukkan di bawah ini. Kami akan menambahkan tombol sederhana yang disebut 'Kirim' yang akan digunakan untuk mengirimkan semua informasi pada formulir.

Langkah 1) Langkah pertama adalah menyeret kontrol tombol ke Formulir Windows dari kotak alat seperti yang ditunjukkan di bawah ini

Langkah 2) Setelah Tombol telah ditambahkan, buka jendela properti dengan mengklik kontrol Tombol.

1. Pertama, Anda perlu mengubah properti teks dari kontrol tombol. Buka jendela properti dan ubah teks menjadi 'kirim'.
2. Demikian pula, ubah properti nama dari kontrol. Buka jendela properti dan ubah namanya menjadi 'btnSubmit'.

Setelah Anda melakukan perubahan di atas, Anda akan melihat output berikut

Keluaran:-

Selamat, Anda sekarang memiliki Formulir Windows dasar pertama Anda. Sekarang mari kita beralih ke topik berikutnya untuk melihat bagaimana kita dapat melakukan penanganan Peristiwa untuk Kontrol.

Penanganan Peristiwa C# untuk Kontrol

Saat bekerja dengan formulir windows, Anda dapat menambahkan acara ke kontrol. Peristiwa adalah sesuatu yang terjadi ketika suatu tindakan dilakukan. Mungkin tindakan yang paling umum adalah mengklik tombol pada formulir. Di C# Windows Forms, Anda dapat menambahkan kode yang dapat digunakan untuk melakukan tindakan tertentu saat tombol ditekan pada formulir.

Biasanya ketika tombol ditekan pada formulir, itu berarti beberapa pemrosesan harus dilakukan.

Mari kita lihat salah satu peristiwa dan bagaimana hal itu dapat ditangani sebelum kita beralih ke skenario peristiwa tombol.

Contoh di bawah ini akan menampilkan acara untuk kontrol Listbox. Jadi setiap kali item dipilih dalam kontrol kotak daftar, kotak pesan akan muncul yang menunjukkan item yang dipilih. Mari lakukan langkah-langkah berikut untuk mencapainya.

Langkah 1) Klik dua kali pada Listbox di perancang formulir. Dengan melakukan ini, Visual Studio akan secara otomatis membuka file kode untuk formulir. Dan itu akan secara otomatis menambahkan metode acara ke kode. Metode acara ini akan dipicu, setiap kali item apa pun di kotak daftar dipilih.

Di atas adalah potongan kode yang secara otomatis ditambahkan oleh Visual Studio, ketika Anda mengklik dua kali kontrol kotak Daftar pada formulir. Sekarang mari tambahkan bagian kode di bawah ini ke cuplikan kode ini, untuk menambahkan fungsionalitas yang diperlukan ke acara kotak daftar.

1. Ini adalah metode event handler yang secara otomatis dibuat oleh Visual Studio saat Anda mengklik dua kali kontrol kotak Daftar. Anda tidak perlu khawatir tentang kerumitan nama metode atau parameter yang diteruskan ke metode.
2. Di sini kita mendapatkan SelectedItem melalui properti lstCity.SelectedItem. Ingat bahwa lstCity adalah nama kontrol Listbox kami. Kami kemudian menggunakan metode GetItemText untuk mendapatkan nilai aktual dari item yang dipilih. Kami kemudian menetapkan nilai ini ke variabel teks.
3. Akhirnya, kita menggunakan metode MessageBox untuk menampilkan nilai variabel teks kepada pengguna.

Satu Anda membuat perubahan di atas, dan menjalankan program di Visual Studio Anda akan melihat output berikut

Keluaran:-

Dari output, Anda dapat melihat bahwa ketika item apa pun dari kotak daftar dipilih, kotak pesan akan muncul. Ini akan menampilkan item yang dipilih dari kotak daftar.

Sekarang mari kita lihat kontrol terakhir yang merupakan metode klik tombol. Sekali lagi ini mengikuti filosofi yang sama. Cukup klik dua kali tombol di Forms Designer dan secara otomatis akan menambahkan metode untuk event handler tombol. Kemudian Anda hanya perlu menambahkan kode di bawah ini.

1. Ini adalah metode event handler yang secara otomatis dibuat oleh Visual Studio saat Anda mengklik dua kali tombol kontrol. Anda tidak perlu khawatir dengan kerumitan nama metode atau parameter yang diteruskan ke metode.
2. Di sini kita mendapatkan nilai yang dimasukkan dalam kotak teks nama dan alamat. Nilai dapat diambil dari properti teks dari kotak teks. Kami kemudian menetapkan nilai ke 2 variabel, nama, dan alamat yang sesuai.
3. Akhirnya, kami menggunakan metode MessageBox untuk menampilkan nilai nama dan alamat kepada pengguna.

Satu Anda membuat perubahan di atas, dan menjalankan program di Visual Studio Anda akan melihat output berikut

Keluaran:-

1. Pertama, masukkan nilai di bidang nama dan alamat.
2. Kemudian klik tombol Kirim

Setelah Anda mengklik tombol Kirim, sebuah kotak pesan akan muncul, dan itu akan menunjukkan dengan benar apa yang Anda masukkan di bagian detail pengguna.

Kontrol Pohon dan PictureBox

Ada 2 kontrol lebih lanjut yang dapat kita lihat, satu adalah 'Kontrol Pohon' dan yang lainnya adalah 'Kontrol Gambar'. Mari kita lihat contoh bagaimana kita dapat menerapkan kontrol ini

Kontrol Pohon

– Kontrol pohon digunakan untuk membuat daftar item di pohon seperti mode. Mungkin contoh terbaik adalah ketika kita melihat Windows Explorer itu sendiri. Struktur folder di Windows Explorer seperti struktur seperti pohon.

Mari kita lihat bagaimana kita dapat menerapkan ini dengan contoh yang ditunjukkan di bawah ini.

Langkah 1) Langkah pertama adalah menyeret kontrol Pohon ke Formulir Windows dari kotak alat seperti yang ditunjukkan di bawah ini

Langkah 2) Langkah selanjutnya adalah mulai menambahkan node ke kumpulan pohon sehingga dapat muncul di pohon yang sesuai. Pertama, mari ikuti sub-langkah di bawah ini untuk menambahkan simpul akar ke kumpulan pohon.

1. Buka kotak alat properti untuk kontrol tampilan hierarki. Klik pada properti Node. Ini akan memunculkan Editor TreeNode
2. Di Editor TreeNode, klik tombol Tambahkan Akar untuk menambahkan simpul akar ke kumpulan pohon.
3. Selanjutnya, ubah teks dari node Root dan berikan teks sebagai Root dan klik tombol 'OK'. Ini akan menambahkan simpul Root.

Langkah 3) Langkah selanjutnya adalah mulai menambahkan node anak ke kumpulan pohon. Mari ikuti sub-langkah di bawah ini untuk menambahkan simpul akar anak ke kumpulan pohon.

1. Pertama, klik tombol Tambahkan anak. Ini akan memungkinkan Anda untuk menambahkan simpul anak ke koleksi Pohon.
2. Untuk setiap simpul anak, ubah properti teks. Terus ulangi langkah sebelumnya dan langkah ini dan tambahkan 2 node tambahan. Pada akhirnya, Anda akan memiliki 3 node seperti yang ditunjukkan di atas, dengan teks sebagai Label, Button, dan Checkbox masing-masing.
3. Klik tombol OK

Setelah Anda melakukan perubahan di atas, Anda akan melihat output berikut.

Keluaran:-

Anda akan dapat melihat tampilan Pohon ditambahkan ke formulir. Saat Anda menjalankan aplikasi formulir Windows, Anda dapat memperluas simpul akar dan melihat simpul anak dalam daftar.

Kontrol PictureBox

Kontrol ini digunakan untuk menambahkan gambar ke Winforms C#. Mari kita lihat bagaimana kita dapat menerapkan ini dengan contoh yang ditunjukkan di bawah ini.

Langkah 1) Langkah pertama adalah menyeret kontrol PictureBox ke C# Windows Form dari toolbox seperti yang ditunjukkan di bawah ini

Langkah 2) Langkah selanjutnya adalah benar-benar melampirkan gambar ke kontrol kotak gambar. Ini dapat dilakukan dengan mengikuti langkah-langkah di bawah ini.

1. Pertama, klik pada properti Gambar untuk kontrol PictureBox. Jendela baru akan muncul.
2. Di jendela ini, klik tombol Impor. Ini akan digunakan untuk melampirkan gambar ke kontrol kotak gambar.
3. Sebuah kotak dialog akan muncul di mana Anda dapat memilih gambar untuk dilampirkan ke kotak gambar
4. Klik tombol OK

Setelah Anda membuat perubahan di atas, Anda akan melihat output berikut

Keluaran:-

Dari output, Anda dapat melihat bahwa gambar ditampilkan pada formulir.

Ringkasan

• Bentuk Windows dalam aplikasi C# adalah formulir yang berjalan di desktop komputer. Visual Studio Form bersama dengan C# dapat digunakan untuk membuat aplikasi Windows Forms.
• Kontrol dapat ditambahkan ke formulir Windows C# melalui Toolbox di Visual Studio. Kontrol seperti label, kotak centang, tombol radio, dll. dapat ditambahkan ke formulir melalui kotak alat.
• Seseorang juga dapat menggunakan kontrol lanjutan seperti kontrol tampilan hierarki dan kontrol PictureBox.
• Penangan peristiwa digunakan untuk merespons peristiwa yang dihasilkan dari kontrol. Yang paling umum adalah yang ditambahkan untuk acara yang diklik tombol.