Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
강남 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,188 views

Published on

Published in: Business, Technology
  • Be the first to comment

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즐거운 해커쏜(θ) 되세요!

×