Pertemuan Kesepuluh Windows Phone - 27 November 2013

Jum'at 27 November 2013

Pertemuan Kesepuluh Windows Phone

Bismillahirrahmanirrahim

IMAGE CONTROL

Hallo teman bertemu lagi dengan saya fadli ,  pada pertemuan kali ini kita akan membahas tentang image control. oke kita langsung membuat sebuah project tentang image control..

IMAGE CONTROL 1

1. New Project (ctrl+shift+N)

2. Pilih windows Phone App + Visual C#

3. Beri nama project  “imagecontrol1” Name project jangan lupa samakan dengan Solution Name

4. Lalu browse dan pilih dimana kita akan menyimpan Folder Project aplikasi yang akan kita buat.

5. Lalu klik OK dan pilih Windows OS 7.1 lalu klik OK

6. lalu lakukan pendesainna seperti dibawah ini

Dari gambar di atas kita membutuhkan :

1 buah image control

2 buat button yang dibuat setimpa atau sejajar sehingga hanya kelihatan 1 button.

7. tambahkan sebuah folder pada project kita beri nama "images"
8. sebelum kelangkah selanjutnya kita coba gambarkan cara tampilan buttonya,,2 buah button dimasukkan dengan ukuran sama dan posisi sama

gambar diatas diambil pada saat button belum berposisi sama,setelah berposisi sama tambahkan visibility pada salah satu button berguna membuat button tidak tampak.

lihatlah script pada gambar yang di kotak hitam.

9. oke kita kelangkah selanjutnya,masukkan script ke setiap buttonnya,,

{
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl;component/Images/JKT1.jpeg", UriKind.Relative));
            myImage.Source = newImage;
            changeImageBt.Visibility = Visibility.Collapsed;
            changeBt.Visibility = Visibility.Visible;
        }

        private void changeBt_Click(object sender, RoutedEventArgs e)
        {
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl;component/Images/JKT2.jpg", UriKind.Relative));
            myImage.Source = newImage;
            changeImageBt.Visibility = Visibility.Visible;
            changeBt.Visibility = Visibility.Collapsed;
        }

10. lalu kita jalankan programnya,maka hasilnya akan seperti dibawah ini.

gambar pada saat project dijalankan pertama kali

gambar ketika kita mengklik tombol button "change"

11. selesailah pembahasan di ImageControl 1 , kita lanjut saja

IMAGE CONTROL 2

setelah berhasil pada project kedua mari kita lanjutkan ke project image control ke 2  seperti biasa :

1. New Project (ctrl+shift+N)

2. Pilih windows Phone App + Visual C#

3. Beri nama project  “imagecontrol1” Name project jangan lupa samakan dengan Solution Name

4. Lalu browse dan pilih dimana kita akan menyimpan Folder Project aplikasi yang akan kita buat.

5. Lalu klik OK dan pilih Windows OS 7.1 lalu klik OK

6. lalu lakukan pendesainna seperti dibawah ini

Gambar di atas , kita membutuhkan komponen:

1 buah image control

1 buat scroll viewer

9 buat grid

7. setelah itu sama seperti project pertama pastikan kalian membuat sebuah folder images dan isikan images yang anda perlukan didalamnya.

8. selanjutkan arahkan kursor pada salah satu grid image nya,,lalu cari event hendler "mouse enter" 

lakukan langkah ini pada setiap gridnya (9 grid)

double klik pada "mouse enter" dan masukkan penyekripan,,berikut script hasil semua grid view yang sudah melalui proses event hendler

Lalu bisa masukan script seperti yang dibawah ini:

