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

2. Non-DataBinding vs. DataBinding
<Grid> <Grid>
<TextBlock x:Name=“TitleText”/> <TextBlock Text=“{Binding Title}”/>
<TextBlock x:Name=“SubTitleText”/> <TextBlock Text=“{Binding SubTitle}”/>
</Grid> </Grid>
TitleText.Text = item.Title; this.DataContext = item;
SubTitleText.Text = item.SubTitle;

3. 버튼 누가 지웠어!

4. Non-DataBinding vs. DataBinding
<Grid> <Grid>
<HyperlinkButton /> <HyperlinkButton Content=“{Binding Title}”/>
</Grid> </Grid>
TitleText.Text = item.Title; this.DataContext = item;
SubTitleText.Text = item.SubTitle;
컴파일 에러 발생!!! 컴파일 에러 없음
UI와 코드의 분리
개발자와 디자이너 업무영역의 분리
PEACE!

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

6. 문맥

7. 문맥

8. 문맥 = Context

9. DataContext

10. FrameworkElement.DataContext
거의 모든 UI는 FrameworkElement

11. 가정
class Chart
+ Album FirstAlbum
class Album
+ List<Album> Albums
+ string CoverArt
+ string Name
+ Artist Artist class Artist
+ string ProfilerImage
+ string Name

12. 자식에게 상속하는 DataContext
Visual Tree
Grid(LayoutRoot) <Grid x:Name=“LayoutRoot”
Image
DataContext=“{Binding TopAlbum}”>
<Image Source=“{Binding CoverArt}”/>
TextBlock
<TextBlock Text=“{Binding Title}”/>
Grid <StackPanel DataContext=“{Binding Artist}”>
Image <Image Source=“{Binding ProfileImage}”/>
TextBlock
<TextBlock Text=“{Binding Name}”/>
</StackPanel>
</Grid>

13. 자식에게 상속하는 DataContext
Visual Tree
Grid(LayoutRoot) <Grid x:Name=“LayoutRoot”
Image
DataContext=“{Binding TopAlbum}”>
<Image Source=“{Binding CoverArt}”/>
TextBlock
<TextBlock Text=“{Binding Title}”/>
Grid <StackPanel>
Image <Image Source=“{Binding Artist.ProfileImage}”/>
TextBlock
<TextBlock Text=“{Binding Artist.Name}”/>
</StackPanel>
</Grid>

14. DataContext 주입법
In C#
var chart = GetKPopChart();
this.DataContext = chart;
In XAML
<Page> <Page>
<Page.Resources> <Page.DataContext>
<models:KPopChart x:Key=“Chart” /> <models:KPopChart x:Key=“Chart” />
</Page.Resources> </Page.DataContext>
<Grid DataContext=“{StaticResource Chart}”> <Grid >
….. …..
</Grid> </Grid>
</Page> </Page>

15. Binding

16. 문법
• 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},
ConverterParameter={0:C2}}”

17. {Binding }
• DataContext 자기 자신!
<TextBlock Text=“{Binding }” />

18. ItemsControl

19. ItemsControl 가족
• ListView Control
• GridView
• FlipView
• ListBox ItemsControl .ItemsSource 프로퍼티가 여기 정의
• ComboBox
Selector
ListViewBase FlipView ListBox ComboBox
ListView GridView

20. ItemsControl에서 DataContext 분배
CS에서
var artists = new List<Artist>()
{ 싸이
new Artist() { Name = “싸이”, CoverArt=“…”},
new Artist() { Name = “아이
유”, CoverArt=“…”}, 아이유
new Artist() { Name = “싸이”, CoverArt=“…”},
new Artist() { Name = “아이
유”, CoverArt=“…”},
} 싸이
this.Artists = artist;
….
XAML에서
아이유
<ListView ItemsSource=“{Binding Artists}” />

21. ItemTemplate과 DataContext
new Artist()
{ 싸이
Name = “싸이”,
CoverArt=“…”,
} <ListView.ItemTemplate>
<DataTemplate>
ItemsSource의 인스턴스 하나가 <Grid>
ListViewItem 하나의 DataContext가 <StackPanel>
된다. <Image Source=“{Binding CoverArt}”
/>
<TextBlock Text=“{Binding Name}” />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>

22. In the hood
ItemsControl의 virtual PrepareContainerForItemOverride(…) 에서
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
var contentControl = element as ContentControl;
contentControl.ContentTemplate = this.ItemTemplate;
contentControl.DataContext = item;
}

23. INotifyPropertyChanged
INotifyCollectionChanged

24. 약속
컨트롤은 INotifyPropertyChanged.PropertyChanged를 구독합니다.
컨트롤은 INotifyCollectionChanged.CollectionChanged를 구독합니다.
Common/BindableBase.cs 에서
public abstract class BindableBase : INotifyPropertyChanged
System.Collections.ObjectModel
public class ObservableCollection<T> : Collection<T>, INotifyCollectionChanged

25. 이미 구현되어 있는 것
DataModel/SampleDataSource.cs에서
public abstract class SampleDataCommon : App4.Common.BindableBase
프로퍼티 예 : Title
private string _title = string.Empty;
public string Title
{
get { return this._title; }
set { this.SetProperty(ref this._title, value); }
}
In the Hood
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;
}

26. List<Artist> vs. ObservableCollection<Artist>
this.Artist.Add(new Artist()); this.Artist.Add(new Artist());
싸이 싸이
아이유 아이유
싸이 싸이
아이유

27. Converter

28. 어떤 필요, 어떤 니즈?
public List<string> Artists { get; set; }
…
Artists = new List<string>()
{
“싸이”,
“아이유”,
};
너랑 나랑 강남스타일
싸이, 아이유

29. 샘플 ArtistConverter
namespace 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();
}
}
}

30. 사용법
인스턴스 생성 (어딘가에) -> 바인딩 식에서 잘 사용
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>

31. Blend 도와줘!

32. Sample Project
Code Review

33. GridApp 샘플 프로젝트에서
GroupedItemsPage.xaml.cs에서
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;
}
GroupedItemsPage.xaml에서
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="App4.GroupedItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}“
…
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"

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