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

데이터 바인딩 팁

이전 글에서, 데이터 바인딩을 실제 프로젝트에서 어떻게 사용하는지 살펴 보았다. 이번 글에서는 좀 더 발전된 시나리오에 대해 다루어 보겠다.

컨트롤간의 바인딩

데이터 바인딩은 UI와 데이터 모델간의 동기화가 일반적이지만, 동일 페이지의 두 속성간에도 연결될 수 있다. 이것은, 타깃객체의 BindingContext를 x:Reference마크업을 이용해 설정함으로서 간단히 이루어 진다. 다음 코드는, 예제 어플리케이션의 XAML코드 이다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AdvancedDataBinding.RotationPage" Title="Rotation" Icon="xaml.png">
	<StackLayout Padding="0,20,0,0">
		<Label Text="Advanced Data Binding Demo" FontAttributes="Bold" HorizontalOptions="Center" />
		<Slider x:Name="slider" Maximum="360" />
		<Image Source="waterfront.jpg" BindingContext="{x:Reference slider}"
               Rotation="{Binding Value}" VerticalOptions="CenterAndExpand" />
		<Label BindingContext="{x:Reference slider}" HorizontalOptions="Center"
               Text="{Binding Value, StringFormat='Rotation angle: {0:F0} degrees'}" />
	</StackLayout>
</ContentPage>

Slider 컴포넌트의 이름을 “slider”로 설정하였다. 그리고, 그다음에 Image, Label 컴포넌트에 각각 BindnigContext가 “x:Reference”마크업을 이용해 “slider”로 설정되었다. 이후, Image의 Rotation속성과 Label의 Text속성에 Slider의 Value값이 사용된 것을 볼 수 있다.

(Label의 Text속성에 StringFormat사용시 쌍따옴표를 사용하지 않고 홑따옴표를 사용하여 중괄호 바깥의 쌍따움표와 중첩되지 않도록 처리한 부분에 주의하자.)

변환기

앞서 예제에서 Label에 Text속성에서 StringFormat을 사용하여 Value를 포매팅한것을 보았다. 이것은, 말그대로 형식화(Formatting)한 것이지 값에 대한 변환이라고 보긴 어렵다. 즉, 타입의 변환은 별도의 변환기를 거쳐야 한다는 것이다. 이것은 IValueConverter 인터페이스를 구현하는 클래스로 가능하다. 이 인터페이스는 Convert와 ConvertBack 메소드의 구현을 필요로 한다.
다음 코드는 예제 어플리케이션에서 사용된, IntToBooleanConverter 코드 이다.

public class IntToBooleanConverter : IValueConverter
{
	public object Convert (object value, Type targetType, object parameter, CultureInfo culture)
	{
		int minimumLength = System.Convert.ToInt32 (parameter);
		return (int)value >= minimumLength;
	}
	public object ConvertBack (object value, Type targetType, object parameter, CultureInfo culture)
	{
		// 타깃에서 소스로의 전달이 없으므로 구현하지 않음.
		throw new NotImplementedException ();
	}
}

Convert 메소드는 값이 소스객체에서 타깃객체로 전달될때 호출된다. ConvertBack은 반대로 타깃에서 소스객체로 값이 전달될 때 호출된다. TwoWay 또는 OneWayToSource 모드 바인딩시에 해당된다. 두 메소드 모두 소용 목적은 동일하므로 사용된 인자들에 대해 알아보자.

object value : 소스객체의 값
Type targetType : 타깃속성의 타입. Convert 또는 ConvertBack 메소드는 이 타입의 결과값을 리턴한다.
object parameter : 선택값으로 XAML의 Binding 마크업에서 파라미터를 전달하고자 할때 사용된다. 이 예제에서는, value와 비교하기 위한 최소값의 용도로 사용되었다.
CultureInfo culture : 지역화를 위한 포매팅이 필요할 경우 사용하기 위한 지역정보이다.

이제, XAML에서 변환기를 ResourceDictionary에 추가하고 StaticResource 마크업을 이용해 사용하면 된다. 변환기는 상태를 관리할 필요가 없으므로 여러곳에서 정적으로 사용될 수 있다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AdvancedDataBinding;assembly=AdvancedDataBinding" x:Class="AdvancedDataBinding.ConverterPage" Title="Converter" Icon="xaml.png">
	<ContentPage.Resources>
		<ResourceDictionary>
			<local:IntToBooleanConverter x:Key="intToBoolConverter" />
			<local:IntToColorConverter x:Key="intToColorConverter" />
		</ResourceDictionary>
	</ContentPage.Resources>
	<StackLayout Padding="0,20,0,0">
		<Label Text="Advanced Data Binding Demo" FontAttributes="Bold" HorizontalOptions="Center" />
		<Label Text="Enter your response (minimum 10 characters):" />
		<Editor x:Name="editor" HeightRequest="100" />
		<StackLayout Orientation="Horizontal">
			<Label Text="Number of characters:" />
			<Label Text="{Binding Source={x:Reference editor}, Path=Text.Length}"
                   TextColor="{Binding Source={x:Reference editor}, Path=Text.Length,
                               Converter={StaticResource intToColorConverter}, ConverterParameter=10}" />
		</StackLayout>
		<Button Text="Send" HorizontalOptions="Center"
                IsEnabled="{Binding Source={x:Reference editor}, Path=Text.Length,
                            Converter={StaticResource intToBoolConverter}, ConverterParameter=10}" />
	</StackLayout>
</ContentPage>

이 예제에서, 변환기는 Button의 IsEnabled 속성을 활성 또는 비활성 하는 용도로 사용되었다. 즉, 에디터의 텍스트값의 길이가 최소값 10보다 클 켱우에만 버튼이 활성화 되도록 한것이다.

정리

데이터 바인딩은 숨겨진 모델객체와 UI 사이 뿐만 아니라, 화면상의 컨트롤간에도 동일한 방식으로 바인딩이 가능하다. 이것을 가능하게 하는것이 “x:Reference” 마크업을 이용해 타깃객체에 BindingContext를 설정하는 것이다.
바인딩은 어떤 암묵적인 데이터 변환도 하지 않는다. 데이터 변환기를 통해서 바인딩 과정에 자동으로 변환이 이루어 질 수 있으며, IValueConverter 인터페이스를 구현하는 클래스를 통해 가능하다.