{
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl2;component/Images/JKT1.jpeg", UriKind.Relative));
            mainImage.Source = newImage;
        }

        private void Image_MouseEnter_1(object sender, MouseEventArgs e)
        {
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl2;component/Images/JKT2.jpg", UriKind.Relative));
            mainImage.Source = newImage;
        }

        private void Image_MouseEnter_2(object sender, MouseEventArgs e)
        {
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl2;component/Images/JKT3.jpg", UriKind.Relative));
            mainImage.Source = newImage;
        }

        private void Image_MouseEnter_3(object sender, MouseEventArgs e)
        {
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl2;component/Images/JKT4.jpg", UriKind.Relative));
            mainImage.Source = newImage;
        }

        private void Image_MouseEnter_4(object sender, MouseEventArgs e)
        {
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl2;component/Images/JKT5.jpg", UriKind.Relative));
            mainImage.Source = newImage;
        }

        private void Image_MouseEnter_5(object sender, MouseEventArgs e)
        {
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl2;component/Images/JKT6.jpg", UriKind.Relative));
            mainImage.Source = newImage;
        }

        private void Image_MouseEnter_6(object sender, MouseEventArgs e)
        {
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl2;component/Images/JKT7.jpg", UriKind.Relative));
            mainImage.Source = newImage;
        }

        private void Image_MouseEnter_7(object sender, MouseEventArgs e)
        {
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl2;component/Images/JKT8.jpg", UriKind.Relative));
            mainImage.Source = newImage;
        }

        private void Image_MouseEnter_8(object sender, MouseEventArgs e)
        {
            BitmapImage newImage = new BitmapImage(new Uri("/ImageControl2;component/Images/JKT9.jpg", UriKind.Relative));
            mainImage.Source = newImage;
        } 

9. setelah itu jalankan programnya,maka hasilnya akan seperti dibawah ini

ketika kita mengklik gambar dalam kotak kecil tersebut maka gambar dalam image display akan berubah

10. selesai

sekian pembahasan tentang Image Control dari saya , semoga bermanfaat. mohon maaf apabila ada kekurangan , terimakasih :)

Pertemuan Kesembilan Windows Phone - 22 November 2013

Jum'at 22 November 2013

Pertemuan Kesembilan Windows phone

Bismillahirrahmanirrahim

Hai sobat bertemu lagi dengan saya, setelah dipending untuk pertemuan ke sembilan ini akhir nya saya dapat membahas materi "Navigation" di blog ini. Oke kita langsung saja teman.

1. New Project (ctrl+shift+N)

2. Pilih windows Phone App + Visual C#

3. Beri nama project  “tugas” Name project jangan lupa samakan dengan Solution Name

4. Lalu browse dan pilih dimana kita akan menyimpan Folder Project aplikasi yang akan kita buat.

5. Lalu klik OK dan pilih Windows OS 7.1 lalu klik OK

6. lalu lakukan pendesainna seperti dibawah ini

Gambar diatas memiliki komponen-komponen seperti dibawah ini

1 buah textbox

1 buah textblock

4 buah button

Selanjutnya yang perlu diperhatikan adalah harus adanya page yang dituju. pada latihan kali ini kita akan mencoba membuat 5 buah page dan setiap page dapat terhubung satu sama lainnya.

7. klik kanan pada project kalian lalu pilih add dan pilih new folder,,beri nama folder kalian "view"

8. selanjutnya tambahkan page.xaml sebagai page yang dibutuhkanklik kanan pada folder yang baru dibuat lalu pilih add kemudian pilih new item 

pilih windows phone potrait lalu isikan nama pagenya kemudian add,,pada latihan kali saya memberikan nama setiap page yaitu 

secondpage.xaml   sebagai page kedua

third.xaml   sebagai page ketiga

fourth.xaml sebagai page keempat

fifth.xaml sebagai page kelima

9. lalu lakukan pendesainna pada setiap pagenya,pada latihan kali ini saya menyamakan desain setiap page nya,lebih jelasnya lihat gambar dibawah ini

Desain Page pertama (mainpage.xaml)

Desain Page kedua (secondpage.xaml)

Desain Page ketiga(thirdpage.xaml)

Desain page keempat(fourthpage.xaml)

Desain Page kelima(fifthpage.xaml)

10. setelah itu masukkan script dibawah ini pada setiap page.

MainPage.xaml

Script ada di notepad

SecondPage.xaml

Script ada di notepad

ThirdPage.xaml

Script ada di notepad

Fourthpage.xaml

Script ada di notepad

Fifth.xaml

Script ada di notepad

11. setelah itu debug lah projectnya maka hasilnya akan seperti dibawah ini,,dibawah ini navigation page secara normal dan berurutan dari page satu ke dua,dua ketiga dan seterusnya. 

 lihatlah keterangan yang keluar di setiap page,yang menandakan itu berasal dari page berapa 

kemudian lihatlah gambar dibawah ini,dilakukan dengan secara acak tidak berurutan dan tidak seperti gambar diatas

