20150912 adaptive ui 권영철
TRANSCRIPT
![Page 1: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/1.jpg)
http://windows.Microsoft.com
Developer’s guide to Windows 10
Adaptive UI
권영철 / MVP + 바이널아이
![Page 2: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/2.jpg)
Phone Small Tablet2-in-1s
(Tablet or Laptop)Desktops
& All-in-OnesPhablet Large TabletClassic Laptop
Xbox IoTSurface Hub Holographic
Windows 10
![Page 3: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/3.jpg)
http://windows.Microsoft.com
Agenda
The adaptive story : 어댑티브가뭔데?
Adaptive tooling : 어떤 도구가있는데?
![Page 4: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/4.jpg)
The adaptive story
![Page 5: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/5.jpg)
http://windows.Microsoft.com
(반응)
![Page 6: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/6.jpg)
http://windows.Microsoft.com
(적응)
![Page 7: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/7.jpg)
http://windows.Microsoft.com
(비례 확대/축소)
![Page 8: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/8.jpg)
http://windows.Microsoft.com
Tailored design
새 술은 새 부대에, 특별한 장치에는 특별한 경험을
Phone (portrait)
Tablet (landscape) / Desktop
![Page 9: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/9.jpg)
http://windows.Microsoft.com
Tailored design
Build pages/code for individual familiesUse MRT in App.xaml.cs to determine the family
One-handed interface?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);
![Page 10: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/10.jpg)
Multi-headed solution? 다행히 살아 남았습니다.
![Page 11: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/11.jpg)
http://windows.Microsoft.com
Dedicated, targeted apps
![Page 12: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/12.jpg)
Adaptive tooling
![Page 13: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/13.jpg)
http://windows.Microsoft.com
Visual States
Define XAML viewsUnique layout for distinct states
Simplify animationAutomatically implement state transitions
Build in BlendDesign and preview states and transitions
![Page 14: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/14.jpg)
http://windows.Microsoft.com
Visual States
![Page 15: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/15.jpg)
http://windows.Microsoft.com
![Page 16: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/16.jpg)
http://windows.Microsoft.com
Visual States
![Page 17: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/17.jpg)
http://windows.Microsoft.com
Visual States
![Page 18: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/18.jpg)
http://windows.Microsoft.com
Visual States
![Page 19: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/19.jpg)
DEMO
Visual states
![Page 20: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/20.jpg)
다양한 View의 변화는Visual states가 책임집니다.
![Page 21: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/21.jpg)
DEMO
Visual States Manager
![Page 22: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/22.jpg)
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);
};}
![Page 23: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/23.jpg)
DEMO
Adaptive triggers
![Page 24: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/24.jpg)
Adaptive triggers, 이거 하나면 코드가 필요없습니다.
![Page 25: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/25.jpg)
http://windows.Microsoft.com
Adaptive triggers
Code-free state transition
Two built-in triggersMinWindowHeight (Taller than this)
MinWindowWidth (Wider than this)
<VisualState x:Name="VisualState500min"><VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="501" /></VisualState.StateTriggers>
</VisualState>
![Page 26: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/26.jpg)
DEMO
Custom triggers
![Page 27: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/27.jpg)
Custom triggers,별의별 시나리오를 싹다 지원합니다.
![Page 28: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/28.jpg)
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
![Page 29: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/29.jpg)
http://windows.Microsoft.com
WindowsStateTriggers
DeviceFamilyStateTrigger
NetworkConnectionStateTrigger
OrientationStateTrigger
IsTrueStateTrigger (IsActive)
IsFalseStateTrigger
IsNullOrEmptyStateTrigger
IsTypePresentStateTrigger
EqualsStateTrigger
NotEqualStateTrigger
CompareStateTrigger
InputTypeTrigger
RegexStateTrigger
ComposisiteStateTrigger
…
Currently available triggers
![Page 30: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/30.jpg)
http://windows.Microsoft.com
Visual state setters
Setting a simple, scalar valueGreat when you think of ENUM values like Visibility, Stretch, etc
Does not invoke a storyboardDoes 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>
![Page 31: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/31.jpg)
http://windows.Microsoft.com
XAML's RelativePanel control
A child or two act as a anchor elementsThey are relative to the panel
Other children are relative to the anchorsRelativePanel.Above = "ElementName"
RelativePanel.RightOf = "ElementName"
RelativePanel.Below = "ElementName"
RelativePanel.LeftOf = "ElementName"
RelativePanel simplifies adaptive UIA simple Visual State setter can rearrange the UI
One element can move a family of related elements
![Page 32: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/32.jpg)
DEMO
Relative Panel
![Page 33: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/33.jpg)
Adaptive UI,선택이 아닌 필수입니다.
![Page 34: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/34.jpg)
http://windows.Microsoft.com
Review
The adaptive story : 어댑티브가뭔데?
Adaptive tooling : 어떤 도구가있는데?
![Page 35: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/35.jpg)
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
![Page 36: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/36.jpg)
http://windows.Microsoft.com
ReviewSourceSource
![Page 37: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/37.jpg)
권영철, MVP + VINYL [email protected]
![Page 38: 20150912 Adaptive UI 권영철](https://reader031.vdocuments.net/reader031/viewer/2022021919/5871ace51a28abda6a8b5c89/html5/thumbnails/38.jpg)