개발자가 알아야할 Binding

강남 DataBinding 스타일Windows 8 앱개발자라면 꼭 알아야할

Non-DataBinding vs. DataBinding

<Grid> <TextBlock x:Name=“TitleText”/> <TextBlock x:Name=“SubTitleText”/></Grid>

TitleText.Text = item.Title;SubTitleText.Text = item.SubTitle;

<Grid> <TextBlock Text=“{Binding Title}”/> <TextBlock Text=“{Binding SubTi-tle}”/></Grid>

this.DataContext = item;

버튼 누가 지웠어 !

Non-DataBinding vs. DataBinding

<Grid> <HyperlinkButton />

</Grid>

TitleText.Text = item.Title;SubTitleText.Text = item.SubTitle;

컴파일 에러 발생 !!!

<Grid> <HyperlinkButton Content=“{Binding Title}”/>

</Grid>

this.DataContext = item;

컴파일 에러 없음UI 와 코드의 분리 개발자와 디자이너 업무영역의 분리PEACE!

이번 앨범 타이틀 곡이 뭐야 ?

문맥

문맥

너랑 나!강남스타일 !

문맥 = Context

DataContext

FrameworkElement.Data-Context

거의 모든 UI 는 FrameworkElement

가정

class Album

+ string CoverArt+ string Name+ Artist Artist class Artist

+ string ProfilerImage+ string Name

class Chart

+ Album FirstAlbum+ List<Album> Al-bums

자식에게 상속하는 DataCon-text

Visual Tree

<Grid x:Name=“LayoutRoot” DataContext=“{Binding TopAlbum}”> <Image Source=“{Binding CoverArt}”/> <TextBlock Text=“{Binding Title}”/> <StackPanel DataContext=“{Binding Artist}”> <Image Source=“{Binding ProfileImage}”/> <TextBlock Text=“{Binding Name}”/> </StackPanel></Grid>

Grid(LayoutRoot)

TextBlock

Grid

Image

TextBlock

Image

자식에게 상속하는 DataCon-text

Visual Tree

<Grid x:Name=“LayoutRoot” DataContext=“{Binding TopAlbum}”> <Image Source=“{Binding CoverArt}”/> <TextBlock Text=“{Binding Title}”/> <StackPanel> <Image Source=“{Binding Artist.ProfileImage}”/> <TextBlock Text=“{Binding Artist.Name}”/> </StackPanel></Grid>

Grid(LayoutRoot)

TextBlock

Grid

Image

TextBlock

Image

DataContext 주입법

var chart = GetKPopChart();this.DataContext = chart;

<Page> <Page.Resources> <models:KPopChart x:Key=“Chart” /> </Page.Resources> <Grid DataContext=“{StaticResource Chart}”> ….. </Grid></Page>

In C#

In XAML

<Page> <Page.DataContext> <models:KPopChart /> </Page.DataContext> <Grid > ….. </Grid></Page>

Binding

문법

• Binding– Text="{Binding Title}"

• Path ( 생략가능 )– Text=“{Binding Path=Title}”

• Source– Text=“{Binding Name, Source={StaticResource MyViewModel}}”

• Converter– Text=“{Binding PublishDate, Converter={StaticResource FamiliarDateString}}”

• ConverterParameter– Text=“{Binding Price, Converter={StaticResource CurrencyConverter}, Convert-

erParameter=\{0:C2\}}”

{Binding }

• DataContext 자기 자신 !

<TextBlock Text=“{Binding }” />

ItemsControl

ItemsControl 가족

• ListView• GridView• FlipView• ListBox• ComboBox

Control

ItemsCon-trol

Selector

ListView-Base

ListView GridView

FlipView ListBox ComboBox

.ItemsSource 프로퍼티가 여기 정의

ItemsControl 에서 DataContext 분배

var artists = new List<Artist>(){ new Artist() { Name = “ 싸이” , CoverArt=“…”}, new Artist() { Name = “ 아이유” , Cover-Art=“…”}, new Artist() { Name = “ 싸이” , CoverArt=“…”}, new Artist() { Name = “ 아이유” , Cover-Art=“…”},}