lihatlah kembali keterangan yang muncul di textblock pada setiap page,itu menandakan page sebelumnya atau berasal dari page mana

Mungkin cukup sekian pembahasan dari saya , mohon maaf apabila ada kekurangan dalam pembahasan materi "NAVIGATION" ini. Sekian dan terimakasih :)

Pertemuan Kedelapan Windows Phone - 15 November 2013

Jum'at 15 November 2013

Pertemuan Ke Delapan Windows Phone

Bismillahirrahmanirrahim, Assalamualaikum Wr. Wb

UTS

Hai sobat bertemu lagi dengan saya, dipertemuan ke delapan ini saya Ujian tengah Semester (UTS). Dan di postingan kali ini saya akan mencoba menjelaskan apa yang telah saya buat di UTS. Soal UTS Windows Phone ini ada 7 soal , tapi dikarenakan waktu pengerjaan saya yg terlalu lambat (kebanyakan eror, hehehe) saya hanya mampu mengerjakan 5 soal dari 7 soal yang diberikan oleh dosen. Soalnya bisa dilihat pada gambar dibawah ini :

1.Menerima/mengirim nilai input/output dari dan ke user (10) – Accepting Input

2.Fungsi IF atau SWITCH Statement berdasarkan nilai input yang dimasukan oleh user (10) - IF atau SWITCH

3.Fungsi FOR iteration (10) - ForIteration

4.Tanggal sekarang dengan format 15 November 20013 08:00:00 (10) - DateAndTime

5.Penggunaan .NetClass (10) - PlayWithNetClass

6.Membuat Class dan Namesapce pada file yang baru (10) -  PlayWIthCollection

7.Penggunaan Collection (10) - PlayWIthCollection

Jadi disini saya sudah membuat sebuah aplikasi “Undian” , yaa mungkin sebuah aplikasi yang sederhana dan tak terlalu WAH gitu , hehe

1.Oke langsung saja kita ke project nya, jadi bisa dilihat disini saya membutuhkan beberapa element yaitu 6 TextBlock , 2 Button , 1 TextBox. Bisa dilihat pada gambar dibawah ini

2.Saya akan mencoba menjelaskan dari nomor 1, yang soalnya “Menerima/mengirim nilai input/output dari dan ke user - Accepting Input” dari soalnya ada penjelasan bahwa kita memasukan atau memberikan perintah sebuah “Accepting Input”. Accepting Input sendiri sudah kita pelajari di Pertemuan ketiga. Jawaban yang saya berikan pada soal ini bisa dilihat pada gambar dibawah ini:

3.Selanjutnya nomor 2, yang soalnya “Fungsi IF atau SWITCH Statement berdasarkan nilai input yang dimasukan oleh user - IF atau SWITCH”. IF atau SWITCH sendiri sudah dipelajari di pertemuan ketiga, jawaban yang saya berikan pada soal ini bisa dilihat pada gambar dibawah ini:

4.Selanjutnya nomor 3, yang soalnya “Fungsi FOR iteration – ForIteration” ForIteration ini sendiri sama sudah kita pelajari di pertemuan yang ketiga. Dan jawaban yag saya berikan bisa dilihat pada gambar dibawah ini:

5.Selanjutnya nomor 4, yang soalnya “Tanggal sekarang dengan format 15 November 20013 08:00:00 – DateAndTime” Date and Time ini sendiri sudah saya pelajari pada pertemuan yang ke Lima. Dan jawaban yang saya berikan bisa dilihat pada gambar dibawah ini:

6.Dan yang selanjutnya nomor 5, yang soalnya “Penggunaan .NetClass  - PlayWithNetClass” PlayWithNetClass sendiri sudah kita pelajari pada pertemuan yang ke Enam. Dan jawaban yang saya berikan bisa dilihat pada gambar dibawah ini:

7.Dan hasilnya dari semua kode yang telah saya masukan seperti ini

8.Untuk yang diberi tanda kotak , itu merupakan tampilan dari kode AcceptingInput dan IF, sedangkan gambar yang dibawah ini

9.Nah sedangkan yang diberi tanda kotak pada gambar yang di atas itu merupakan tampilan dari kode DateAndTime, sedangkan gambar yang di bawah ini:

10.Pada gambar di atas itu yang diberi tanda kotak merupakan tampilan dari kode PlayWithNetClass, menambahkan tombol button lewat kode dari MainPage.xaml.cs . dan gambar yang di bawah ini:

