MSDN WPF 샘플 따라하기 - Simple Binding

Simple Binding 따라하기

사용자 정의 클래스의 속성 값이 변경 되었을 때 UI 엘리먼트에 바인딩 되어 있는 속성 값이 동일한 시점에 변경 되는 예제 입니다.

TextBox의 Text 속성이 변경되면 TextBlock의 Text 속성이 동일한 값으로 변경되는 예제

• 사용자 정의 객체 Person 선언

1:  /// <summary>  
2:    /// 이 클래스는 단방향 및 양방향 바인딩을 지원하기 위해 INotifyPropertyChanged를 구현합니다   
3:    /// (소스가 동적으로 변경되면 UI 요소가 업데이트 됨)  
4:    /// </summary>  
5:    public class Person : INotifyPropertyChanged  
6:    {  
7:      private string _name;  
8:      public Person() { }  
9:      public Person(string value)  
10:      {  
11:        _name = value;  
12:      }  
13:      public string PersonName  
14:      {  
15:        get { return _name; }  
16:        set  
17:        {  
18:          // 속성이 업데이트 될 때마다 OnPropertyChanged 호출  
19:          if (_name != value)  
20:          {  
21:            _name = value;  
22:            OnPropertyChanged("PersonName");  
23:          }    
24:        }  
25:      }  
26:      // 이벤트 선언  
27:      public event PropertyChangedEventHandler PropertyChanged;  
28:      // OnPropertyChanged 메서드를 만들어 이벤트를 발생시킵니다.  
29:      protected void OnPropertyChanged(string name)  
30:      {  
31:        var handler = PropertyChanged;  
32:        handler?.Invoke(this, new PropertyChangedEventArgs(name));  
33:      }  
34:    }  

INotifyPropertyChanged 인터페이스를 상속 받아 PropertyChanged 이벤트를 구현 합니다. Person 객체의 PersonName 속성이 변경 될 때 마다 OnPropertyChanged 이벤트가 호출 되도록 PersonName 속성의 값 변경 시 OnPropertyChanged 이벤트를 호출 하면 준비는 끝났습니다.

• TextBox와 TextBlock의 Text 속성에 Person 객체의 PersonName 속성 연결

1:  <!-- 사용자 지정 클래스 로컬 리소스 선언 -->  
2:  <local:Person x:Key="MyDataSource" PersonName="Joe"/>  

1:  <DockPanel Width="200" Height="100" Margin="35">  
2:        <Label>Enter a Name:</Label>  
3:        <TextBox>  
4:          <TextBox.Text>  
5:            <Binding Source="{StaticResource MyDataSource}"   
6:                 Path="PersonName"   
7:                 UpdateSourceTrigger="PropertyChanged" />  
8:          </TextBox.Text>  
9:        </TextBox>  
10:        <Label>The name you entered:</Label>  
11:        <TextBlock Text="{Binding Source={StaticResource MyDataSource}, Path=PersonName}" />  
12:      </DockPanel>  

TextBox에 UpdateSourceTrigger 속성 값을 PropertyChanged로 설정하게 되면 Text 값이 입력 될 때 마다 바인딩 되어 있는 PersonName 속성값이 변경되면 바인딩 되어있는 속성의 값도 상호작용을 통해 동일하게 변경 되는 것을 볼 수 있습니다.


테스트는 전체 소스를 통해를 참고 하시기 바랍니다.

• xaml

1:  <Window x:Class="SimpleBinding.MainWindow"  
2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4:      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
5:      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
6:      xmlns:local="clr-namespace:SimpleBinding"  
7:      mc:Ignorable="d"  
8:      Title="MainWindow" Height="350" Width="525">  
9:    <Window.Resources>  
10:      <!-- 사용자 지정 클래스 로컬 리소스로 선언 -->  
11:      <local:Person x:Key="MyDataSource" PersonName="Joe"/>  
12:      <Style TargetType="{x:Type Label}">  
13:        <Setter Property="DockPanel.Dock" Value="Top" />  
14:        <Setter Property="FontSize" Value="12" />  
15:      </Style>  
16:      <Style TargetType="{x:Type TextBox}">  
17:        <Setter Property="Width" Value="100" />  
18:        <Setter Property="Height" Value="25" />  
19:        <Setter Property="DockPanel.Dock" Value="Top" />  
20:      </Style>  
21:      <Style TargetType="{x:Type TextBlock}">  
22:        <Setter Property="Width" Value="100"/>  
23:        <Setter Property="Height" Value="25"/>  
24:        <Setter Property="DockPanel.Dock" Value="Top"/>  
25:        <Setter Property="Padding" Value="3"/>  
26:      </Style>  
27:    </Window.Resources>  
28:    <!-- 다른 요소 주위에 테두리, 배경 또는 둘 다를 그릴 때 사용할 수 있는 Decorator 컨트롤 입니다. -->  
29:    <Border Margin="5" BorderBrush="Aqua" BorderThickness="1" Padding="8" CornerRadius="3">  
30:      <DockPanel Width="200" Height="100" Margin="35">  
31:        <Label>Enter a Name:</Label>  
32:        <TextBox>  
33:          <TextBox.Text>  
34:            <Binding Source="{StaticResource MyDataSource}"   
35:                 Path="PersonName"   
36:                 UpdateSourceTrigger="PropertyChanged" />  
37:          </TextBox.Text>  
38:        </TextBox>  
39:        <Label>The name you entered:</Label>  
40:        <TextBlock Text="{Binding Source={StaticResource MyDataSource}, Path=PersonName}" />  
41:      </DockPanel>  
42:    </Border>  
43:  </Window>