가장 기본적인 data binding 의 예를 살펴보면서,
data binding이라는 것이 이런거 구나 하구 느껴 보자

먼저 다음의 최종 실행 결과 화면을 보고 하나씩 만들어 나가도록 해보자



위의 실행 결과 화면, 즉 UI는 Expression Blend 를 이용하여 만들었다. UI는 중요한 부분이 아니기 때문에
적당히 만들어 보자.
여기서 중요한 것, 우리가 해볼것은 부서, 이름, 전화번호, e-mail, 주소, 입사일에 대한 data binding 방법이다.
실행 결과 화면의 솔루션 개발부, 홍길동, 등의 정보들이 바로,
Expression Blend를 이용하여 만든 간단한 UI에 바인딩된 데이터들이다. 이제 그 방법을 하나씩 알아보자

먼저 사용자 인터페이스에 연결되 화면에 뿌려줄 데이터를 만들어 보도록 하자
그러니까 data binding의 타겟에 연결되는 data binding 소스를 만들자는 것이다.
간단하게 binding 소스는 다음과 같이 생성 할 수 있다.

public class nameCard_info
{
        public string Dept { get; set; }                 //부서
        public string Name { get; set; }               //이름
        public string Tel { get; set; }                   //전화번호
        public string Email { get; set; }               //e-mail
        public string Addr { get; set; }                 //주소
        public DateTime Date { get; set; }           //입사일 
        public int Count { get; set; }                   //조회수
}

위의 클래스를 바탕으로 3명의 사람을 만들것이다. 생성은 Page.xaml의 cs 에서 다음과 같이 생성 할 것이다.
먼저
       public nameCard_info person1;
       public nameCard_info person2;
       public nameCard_info person3; 
       public nameCard_info Current_Person;

이렇게 3명의 사람을 만들고 각각 makePerson1(), makePerson2(), makePerson3() 이라는 함수를 호출하여
각각의 사람에 대한 정보를 다음과 같이 생성 할 것이다. 그리고 Current_Person 현재 UI에 나타나 있는 사람의 
정보를 저장하고 있는 변수 이다.

       private void makePerson1()
       {
            person1.Count = 0;
            person1.Dept = "솔루션 개발부";
            person1.Name = "홍길동";
            person1.Tel = "011-222-333";
            person1.Email = "
abc@def.com";
            person1.Addr = "서울시 성북구";
            person1.Date = DateTime.Now;

        }


위와 같은 형식으로 3명의 사람 정보를 생성 한다. 그리고 위의 프로그램이 실행 될 경우 처음 나오는 사람의
정보는 person1로 정하고 Current_Person을 person1을 바라보게 한다.

            Current_Person = person1;

이렇게 하고 Current_Person을 사용자 인터페이스 에 바인딩 시키면 프로그램 실행시 처음 나오는 사람의
정보는 person1 의 정보가 된다. 그리고 다음 사람 버튼을 클릭 하면 person2, person3, 다시 person1로
변하게 된다. 그리고 조회 버튼은 클릭 시 각각의 person의 조회수를 올리게 된다.


그럼 가장 중요한 data binding을 하는 방법에 대해서 살펴보자.
data binding은 다음의 함수를 통해서 실행하게 된다.
 
            private void SetDataSourceBinding()
           {
                 LayoutRoot.DataContext = Current_Person
           }

여기서 알아야 할 것은 바로 DataContext라는 속성이다. 이번 예제는 한마디로 이 DataContext 속성을 이용한
데이터바인딩이라고 할 수 있다.
DataContext는 부모 컨트롤에서 자식 컨트롤로 상속 되면 같은 데이터 소스를
여러 컨트롤에 바인딩 할 때 사용된다. 그러니까 nameCard_info라는 데이터 소스를 부서, 이름 등의 여러 컨트롤에
바인딩 하는 것이라고 할 수 있다.
사용하는 방법은 DataContext속성에 바인딩 소스로 사용할 객체를 대입 하고 나서,
xaml 에서 바인딩 표현식을 사용하면 되는 것이다.
  바인딩 된 xaml 의 소스는 다음과 같다.

        <TextBox Height="40" Width="312" FontSize="30" Canvas.Left="336" Canvas.Top="8" Text="{Binding Dept}"                  TextWrapping="Wrap" x:Name="dept_tb"/>
        
         <TextBox Height="40" Width="312" FontSize="30" Text="{Binding Name}" TextWrapping="Wrap" Canvas.Left="336" Canvas.Top="52" x:Name="name_tb"/>
        
         <TextBox Height="40" Width="312" FontSize="30" Text="{Binding Tel}" TextWrapping="Wrap" Canvas.Left="336" Canvas.Top="96" x:Name="tel_tb"/>
       
         <TextBox Height="40" Width="312" FontSize="30" Text="{Binding Email}" TextWrapping="Wrap" Canvas.Left="336" Canvas.Top="140" x:Name="email_tb"/>
        
         <TextBox Height="40" Width="312" FontSize="30" Text="{Binding Addr}" TextWrapping="Wrap" Canvas.Left="336" Canvas.Top="184" x:Name="addr_tb"/>
       
         <TextBox Height="40" Width="312" FontSize="30" Text="{Binding Date}" TextWrapping="Wrap" x:Name="date" Canvas.Left="336" Canvas.Top="230.439"/>


여기서 중요한것은 바인딩 표현식이다. <TextBox> 컨트롤의 Text 라는 속성에 다음과 같이
데이터 소스가 바인딩 되어 있는 것을 볼 수 있다.
 
          <TextBox Text="{Binding Name}" />


설명을 너무 못 한것 같은 기분이다. 그냥 전체 소스를 올리는게 나을 듯 하다.

Posted by JMSOFT

댓글을 달아 주세요

티스토리 툴바