Silverlight-데이터 바인딩

데이터 바인딩은 부분 클래스를 사용하는 Windows 런타임 앱이 데이터를 표시하고 상호 작용하는 간단하고 쉬운 방법을 제공하는 Silverlight 응용 프로그램의 메커니즘입니다. 데이터 관리는이 메커니즘에서 데이터가 표시되는 방식과 완전히 분리됩니다. 데이터 바인딩을 사용하면 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 및 Age, 그러나 객체에 속하는 속성을 선택하지 않았습니다.
쉬운 방법은 객체를 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; 
            } 
         } 
      } 
   } 
}

이 응용 프로그램을 실행하면 웹 페이지에서 해당 Person 개체의 Name 및 Age에 성공적으로 바인딩되었음을 즉시 확인할 수 있습니다.

누를 때 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 버튼을 누르면 업데이트 된 메시지가 표시됩니다.