Data binding - A Developers Guide to Windows 10 (x:Bind에 대한 정리)

[카키104]

원본 : http://kaki104.tistory.com/392

Data binding - A Developers Guide to Windows 10 part 4

http://www.microsoftvirtualacademy.com/training-courses/a-developers-guide-to-windows-10

1,2,3번까지는 평범한 내용으로 포스트를 할 필요성이 없었는데, 가장 궁금했던 내용 중에 하나인 x:Bind에 대한 내용을 중점적으로 다루는 섹션이라 4번은 포스트를 할 필요가 있다고 생각했다.

1. x:Bind property

일단 디자인 타임뷰를 보자

왼쪽은 클래식 바인딩을 이용한 화면이고, 오른쪽은 x:Bind를 이용해서 만들은 화면이다. 일단, 디자인 타임에 데이터가 뿌려지는 모습을 볼 수 없다.

Xaml 코드를 보자

클래식 바인딩에 사용한 코드이다.

        <ListView ItemsSource="{Binding Files}" Header="Classic" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="pcl:ISkyDriveItemCommonM">
                    <Grid>
                        <TextBlock Text="{Binding Name, Mode=OneWay}"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

x:Bind에서 사용한 코드이다.

        <ListView ItemsSource="{x:Bind ViewModel.Files}" Grid.Column="1"
                  Header="Compiled" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="pcl:ISkyDriveItemCommonM">
                    <Grid>
                        <TextBlock Text="{x:Bind Name}"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

ViewModel이라는 글씨와 pcl이라는 내용에 대해 설명을 하면..

x:Bind를 사용하기 위해서는 코드비하인드 페이지(MainPage.xaml.cs)에 뷰모델을 정확하게 알려주어야 한다.

MainPage.xaml.cs

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            DataContextChanged += (s, e) =>
            {
                ViewModel = DataContext as MainPageViewModel;
            };
        }

        public MainPageViewModel ViewModel { get; set; }
    }

간단하게 만든 예제이기 때문에 DataContext에 ViewModel을 자동으로 인스턴스 하도록 만들어 놓았다.

그래서, DataContext에 인스턴스된 ViewModel을 ViewModel이란 프로퍼티에 넣어주고, x:Bind ViewModel.Files라고 xaml에서 사용해야지만 된다. 그러지 않으면

아래와 같은 빌드 에러 메시지를 만나게 된다.

Severity Code Description Project File Line
Error  Invalid binding path 'Files' : Property 'Files' can't be found on type 'MainPage' App1 C:\Samples\App1\App1\MainPage.xaml 37

또한, ItemTemplate에서 x:Bind를 사용하기 위해서는 정확한 데이터 타입을 알려줘야 하는데(Dock type을 지원하지 않음) ISkyDriveItemCommonM이란 인터페이스는 PCL 프로젝트에 선언되어 있기 때문에

xmlns:pcl="using:UWP.PCL"

위와 같이 pcl에 대한 정의를 하고나서 사용해야 사용이 가능하다.

x:Bind는 바인딩을 하는 과정이 쉽지 않다. 자동화 툴과 인텔리센스가 지원되지 않기 때문에 모든 내용을 직접 입력할 수 밖에 없다. 아직까지는 사용하기 무지 귀찮다;;;

2. x:Bind event

x:Bind는 이벤트를 뷰모델의 메소드와 바로 연결 시킬 수 있다.

        <Button Grid.Row="1" Grid.Column="0" Content="Method Binding Test"
                Click="{x:Bind ViewModel.MethodExecute}"/>

역시 ViewModel을 앞에 붙여주고, 메소드 이름을 입력한다. 빌드할 때 이름이 조금만 틀려도 오류가 발생한다.

3. 실행 결과

버튼 클릭

4. x:Bind가 기본의 Binding의 성능에 문제 때문에 나온 것이라 하더라도, 이 것을 사용해서 DI가 깨지게 된다면 문제가 있는 것이 아닐까 생각해본다.

컴파일시에 오류가 발생한다는 의미는 뷰모델과 뷰가 완전이 Tightly하게 붙어 버리게 되는 것인데..그러면, MVVM 패턴을 사용하는 의미가 없는 것 아닌가?? Unit Test는 가능 할 것 같지만....

아직 개선의 여지가 남아 있는 부분이지만, 지금의 상태를 봐서는 성능이 아주 떨어지는 부분에만 사용해야지 전체적으로 사용하기는 무리가 있을 것 같다.

5. 셈플

Windows 10 10074, Visual Studio 2015 RC에서 작성

http://1drv.ms/1RBkRDu