Aplikasi ImageControl Pada Windows Phone 7.1 - 29 November 2013

Assalamua’alaikum teman-teman

apa Kabar semua Sahabat A-M, kita jumpa lagi dalam memberi tutorial cara pembuatan Aplikasi Sederhana pada Windows Phone 7.1 yang saya buat.

Dalam pertemuan ini kami akan membuat ImageControl yang mana gambar ini bisa berganti jika kita klik pada gambar yang dia akan tampil pada gambar yang telah kita tentukan untuk tanpilan gambar yang kita klik.

Disini project yang saya buat sangat sederhana dalam pembuatan nya , yang saya pelajarin di kampus saya, dalam pembelajaran tutorial ini kita hanya perlu belajar dan memahami suatu projeck yang kita buat sebelum nya sehingga kiat mengerti dimana letak ToolBox nya.

Baik teman-teman, mungkin kalian pada penasaran seperti apa projeck nya saya buat ini , mari kita langsung saja kelangkah pengerjaan nya.

Dalam pengerjaan semua projeck ini semuanya sama dalam langkah awal nya yang kita buat seperti dibawah ini :

Aplikasi ImagerControl

Oke kita akan Play in ImageControl, di program  ini mengerti dulu elemen-elemen para template pada Windows Phone ini .

Maksud dari ImageControl ini kita akan membuat Image/gambar yang kita buat, dan akan menampilkan nya pada layar tersebut/ kita juga menggunakan <ScrollViewer></ScrollViewer>untuk mempermudah kita dalam menjalan kan aplikasi ini sehingga layar pada Emulator nya seperti layar sentuh ketika kita gerakan, jadi dari gambar yang satu akan menampilkan gambar yang lain pada saat kita klik.dangan menggunaka scrip atau percodingan, tanpa kita menggunakan ToolBox, karena setiap Elemen ini merupakan sebuah kelas.

-          Pertama kita buat dulu image nya ambil pada ToolBox kita gantikan nya menjadi “Myimage” didalam nama ini kita bebas membuat sesuai projeck yang sobat buat.di karnakan elemen ini merupakan sebuah kelas. Lihat gambar dibawah ini :

- memasukkan Image ke Emulator WP

-          Buat <ScrollViewer></ScrollViewer> didalam scrollViewer ini ada image-image atau gambar nya yang telah tersedia. Yang kita baut selanjutnya.lihat gambar dan di tutup dg </ScrollViewer>
 

 

-          Kedua kita buat <Grid> </Grid> nya ambil pada ToolBox , lalu kita tarik grid tersebut buat tiga Coloumn dan Tiga Row (Baris), sehingga mempermudah kita dalam menampilkan gambar<ScrollViewer> yang didalam nya terdapat terdapat image-image yang kita masukkan dalam <Grid> dan ditutup dengan  </Grid>.

-          Atur ukuran <Grid> </Grid>  nya ayang telah kita buat kan COLOM dan Baris yang kita sesuaikan, dan masukkan Image pada ToolBox sehingga pas dalam Colom dan Baris nya, dalama satu kota terdapat satu gambar/Image yang kita buat..lihat Gambar.