this.Artists = artist;….

<ListView ItemsSource=“{Binding Artists}” />

XAML 에서

CS 에서

싸이

아이유

싸이

아이유

ItemTemplate 과 DataContext

new Artist() { Name = “ 싸이” , CoverArt=“…”,}

ItemsSource 의 인스턴스 하나가ListViewItem 하나의 DataContext 가 된다 .

<ListView.ItemTemplate> <DataTemplate> <Grid> <StackPanel> <Image Source=“{Binding Cov-erArt}” /> <TextBlock Text=“{Binding Name}” /> </StackPanel> </Grid> </DataTemplate></ListView.ItemTemplate>

싸이

In the hood

protected override void PrepareContainerForItemOverride(DependencyObject element, object item){

var contentControl = element as ContentControl;

contentControl.ContentTemplate = this.ItemTemplate;contentControl.DataContext = item;

}

ItemsControl 의 virtual PrepareContainerForItemOverride(…) 에서

INotifyPropertyChangedINotifyCollectionChanged

약속

컨트롤은 INotifyPropertyChanged.PropertyChanged 를 구독합니다 .컨트롤은 INotifyCollectionChanged.CollectionChanged 를 구독합니다 .

public abstract class BindableBase : INotifyPropertyChanged

public class ObservableCollection<T> : Collection<T>, INotifyCollection-Changed

Common/BindableBase.cs 에서

System.Collections.ObjectModel

이미 구현되어 있는 것

public abstract class SampleDataCommon : App4.Common.BindableBase

private string _title = string.Empty;public string Title{ get { return this._title; } set { this.SetProperty(ref this._title, value); }}

protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null){ if (object.Equals(storage, value)) return false;

storage = value; this.OnPropertyChanged(propertyName); return true;}

DataModel/SampleDataSource.cs 에서

프로퍼티 예 : Title

In the Hood

List<Artist> vs. ObservableCollection<Artist>

this.Artist.Add(new Artist()); this.Artist.Add(new Artist());

싸이

아이유

싸이

싸이

아이유

싸이

아이유

Converter

어떤 필요 , 어떤 니즈 ?

public List<string> Artists { get; set; }

…

Artists = new List<string>(){ “ 싸이” , “ 아이유” ,};

너랑 나랑 강남스타일싸이 , 아이유

샘플 ArtistConverternamespace MyApp{ public class ArtistConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { // null 체크 , value 가 Ienumerable 타입이 아닐 때 예외처리 ( 생략 )

var list = value as IEnumerable; StringBuilder sb = new StringBuilder(); foreach (var item in list) { if (sb.Length > 0) sb.Append(“, “);

sb.Append((string)item); }

return sb.ToString(); } }}

사용법

너랑 나랑 강남스타일싸이 , 아이유

인스턴스 생성 ( 어딘가에 ) -> 바인딩 식에서 잘 사용In MyView.xaml (or App.xaml)<Page> <Page.Resources> <conv:ArtistConverter x:Key=“ArtistConverter”/> </Page.Resources> <Grid x:Name=“LayoutRoot”> … <TextBlock Text=“{Binding Artists,

Converter={StaticResource ArtistConverter}”/> </Grid></Page>

Blend 도와줘 !

Sample ProjectCode Review

GridApp 샘플 프로젝트에서

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState){ // TODO: Create an appropriate data model for your problem domain to replace the sample data var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter); this.DefaultViewModel["Groups"] = sampleDataGroups;}

<common:LayoutAwarePage x:Name="pageRoot" x:Class="App4.GroupedItemsPage" DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}“

… <CollectionViewSource x:Name="groupedItemsViewSource" Source="{Binding Groups}"

GroupedItemsPage.xaml.cs 에서

GroupedItemsPage.xaml 에서

FIN즐거운 해커쏜 (θ) 되세요 !