11.yang di beri tanda kotak pada Gambar di atas itu merupakan tampilan dari kode ForIteration. Dan berikut tampilan kesuluruhan dari semua kode yang telah dimasukan atau kode yang termasuk kriteria dari soal yang saya kerjakan ..

Mungkin untuk pertemuan sekarang dicukupkan saja , meskipun sebuah aplikasi yang saya buat bisa dibilang sederhana. Semoga bermanfaat dan terimakasih :D

Pertemuan Ketujuh Windows Phone - 8 November 2013

Jum'at 8 November 2013

Pertemuan ketujuh Windows Phone

Play With Xaml Syntax

Hai teman bertemu kembali dengan saya, pada pertemuan sekarang saya akan mencoba menjelaskan kembali tentang “Play With Xaml Syntax”. Seperti yang kita ketahui di pertemuan sebelumnya kita sering bermain dengan xaml. Dan di tutorial sekarang saya tidak akan melakukan pengkodean atau mengetik kode, namun di pertemuan kali ini saya akan mencoba menjelaskan beberapa yang saya tau atau yang dikuasai. Kita langsung saja yaa :)

1. Ok yang pertama , Klik New Project

2. Pilih windows Phone App + Visual C#

3. Disini saya memberi nama project  “XamlSyntax” Name project jangan lupa samakan dengan Solution Name

4. Lalu browse dan pilih dimana kita akan menyimpan Folder Project aplikasi yang akan kita buat.

5. Lalu klik OK dan pilih Windows OS 7.1 lalu klik OK

6. Baik mungkin kalian sudah menghadapi sebuah tampilan yang sudah tak asing lagi, disini saya akan menjelaskan beberapa yang ada di depan layar anda. Bisa diperhatikan gambar dibawah ini

7. Yaa mungkin teman-teman sudah tahu dengan gambar yang di atas, dan sekarang coba perhatikan gambar dibawah ini.

8. Gambar di atas adalah panel zoom , yang berfungsi untuk memperbesar atau memperkecil design emulatornya.

9. Coba perhatikan gambar berikutnya

10. Yang diberi tanda panah adalah Panel horizontal split dan vertical split, yang berfungsi untuk memberikan kedudukan antara desain emulator dengan daerah pengkodean.

11. Contoh dalam posisi Horizontal Split

12. Contoh dalam posisi Vertical Split

13. Oke lanjut pada gambar selanjutnya, bisa di lihat di bawah sini

14.Script koding yang berada dalam kotak merupakan kode dari element button yang berada didalam desain emulator.

15.Sebenarnyakita bisa membuat element button dengan cara men-drag dari Toolbox secara langsung, namun kita juga bisa menuliskan kode pada MainPage.xaml secara langsung.

16. Selanjutnya saya akan menjelaskan mengenai SupportedOrientation, atau bisa diliat kodenya pada gambar dibawah ini (yang di dalam kotak).

17. Apabila dijalankan aplikasinya akan menjadi seperti ini

18. Jadi ketika emulator 7.1 sudah dijalankan lalu buat emulator seperti ini, maka Si page name beserta button tidak ikut seperti emulatornya, itu fungsi dari SupportedOrientation menggunakan “Portrait” jadi maksudnya orientasi yang kita support itu hanya Portrait saja. Lalu Orientation : “Portrait” itu merupakan Default, jadi ketika emulator dibuka maka tampilannya akan portrait atu berdiri.

Lalu ikuti kode seperti gambar yang ditandai dibawah ini.

19. Kita ubah SupportdOrientation Menjadi PortraitOrLandscape dan Orientation menjadi Landscape, maksud dari shell:SystemTray.IsVisible=”False”; adalah kode dimana apakah kita akan menampilkan bar batrei dan sinyal, jika ingin menampilkan maka tuliskan kode “True” , jika tidak ingin menampilkan maka tuliskan kode “False”. Lalu kita jalankan Emulator 7.1 dan hasilnya akan seperti gambar dibawah ini.

Sekian pertemuan kali ini, sebenernya masih banyak lagi yang terdapat dalam XAML tapi karena waktu yang terbatas mungkin lain kali lagi :D mohon maaf , dan terimakasih atas waktunya, semoga bermanfaat.