Programming Tutorial: Membuat Aplikasi Picture Viewer Sederhana Dengan Visual Studio Express (Part 3)

Melanjutkan dari part 2 pada hari lalu, kali ini Windowsku akan mulai menambahkan beberapa tool atau elemen terhadap program picture viewer. Pada part 2, anda mulai belajar bagaimana tampilan Visual Studio beserta pembuatan awal dari form di Windows Forms Designer. Selain itu, anda juga belajar merubah ukuran dari window program dan menggunakan properties dengan benar.

Jika anda belum baca part sebelumnya, berikut daftar langkah-langkah pembuatan Picture Viewer:

Sekarang, bukalah Visual Studio Express 2012 anda. Pada halaman awal, akan ada ‘Recent Project’ atau proyek yang baru saja anda kerjakan. Klik saja nama proyek anda untuk membukanya.

Pada sebelah kiri layar anda, akan ada tab yang bernama ‘Toolbox’. Jika anda klik, maka isi dari Toolbox akan muncul. Jika tidak ada tab ‘Toolbox’ disana, klik ‘View’ pada menu bar dan klik ‘Toolbox’. Lalu, klik tanda ‘plus’ pada bagian ‘Container’ untuk membuka isinya.

Anda bisa menambahkan berbagai komponen dengan menggunakan ‘Container’ ini. Namun, untuk Picture Viewer kali ini, klik dobel pada ‘TableLayoutPanel’. Ketika anda klik dobel, pada program anda, akan ada kotak atau grid seperti dibawah ini:

Sekarang, klik TableLayoutPanel yang anda buat dan perhatikan Properties Window. Ketika anda klik TableLayoutPanel, seluruh properti di Properties Window akan berubah sesuai dengan TableLayoutPanel.

Sekarang, carilah properti ‘Dock’ pada Properties Windows. Jika ketemu, klik saja. Lalu klik icon ‘tanda panah’ pada ‘Dock’ dan klik saja kotak yang bagian tengah, seperti pada gambar dibawah:

Ketika anda klik itu, lihatlah perubahan terhadap TableLayoutPanel. TableLayoutPanel akan mengisi seluruh area form. Setelah itu, klik icon pada pojok kanan atas TableLayoutPanel dan klik “Edit Rows and Columns…”

Setelah itu, atur ukuran kolom menurut ‘persen’. Untuk ‘Column1’, aturlah sebesar 15% dan ‘Column2’ sebesar 85%.

Tunggu dulu, jangan klik OK dulu. Setelah kolom kita rubah, sekarang ‘Rows’ yang akan kita rubah. Pada bagian ‘Show’ klik saja drop down dan pilih ‘Rows’. 

Setelah itu, barulah anda klik OK. Lihatlah perubahan yang terjadi.

Sekarang, buka kembali ‘Toolbox’ dan bukalah bagian ‘Common Controls’. Lalu, klik dobel pada PictureBox. Sekarang pada form anda, akan ada sebuah PictureBox. Lalu, klik dan geser PictureBox ke kotak sebelah kiri. Secara otomatis, ukuan PictureBox akan sesuai dengan kotak sebelah kiri (seperti pada gambar disebelah kanan). Klik icon ‘segitiga hitam’ pada pojok kanan atas PictureBox dan klik “Dock in Parent Container”.

Maka, PictureBox akan mengisi seluruh area/field pada kotak sebelah kiri. Lalu, perhatikan Properties Window. Cari properti ‘Dock’ dan pilihlah ‘Fill’. Caranya klik icon ‘segitiga hitam’ dan pilih kotak yang paling luas (itu dinamakan ‘Fill’). Lalu, carilah properti ‘ColumnSpan’ dan ubahlah menjadi ‘2’. Seperti pada gambar dibawah ini:

Agar border dari PictureBox terlihat, anda bisa mencari properti BorderStyle dan menggantinya menjadi ‘Fixed3D’.

Hasil akhir dari apa yang kita buat dari awal hingga akhir menjadi seperti ini:

Setelah selesai, lakukan penyimpanan proyek agar proyek anda tidak hilang.

Setelah anda mengikuti part 3 ini, anda akan belajar:

1. Membuka proyek yang anda simpan
2. Memberikan Layout dengan TableLayoutPanel
3. Menambahkan area PictureBox