강남 DataBinding 스타일Windows 8 앱개발자라면 꼭 알아야할개발자가 알아야할 Binding
Non-DataBinding vs. DataBinding <Grid>                                 <Grid>   <TextBlock x:Name=“TitleText”/>        <Te...
버튼 누가 지웠어!
Non-DataBinding vs. DataBinding <Grid>                               <Grid>   <HyperlinkButton />                  <Hyperl...
이번 앨범 타이틀 곡이 뭐야?
문맥
문맥
문맥 = Context
DataContext
FrameworkElement.DataContext  거의 모든 UI는 FrameworkElement
가정class Chart+ Album FirstAlbum                       class Album+ List<Album> Albums                       + string Cover...
자식에게 상속하는 DataContextVisual Tree Grid(LayoutRoot)        <Grid x:Name=“LayoutRoot”      Image                             ...
자식에게 상속하는 DataContextVisual Tree Grid(LayoutRoot)        <Grid x:Name=“LayoutRoot”      Image                             ...
DataContext 주입법In C#var chart = GetKPopChart();this.DataContext = chart;In XAML<Page>                                     ...
Binding
문법•   Binding     –   Text="{Binding Title}"•   Path (생략가능)     –   Text=“{Binding Path=Title}”•   Source     –   Text=“{B...
{Binding }•   DataContext 자기 자신!    <TextBlock Text=“{Binding }” />
ItemsControl
ItemsControl 가족•   ListView                    Control•   GridView•   FlipView•   ListBox                   ItemsControl  ...
ItemsControl에서 DataContext 분배 CS에서var artists = new List<Artist>(){                                              싸이  new A...
ItemTemplate과 DataContextnew Artist(){                                           싸이  Name = “싸이”,  CoverArt=“…”,}         ...
In the hood    ItemsControl의 virtual PrepareContainerForItemOverride(…) 에서protected override void PrepareContainerForItemO...
INotifyPropertyChangedINotifyCollectionChanged
약속컨트롤은 INotifyPropertyChanged.PropertyChanged를 구독합니다.컨트롤은 INotifyCollectionChanged.CollectionChanged를 구독합니다.Common/Bindabl...
이미 구현되어 있는 것    DataModel/SampleDataSource.cs에서public abstract class SampleDataCommon : App4.Common.BindableBase    프로퍼티 예...
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 valu...
사용법인스턴스 생성 (어딘가에) -> 바인딩 식에서 잘 사용In MyView.xaml (or App.xaml)<Page>   <Page.Resources>     <conv:ArtistConverter x:Key=“Ar...
Blend 도와줘!
Sample Project Code Review
GridApp 샘플 프로젝트에서GroupedItemsPage.xaml.cs에서protected override void LoadState(Object navigationParameter, Dictionary<String...
FIN즐거운 해커쏜(θ) 되세요!
Upcoming SlideShare
Loading in …5
×

Data Binding Intro (Windows 8)

1,076 views
922 views

Published on

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,076
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Data Binding Intro (Windows 8)

  1. 1. 강남 DataBinding 스타일Windows 8 앱개발자라면 꼭 알아야할개발자가 알아야할 Binding
  2. 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. 3. 버튼 누가 지웠어!
  4. 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. 5. 이번 앨범 타이틀 곡이 뭐야?
  6. 6. 문맥
  7. 7. 문맥
  8. 8. 문맥 = Context
  9. 9. DataContext
  10. 10. FrameworkElement.DataContext 거의 모든 UI는 FrameworkElement
  11. 11. 가정class Chart+ Album FirstAlbum class Album+ List<Album> Albums + string CoverArt + string Name + Artist Artist class Artist + string ProfilerImage + string Name
  12. 12. 자식에게 상속하는 DataContextVisual 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. 13. 자식에게 상속하는 DataContextVisual 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. 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. 15. Binding
  16. 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. 17. {Binding }• DataContext 자기 자신! <TextBlock Text=“{Binding }” />
  18. 18. ItemsControl
  19. 19. ItemsControl 가족• ListView Control• GridView• FlipView• ListBox ItemsControl .ItemsSource 프로퍼티가 여기 정의• ComboBox Selector ListViewBase FlipView ListBox ComboBox ListView GridView
  20. 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. 21. ItemTemplate과 DataContextnew 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. 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. 23. INotifyPropertyChangedINotifyCollectionChanged
  24. 24. 약속컨트롤은 INotifyPropertyChanged.PropertyChanged를 구독합니다.컨트롤은 INotifyCollectionChanged.CollectionChanged를 구독합니다.Common/BindableBase.cs 에서public abstract class BindableBase : INotifyPropertyChangedSystem.Collections.ObjectModelpublic class ObservableCollection<T> : Collection<T>, INotifyCollectionChanged
  25. 25. 이미 구현되어 있는 것 DataModel/SampleDataSource.cs에서public abstract class SampleDataCommon : App4.Common.BindableBase 프로퍼티 예 : Titleprivate string _title = string.Empty;public string Title{ get { return this._title; } set { this.SetProperty(ref this._title, value); }} In the Hoodprotected 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. 26. List<Artist> vs. ObservableCollection<Artist>this.Artist.Add(new Artist()); this.Artist.Add(new Artist()); 싸이 싸이 아이유 아이유 싸이 싸이 아이유
  27. 27. Converter
  28. 28. 어떤 필요, 어떤 니즈?public List<string> Artists { get; set; }…Artists = new List<string>(){ “싸이”, “아이유”,}; 너랑 나랑 강남스타일 싸이, 아이유
  29. 29. 샘플 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(); } }}
  30. 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. 31. Blend 도와줘!
  32. 32. Sample Project Code Review
  33. 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. 34. FIN즐거운 해커쏜(θ) 되세요!

×