Tutorial: Menambahkan kontrol UI ke aplikasi Formulir Windows penampil gambar di Visual Studio

Dalam rangkaian tiga tutorial ini, Anda akan membuat aplikasi Formulir Windows yang memuat gambar dan menampilkannya. Visual Studio Integrated Design Environment (IDE) menyediakan alat yang Anda butuhkan untuk membuat aplikasi. Untuk mempelajari lebih lanjut, lihat Selamat Datang di Visual Studio IDE.

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 ini, Anda akan mempelajari cara untuk:

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

Prasyarat

Tutorial ini dibangun pada tutorial sebelumnya, Membuat aplikasi penampil gambar. Jika Anda belum melakukan tutorial itu, lakukan yang satu itu terlebih dahulu.

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 akan menambahkan PictureBox dan kotak centang dari Kotak Alat di IDE Visual Studio.

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

2. Di Formulir Windows 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 dua kali PictureBox untuk menambahkan kontrol PictureBox ke formulir Anda. Visual Studio IDE 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 ke Fill. 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 Perancang Formulir Windows, 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 Kotak Centang ditambahkan ke sel kiri bawah.

10. Pilih properti Teks dan masukkan Stretch.

    

Menambahkan tombol di panel tata letak

Kontrol sejauh ini telah ditambahkan 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, pilih Kontainer. Klik ganda FlowLayoutPanel untuk menambahkan kontrol baru ke sel terakhir TableLayoutPanel.

2. Atur properti Dock 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 berturut-turut, 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 button1.

4. Klik dua kali Tombol lagi untuk menambahkan tombol lain. IDE memanggil satu button2 berikutnya.

5. Tambahkan dua tombol lagi dengan cara ini. Opsi lain adalah memilih button2, lalu pilih Edit>Salin atau tekan Ctrl+C. Berikutnya, pilih Edit>Tempel dari bilah menu atau tekan Ctrl+V. Untuk menempelkan salinan tombol Anda. Sekarang tempelkan lagi. Perhatikan bahwa IDE menambahkan button3 dan button4 ke FlowLayoutPanel.

6. Pilih tombol pertama dan atur properti Teksnya ke Tampilkan 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 diri mereka ke sisi kanan sel, dan membalikkan urutannya sehingga tombol Perlihatkan gambar berada di sebelah kanan. 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 pun.

Mengubah nama kontrol

Ada empat tombol pada formulir Anda, bernama button1, button2, button3, dan button4 di C#. Dalam Visual Basic, huruf pertama default dari nama kontrol apa pun dikapitalisasi, 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 drop-down pemilih kontrol di jendela Properti. Nama tombol baru muncul.

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

Menambahkan komponen dialog

Aplikasi Anda dapat membuka file gambar dan memilih warna latar belakang dengan menggunakan komponen. Komponen seperti 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 komponen OpenFileDialog dan komponen ColorDialog ke formulir Anda.

1. Pilih Formulir Windows Designer (Form1.cs [Design]). Kemudian buka Toolbox 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 Perancang Formulir Windows sebagai ikon.

   

4. Pilih ikon openFileDialog1 dan atur dua properti:

   • Atur properti Filter ke berikut ini:

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

   • Atur properti Judul ke berikut ini: Pilih file gambar

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

Langkah berikutnya

Lanjutkan ke tutorial berikutnya untuk belajar bagaimana menyebarkan aplikasi ke set skala Anda.

Tutorial bagian 3: Menambahkan kode ke Penampil Gambar Anda