Silverlight - Pengikatan Data
Pengikatan data adalah mekanisme dalam aplikasi Silverlight, yang menyediakan cara sederhana dan mudah untuk aplikasi Windows Runtime menggunakan kelas parsial untuk menampilkan dan berinteraksi dengan data. Pengelolaan data dipisahkan seluruhnya, dari cara data ditampilkan dalam mekanisme ini. Data binding memungkinkan aliran data antara elemen UI dan objek data pada antarmuka pengguna. Ketika pengikatan dibuat dan data atau model bisnis Anda berubah, maka itu akan mencerminkan pembaruan secara otomatis ke elemen UI dan sebaliknya. Dimungkinkan juga untuk mengikat, bukan ke sumber data standar, melainkan ke elemen lain di laman.
Data binding terdiri dari dua jenis berikut -
- Pengikatan data satu arah
- Pengikatan data dua arah
Pengikatan Data satu arah
Dalam pengikatan data satu arah, data diikat dari sumbernya (yaitu objek yang menyimpan data) ke targetnya (yaitu objek yang menampilkan data).
Mari kita lihat contoh sederhana dari data binding satu arah.
Diberikan di bawah ini adalah kode XAML di mana dua label, dua kotak teks dan satu tombol dibuat dengan beberapa properti.
<UserControl x:Class = "DataBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<TextBlock Name = "nameLabel" Margin = "2">Name:</TextBlock>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
Text = "{Binding Name, Mode=OneWay}"/>
<TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">Age:</TextBlock>
<TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin="2"
Text = "{Binding Age, Mode = OneWay}"/>
<StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
<Button Content = "_Show..." Click = "Button_Click" />
</StackPanel>
</Grid>
</UserControl>Kami mengamati hal-hal berikut -
Properti teks dari kedua kotak teks terikat ke "Name"Dan"Age", Yang merupakan variabel kelas dari Person kelas seperti yang ditunjukkan di bawah ini.
Di Person kelas, kami hanya memiliki dua variabel Name dan Age, dan objeknya diinisialisasi di MainPage kelas.
Dalam kode XAML, kami mengikat properti Name dan Umur, tapi kami belum memilih properti mana yang menjadi milik objek.
Cara yang mudah adalah dengan menetapkan suatu objek DataContext yang propertinya kita ikat dalam kode C # masuk MainPage konstruktor seperti yang ditunjukkan di bawah ini.
using System.Windows;
using System.Windows.Controls;
namespace DataBinding {
public partial class MainPage : UserControl {
Person person = new Person { Name = "Salman", Age = 26 };
public MainPage() {
InitializeComponent();
this.DataContext = person;
}
private void Button_Click(object sender, RoutedEventArgs e) {
string message = person.Name + " is " + person.Age;
MessageBox.Show(message);
}
}
public class Person {
private string nameValue;
public string Name {
get { return nameValue; }
set { nameValue = value; }
}
private double ageValue;
public double Age {
get { return ageValue; }
set {
if (value != ageValue) {
ageValue = value;
}
}
}
}
}Biarkan kami menjalankan aplikasi ini dan Anda dapat segera melihat di halaman web Anda bahwa kami telah berhasil mengikat Nama dan Usia objek Orang itu.
Saat Anda menekan Show tombol, itu akan menampilkan nama dan usia di kotak pesan.
Mari kita ubah Name dan Age di kotak dialog di atas.
Sekarang, jika Anda mengklik Show tombol, itu akan menampilkan pesan yang sama lagi.
Ini karena data-bindingmode disetel ke satu arah dalam kode XAML. Untuk menampilkan pesan yang diperbarui, Anda perlu memahami pengikatan data dua arah.
Pengikatan data dua arah
Di two-way binding, pengguna dapat mengubah data melalui antarmuka pengguna dan memperbarui data di sumbernya. Jika sumber berubah saat pengguna melihat tampilan, Anda ingin tampilan diperbarui.
Mari kita lihat contoh yang sama tetapi hanya mengubah mode pengikatan dari pengikatan satu arah ke pengikatan dua arah dalam kode XAML seperti yang ditunjukkan di bawah ini.
<UserControl x:Class = "DataBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<TextBlock Name = "nameLabel" Margin = "2">_Name:</TextBlock>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
Text = "{Binding Name, Mode=TwoWay}"/>
<TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</TextBlock>
<TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2"
Text = "{Binding Age, Mode = TwoWay}"/>
<StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
<Button Content = "_Show..." Click = "Button_Click" />
</StackPanel>
</Grid>
</UserControl>Mari kita jalankan aplikasi ini lagi dan Anda dapat melihat output yang sama.
Mari kita ubah Name dan Age di kotak dialog di atas.
Sekarang, jika Anda mengklik Show tombol itu akan menampilkan pesan yang diperbarui.
