Assalamualaikum Wr. Wb
Postiiiiing……………..postiiiiiiiiiiiiing……..dan kembali
memposting. Keknya sdah jadi kewajiban untuk matakuliah Visual Programming ini.
Pada kesempatan kali ini, saya akan memposting hasil dari
latihan yang telah diberikan oleh bapak dosen. Kali ini mengenai “image
Control”. Maksudnya bagaimana kita memasukan gambar dan lain sebagainya.
Dari tutorial yang
diberikan bapak dan dikembangkan lagi menjadi latihan untuk masing-masing
orang.
Sejujurnya latihannya lumayang membingungkan, tapi setelah
meminta bantuan dari teman akhirnya bisa juga terselesaikan.
Okeee… untuk mempersingkat waktu dan tullisan saya, kita
langsung saja di project.
Seperti yang sudah-sudah , saat kita telah membuaka aplikasi
windows phone dan mengikuti langkah-langkah pembuatan folder dan masuk ke file
MainPage.xaml yang perlu kita lakukan adalah memasukan element-element yang
diperlukan. Kali ini saya akan memasukan element ScrollViewer, Image, TextBlock
dan Grid. Properties-nya seperti pada table dibawah ini.
|
Type
|
Name
|
Events à
Tap
|
|
ScrollWiver
|
-
|
-
|
|
Image
|
myImage
|
-
|
|
TextBlock
|
MyTeksBlock
|
-
|
|
Grid
|
grid1
|
-
|
|
Image
|
Image1
|
Image1
|
|
Image
|
Image2
|
Image2
|
|
Image
|
Image3
|
Image3
|
|
Image
|
Image4
|
Image4
|
|
Image
|
Image5
|
Image5
|
|
Image
|
Image6
|
Image6
|
|
Image
|
Image7
|
Image7
|
|
Image
|
Image8
|
Image8
|
|
Image
|
Image9
|
Image9
|
Sehingga aplikasinya seperti pada gambar dibaawah ini
Sekarang kita masuk ke pengkodean, kita akan masuk ke file
MaimPAge.xaml.cs . kita akan mendoble click pada image utama atau Name =
myImage, sehingga akan terbuka file MainPage.xaml.cs
|
No
|
Description/
langkah
|
|
1.
|
langkah yang kita lakukan yaitu kita double click di gambar 1
(image1) dan file MainPAge.xaml.cs akan terbuka, kali ni kita tidak memasukan
coding.
|
|
2.
|
merupakan coding “Tap”. Cara masuk ko file tersebut yaitu :
Klik pada gambar , contohnya, saya akan mengklik terlebih dahulu
untuk gambar 1 “image1”, lihat pada properties-nya, click Events dan cari
menu “Tap” . isi pada kolom yang kosong dengan “image1” double click pada
menu tap = image1 tersebutTambahkan coding seperti pada gambar diatas.
|
|
3.
|
merupakan nama untuk gambar yang akan kita masukan
|
|
4.
|
merupakan name pada gambar utama
|
|
5.
|
merupakan text yang pada saat kita mengklik gambar, maka pada
TextBlock akan muncul text setiap gambar.
|
Untuk lebih jelasnya lihat pada gambar di bawah ini
|
No
|
Type
|
Name
|
Description
|
|
1.
|
Image
|
myImage
|
Merupakan gambar utama, jadi apa bila kitamengklik gambar yang
lainnya, maka secara otomatis akan muncul pada image tersebut
|
|
2.
|
Image
|
Imange1-9
|
Merupakan file gambar
|
|
3.
|
Image
|
Image2
|
Sebagai contoh, saya akan mengklik gambar pada image2 tersebut
|
|
4.
|
TextBlock
|
myTextBlock
|
Merupakan textblock, dan berfungsi jika kita mengklik salah satu pada
file gambar maka akan muncul text “image2” secra otomatis. Namun ini
merupakan text pada masing2 gambar.
|
Sekarang teman-teman boleh mencoba aplikasi yang telah saya
buat untuk gambar-gambar selanjutnya.
Coding dan caranya tetap sama kok dengan yang di atas, namu
yang perlu di rubah hanya Source tiap gambar dan text pada textBlock.
Sekian tutorial dari saya, semoga dapat bermanfaat untuk
teman-teman semua. Dan kurang lebihnya mohon dimaafkan.
Wassalammualaikum Wr.Wb
Selamat mencoba….
Posting Komentar