Windows Phone 29 November 2013

Pada sesi kali ini, saya akan membuat program tentang Image Control, yaitu program yang akan memiliki fitur menampilkan gambar yang kita pilih untuk ditampilkan kedalam Toolbox image yang dipasangkan dalam program ini

Langkah pertama buat project baru C# dengan ImageControl

Masukkan 1 Buah Toolbox Button & 1 Buah Toolbox Image

Pada Properties Button beri Name ChangeImageBT,  Content = “Change”, dan

pada Properties Image beri Name MyImage

Memasukkan Toolbox Button dan mengatur propertiesnya

Memasukkan Toolbox Image dan mengatur Propertiesnya

Langkah selanjutnya

Klik kanan pada Image Control kemudian Add/New Folder beri Nama Images

Pada New Folder yang ditambahkan, beri dengan nama Images

Kemudian klik kanan pada folder Images lalu Add/ExitingItem untuk memasukkan Gambar Objek yang dipakai pada program kedalam folder Image yang dibuat

Disini kita memilih beberapa objek gambar yang dipakai didalam program ini

Pada MainPage.xaml.cs masukkan Coding  dibawah ini :

using System.Windows.Media.Imaging;

Kemudian Pada Button ChangeImageBT masukkan Coding Berikut :

BitmapImage newImage = new BitmapImage(new Uri("/ImageControl;component/Images/008248030.jpg", UriKind.Relative));myImage.Source = newImage;

Jalankan Programnya F5 kemudian dan Click Button Change Image makan akan menampilkan Gambar seperti dibawah ini :

Langkah selanjutnya kita akan menggunakan Event Tap pada Image untuk menampilkan gambar berdasarkan image yang di pilih dengan click

Masukkan 8 Toolbox Image dan beri nama myImage1 sampai dengan myImage8

Dan pada Properties Source Pilih gambar yang telah dimasukkan kedalam Folder Images, untuk Toolbox Image

Kemudian lakukan Pemilihan Image Pada Properties Source pada 8 Toolbox Image yang ditambahkan

Gambar ketika Properties Source pada Toolbox Image setelah dimasukkan Gambar.

Langkah selanjutnya pilih Event pada Properties Image dan Klik 2x pada Event Tap untuk masukkan Coding

Pada MainPage.xaml.cs masukkan coding yang dipakai pada button ChangeImageBT pada Tap seperti gambar dibawah ini :

Pada gambar source Code diatas, rubah text yang ditandai dengan warna kuning Dengan nama Image atau picture yang ada pada Properties Source pada Toolbox Image yang dipasangkan diatas tadi

lakukan langkah-langkah diatas yang sama pada myImage1 sampai dengan myImage8 dan masukkan Source Code nya

setelah itu run F5 untuk melihat excekusi dari program tersebut.

Tampilan Program saat dipilih Gambar nya yang diklik maka pada myImage akan menampilkan gambar berdasarkan pemilihan yang dilakukan

Selamat Mencoba teman-teman dan para pembaca sekalian, semoga dapat bermanfaat bagi teman-teman dan diri saya pribadi

Read More