[Td 2015]틱틱대도 써야 하는 windows 10 앱 개발, c# tips & tricks(송기수)
2 likes1,302 views
TechDays Korea 2015
[Td 2015]틱틱대도 써야 하는 windows 10 앱 개발, c# tips & tricks(송기수)
- 1. 송기수/ OpenSG 틱틱대도 써야 하는 Windows 10 앱 개발 C# Tips & Tricks.
- 2. 오픈에스지 • OpenSG • 기술이사 • 본 사 : 충남 아산 • 연구소 : 서울 강남 • Solution, Consulting, SI and Education Service based on Microsoft .NET Technology • 제조 자동화 설비, 실시간 모니터링, UX 14:30:38
- 3. Its all about UWP (UWP : Universal Windows Platform) 1. XAML 2. Tool 3. Databinding Agenda 14:30:38
- 4. XAML • 새로운 컨트롤 • RelativePanel • SplitView • Adaptive UI • 예)계산기, 설정창 • View States • Adaptive triggers • XAML 성능 • phase rendering • deferred loading 14:30:38
- 5. 상대적인 설정 값에 의해 자식 컨트롤을 배치 Relative Panel 레이아웃 컨트롤(Panel) Grid Stack Panel Canvas Scroll Viewer Border View Box Wrap Grid Relative Panel 14:30:38
- 6. <RelativePanel> <Rectangle x:Name="BlueRect" Height="100" Width="200" Fill="Blue" /> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red" RelativePanel.Below="BlueRect" RelativePanel.AlignHorizontalCenterWith="BlueRect" /> </RelativePanel> Relative Panel • 타 Element를 기준으로 상대적 위치, 정렬 설정 • AttachedProperty로 설정됨 14:30:38
- 7. RelativePanel • 적응형 UI 구현 최적 • 보통 Visual State와 동시 사용됨 <RelativePanel> <Rectangle x:Name="BlueRect" Fill="Blue" /> <Rectangle x:Name="RedRect" RelativePanel.Below="BlueRect" /> </RelativePanel> 정렬 AlignBottomWith AlignHorizontalCenterWith AlignLeftWith AlignRightWith AlignTopWith AlignVerticalCenterWith (패널로부터의)정렬 AlignBottomWithPanel AlignHorizontalCenterWithPanel AlignLeftWithPanel AlignRightWithPanel AlignTopWithPanel AlignVerticalCenterWithPanel 위치 Above Below LeftOf RightOf 14:30:38
- 8. 예) 14:30:38
- 11. SplitView • IsPaneOpen : True/False • DisplayMode : Inline/Overlay/CompactInline/CompactOverlay IsPaneOpen="True" IsPaneOpen="False" DisplayMode= "Inline" DisplayMode= "Overlay" DisplayMode= "CompactInline" DisplayMode= "CompactOverlay" 14:30:39
- 14. Adaptive UI • Visual States • XAML 정의 • 블랜드를 통해서 정의 가능 • 복잡하게 정의된 효과를 단순하게 선언하여 사용 • 에니메이션, 객체상태… 14:30:39
- 15. VisualState 상태 전환 방법 • VisualStateManager.Goto(element, state, transition) private void Page_SizeChanged(object sender, SizeChangedEventArgs e) { var state = string.Empty; if (e.NewSize.Width > 361) state = "MinWidth360"; else state = "MinWidth000"; VisualStateManager.GoToState(this, state, true); } 14:30:39
- 17. Adaptive triggers • 코드없이 XAML에서 설정만으로 상태전환 가능 • 제공되는 기본 트리거 • MinWindowHeight (Taller than this) • MinWindowWidth (Wider than this) <VisualState x:Name="VisualState500min"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="501" /> </VisualState.StateTriggers> </VisualState> 14:30:39
- 19. XAML 성능 • phase rendering • deferred loading 14:30:39
- 20. X:Phase rendering • 기본값 0 • 작은 값->큰값 순서로 랜더링 수행 • 값이 연속적일 필요는 없음 <DataTemplate x:DataType="model:Monster"> <Grid Width="200" Height="80"> <TextBlock Text="{x:Bind Name}" /> <TextBlock Text="{x:Bind StarSign}" x:Phase="1"/> </Grid> </DataTemplate> 14:30:39
- 21. deferred loading • 초기 로드되는 요소 최소화 • 요소가 요구되기 전까지는 loading 되지 않는다 • 요소가 요구되는 상황 1. FindName() 2. GetTemplatedChild() (ControlTemplate 일경우) 3. Storyboard & VisualStates (내부적으로 FindName호출함) <StackPanel x:Name="AdditionalProductPage" x:DeferLoadStrategy="Lazy"> <!– your lovely XAML goes here--> </StackPanel> 14:30:39
- 22. Demo • phase rendering • deferred loading 5:05 14:30:39
- 23. 2 Tool • 비주얼 스튜디오 2015 의 새로운 기능 • 진단도구 • 중단점 • 직접실행창 : LINQ • peek view • 라이브 시각적 트리 • 라이브 속성 탐색기 14:30:39
- 24. Demo • 진단도구 • 중단점 • 직접실행창 : LINQ • peek view • 라이브 시각적 트리 • 라이브 속성 탐색기 5:20 14:30:39
- 25. 3 Databinding • XAML Databinding • 기존 바인딩 • Classic Binding • {binding} • 컴파일된 바인딩 • Compiled Binding • {x:bind} 5:20 14:30:39
- 26. 예) 정적 데이터 바인딩 바인딩 표현식 {StaticResource ….} <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <TextBlock Text="나이 : " /> <TextBlock Text="성 : " /> <TextBlock Text="이름 : " /> <TextBlock Text="여성 : " /> … 14:30:39
- 27. 예) 동적 데이터 바인딩 • 바인딩 표현식 {Binding ….} • DataContext 설정 필요 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <TextBox Text="{Binding PersonInfo.Age}" /> <TextBox Text="{Binding PersonInfo.LastName}" /> <TextBox Text="{Binding PersonInfo.FirstName}" /> <CheckBox IsChecked="{Binding PersonInfo.IsFemale}" /> … 14:30:39
- 28. <Page> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <TextBox Text="{Binding PersonInfo.FirstName}" /> … Classic Binding • DataContext : 바인딩 대상 • DataContext의 PersonInfo의 FirstName 속성을 찾음 • DataContext 검색 • 자신의 DataContext 우선 적용 • 자신의 DataContext가 null이면 • Tree 구조상 자신 -> 최상위까지 차례대로 탐색 14:30:39
- 29. Classic Binding • 장점 • DataContext의 형식이 특정되지 않아도 됨 • 사용이 용이 • 다양하고 유연하게 코드적용가능 • 단점 • 런타임시 타입검사필요->성능이슈 • 디버깅의 어려움 ID FirstName LastName Age Btype Class Address Phone Number Company FirstName Atype Class Address Phone Number Company Ctype Class <Page> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <TextBox Text="{Binding FirstName}" /> … (object) DataContext 14:30:39
- 30. 바인딩 표현식 #1 <TextBox Text="{Binding Converter ConverterLanguage ConverterParameter ElementName FallbackValue Mode Path RelativeSource Source TargetNullValue UpdateSourceTrigger"} Converter : 컨버터 ElementName : 요소 바인딩 FallbackValue : 기본값(바인딩이 유효하지 않을 때) TargetNullValue : 기본값(대상 값이 null일 때) UpdateSourceTrigger : 소스 반영시점 <TextBox Text="{Binding FirstName}" /> => <TextBox Text="{Binding Path=FirstName}" /> 14:30:39
- 31. Demo • Classic binding • FallbackValue • TargetNullValue • UpdateSourceTrigger 5:35 14:30:39
- 32. 컴파일 바인딩 • Compiled binding, {x:Bind}, {Binding ….} • 기존 바인딩 단점 • 런타임시 부하 발생 • 바인딩식 디버깅 어려움 • 바인딩식 컴파일시에 검증 불가능 • 바인딩 대상의 형(Type) 명시 할 수 있다면 • 기존 바인딩 단점 보완 가능 • 런타임시 부하는 적음 • 변환된 코드는 디버깅 가능 • 바인딩식은 컴파일타임에 즉시 검증됨 • 바인딩 선언은 코드로 자동 변환된 후 컴파일 됨 • 기존의 기능과 편리함을 유지 & 성능 향상 14:30:39
- 33. 컴파일 바인딩 • 바인딩 대상 • DataContext, • 해당 페이지의 멤버만 바인딩 가능 14:30:39
- 34. 컴파일 바인딩 <Page x:Class="Demo_Databinding.View.ClassicBindingPage1"> <Grid Background="{StaticResource> <TextBox Text="{x:Bind sViewModel.PersonInfo.Age}" /> <TextBox Text="{x:Bind sViewModel.PersonInfo.LastName}" /> <TextBox Text="{x:Bind sViewModel.PersonInfo.FirstName}" /> <CheckBox IsChecked="{x:Bind sViewModel.PersonInfo.IsFemale}" /> … public sealed partial class CompiledBindingPage : Page { public SampleViewModel sViewModel { get; set; } public CompiledBindingPage() { this.InitializeComponent(); sViewModel = new SampleViewModel(); } } 14:30:39
- 35. 바인딩 표현식 #2 <TextBox Text="{Binding Converter ConverterLanguage ConverterParameter ElementName FallbackValue Mode Path RelativeSource Source TargetNullValue UpdateSourceTrigger"} <TextBox Text="{x:Bind Converter ConverterLanguage ConverterParameter ElementName FallbackValue Mode Path RelativeSource Source TargetNullValue UpdateSourceTrigger"} 14:30:39
- 37. 컴파일 바인딩 • Data Templates <ListView ItemsSource="{x:Bind ViewModel.Employees}"> <ListView.ItemTemplate> <DataTemplate x:DataType="model:Employee"> <TextBlock Text="{x:Bind Name}"/> </DataTemplate> </ListView.ItemTemplate> </ListView> 14:30:40
- 38. 컴파일 바인딩 • 이벤트 바인딩 <Button Click="btnSelectEmployee_Click">사원 정보 선택</Button> <Button Click="{x:Bind Select}">사원 정보 선택</Button> 14:30:40
- 39. 컴파일 바인딩 • 이벤트 바인딩 • 적용 가능한 함수 시그니처 • void Select() • void Select(object sender, RoutedEventArgs e) • void Select(object sender, object e) • 오버로딩은 지원되지 않는다->하나의 메서드만 존재해야 함 • 모든 이벤트에 적용 가능함 • ICommand & EventToCommand 대신 사용 가능함 • 인자 전달, CanExecute와 같은 기능은 포함하지 않음 <Button Click="{x:Bind Select}">사원 정보 선택</Button> <Button Click="{x:Bind EmplyeeUtil.Select}">사원 정보 선택</Button> 14:30:40
- 40. 컴파일 바인딩 • 바인딩은 컴파일시에 검증된다 • Strongly-typed 바인딩 • 리플렉션을 사용하지 않는다 • 페이지 자신의 멤버를 바인딩 • DataContext와는 무관함 • 기본 모드는 OneTime • Classic Binding에서는 OneWay가 기본 모드임 • 기존의 OneWay, TwoWay 모드도 가능함 • 기타 표준 바인딩 원리 준수 • INotifyPropertyChanged • INotifyCollectionChanged • IObservableVector 14:30:40
- 41. 컴파일 바인딩 : 고려할 점 • MVVM에서 적용? • View와 ViewModel과의 coupling 문제 • View 수준에서 ViewModel을 멤버로 가지고 있어야 함 • JSON객체 혹은 untyped object일 경우 사용불가 • Classic Binding을 사용 • 스타일에서의 사용 • {x:Bind}은 style에서 setters 로는 사용 불가 • {x:Bind}은 style에 정의된 DataTemplate 에서는 사용가능 14:30:40
- 42. {Binding} {x:Bind} 동시사용 • {Binding} {x:Bind} 를 동시에 C# 코드 구성사용 하게 구성 • DataContext와 특정멤버(ViewModel)를 같이 설정함 • XAML에서 {Binding}, {x:Bind}중 어느것을 사용하더라고 동작 public sealed partial class CompiledBindingPage : Page { public SampleViewModel sViewModel { get; set; } public CompiledBindingPage() { this.InitializeComponent(); this.DataContextChanged += (s, e) => { sViewModel = DataContext as SampleViewModel; }; } } 14:30:40
- 43. Session Summary • XAML • RelativePanel • SplitView • Tool • 진단도구 : CPU, 메모리 • 직접실행창 : LINQ • 라이브 시각적 트리, 속성 탐색기 • Databinding • Classic Binding • Compiled Binding 5:50 14:30:40
- 44. 감사합니다. • MSDN Forum http://aka.ms/msdnforum • TechNet Forum http://aka.ms/technetforum
- 45. http://aka.ms/td2015_again TechDays Korea 2015에서 놓치신 세션은 Microsoft 기술 동영상 커뮤니티 Channel 9에서 추후에 다시 보실 수 있습니다.