Setelah itu atur tampilan GUI-nya. Pada tab "Design", drag 1 biji textblock dan listbox (beri nama : fontlist) :
Kemudian tambahkan textbox, dan 4 buah texblock seperti terlihat di bawah :
Beri nama pada textbox sebagai "sourceText", kemudian untuk 4 biji textblock yang berada dibawahnya masing-masing bernama tb1 sampai t4. Contoh xml-nya bisa dilihat di bawah :
Pada tb2, ganti ukuran font-nya menjadi 16, tb3 menjadi 20 dan tb4 menjadi 24. Kemudian beri text pada textbox, terserah aja text-nya, klu disini :
Kemudian untuk textblok yang berada di atas listbox, textnya diganti menjadi : "Silahkan pilih jenis font :". Nah sampai disini, jika programnya kita run, hasilnya :
Beralih ke tab "source" atau file xml-nya, pada listbox, tambahkan kode xml berikut :
Kode xml tersebut akan membuat itemSource pada listbox mengacu pada Font.SystemFontFamilies yang merupakan jenis-jenis font yang terdapat dalam windows. Nah...klu projectnya di run, listbox akan berisi jenis-jenis font seperti terlihat di bawah :
Ok.... Sederhanakan... :D... Next beralih ke tb1. pada tb1 tambahkan kode xml berikut(komponen Text="TextBlock" diapus dulu tapi) :
Di sini kita menggunakan teknik "binding" untuk menghubungkan komponen-komponen dalam GUI yang telah dibuat. Perhatikan Text = "{Binding ElementName = sourceText.... Maksudnya Text pada TextBlock ini terhubung ke sourceText yang berupa TextBox. Pada TextBox terdapat element "Text", nah text ini yang diambil oleh TextBlock dan dimasukkan ke komponen text-nya. Jadi intinya apapun text yang terdapat pada sourceText akan ditampilkan pula text yang sama pada tb1 ini. Kemudian, pada fontFamiliy kita lihat terhubung ke fontList (ListBox), Pathnya adalah selectedItem. Sow... tb1 ini akan mempunya jenis font sesuai dengan yang font yang dipilih pada fontList. Untuk melihat contohnya, projectnya bisa dijalankan, kemudian ganti text pada sourceText, dan pilih-pilih jenis font pada fontlist, maka kita akan lihat perubahan langsung terjadi pada tb1 ini.
Nah gambar diatas adalah tampilan awal, Coba kita ganti text pada textBox menjadi hellow Poipo, kemudian pilih salah-satu fontlist :
Terlihat text pada tb1 secara otomatis berubah ketika text pada sourceText kita ganti. Begitu pula ketika kita memilih salah-satu jenis font pada fontlist, terlihat fontnya juga langsung berubah... :D
Nah.... 2 baris kode tersebut ditambahkan juga ke tb2, tb3, dan tb4 (jangan lupa komponen Text="TextBlock" diapus dulu):
Nah... selese deh.... Coba kita lihat hasilnya :
Yah.... Silahkan dicoba-coba.... :D
Sekian.... Semoga bermanfaat..... ;-)
