OpenSG 송기수 전무님이 Windows 10의 주요기능을 개발하는 방법을 설명해 주고 있습니다.

1. Windows 10 앱 개발
Tips & Tricks
오픈에스지
기술이사 송기수

2. 오픈에스지
• OpenSG
• Solution, Consulting, SI and Education Service based on
Microsoft .NET Technology

3. Its all about UWP
UWP : Universal Windows Platform
1. XAML
2. Tool
3. Databinding
Agenda

4. XAML
• 새로운 컨트롤
• RelativePanel
• SplitView
• Adaptive UI
• 예)계산기, 설정창
• View States
• Adaptive triggers
• XAML 성능
• phase rendering
• deferred loading

5. 상대적인 설정 값에 의해 자식 컨트롤을 배치
Relative Panel
레이아웃 컨트롤(Panel)
Grid
Stack
Panel
Canvas
Scroll
Viewer
Border View Box
Wrap
Grid
Relative
Panel

6. RelativePanel
• Element는 또 다른 Element의 상대적 위치를 가짐
• RelativePanel.Above = "BlueRect"
• RelativePanel.RightOf = " BlueRect "
• RelativePanel.Below = " BlueRect "
• RelativePanel.LeftOf = " BlueRect“
• 적응형 UI 구현 최적
• 보통 Visual State와 동시 사용됨
<RelativePanel>
<Rectangle x:Name="BlueRect" Fill="Blue" />
<Rectangle x:Name="RedRect" RelativePanel.Below="BlueRect" />
</RelativePanel>

7. 예)

8. <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를 기준으로 상대적 위치 설정
• 다른 Element를 기준으로 상대적 정렬 설정
• 기존 Panel과 같이 AttachedProperty로 설정됨

9. <RelativePanel>
<Rectangle x:Name="BlueRect"
Height="100" Width="200" Fill="Blue" />
<Rectangle x:Name="RedRect"
Height="100" Width="100" Fill="Red"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True" />
</RelativePanel>
Relative Panel
• Panel을 기준으로 상대적 정렬 설정

10. Demo
• RelativePanel

12. SplitView
IsPaneOpen="True" IsPaneOpen="False"
DisplayMode=
"Inline"
DisplayMode=
"Overlay"
DisplayMode=
"CompactInline"
DisplayMode=
"CompactOverlay"

13. Demo
• SplitView

14. Adaptive UI

15. Adaptive UI
• Visual States
• XAML에서 정의됨
• 복잡하게 정의된 효과를 단순하게 선언하여 사용
• 에니메이션등…
• 블랜드를 통해서 정의
• Xaml 직접 정의도 가능

16. • VisualStateManager.Goto(element, state, transition)
public MainPage()
{
this.InitializeComponent();
this.SizeChanged += (s, e) =>
{
var state = "VisualState000min";
if (e.NewSize.Width > 500)
state = "VisualState500min";
else if (e.NewSize.Width > 800)
state = "VisualState800min";
else if (e.NewSize.Width > 1000)
state = "VisualState1000min";
VisualStateManager.GoToState(this, state, true);
};
}

17. Adaptive triggers
• 코드없이 XAML에서 설정만으로 상태전환 가능
• 제공되는 기본 트리거
• MinWindowHeight (Taller than this)
• MinWindowWidth (Wider than this)
<VisualState x:Name="VisualState500min">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="501" />
</VisualState.StateTriggers>
</VisualState>

18. XAML 성능
• phase rendering
• deferred loading

19. 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>

20. deferred loading
• 초기 로드되는 요소 최소화
• 요소가 요구되기 전까지는 loading 되지 않는다
• 요소가 요구되는 상황
1. FindName()
2. GetTemplatedChild() (ControlTemplate 일경우)
3. Storyboard & VisualStates (내부적으로 FindName호출함)
<StackPanel x:Name="AdditionalProductPage" Visibility="Collapsed"
x:DeferLoadStrategy="Lazy">
<!– your lovely XAML goes here-->
</StackPanel>

21. deferred loading
• 경량의 proxy element가 대신 생성됨
• 이벤트는 element가 로딩된 후 등록됨
• Binding 동작도 element가 로딩된 후 완성됨
• {x:Bind} 도 동일

22. 2 Tool
• 비주얼 스튜디오 2015 의 새로운 기능
• 진단도구
• 중단점
• 직접실행창 : LINQ
• peek view
• 라이브 시각적 트리
• 라이브 속성 탐색기

23. 진단도구

24. 중단점

25. 직접 실행창
• LINQ 실행가능

26. 라이브 시각적 트리

27. 라이브 속성 탐색기

28. Demo
• 진단도구
• 중단점
• 직접실행창 : LINQ
• peek view
• 라이브 시각적 트리
• 라이브 속성 탐색기

29. 3 Databinding
• 기존 바인딩 개념
• Classic Binding, {binding}
• 정적/동적 바인딩
• Converter
• INPC/INCC
• 컴파일된 바인딩
• Compiled Binding, {x:bind}
• 이벤트 바인딩

30. 예) 정적 데이터 바인딩
바인딩 표현식 {StaticResource ….}
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Text="나이 : " />
<TextBlock Text="성 : " />
<TextBlock Text="이름 : " />
<TextBlock Text="여성 : " />
…

