Hello, bound world!

Sama seperti saat kita memulai tutorial ini dengan contoh klasik "Hello World!", kami akan menunjukkan padamu betapa mudahnya menggunakan data binding di WPF dengan contoh "Hello, bound world". Mari lansung saja dan kemudian saya akan jelaskan setelahnya:

<Window x:Class="WpfTutorialSamples.DataBinding.HelloBoundWorldSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="HelloBoundWorldSample" Height="110" Width="280">
    <StackPanel Margin="10">
		<TextBox Name="txtValue" />
		<WrapPanel Margin="0,10">
			<TextBlock Text="Value: " FontWeight="Bold" />
			<TextBlock Text="{Binding Path=Text, ElementName=txtValue}" />
		</WrapPanel>
	</StackPanel>
</Window>

Contoh sederhana ini menunjukkan bagaimana cara kita menghubungkan value dari TextBlock agar sama dengan properti dari TextBox. Seperti yang kamu lihat dari screenshot, TextBox secara otomatis terupdate saat kamu menginput teks ke dalam TextBox. Dalam dunia yang tak terhubung, ini membutuhkan event listen pada TextBox dan kemudian mengpdate TextBlock setiap kali teks berubah, tapi dengan data binding, koneksi ini bisa terjadi hanya dengan fungsi markup.

Syntax Binding

Semua sihir terjadi diantara kurung kurawal, dimana XAML membungkus markup extension. Untuk data binding, kita menggunakan Binding extension, yang mengijinkan kita untuk mendeskripsikan hubungan binding untuk properti teks. dalam bentuk paling sederhana, binding terlihat sebagai berikut:

{Binding}

This simply returns the current data context (more about that later). This can definitely be useful, but in the most common situations, you would want to bind a property to another property on the data context. A binding like that would look like this:

{Binding Path=NameOfProperty}

The Path notes the property that you want to bind to, however, since Path is the default property of a binding, you may leave it out if you want to, like this:

{Binding NameOfProperty}

Kau akan melihat begit banyak contoh berbeda, beberapa darinya dimana path secara eksplisit didefinisikan dan beberapa dibiarkan. Pada akhirnya semua bergantung padamu.

A binding has many other properties though, one of them being the ElementName which we use in our example. This allows us to connect directly to another UI element as the source. Each property that we set in the binding is separated by a comma:

{Binding Path=Text, ElementName=txtValue}

Ringkasan

Ini hanya pandangan sekilas dari semua kemungkinan bnding di WPF. Di bab-bab selanjutnya, kita akan mempelajari lebih banyak dari mereka, untuk menunjukkan kepada Anda seberapa hebatnya data binding.