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

오일석훈스닷넷 실버라이트 시삽http://onestone.tistory.comonestone.oh@gmail.com

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

데이터바인딩 개요• UI 와 데이터소스 사이에 데이터가 사용될 수 있도록

연결하는 방법 • 데이터를 표시하는 작업과 데이터를 다루는 작업을 “

분리”• 비즈니스 오브젝트와 UI 를 분리

소스와 타겟바인딩 타겟 바인딩 소스

DependencyObject

Dependency Property

Property

Object

• 바인딩 타겟• 종속성 속성

(Dependency Property) 만 가능

• 바인딩 소스• CLR 오브젝트• 컬렉션• …

바인딩 타겟 바인딩 소스

DependencyObject

Dependency Property

Property

Object

string bindingText = " 문자열 바인딩 ";DataContext = bindingText;

바인딩 소스 : string

<TextBox Text=“{Binding}” />

바인딩 타겟 : TextBox 의 Text 속성

문자열 바인딩

데이터 바인딩 개념

DataContext• System.Windows.FrameworkElement 클래스• DataContext 속성• SetBinding 메서드

• DataContext 는 부모 컨트롤에서 자식 컨트롤로 상속• 같은 데이터 소스를 여러 컨트롤에 바인딩 할 때 사용

DataContext 속성 사용• DataContext 속성에 데이터 소스를 할당

• XAML 에서 바인딩 표현식으로 사용LayoutRoot.DataContext = mediaData;

<TextBlock Text=“{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; } }

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; } }

DEMO

DataContext

바인딩오브젝트

데이터 변형 – IValueCon-verter바인딩 타겟

DependencyObject

Dependency Property

바인딩 소스

Property

Object

컨버터<TextBlock Text="{Binding Upload-Time, Converter={StaticResource dateCon-vertor}}

public DateTime UploadTime { get; set; }

public class DateToStringConverter : IValue-Converter{ public object Convert(…)

변경통보 - INotifyProperty-Changed• 바인딩 된 데이터가 변경이 되면 즉시 UI 에 반영• 바인딩 소스 오브젝트에 반드시 INotifyProper-

tyChanged 인터페이스 구현

public class MediaMetadata : INotifyPropertyChanged{ public event PropertyChangedEventHandler Proper-tyChanged; …}}

DEMO

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

여기서 잠깐 ! C# 코드에서 바인딩 하고 싶어요 !

Binding binding = new Binding();

binding.Source = mediaData;

binding.Path = new PropertyPath("Title");

txtTitle.SetBinding(TextBlock.TextProperty,

binding);

• System.Windows.Data.Binding 클래스• FrameworkElement 클래스의 SetBinding

메서드

ListBox 와 컬렉션 바인딩• 컬렉션 타입의 바인딩 소스• System.Windows.Controls.ItemsControl

클래스• Items 속성 vs ItemSource 속성

• ObservableCollection<T>• ListBox• DisplayMemeberPath 속성• ItemTempalte 으로 랜더링 변경

Items 속성

종속성 속성 아님바인딩 사용 불가

읽기전용 속성Add() 메서드로

추가

ItemsSource 속성

종속성 속성바인딩에 사용 가능

IEnumerable 타입

VS

두 속성을 혼용해서 사용할 수 없음

Items vs ItemsSource – ItemsControl 클래스

바인딩 소스– ObservableCollec-tion<T>• 컬렉션 타입의 데이터 소스를 만들 때 Oberv-

ableCollection<T> 사용• 엘리먼트 추가 / 제거될 때 자동통보• INotifyCollectionChanged, INotifyProperty-

Changed 가 내부에 구현되어 있음 .

ItemsSource 에 데이터 바인딩• ObservableCollection 로 만든 바인딩

소스를 ItemsSource 에 설정• 아이템의 Path 를 설정하지 않으면 기본

값으로 toString() 한 값이 표시됨 .

listboxMediaList.ItemsSource = media-Collection;

<ListBox x:Name="listboxMediaList"/>

XAML

코드 비하인드

DisplayMemberPath 속성• 표시하고자 하는 Path 를 설정

