실버라이트 2 데이터바인딩 완전정복

1. 실버라이트2 데이터바인딩 완전정복 오일석 훈스닷넷 실버라이트 시삽 http://onestone.tistory.com onestone.oh@gmail.com

2. 차례 • 데이터바인딩 개요 • DataContext • 컬렉션 바인딩 – ListBox • 실전1– XML • 실전2 – Database and WCF

3. 데이터바인딩 개요 • UI와 데이터소스 사이에 데이터가 사용될 수 있도록 연결하는 방법 • 데이터를 표시하는 작업과 데이터를 다루는 작업을 “분리” • 비즈니스 오브젝트와 UI를 분리

4. 소스와 타겟 바인딩 타겟 바인딩 소스 DependencyObject Object Dependency Property Property • 바인딩 타겟 • 종속성 속성(Dependency Property) 만 가능 • 바인딩 소스 • CLR 오브젝트 • 컬렉션 • …

5. 데이터 바인딩개념 바인딩 타겟 바인딩 소스 DependencyObject Object 바인딩 타겟 : TextBox의 Text 속성 바인딩 소스 : string Dependency Property 문자열 바인딩 Property string bindingText = "문자열 바인딩"; DataContext = bindingText; <TextBox Text=“{Binding}” />

6. DataContext • System.Windows.FrameworkElement클래스 • DataContext속성 • SetBinding메서드 • DataContext는 부모 컨트롤에서 자식 컨트롤로 상속 • 같은 데이터 소스를 여러 컨트롤에 바인딩 할 때 사용

7. DataContext 속성 사용 • DataContext속성에 데이터 소스를 할당 • XAML에서 바인딩 표현식으로 사용 LayoutRoot.DataContext = mediaData; <TextBlockText=“{Binding '', Path=Title}” … public class MediaMetadata { public string Title { get; set; } public string Description { get; set; } public string Uploader { get; set; } public DateTime UploadTime { get; set; } public stringThumbnail { get; set; } }

8. DataContext 상속 • 최상위 Grid 컨트롤의 DataContext설정 • 자식 컨트롤에서 상속되어 여러 컨트롤에서 사용 public class MediaMetadata { public string Title { get; set; } public string Description { get; set; } public string Uploader { get; set; } public DateTime UploadTime { get; set; } public stringThumbnail { get; set; } }

9. DataContext

10. 데이터 변형 – IValueConverter 바인딩 타겟 바인딩 소스 바인딩 오브젝트 DependencyObject Object Dependency Property Property 컨버터 <TextBlockText="{BindingUploadTime, Converter={StaticResourcedateConvertor}} public DateTimeUploadTime { get; set; } public class DateToStringConverter : IValueConverter { public object Convert(…)

11. 변경통보 - INotifyPropertyChanged • 바인딩 된 데이터가 변경이 되면 즉시 UI에 반영 • 바인딩 소스 오브젝트에 반드시 INotifyPropertyChanged 인터페이스 구현 public class MediaMetadata : INotifyPropertyChanged { publiceventPropertyChangedEventHandlerPropertyChanged; … }}

12. DataContext • 데이터 변형 - IValueConverter • 데이터 변경 통보 - INotifyPropertyChanged

13. 여기서 잠깐! C# 코드에서 바인딩 하고 싶어요! • System.Windows.Data.Binding클래스 • FrameworkElement클래스의 SetBinding메서드 Binding binding = new Binding(); binding.Source = mediaData; binding.Path = new PropertyPath("Title"); txtTitle.SetBinding(TextBlock.TextProperty, binding);

14. ListBox와컬렉션 바인딩 • 컬렉션 타입의 바인딩 소스 • System.Windows.Controls.ItemsControl클래스 • Items 속성 vsItemSource속성 • ObservableCollection<T> • ListBox • DisplayMemeberPath속성 • ItemTempalte으로 랜더링 변경

15. Items vs ItemsSource –ItemsControl 클래스 Items 속성 종속성 속성 아님 바인딩 사용 불가 읽기전용 속성 Add() 메서드로 추가 ItemsSource속성 종속성 속성 바인딩에 사용 가능 IEnumerable타입 VS • 두 속성을 혼용해서 사용할 수 없음

16. 바인딩 소스– ObservableCollection<T> • 컬렉션 타입의 데이터 소스를 만들 때 ObervableCollection<T> 사용 • 엘리먼트 추가/제거될 때 자동통보 • INotifyCollectionChanged, INotifyPropertyChanged 가 내부에 구현되어 있음.

17. ItemsSource에 데이터 바인딩 • ObservableCollection로 만든 바인딩 소스를 ItemsSource에 설정 • 아이템의 Path 를 설정하지 않으면 기본 값으로 toString() 한 값이 표시됨. XAML <ListBox x:Name="listboxMediaList"/> 코드 비하인드 listboxMediaList.ItemsSource = mediaCollection;

18. DisplayMemberPath 속성 • 표시하고자 하는 Path를 설정 XAML <ListBox x:Name="listboxMediaList" DisplayMemberPath="Title" />

19. 컬렉션 바인딩 • 바인딩 소스 : ObservableCollection<T> • ListBox.ItemSource • DisplayMemberPath

