NonData Binding vs Data Binding Grid Text Block
Non-Data. Binding vs. Data. Binding <Grid> <Text. Block x: Name=“Title. Text”/> <Text. Block x: Name=“Sub. Title. Text”/> </Grid> Title. Text = item. Title; Sub. Title. Text = item. Sub. Title; <Grid> <Text. Block Text=“{Binding Title}”/> <Text. Block Text=“{Binding Sub. Title}”/> </Grid> this. Data. Context = item;
Non-Data. Binding vs. Data. Binding <Grid> <Hyperlink. Button /> <Grid> <Hyperlink. Button Content=“{Binding Title}”/> </Grid> Title. Text = item. Title; Sub. Title. Text = item. Sub. Title; this. Data. Context = item; 컴파일 에러 발생!!! 컴파일 에러 없음 UI와 코드의 분리 개발자와 디자이너 업무영역의 분리 PEACE!
문맥 = Context
Data. Context
Framework. Element. Data. Context 거의 모든 UI는 Framework. Element
가정 class Chart + Album First. Album + List<Album> Albums class Album + string Cover. Art + string Name + Artist class Artist + string Profiler. Image + string Name
자식에게 상속하는 Data. Context Visual Tree Grid(Layout. Root) Image Text. Block Grid Image Text. Block <Grid x: Name=“Layout. Root” Data. Context=“{Binding Top. Album}”> <Image Source=“{Binding Cover. Art}”/> <Text. Block Text=“{Binding Title}”/> <Stack. Panel Data. Context=“{Binding Artist}”> <Image Source=“{Binding Profile. Image}”/> <Text. Block Text=“{Binding Name}”/> </Stack. Panel> </Grid>
자식에게 상속하는 Data. Context Visual Tree Grid(Layout. Root) Image Text. Block Grid Image Text. Block <Grid x: Name=“Layout. Root” Data. Context=“{Binding Top. Album}”> <Image Source=“{Binding Cover. Art}”/> <Text. Block Text=“{Binding Title}”/> <Stack. Panel> <Image Source=“{Binding Artist. Profile. Image}”/> <Text. Block Text=“{Binding Artist. Name}”/> </Stack. Panel> </Grid>
Data. Context 주입법 In C# var chart = Get. KPop. Chart(); this. Data. Context = chart; In XAML <Page> <Page. Data. Context> <Page. Resources> <models: KPop. Chart /> <models: KPop. Chart x: Key=“Chart” /> </Page. Data. Context> </Page. Resources> <Grid Data. Context=“{Static. Resource Chart}”> …. . </Grid> </Page>
Binding
문법 • Binding – Text="{Binding Title}" • Path (생략가능) – Text=“{Binding Path=Title}” • Source – Text=“{Binding Name, Source={Static. Resource My. View. Model}}” • Converter – Text=“{Binding Publish. Date, Converter={Static. Resource Familiar. Date. String}}” • Converter. Parameter – Text=“{Binding Price, Converter={Static. Resource Currency. Converter}, Converter. Parameter={0: C 2}}”
{Binding } • Data. Context 자기 자신! <Text. Block Text=“{Binding }” />
Items. Control
Items. Control 가족 • • • Control List. View Grid. View Flip. View List. Box Combo. Box Items. Control . Items. Source 프로퍼티가 여기 정의 Selector List. View. Base List. View Grid. View Flip. View List. Box Combo. Box
Items. Control에서 Data. Context 분배 CS에서 var artists = new List<Artist>() { new Artist() { Name = “싸이”, Cover. Art=“…”}, new Artist() { Name = “아이유”, Cover. Art=“…”}, } 싸이 this. Artists = artist; XAML에서 …. 아이유 <List. View Items. Source=“{Binding Artists}” /> 아이유 싸이
Item. Template과 Data. Context new Artist() { Name = “싸이”, Cover. Art=“…”, } Items. Source의 인스턴스 하나가 List. View. Item 하나의 Data. Context가 된다. 싸이 <List. View. Item. Template> <Data. Template> <Grid> <Stack. Panel> <Image Source=“{Binding Cover. Art}” /> <Text. Block Text=“{Binding Name}” /> </Stack. Panel> </Grid> </Data. Template> </List. View. Item. Template>
In the hood Items. Control의 virtual Prepare. Container. For. Item. Override(…) 에서 protected override void Prepare. Container. For. Item. Override(Dependency. Object element, object item) { var content. Control = element as Content. Control; content. Control. Content. Template = this. Item. Template; content. Control. Data. Context = item; }
INotify. Property. Changed INotify. Collection. Changed
약속 컨트롤은 INotify. Property. Changed를 구독합니다. 컨트롤은 INotify. Collection. Changed를 구독합니다. Common/Bindable. Base. cs 에서 public abstract class Bindable. Base : INotify. Property. Changed System. Collections. Object. Model public class Observable. Collection<T> : Collection<T>, INotify. Collection. Changed
이미 구현되어 있는 것 Data. Model/Sample. Data. Source. cs에서 public abstract class Sample. Data. Common : App 4. Common. Bindable. Base 프로퍼티 예 : Title private string _title = string. Empty; public string Title { get { return this. _title; } set { this. Set. Property(ref this. _title, value); } } In the Hood protected bool Set. Property<T>(ref T storage, T value, [Caller. Member. Name] String property. Name = null) { if (object. Equals(storage, value)) return false; storage = value; this. On. Property. Changed(property. Name); return true; }
List<Artist> vs. Observable. Collection<Artist> this. Artist. Add(new Artist()); 싸이 싸이 아이유
Converter
샘플 Artist. Converter namespace My. App { public class Artist. Converter : IValue. Converter { public object Convert(object value, Type target. Type, object parameter, string language) { // null 체크, value가 Ienumerable 타입이 아닐 때 예외처리 (생략) var list = value as IEnumerable; String. Builder sb = new String. Builder(); foreach (var item in list) { if (sb. Length > 0) sb. Append(“, “); sb. Append((string)item); } return sb. To. String(); } } }
사용법 인스턴스 생성 (어딘가에) -> 바인딩 식에서 잘 사용 In My. View. xaml (or App. xaml) <Page> <Page. Resources> <conv: Artist. Converter x: Key=“Artist. Converter”/> </Page. Resources> <Grid x: Name=“Layout. Root”> … <Text. Block Text=“{Binding Artists, Converter={Static. Resource Artist. Converter}”/> </Grid> </Page> 너랑 나랑 강남스타일 싸이, 아이유
Sample Project Code Review
Grid. App 샘플 프로젝트에서 Grouped. Items. Page. xaml. cs에서 protected override void Load. State(Object navigation. Parameter, Dictionary<String, Object> page. State) { // TODO: Create an appropriate data model for your problem domain to replace the sample data var sample. Data. Groups = Sample. Data. Source. Get. Groups((String)navigation. Parameter); this. Default. View. Model["Groups"] = sample. Data. Groups; } Grouped. Items. Page. xaml에서 <common: Layout. Aware. Page x: Name="page. Root" x: Class="App 4. Grouped. Items. Page" Data. Context="{Binding Default. View. Model, Relative. Source={Relative. Source Self}}“ … <Collection. View. Source x: Name="grouped. Items. View. Source" Source="{Binding Groups}"
- Slides: 34