1.
www.topcredu.co.kr
작성자 : 이종철
4.7.4 MVVM에서 데이터 바인딩 사용하기
 Model-View-ViewModel (MVVM) 아키텍처 패턴은 XAML을 염두에 두고 고안되었는데 이 패
턴은 기본 데이터(모델)에서 View와 모델 (ViewModel) 사이의 중간 역할을 하는 클래스를 통
해 XAML 사용자 인터페이스(View)를 분리한다. View와 ViewModel은 주로 XAML 파일에 정
의 된 데이터 바인딩을 통해 연결되고 View의 BindingContext는 일반적으로 ViewModel의
인스턴스이다.
 우선 ViewModel이 없는 간단한 예제를 만들어 보는데 System 네임스페이스에 대한 XML 네
임스페이스(sys)를 다음과 같이 정의하여 DateTime 구조체를 사용해 보자.
xmlns:sys="clr-namespace:System;assembly=mscorlib"
 DateTime.Now 속성의 Year, Month, Day, 시간 속성을 각각의 Label 컨트롤에 바인딩 시키고
TimeOfDay 속성을 TimePicker 컨트롤에 바인딩 시키는 예제 이다.
 Grid의 BindingContext로 x:Static 키워드를 통해 DataTime.Now 속성을 정의하자. 이 경우
Grid의 자식컨트롤로 BindingContext 속성은 상속되며 이 속성을 통해 바인딩 시킬 소스 데
이터를 지정한다.

2.
<Grid BindingContext="{x:Static sys:DateTime.Now}" …>
 비주얼 스튜디오에서 크로스 플랫폼 앱 프로젝트를 생성하자.
 MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>

3.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App3"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
x:Class="App3.MainPage">
<Grid BindingContext="{x:Static sys:DateTime.Now}"
HorizontalOptions="Center" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Year, StringFormat='{0}년'}" Grid.Row="0"
Grid.Column="0"/>
<Label Text="{Binding Month, StringFormat='{0}월'}"
Grid.Row="0" Grid.Column="1"/>
<Label Text="{Binding Day, StringFormat='{0}일'}" Grid.Row="0"
Grid.Column="2"/>
<Label Text="{Binding StringFormat='time is {0:T}'}"
Grid.Row="1" Grid.ColumnSpan="3"/>
<TimePicker x:Name="timepicker" Time="{Binding TimeOfDay}"
Grid.Row="2" Grid.ColumnSpan="3"/>
</Grid>
</ContentPage>
[실행결과]