Xamarin.Forms 데이터 바인딩 1/3

작성일   |   In   |  

데이터 바인딩 소개

데이터 바인딩은 자동으로 유저 인터페이스와 데이터를 동기화 시켜주는 기술이다. 이것은 앱이 UI를 표현하고 데이터와 상호 작용하는것을 단순하게 해준다.

데이터 바인딩 기초

데이터 바인딩은 두개의 객체를 연결한다. 하나는 소스, 다른 한쪽은 타깃이 된다. 소스객체는 데이터를 제공하고 타깃객체는 소비(표현)한다. 예를들어 Label의 Text속성은 소스객체의 문자열 속성과 바인드된다.
바인딩 개념도

이런한 데이터 바인딩의 가장 큰 장점은 뷰와 데이터간의 동기화에 관해 신경쓰지 않아도 된다는 것이다. 소스객체에 변화가 생기면 바인딩 프레임워크에 의해 자동으로 타깃객체에 반영되고, 그 반대도 마챦가지 이다.

데이터 바인딩을 하기 위해서는:

  1. 타깃객체의 BindingContext 속성이 반드시 소스객체를 가르켜야 한다.
  2. XAML에서 이것은 Binding마크업을 사용해 설정할 수 있다.

다음 코드는, accompanying sample의 일부이다.
HomagePage.xaml.cs

1
2
3
4
5
6
7
8
public partial class HomePage : ContentPage
{
	public HomePage ()
	{
		InitializeComponent ();
		BindingContext = new DetailsViewModel ();
	}
}

코드에서 먼저 바인딩될 소스객체(DetailsViewModel)을 바인딩 하였다. 이제, XAML에서 이것을 Binding마크업을 이용하여 UI와 연결만 해주면 된다.

HomePage.xaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DataBinding101.HomePage">
	<StackLayout Padding="0,20,0,0">
		<Label Text="Data Binding 101 Demo" FontAttributes="Bold" HorizontalOptions="Center" />
		<Label Text="Forename:" />
		<Entry Text="{Binding Forename, Mode=TwoWay}" />
		<Label Text="Surname:" />
		<Entry Text="{Binding Surname, Mode=TwoWay}" />
		<StackLayout Padding="0,20,0,0" Orientation="Horizontal">
			<Label Text="Your forename is:" />
			<Label Text="{Binding Forename}" />
		</StackLayout>
		<StackLayout Orientation="Horizontal">
			<Label Text="Your surname is:" />
			<Label Text="{Binding Surname}" />
		</StackLayout>
	</StackLayout>
</ContentPage>

BindingContext는 특수한 속성으로 모든 페이지 클래스에 상속된다. BindingContext에 관한 추가적인 설명은 Form Data Bindings to MVVM을 참고하자.

Binding 마크업은 Path와 Mode속성을 가진다. Path는 바인딩 하고자 하는 원본객체의 속성명 가리키며, BInding마크업의 첫번째 요소로 사용할 경우 생략이 가능하다.
Mode속성은 속성값의 변화가 영향을 줄 방향에 대해 설정한다.

  • OneWay 바인딩은 소스에서 타깃으로만 변경사항이 반영된다.
  • TwoWay 바인딩은 양방향으로 적용된다. 즉, 소스와 타깃객체가 항상 동기화 된다.
  • OnwWayToSource 바인딩은 타깃에서 소스로만 변경사항이 반영된다. 주로, 읽기전용의 바인딩 속성에 사용된다.

Mode값은 생략할 경우 OneWay가 기본이다.

속성 변경 알림

기본적으로, 타깃객체는 데이터 바인딩이 생성된 초기에만 소스객체의 값을 전달 받는다. UI가 데이터 소스와 동기화 되려면, 소스 객체에 수정이 생겼음을 타깃객체에 알려주어야 한다. 이 메커니즘은 INotifyPropertyChanged 인터페이스에 의해 제공된다. 이 인터페이스를 구현하면 어떤 데이터 컨트롤간에든 속성값의 변화를 알려줄 수 있다. 아래 코드든, 앞서 사용된 예제에서 사용한 DetailViewModel 의 소스코드 이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
public class DetailsViewModel : INotifyPropertyChanged
{
	string forename, surname;
	public string Forename {
		get {
			return forename;
		}
		set {
			if (forename != value) {
				forename = value;
				OnPropertyChanged ("Forename");
			}
		}
	}
	public string Surname {
		get {
			return surname;
		}
		set {
			if (surname != value) {
				surname = value;
				OnPropertyChanged ("Surname");
			}		
		}
	}
	public event PropertyChangedEventHandler PropertyChanged;
	protected virtual void OnPropertyChanged (string propertyName)
	{
		var changed = PropertyChanged;
		if (changed != null) {
			PropertyChanged (this, new PropertyChangedEventArgs (propertyName));
		}
	}
}

이 클래스는 Forename과 Surname속성이 변경될때마다 PropertyChanged이벤트를 발생시킨다. 즉, 사용자 이름이 입력될 경우 두개의 Label에 이름도 바로 반영이 된다.
데모

정리

데이터 바인딩은 Xamarin.Forms 앱이 데이터를 표현하고 다루는 기본적인 기술이다. 더 자세한 설명은 Data Binging Basics와 Form Data Bindngs to MVVM에서 상세히 설명하고 있다.
다음에는, 컨트롤간의 데이터 바인딩과 데이터 변환과 같은 기술에 대해 다루어 보겠다.

원본출처: https://blog.xamarin.com/introduction-to-data-binding/