<Image Height="100" HorizontalAlignment="Left" Name="image1" Stretch="UniformToFill" VerticalAlignment="Top" Width="122" Source="/ImageControl;component/Images/DSCF9107.JPG" Tap="Image1" ImageFailed="image1_ImageFailed" />

                <Image Grid.Column="1" Height="100" HorizontalAlignment="Left" Name="image2" Stretch="UniformToFill" VerticalAlignment="Top" Width="122" Source="/ImageControl;component/Images/DSCF9109.JPG" Tap="Image2" ImageFailed="image2_ImageFailed" />

                <Image Grid.Column="2" Height="100" HorizontalAlignment="Left" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="122" Source="/ImageControl;component/Images/DSCF9110.JPG" Tap="Image3" ImageFailed="image3_ImageFailed" />

                <Image Grid.Row="1" Height="100" Name="image4" Stretch="Fill" VerticalAlignment="Top" Source="/ImageControl;component/Images/DSCF9112.JPG" Tap="Image4" ImageFailed="image4_ImageFailed" Margin="0,0,17,0" Grid.RowSpan="2" />

                <Image Grid.Column="1" Grid.Row="1" Height="100" HorizontalAlignment="Left" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="122" Source="/ImageControl;component/Images/DSCF9114.JPG" Tap="Image5" ImageFailed="image5_ImageFailed" />

                <Image Grid.Column="2" Grid.Row="1" Height="100" HorizontalAlignment="Left" Name="image6" Stretch="Fill" VerticalAlignment="Top" Width="122" Source="/ImageControl;component/Images/DSCF9117.JPG" Tap="Image6" />

                <Image Grid.Row="2" Height="100" HorizontalAlignment="Left" Name="image7" Stretch="Fill" VerticalAlignment="Top" Width="122" Source="/ImageControl;component/Images/DSCF9119.JPG" Tap="Image7" />

                <Image Grid.Column="1" Grid.Row="2" Height="100" HorizontalAlignment="Left" Name="image8" Stretch="Fill" VerticalAlignment="Top" Width="122" Source="/ImageControl;component/Images/DSCF9120.JPG" Tap="Image8" />

                <Image Grid.Column="2" Grid.Row="2" Height="100" HorizontalAlignment="Left" Name="image9" Stretch="Fill" VerticalAlignment="Top" Width="122" Source="/ImageControl;component/Images/DSCF9121.JPG" Tap="Image9" />

                <TextBlock Grid.ColumnSpan="3" Height="30" HorizontalAlignment="Left" Margin="101,-44,0,0" Name="MyTeksBlock" Text="" VerticalAlignment="Top" Width="202" />

            </Grid>

            </ScrollViewer>

        </Grid>

    </Grid>

-          Klik pada image yang kita masukkan pada grid tersebut ,,, masuk ke properties cari Source="" Sehingga gambar nya masuk secara otomatis kedalam image dan colom yang kita buat,,, seterusnya untuk colom yang lain yang telah kita buatkan Image pada Colom grid nya.lihat gambar

-          Cara memasukkan gambar dari computer anda kedalam aplikasi windows phone yang kita buat , gampang , Klik kana pada judul aplikasi kita => NewForder (Buat nama sesuai keinginan anda) => klik kanan pada forder yg kita buat tadi pili Existing Item => pilih gambar pada computer anda.

          cara buat forder

- untuk memasukkan gambar ke aplikasi ..

-          Selanjutnya klik dua kali pada gambar sehingga kita masuk kedalam MainPage.Xaml.cs, untuk kita membuat scrip atau coding dalam windows Phone ini sehingga aplikasi nya bisa kita jalan kan , masukkan scrip ini sesuai nama image yang anda buat pada Image yang anda masukkan dalam colom dan baris yang diatas.

-          Masukkan Scrip Di bawah ini dengan benar, jika salah akan error pada program nya,jika ada yang erro kita klik pada error tersebut , maka akan tampil langsung pada elemen yang error.

-          Dalam scrip ini untuk Source="" pada MainPage.Xaml dan pada scrip MainPage.Xaml.cs itu harus sama seperti pada gambar dibawa ini , dan seterus nya untuk gambar yang lain .

-          Sekarang coba jalan kan emulator nya ,dan lihat hasil nya,

 

Dengan hasil projeck anda seperti pada gambar ini , dan tidak ada yang error ,maka projeck anda sudah benar, dan tinggal di perdalam kan kemabali.

Demikian tutorial yang saya buat untuk rakan-rakan dalam pembuatan ImageControl ini sehingga kita muda mengerti dan memahami apa yang kita kerjakan. Mohon maaf jika ada kesalahan dalam permbuatan scrip in ,, karna saya masih dalam permbelajaran dalam pembuatan aplikasi ini.