Implementasi Fitur-Fitur Aplikasi "Guess The Code" - Part 2

6. Button Visibility
Ketika kita menjawab dengan jawaban yang benar, akan muncul tombol Next Level >. Kita membuat sebuah button tidak kelihatan dengan membuat Visibility-nya menjadi Collapsed seperti ini

<Button x:Name="NextBtn" Content="Click" Visibility="Collapsed"/>

Agar buttonnya muncul saat kita klik button Submit, pada event handler button Submit tersebut kita membuat Visibility dari tombol NextBtn menjadi Visible dengan baris kode seperti ini

NextBtn.Visibility = Visibility.Visible;

7. Data Binding
Konsep Data Binding digunakan untuk membuat suatu fitur aplikasi bersifat dinamis dengan menulis kode yang lebih sedikit dari pada membuat fitur yang bersifat statis. Pada aplikasi "Guess The Code", akan muncul tanda benar/salah saat kita meng-submit jawaban

Namun tandanya akan berubah ketika jawaban yang kita masukkan benar

Biasanya kita menaruh gambar dengan memasukkan source gambar secara statis seperti ini.

<Image Source="Gambar.jpg"/>

Agar gambar tersebut bersifat dinamis, kita memakai data binding seperti contoh berikut ini

<Image Source="{Binding Text, 
                ElementName=y1, 
                Mode=OneWay, 
                UpdateSourceTrigger=PropertyChanged}" 
                Width="30"/>

Kita akan mem-binding sebuah text dari elemen dengan nama y1, maka kita akan membuat sebuah TextBlock dengan nama y1, tapi text ini tidak untuk ditampilkan. Jadi kita membuat Visibility pada TextBlock ini menjadi Collapsed

<TextBlock x:Name="y1" Visibility="Collapsed"/>

Gambar tersebut akan muncul/berubah ketika kita meng-submit jawaban kita, agar pada saat kita meng-klik Submit muncul gambar, pada event handler di button tersebut kita membuat text pada elemen y1 menjadi nama gambar yang kita inginkan. Misalnya pada aplikasi "Guess The Code", jika jawabannya benar, maka muncul tanda check. Namun jika jawaban salah, maka muncul tanda cross.

Jadi, kode pada event handler-nya seperi ini

if (stdio.Text == "<stdio.h>")
{
   y1.Text = "Assets/GreenCheck.JPG";
}
else
{
   y1.Text = "Assets/RedCross.JPG";
}

Jika jawaban yang kita submit adalah <stdio.h>, maka text pada y1 akan menjadi Assets/GreenCheck.JPG. Karena source gambar tadi kita binding dengan elemen y1, maka source gambar tersebut adalah text yang ada pada y1. Jadi kode imagenya saat aplikasi berjalan akan menjadi seperti ini

<Image Source="Assets/GreenCheck.JPG"/>