조막만한 화면부터 대박만한 화면까지 고생 끝 적응(adaptive ui) 시작! -...
TRANSCRIPT
http://windows.Microsoft.com
Developer’s guide to Windows 10
조막만한 화면부터 대박만한 화면까지
고생 끝 적응( ) 시작
권영철 / MVP + 바이널아이
!Adaptive UI
Phone Small Tablet2-in-1s
(Tablet or Laptop)Desktops
& All-in-OnesPhablet Large TabletClassic Laptop
Xbox IoTSurface Hub Holographic
Windows 10
http://windows.Microsoft.com
Agenda
Adaptive UI는?
Adaptive UI를 위한 도구
Agenda
Adaptive UI 이야기
http://windows.Microsoft.com
(반응)
http://windows.Microsoft.com
(적응)
http://windows.Microsoft.com
(확대/축소)
http://windows.Microsoft.com
Tailored design(맞춤)
특별한 장치에는 특별한 경험을(그에 걸맞는)
Phone (portrait)
Tablet (landscape) / Desktop
http://windows.Microsoft.com
Tailored(맞춤)
각각따로따로, 완전히분리Use MRT in App.xaml.cs to determine the family
한손인터페이스?Typically phone or small tablets
Test diagonal screen size (<7")
if (physical_diagonal_size <= 7)
// optimized for one-handed operation
rootFrame.Navigate(typeof(MainPage_OneHanded), e.Arguments);
else
rootFrame.Navigate(typeof(MainPage), e.Arguments);
Multi-headed solution? 다행히 살아 남았습니다.
http://windows.Microsoft.com
특정타깃을집중공략하는앱솔루션
Adaptive UI를위한도구
http://windows.Microsoft.com
Visual States
XAML 뷰를 정의Unique layout for distinct states
Animation은 심플하게Automatically implement state transitions
모든 건 Blend for VS를 이용해서Design and preview states and transitions
http://windows.Microsoft.com
Visual States
http://windows.Microsoft.com
http://windows.Microsoft.com
Visual States
http://windows.Microsoft.com
Visual States
http://windows.Microsoft.com
Visual States
DEMO
Visual states
Visual states View의 변화를 책임집니다.
DEMO
Visual States Manager
http://windows.Microsoft.com
How to set the visual state
VisualStateManager.GotoState(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);
};}
DEMO
Adaptive triggers
Adaptive triggers 이거 하나면 코드가 필요없습니다.
http://windows.Microsoft.com
Adaptive triggers
코드 몰라도 상태 변경 가능
기본 제공되는 트리거가 2개MinWindowHeight (Taller than this)
MinWindowWidth (Wider than this)
<VisualState x:Name="VisualState500min"><VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="501" /></VisualState.StateTriggers>
</VisualState>
DEMO
Custom triggers
Custom triggers별의별 시나리오를 싹다 지원합니다.
http://windows.Microsoft.com
WindowsStateTriggers
A collection of custom visual state triggers
Morten Nielsen, MVP + community
GitHub, MIT license
Based on StateTriggerBase class
https://github.com/dotMorten/WindowsStateTriggers
http://www.sharpgis.net/post/2015/03/24/Using-Custom-Visual-State-Triggers
http://windows.Microsoft.com
WindowsStateTriggers
DeviceFamilyStateTrigger
NetworkConnectionStateTrigger
OrientationStateTrigger
IsTrueStateTrigger (IsActive)
IsFalseStateTrigger
IsNullOrEmptyStateTrigger
IsTypePresentStateTrigger
EqualsStateTrigger
NotEqualStateTrigger
CompareStateTrigger
InputTypeTrigger
RegexStateTrigger
ComposisiteStateTrigger
…
Currently available triggers
http://windows.Microsoft.com
Visual state setters
Scalar 값을설정하는데사용Great when you think of ENUM values like Visibility, Stretch, etc
Storyboard를호출하지않음Does not require ObjectAnimationUsingKeyFrames
<VisualState.Setters><Setter Target="MyText01.FontSize" Value="24" /><Setter Target="MyImage.Stretch" Value="UniformToFill" /><Setter Target="MyImage.Height" Value="150" />
</VisualState.Setters>
http://windows.Microsoft.com
XAML's RelativePanel control
하위 요소 또는 두 행위가 앵커 역할을 담당They are relative to the panel
그 앵커를 기준으로 다른 요소들을 정의RelativePanel.Above = "ElementName"
RelativePanel.RightOf = "ElementName"
RelativePanel.Below = "ElementName"
RelativePanel.LeftOf = "ElementName"
Adaptive UI를 쉽게 표현A simple Visual State setter can rearrange the UI
One element can move a family of related elements
DEMO
Relative Panel
Adaptive UI선택이 아닌 필수입니다.
http://windows.Microsoft.com
Review
Adaptive UI는?
Adaptive UI를 위한 도구
Review
http://windows.Microsoft.com
ReviewSource
https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10
http://www.microsoftvirtualacademy.com/training-courses/a-developers-guide-to-windows-10
Source
http://windows.Microsoft.com
ReviewSourceSource
감사합니다.• MSDN Forum http://aka.ms/msdnforum
• TechNet Forum http://aka.ms/technetforum