Create ListBox Using Data Sample

Hi hi 😀

Artikel ini merupakan artikel lanjutan dari How to Create Data Sample Using Expression Blend.
Jadi dianjurkan membaca artikel sebelumnya, sebelum membaca artikel ini :”)
Here we go…..

Yap, seperti biasa  buka Expression Blend -> New Project -> Windows phone app
Edit seperlunya.

Pada Tab Assets -> Controls -> ListBox

TabListBox

Drag ListBox ke ContentPanel

ListBoxContentPanel

Lalu klik kanan pada control ListBox -> Reset Layout -> All

ListBoxReset

Maka kita sekarang mempunyai sebuah ListBox pada ContentPanel
Lalu dengan menggunakan Sample data yang telah kita buat pada artikel sebelumnya

Drag Sample Data ke dalam control ListBox
Pada Tab Data -> Collection -> Drag to ContentPanel

DragSampleData

Selanjutnya, mari kita lakukan editing pada struktur dari ListBox nya agar terlihat lebih rapi
Klik kanan pada [ListBox] -> Edit Addiotional Templates -> Edit Generated Items [ItemTemplate] -> Edit Current

ListBoxEdit

Maka kita akan melihat tampilan perubahan dari Emulator, Tab Objects and Timeline, dan  Tab Properties seperti dibawah ini

ListBoxView

Ubah urutan pada Tab Objects and Timeline menjadi seperti ini

ListBoxOrder

Lalu beri nama masing-masing ketiga control tersebut menjadi img, txBlkTitle, dan txBlkDate
Dengan double klik pada controlnya

ListBoxRename

Lalu mari kita urutkan dengan image sebelah kiri dan tulisan disebelah kanan
Dengan menggunakan StackPanel

Tab Assets -> Controls -> Panel -> StackPanel -> Drag ke ItemTemplate di bawah [StackPanel]
Selanjutnya lakukan ordering sehingga menjadi seperti ini

ListBoxOredring

Setelah itu pada Tab Objects and Timeline -> [ItemTemplate] -> Klik [StackPanel]
Lalu ke Tab Properties -> Ubah Orientation = Horizontal

ListBoxOrientation

Pada Emulator klik img lalu edit perbesar  sehingga sesuai dengan tulisan disebelah kanannya
Dan atur margin, size, dan color di Tab Properties pada setiap controlnya sehingga terlihat lebih rapi seperti dibawah ini

ListBoxGood

Setelah marilah kita mendeploy project tersebut
daaaannnn…….
Sim salabin abra kadabra

ListBoxResult

Cukup sekian sharing-mensharing kita kali ini
If you’ve a question, don’t hesitate to comment
Okay 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s