Silverlight - การผูกข้อมูล

การผูกข้อมูลเป็นกลไกในแอปพลิเคชัน Silverlight ซึ่งเป็นวิธีที่ง่ายและสะดวกสำหรับแอป Windows Runtime โดยใช้คลาสบางส่วนเพื่อแสดงและโต้ตอบกับข้อมูล การจัดการข้อมูลจะแยกออกจากกันโดยสิ้นเชิงจากวิธีแสดงข้อมูลในกลไกนี้ การผูกข้อมูลช่วยให้การไหลของข้อมูลระหว่างองค์ประกอบ UI และออบเจ็กต์ข้อมูลบนอินเทอร์เฟซผู้ใช้ เมื่อมีการสร้างการเชื่อมโยงและข้อมูลหรือรูปแบบธุรกิจของคุณเปลี่ยนไปข้อมูลนั้นจะแสดงการอัปเดตโดยอัตโนมัติสำหรับองค์ประกอบ UI และในทางกลับกัน นอกจากนี้ยังเป็นไปได้ที่จะเชื่อมโยงไม่ใช่กับแหล่งข้อมูลมาตรฐาน แต่เป็นการเชื่อมโยงกับองค์ประกอบอื่นในเพจ

การผูกข้อมูลมีสองประเภทต่อไปนี้ -

  • การผูกข้อมูลทางเดียว
  • การผูกข้อมูลสองทาง

การผูกข้อมูลทางเดียว

ในการผูกข้อมูลทางเดียวข้อมูลจะถูกผูกจากแหล่งที่มา (นั่นคือวัตถุที่เก็บข้อมูล) ไปยังเป้าหมาย (นั่นคือวัตถุที่แสดงข้อมูล)

ให้เราดูตัวอย่างง่ายๆของการผูกข้อมูลทางเดียว

ระบุด้านล่างคือรหัส XAML ซึ่งมีการสร้างป้ายกำกับสองกล่องข้อความสองกล่องและปุ่มเดียวด้วยคุณสมบัติบางอย่าง

<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>

เราสังเกตสิ่งต่อไปนี้ -

  • คุณสมบัติข้อความของทั้งสองกล่องข้อความผูกกับ“Name” และ“Age” ซึ่งเป็นตัวแปรคลาสของ Person คลาสดังที่แสดงด้านล่าง

  • ใน Person คลาสเรามีตัวแปรแค่สองตัว Name และ Ageและวัตถุของมันเริ่มต้นใน MainPage ชั้นเรียน

  • ในรหัส XAML เรากำลังผูกมัดกับคุณสมบัติ Name และอายุ แต่เราไม่ได้เลือกคุณสมบัติที่เป็นของวัตถุ

  • วิธีง่ายๆคือกำหนดวัตถุให้ DataContext ซึ่งคุณสมบัติที่เราผูกไว้ในรหัส C # ใน MainPage ตัวสร้างดังแสดงด้านล่าง

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; 
            } 
         } 
      } 
   } 
}

ให้เราเรียกใช้แอปพลิเคชันนี้และคุณจะเห็นในหน้าเว็บของคุณทันทีว่าเราได้ผูกมัดกับวัตถุชื่อและอายุของบุคคลนั้นสำเร็จแล้ว

เมื่อคุณกดปุ่ม Show มันจะแสดงชื่อและอายุในกล่องข้อความ

ให้เราเปลี่ยน Name และ Age ในกล่องโต้ตอบด้านบน

ตอนนี้ถ้าคุณคลิกไฟล์ Show มันจะแสดงข้อความเดิมอีกครั้ง

เนื่องจากไฟล์ data-bindingโหมดถูกตั้งค่าเป็นทางเดียวในรหัส XAML หากต้องการแสดงข้อความที่อัปเดตคุณจะต้องเข้าใจการผูกข้อมูลสองทาง

การผูกข้อมูลสองทาง

ใน two-way bindingผู้ใช้สามารถแก้ไขข้อมูลผ่านอินเทอร์เฟซผู้ใช้และอัปเดตข้อมูลนั้นในแหล่งที่มา หากแหล่งที่มาเปลี่ยนแปลงในขณะที่ผู้ใช้กำลังดูมุมมองคุณต้องการให้อัปเดตมุมมอง

ให้เราดูตัวอย่างเดียวกัน แต่เปลี่ยนโหมดการผูกจากทางเดียวเป็นสองทางในโค้ด XAML ดังที่แสดงด้านล่าง

<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>

ให้เราเรียกใช้แอปพลิเคชันนี้อีกครั้งและคุณจะเห็นผลลัพธ์เดียวกัน

ให้เราเปลี่ยน Name และ Age ในกล่องโต้ตอบด้านบน

ตอนนี้ถ้าคุณคลิกไฟล์ Show ปุ่มจะแสดงข้อความที่อัปเดต