Tutorial: Menambahkan kontrol ke aplikasi Windows Forms penampil gambar (.NET Framework)

Dalam rangkaian tiga tutorial ini, Anda membuat aplikasi Windows Forms yang memuat gambar dan menampilkannya. Visual Studio Integrated Design Environment (IDE) menyediakan alat yang Anda butuhkan untuk membuat aplikasi.

Program ini memiliki kotak gambar, kotak centang, dan beberapa tombol, yang Anda gunakan untuk mengontrol aplikasi. Tutorial ini menunjukkan kepada Anda cara menambahkan kontrol ini.

Dalam tutorial kedua ini, Anda mempelajari cara:

• Menambahkan kontrol ke aplikasi Anda
• Menambahkan tombol di panel tata letak
• Mengubah nama dan lokasi kontrol
• Menambahkan komponen dialog

Untuk informasi selengkapnya, lihat Panduan Desktop di Windows Forms .NET.

Prasyarat

• Tutorial ini dibangun pada tutorial sebelumnya, Membuat aplikasi penampil gambar. Selesaikan yang pertama dan mulai dengan proyek yang Anda buat untuk tutorial tersebut.

Menambahkan kontrol ke aplikasi Anda

Aplikasi Penampil Gambar menggunakan kontrol PictureBox untuk menampilkan gambar. Ini menggunakan kotak centang dan beberapa tombol untuk mengelola gambar dan latar belakang dan untuk menutup aplikasi. Anda menambahkan PictureBox dan kotak centang dari Toolbox di IDE Visual Studio.

1. Buka Visual Studio. Proyek Penampil Gambar Anda muncul di bawah Buka baru-baru ini.

2. Di Windows Forms Designer, pilih TableLayoutPanel yang Anda tambahkan di tutorial sebelumnya. Periksa apakah tableLayoutPanel1 muncul di jendela Properti .

3. Di sisi kiri Visual Studio IDE, pilih tab Kotak Alat . Jika Anda tidak melihatnya, pilih Tampilkan>Kotak Alat dari bilah menu atau Ctrl+Alt+X. Di kotak alat, perluas Kontrol Umum.

4. Klik ganda PictureBox untuk menambahkan kontrol PictureBox ke formulir Anda. Visual Studio menambahkan kontrol PictureBox ke sel kosong pertama TableLayoutPanel.

5. Pilih kontrol PictureBox baru untuk memilihnya, lalu pilih segitiga hitam pada kontrol PictureBox baru untuk menampilkan daftar tugasnya.

   

6. Pilih Dock di Kontainer Induk, yang mengatur properti Dock PictureBox menjadi Penuh. Anda dapat melihat nilai tersebut di jendela Properti .

7. Di jendela Properti untuk PictureBox, atur properti ColumnSpan ke 2. PictureBox sekarang mengisi kedua kolom.

8. Atur properti BorderStyle ke Fixed3D.

9. Di Windows Forms Designer, pilih TableLayoutPanel. Kemudian, di Kotak Alat, klik dua kali item Kotak Centang untuk menambahkan kontrol Kotak Centang baru. PictureBox Anda mengambil dua sel pertama di TableLayoutPanel, sehingga kontrol CheckBox ditambahkan ke sel kiri bawah.

10. Pilih properti Teks dan masukkan Stretch.

    

Menambahkan tombol di panel tata letak

Sejauh ini, Anda menambahkan kontrol ke TableLayoutPanel. Langkah-langkah ini menunjukkan kepada Anda cara menambahkan empat tombol ke panel tata letak baru di TableLayoutPanel.

1. Pilih TableLayoutPanel pada formulir. Buka Kotak Alat, dan pilih Kontainer. Klik ganda FlowLayoutPanel untuk menambahkan kontrol baru ke sel terakhir TableLayoutPanel.

2. Atur properti Dock pada FlowLayoutPanel ke Fill. Anda dapat mengatur properti ini dengan memilih segitiga hitam, lalu memilih Dock di kontainer induk.

   FlowLayoutPanel adalah kontainer yang mengatur kontrol lain dalam satu baris, satu demi satu.

3. Pilih FlowLayoutPanel baru, lalu buka Kotak Alat dan pilih Kontrol Umum. Klik dua kali item Tombol untuk menambahkan kontrol tombol yang disebut tombol1.

4. Klik dua kali Tombol lagi untuk menambahkan tombol lain. IDE menyebutnya tombol2 yang berikutnya.