20. 데이터템플릿 - ItemTemplate • ItemTemplate을 사용하여 개별 아이템을 렌더링 XAML <DataTemplate x:Key="DataTemplate1"> <Image Source=“{Binding Thumbnail}” … <TextBlock Text=“{Binding Title}” … <TextBlock Text=“{BindingUploadTime}” … </DataTemplate> <ListBox x:Name="listboxMediaList" ItemTemplate="{StaticResource DataTemplate1}"/>

21. 블렌드에서ItemTempalte 편집

22. Master/Detail 시나리오 • 마스터(ListBox)에서 아이템을 선택 • SelectionChanged이벤트 발생 • 선택된 아이템을 골라내서 • DataContext를 이용해서 선택된 아이템을 다시 바인딩 • Detail 데이터 표시

23. Master/Detail 시나리오 작동순서 Detail SelectionChanged listboxMediaList.SelectedItem 선택 gridDetail.DataContext MediaMetadata Master

24. Master/Detail 시나리오

25. 바인딩 모드 • OneTime • 초기에 한번만 바인딩하고 연결이 끊어짐. • OneWay • 소스에서 타겟으로 바인딩 • 소스 데이터가 변경되면 타겟으로 통보되어 변경됨 • TwoWay • 소스타겟, 타겟소스 양방향 바인딩 • 사용자가 UI에 표시된 값을 변경하면 소스에 반영됨

26. TwoWay 바인딩 모드

27. PropertyChanged CollectionChanged 데이터 소스 ObservableCollection <MediaMetadata> … MediaMetadata : INotifyPropertyChanged 변경 Uploader속성 …

28. 유효성체크–TwoWay 바인딩에서 • TwoWay바인딩일 때 입력되는 값의 유효성 체크 바인딩 타겟 바인딩 소스 Validation DependencyObject Object Dependency Property Property 바인딩 오브젝트 Converter

29. Validation 설정과 처리 XAML Text="{BindingViewCount, Mode=TwoWay, NotifyOnValidationError=true,ValidatesOnExceptions=true}" • 2가지 경우에 BindingValidationError이벤트 발생 • 바인딩 소스 오브젝트의 Set 접근자에서 예외발생 • 바인딩 엔진의 타입 컨버터에서 예외발생 • BindingValidationError이벤트 핸들러에서 처리

30. 데이터 바인딩 Validation • XAML 표현식 • NotifyOnValidationError=true, ValidatesOnExceptions=true • 데이터 소스의 Setter에서 예외 발생시킴 • BindingValidationError이벤트

31. XAML의 바인딩 표현식 정리 • < … property={Binding Path, binding속성들}

32. 여기까지 … • 실버라이트 데이터바인딩의 모든 내용 • 완전정복? • 한가지 아쉬운 점 외부의 데이터를 사용했으면 좋겠는데…

33. 데이터 서비스 • 실버라이트2와 연동 가능한 데이터 서비스의 종류 실버라이트2 REST SOAP/WS RSS/ATOM JSON POX REST:Representational State Transfer, POX: Plain Old XML

34. 실전 데이터 바인딩 1 – XML 소스바인딩 • 데이터 소스가 XML 파일 • WebClient클래스 • 비동기로XML 데이터 다운로드 : OpenReadAsync() 메서드 • 가져온 데이터 가공 • LINQ to XML 로 원하는 데이터 추출 • ObservableCollection<T> 로 변환 • ListBox.ItemSource에 데이터 바인딩

35. 실전 데이터 바인딩2 – WCF, 데이터베이스 • LINQ to SQL • WCF Service 참고자료 Displaying SQL Database Data in a DataGrid using LINQ and WCF http://silverlight.net/learn/tutorials/sqldatagrid.aspx

36. Resources –Silverlight2 DataBinding • MSDN Silverlight2 DataBinding • http://msdn.microsoft.com/en-us/library/cc278072(VS.95).aspx • MSDN Binding to a Collection and Creating a Master/Details View • http://msdn.microsoft.com/en-us/library/cc645060(VS.95).aspx • MSDN Binding Markup Extension • http://msdn.microsoft.com/en-us/library/cc189022(VS.95).aspx • DataBinding Tutorial – by Jesse Liberty • http://silverlight.net/learn/tutorials/databinding.aspx • Screencasts for Silverlight 2 - Data Binding UI to .NET Classes • http://silverlight.net/learn/learnvideo.aspx?video=66665 • Data and Silverlight 2: Data Binding • http://www.simple-talk.com/dotnet/.net-framework/data-and-silverlight-2-data-binding/ • ScottGu’s Tutorial Part 5 - Using the ListBox and DataBinding … • http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-5-using-the-listbox-and-databinding-to-display-list-data.aspx

37. Resources – Silverlight • Official community : http://silverlight.net • MSDN : http://msdn.microsoft.com/en-us/library/bb404700(VS.95).aspx • Expression Studio community: http://www.microsoft.com/expression/community/default.aspx • 국내 커뮤니티 • 훈스닷넷: http://hoons.kr • 네이버 실버라이트 카페 ; http://cafe.naver.com/mssilverlight • 네이버 Expression 카페 ; http://cafe.naver.com/expressionstudio • 국내 블로거 • 유령회사 공도소프트 : http://gongdosoft.com • 길버라이트: http://gilverlight.net/