Pengembangan Windows 10 - Pengikatan Data

Data binding adalah mekanisme dalam aplikasi XAML, yang menyediakan cara sederhana dan mudah untuk aplikasi Windows Runtime menggunakan kelas parsial untuk menampilkan dan berinteraksi dengan data. Pengelolaan data sepenuhnya terpisah dari cara data ditampilkan dalam mekanisme ini.

Data binding memungkinkan aliran data antara elemen UI dan objek data pada antarmuka pengguna. Saat pengikatan dibuat dan data atau model bisnis Anda berubah, pengikatan tersebut mencerminkan pembaruan secara otomatis ke elemen UI dan sebaliknya. Dimungkinkan juga untuk mengikat, bukan ke sumber data standar, melainkan ke elemen lain di laman. Pengikatan data dapat berupa -

Pengikatan data satu arah
Pengikatan data dua arah
Pengikatan Elemen

Pengikatan Data satu arah

Dalam pengikatan satu arah, data diikat dari sumbernya, (objek yang menyimpan data) ke targetnya (objek yang menampilkan data).

Mari kita lihat contoh sederhana dari pengikatan data satu arah. Diberikan di bawah ini adalah kode XAML di mana empat blok teks dibuat dengan beberapa properti.

<Page 
   x:Class = "OneWayDataBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:OneWayDataBinding" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel Name = "Display"> 
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0"> 
            <TextBlock Text = "Name: " Margin = "10" Width = "100"/> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Name}"/> 
         </StackPanel>
			
         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0"> 
            <TextBlock Text = "Title: " Margin = "10" Width = "100"/> 
            <TextBlock Margin = "10" Width = "200" Text = "{Binding Title}" /> 
         </StackPanel> 
			
      </StackPanel> 
   </Grid>
	
</Page>

Properti teks dari dua blok teks diatur ke “Name” dan “Title” secara statis, sedangkan dua properti Teks lainnya dari blok teks diikat ke "Nama" dan "Judul" yang merupakan variabel kelas dari kelas Karyawan seperti yang ditunjukkan di bawah ini.

using Windows.UI.Xaml.Controls;  

// The Blank Page item template is documented at  
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 
 
namespace OneWayDataBinding {
 
   /// <summary>
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage(){ 
         this.InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      } 
   } 
	
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }  
		
      public static Employee GetEmployee() {
         var emp = new Employee() {
            Name = "Waqar Ahmed", 
            Title = "Development Manager" 
         }; 
			
         return emp; 
      } 
		
   }  
}

Dalam Employee class, kami memiliki variabel Name dan Title dan satu metode statis di mana file employee objectdiinisialisasi dan akan mengembalikan objek karyawan itu. Oleh karena itu, kami mengikat properti, Nama dan Judul, tetapi kami belum memilih objek yang dimiliki properti tersebut. Cara termudah adalah dengan menetapkan suatu objekDataContext, yang propertinya kami ikat di MainPage Pembuat.

Ketika Anda menjalankan aplikasi ini, Anda dapat langsung melihatnya di file MainWindow bahwa Anda telah berhasil terikat ke Nama dan Judul objek Karyawan itu.

Pengikatan Data dua arah

Dalam Pengikatan Dua Arah, pengguna dapat memodifikasi data melalui antarmuka pengguna dan memperbarui data di sumbernya. Misalnya, jika sumber berubah saat pengguna melihat tampilan, Anda ingin tampilan diperbarui.

Mari kita lihat contoh yang diberikan di bawah ini di mana dua label, dua kotak teks dan satu tombol dibuat dengan beberapa properti dan acara.

<Page 
   x:Class = "TwoWayDataBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:TwoWayDataBinding" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
	
      <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 = "200,20,0,0">Name:</TextBlock> 
		
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "10,20,0,0" 
         Text = "{Binding Name, Mode = TwoWay}"/>  
			
      <TextBlock Name = "ageLabel" Margin = "200,20,0,0" 
         Grid.Row = "1">Age:</TextBlock> 
			
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10,20,0,0" 
         Text = "{Binding Age, Mode = TwoWay}"/>
			
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "Display" Click = "Button_Click"  
            Margin = "200,20,0,0"/> 
         <TextBlock x:Name = "txtblock" Margin = "200,20,0,0"/> 
      </StackPanel>  
		
   </Grid> 
	
</Page>

Kami dapat mengamati yang berikut -

Properti Teks dari kedua kotak teks terikat ke "Name" dan "Age" yang merupakan variabel kelas Person class seperti gambar dibawah.
Di Person class, kami hanya memiliki dua variabel - Nama dan Umur, dan objeknya diinisialisasi di MainWindow kelas.
Dalam kode XAML, kami mengikat properti - Name dan Age, tetapi kami belum memilih objek yang memiliki properti tersebut.
Cara yang lebih mudah adalah dengan menetapkan objek ke DataContext, yang propertinya kami ikat dalam kode C # seperti yang ditunjukkan di bawah ini di MainWindowconstructor.

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at 
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
	
namespace TwoWayDataBinding {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary>
   
   public sealed partial class MainPage : Page {
      Person person = new Person { Name = "Salman", Age = 26 }; 
		
      public MainPage() {
         this.InitializeComponent(); 
         this.DataContext = person; 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         string message = person.Name + " is " + person.Age + " years old"; 
         txtblock.Text = 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; 
            } 
         } 
      }
		
   } 
	
}

Ketika kode di atas dikompilasi dan dijalankan, Anda akan melihat jendela berikut. KlikDisplay tombol.

Mari kita ubah Nama dan Umur dan klik Display tombol lagi.

Anda dapat melihatnya di tombol klik ‘Display’, teks kotak teks tidak digunakan untuk menampilkan data TextBlock tetapi variabel kelas digunakan.

Saya menyarankan Anda untuk menjalankan kode di atas dengan kedua kasus untuk pemahaman yang lebih baik.

Pengikatan Elemen

Dimungkinkan juga untuk mengikat, bukan ke sumber data standar, melainkan ke elemen lain di laman. Mari kita buat aplikasi bernamaElementBindingdi mana Slider dan Rectangle dibuat dan dengan slider, lebar dan tinggi persegi panjang terikat. Diberikan di bawah ini adalah kode di XAML.

<Page 
   x:Class = "ElementBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:ElementBinding" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel VerticalAlignment = "Center" HorizontalAlignment = "Center">
		
         <Rectangle Height = "100" Width = "100" Fill = "SteelBlue"  
            RenderTransformOrigin = "0.5,0.5" Margin = "50"> 
				
            <Rectangle.RenderTransform> 
               <CompositeTransform ScaleX = "{Binding Value, ElementName = MySlider}" 
                  ScaleY = "{Binding Value, ElementName = MySlider}"/> 
            </Rectangle.RenderTransform> 
				
         </Rectangle>
			
         <Slider Minimum = ".5" Maximum = "2.0" StepFrequency = ".1"  
            x:Name = "MySlider" /> 
				
      </StackPanel> 
   </Grid> 
	
</Page>

Ketika kode di atas dikompilasi dan dijalankan, Anda akan melihat jendela berikut.

Dengan slider, Anda dapat mengubah ukuran persegi panjang seperti yang ditunjukkan di bawah ini.