5. Tambahkan dua tombol lagi dengan cara ini.

   Opsi lain adalah memilih tombol2. Lalu pilih Edit>Salin atau Ctrl+C. Selanjutnya, pilih Edit>Tempel dari bilah menu atau tekan Ctrl+V untuk menempelkan salinan tombol Anda. Sekarang tempelkan lagi. IDE menambahkan tombol3 dan tombol4 ke FlowLayoutPanel.

6. Pilih tombol pertama dan atur properti Teks-nya untuk Menampilkan gambar.

7. Atur properti Teks dari tiga tombol berikutnya ke Hapus gambar, Atur warna latar belakang, dan Tutup.

8. Untuk mengukur tombol dan menyusunnya, pilih FlowLayoutPanel. Atur properti FlowDirection ke RightToLeft.

   Tombol harus meratakan dirinya ke sisi kanan sel, dan membalikkan urutannya sehingga tombol Perlihatkan gambar berada di sebelah kanan sel. Anda dapat menyeret tombol di sekitar FlowLayoutPanel untuk mengaturnya dalam urutan apa pun.

9. Pilih tombol Tutup untuk memilihnya. Kemudian, untuk memilih tombol lainnya secara bersamaan, tekan dan tahan tombol Ctrl dan pilih tombol tersebut juga.

10. Di jendela Properti , atur properti AutoSize ke True. Tombol mengubah ukuran agar pas dengan teksnya.

    

Anda dapat menjalankan program untuk melihat tampilan kontrol. Pilih kunci F5 , pilih Debug>Mulai Penelusuran Kesalahan, atau pilih tombol Mulai . Tombol yang Anda tambahkan belum melakukan apa-apa.

Mengubah nama kontrol

Ada empat tombol pada formulir Anda, bernama button1, button2, button3, dan button4 di C#. Di Visual Basic, huruf pertama default dari nama kontrol apa pun dijadikan huruf besar, sehingga tombol diberi nama Button1, Button2, Button3, dan Button4. Gunakan langkah-langkah ini untuk memberi mereka nama yang lebih informatif.

1. Pada formulir, pilih tombol Tutup . Jika Anda masih memilih semua tombol, pilih Esc untuk membatalkan pilihan.

2. Di jendela Properti , cari (Nama). Ubah nama menjadi closeButton.

   

   IDE tidak menerima nama yang berisi spasi.

3. Ganti nama tiga tombol lainnya menjadi backgroundButton, clearButton, dan showButton. Anda dapat memverifikasi nama dengan memilih daftar dropdown pemilih kontrol di jendela Properti . Nama tombol baru muncul.

Anda dapat mengubah nama kontrol apa pun, seperti TableLayoutPanel atau CheckBox.

Menambahkan komponen dialog

Aplikasi Anda dapat membuka file gambar dan memilih warna latar belakang dengan menggunakan komponen. Komponen itu mirip dengan kontrol. Anda menggunakan Kotak Alat untuk menambahkan komponen ke formulir Anda. Anda mengatur propertinya menggunakan jendela Properti .

Tidak seperti kontrol, menambahkan komponen ke formulir Anda tidak menambahkan item yang terlihat. Sebaliknya, ini menyediakan perilaku tertentu yang dapat Anda picu dengan kode. Misalnya, ini adalah komponen yang membuka kotak dialog Buka File .

Di bagian ini, Anda menambahkan OpenFileDialog komponen dan ColorDialog komponen ke formulir Anda.

1. Pilih Windows Forms Designer (Form1.cs [Design]). Kemudian buka Kotak Alat dan pilih grup Dialog .

2. Klik dua kali OpenFileDialog untuk menambahkan komponen yang disebut openFileDialog1 ke formulir Anda.

3. Klik ganda ColorDialog untuk menambahkan komponen yang disebut colorDialog1. Komponen muncul di bagian bawah Windows Forms Designer sebagai ikon.

   

4. Pilih ikon openFileDialog1 dan atur dua properti:

   • Atur properti Filter ke nilai berikut:

     JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
     

   • Atur properti Judul ke nilai berikut: Pilih file gambar.

   Pengaturan properti Filter menentukan tipe yang ditampilkan kotak dialog Pilih gambar .

Langkah selanjutnya

Lanjutkan ke tutorial berikutnya untuk mempelajari cara menambahkan kode ke aplikasi Anda.

Tutorial bagian 3: Menambahkan kode ke Penampil Gambar Anda