<ListBox x:Name="listboxMediaList" DisplayMemberPath="Title" />

XAML

DEMO

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

데이터템플릿 - ItemTemplate• ItemTemplate 을 사용하여 개별

아이템을 렌더링

<ListBox x:Name="listboxMediaList" ItemTemplate="{StaticResource DataTem-plate1}"/>

XAML

<DataTemplate x:Key="DataTemplate1"> <Image Source=“{Binding Thumbnail}” … <TextBlock Text=“{Binding Title}” … <TextBlock Text=“{Binding UploadTime}” …</DataTemplate>

DEMO

블렌드에서 ItemTempalte 편집

Master/Detail 시나리오• 마스터 (ListBox) 에서 아이템을 선택• SelectionChanged 이벤트 발생• 선택된 아이템을 골라내서

• DataContext 를 이용해서 선택된 아이템을 다시 바인딩• Detail 데이터 표시

gridDetail.DataContext

Master/Detail 시나리오 작동순서

선택

SelectionChanged

listboxMediaList.SelectedItem

MediaMetadata

Master

Detail

DEMO

Master/Detail 시나리오

바인딩 모드• OneTime• 초기에 한번만 바인딩하고 연결이 끊어짐 .

• OneWay• 소스에서 타겟으로 바인딩• 소스 데이터가 변경되면 타겟으로 통보되어 변경됨

• TwoWay• 소스타겟 , 타겟소스 양방향 바인딩• 사용자가 UI 에 표시된 값을 변경하면 소스에 반영됨

DEMO

TwoWay 바인딩 모드

……

ObservableCollection <MediaMetadata>

데이터 소스

: INotifyPropertyChanged

MediaMetadata

Uploader 속성

PropertyChanged

CollectionChanged

변경

유효성체크 – TwoWay 바인딩에서• TwoWay 바인딩일 때 입력되는 값의 유효성 체크

바인딩오브젝트

바인딩 타겟

DependencyObject

Dependency Property

바인딩 소스

Property

Object

Converter

Validation

Text="{Binding ViewCount, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExcep-tions=true}"

XAML

• 2 가지 경우에 BindingValidationError 이벤트 발생• 바인딩 소스 오브젝트의 Set 접근자에서 예외발생• 바인딩 엔진의 타입 컨버터에서 예외발생

• BindingValidationError 이벤트 핸들러에서 처리

Validation 설정과 처리

DEMO

데이터 바인딩 Validation• XAML 표현식 • NotifyOnValidationError=true, ValidatesOnEx-

ceptions=true• 데이터 소스의 Setter 에서 예외 발생시킴• BindingValidationError 이벤트

XAML 의 바인딩 표현식 정리• < … property={Binding Path, binding

속성들 }

바인딩속성 속성값Converter StaticResouce

Mode OneTime/OneWay/TwoWay

Source StaticResource

NotifyOnValidation-Error

true/false

ValidatesOnExcep-tions

true/false

TALK

여기까지 …• 실버라이트 데이터바인딩의 모든 내용• 완전정복 ?

• 한가지 아쉬운 점

외부의 데이터를 사용했으면 좋겠는데

…

데이터 서비스• 실버라이트 2 와 연동 가능한 데이터 서비스의 종류

실버라이트 2

REST SOAP/WSRSS/ATOM

JSON POX

REST:Representational State Transfer, POX: Plain Old XML

실전 데이터 바인딩 1 – XML 소스 바인딩• 데이터 소스가 XML 파일• WebClient 클래스• 비동기로 XML 데이터 다운로드 : OpenReadAsync()

메서드• 가져온 데이터 가공• LINQ to XML 로 원하는 데이터 추출• ObservableCollection<T> 로 변환

• ListBox.ItemSource 에 데이터 바인딩

실전 데이터 바인딩 2 – WCF, 데이터베이스• LINQ to SQL• WCF Service

참고자료Displaying SQL Database Data in a DataGrid using LINQ and WCFhttp://silverlight.net/learn/tutorials/sqldatagrid.aspx

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-l

istbox-and-databinding-to-display-list-data.aspx

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/