Rabu, 30 Juli 2014

Windows 8 App: Menggunakan Scroll Viewer (menambahkan fitur scroll)


Pada kesempatan kali ini saya akan berbagi bagaimana cara menggunakan Scroll Viewer. Ini merupakan hasil dari coba-coba saya kemarin, dan mungkin ada tutorial lain yang lebih efektif dalam hal pengaplikasian Scroll Viewer ini. Meski sederhana, namun postingan kali ini masih bisa dijadikan salah satu referensi T_T :D

Sesuai dengan namanya, Scroll Viewer ini berguna untuk menambahkan fitur scroll pada halaman program jika isi/konten-nya memiliki panjang melebihi batas layar. Baiklah, berikut adalah cara menambahkan Scroll Viewer:

1. Buat Project baru. File > New > Project. Pada jendela baru yang terbuka pilih: Visual C# > Windows Store > Blank App.

2. Lihat pada panel Toolbox, drag and drop Scroll Viewer.

3. Untuk menambahkan item-item yang akan dimasukkan dalam layar scrol, cukup meletakkan kode dari masing-masing item ke dalam tag Scroll Viewer, seperti di bawah ini:

Kita juga men-drag and drop item ke Scroll Viewer, namun kita akan kesulitan menggeser itemnya ke bawah.

4. Sebelum mengisi item, kita tambahkan dulu Canvas ke dalam Scroll Viewer. Mengapa demikian? Karena jika langsung menambahkan item, maka item pertama akan tertumpuk dan hilang. Telah saya coba dengan memasukkan Text Block, kemudian saya tambahkan button dan ternyata Text Block nya menghilang.

5. Atur lebar Canvas agar selebar Scroll Viewer, dan tentukan panjangnya sesuai kebutuhan, karena kita akan membuat scrol yang ke arah bawah.

6. Tambahkan item-itemnya, hal yang perlu diperhatikan adalah item harus diletakkan di dalam tag Canvas agar posisi item nantinya berada di atas Canvas (ibarat lukisan, item-item tersebut adalah cat yang digoreskan di atas Canvas, ceilee.. :D). Kurang lebih seperti tampak pada gambar di bawah ini:

7. Jalankan aplikasi dengan menekan tombol F5 dan lihat hasilnya. Berikut adalah salah satu aplikasi saya yang memakai Scroll Viewer:



Sekian tutorial sederhana kali ini, semoga bermanfaat. Jika ada pertanyaan silakan tulis di kolom komentar.

0 comments:

Posting Komentar