TechDays Korea 2015

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

9. Demo
• RelativePanel
4:45
14:30:38

10. SplitView
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

12. Demo
• SplitView
4:50
14:30:39

13. Adaptive UI
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

16. Demo
• VisuaState
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

18. Demo
• Adaptive triggers
5:00
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

36. Demo
• Compiled binding
5:45
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에서
추후에 다시 보실 수 있습니다.