31. 예) 동적 데이터 바인딩
• 바인딩 표현식 {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}" />
…

32. INPC
• INotifyPropertyChanged
• UI 업데이트
• Data -> UI
• ViewModel 과 Model에서 주로 구현됨
• 속성값의 변화가 있을 때 특정 이벤트 발생

33. INCC
• INotifyCollectionChanged
• UI 업데이트
• Data -> UI
• ObservableCollection<T>, ReadOnlyObservableCollection<T>에서 구현됨
• 컬렉션에 변화가 있을 때 특정 이벤트 발생

34. 바인딩 식 #1
<TextBox Text="{Binding
Converter
ConverterLanguage
ConverterParameter
ElementName
FallbackValue
Mode
Path
RelativeSource
Source
TargetNullValue
UpdateSourceTrigger}
Converter : 컨버터
ElementName : 요소 바인딩
FallbackValue : 기본값(바인딩이 유효하지 않을 때)
TargetNullValue : 기본값(대상 값이 null일 때)
UpdateSourceTrigger : 소스 반영시점

35. Converter
• 바인딩 데이터를 변환하는 역할
• IValueConverter
Data -> UI
데이터를 UI에 표시하기 전에 호출되는 메서드
UI -> Data
UI의 값을 데이터멤버에 할당하기 전에 호출되는 메서드
종종 생략되곤 한다

36. Demo
• Classic binding
• FallbackValue
• TargetNullValue
• UpdateSourceTrigger

37. 컴파일 바인딩
• compiled binding
• 바인딩 성능 향상 & 기존의 편리함을 유지
• 새로운 데이터 바인딩 원리
• 컴파일타임에 바인딩의 일정작업이 진행됨
• 바인딩식은 컴파일타임에 검증됨
∴
런타임시 부하는 상대적으로 적음
바인딩 선언은 코드로 자동 변환된 후 컴파일 됨
런타임시의 리플렉션 코드 최소화
변환된 코드는 디버깅 가능

38. 바인딩 식 #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}

39. 컴파일 바인딩
• 대상 타입의 명시적인 선언 필요
• =>해당 페이지의 멤버만 바인딩 가능
<Grid Background="{StaticResource
ApplicationPageBackgroundThemeBrush}">
…
<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}" />
…

40. 컴파일 바인딩
public sealed partial class CompiledBindingPage : Page
{
public SampleViewModel sViewModel { get; set; }
public CompiledBindingPage()
{
this.InitializeComponent();
sViewModel = new SampleViewModel();
}
}
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
…
<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}" />
…

41. Demo
• Compiled binding

42. 컴파일 바인딩
• Data Templates
<ListView ItemsSource="{x:Bind ViewModel.Employees}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="model:Employee">
<TextBlock Text="{x:Bind Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

43. 컴파일 바인딩
• Resource dictionary
</UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<local:MyTemplates/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<ResourceDictionary x:Class="MyNamespace.MyTemplates"
xmlns:model="using:xBindSampleModel">
<DataTemplate x:Key="MyTemplate" x:DataType="model:Employee">
<TextBlock Text="{x:Bind Name}" />
</DataTemplate>
</ResourceDictionary>
namespace MyNamespace
{
public class MyTemplates
{
public MyTemplates()
{
InitializeComponent();
}
}
}

44. 컴파일 바인딩
• 이벤트 바인딩
• 적용 가능한 함수 시그니처
• 인자 없음 - void Select()
• 이벤트 인자 타입 - void Select(object sender, RoutedEventArgs e)
• - void Select(object sender, object e)
• 오버로딩은 지원되지 않는다->하나의 메서드만 존재해야 함
• 모든 이벤트에 적용 가능함
• Icommand & EventToCommand 대신 사용 가능함
• - 그러나 특정 인자나 혹은 CanExecute와 같은 기능을 포함하지는 않음
<Button Click=“SelectEmployee">사원 정보 선택</Button>
<Button Click="{x:Bind Employee.Select}">사원 정보 선택</Button>

45. x:Bind
• 컴파일된 바인딩
• 바인딩 표현식은 컴파일시에 검증된다
• Strongly-typed 바인딩
• 리플렉션을 사용하지 않는다
• 페이지 자신의 멤버를 바인딩
• DataContext와는 무관함
• 기본 모드는 OneTime
• 기존의 OneWay, TwoWay 모드도 가능함
• Classic Binding에서는 OneWay가 기본 모드임
• 기타 표준 바인딩 원리 준수
• INotifyPropertyChanged, INotifyCollectionChanged, IObservableVector

46. x:Bind 고려할 점
• MVVM에서 적용?
• View와 ViewModel과의 coupling 문제
• JSON객체 혹은 untyped object일 경우 사용불가
• Classic Binding을 사용
• 스타일에서의 사용
• {x:Bind}은 style에서 setters 로는 사용 불가
• {x:Bind}은 style에 정의된 DataTemplate 에서는 사용가능

47. {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;
};
}
}

48. Session Summary
• XAML
• RelativePanel
• SplitView
• Tool
• 진단도구 : CPU, 메모리
• 직접실행창 : LINQ
• 라이브 시각적 트리, 속성 탐색기
• Databinding
• INPC/INCC
• {x:Bind}

49. 감사합니다!