20150912 Adaptive UI 권영철
-
Upload
youngwook-kim -
Category
Technology
-
view
537 -
download
0
Transcript of 20150912 Adaptive UI 권영철
http://windows.Microsoft.com
Developer’s guide to Windows 10
Adaptive UI
권영철 / MVP + 바이널아이
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
The adaptive story : 어댑티브가뭔데?
Adaptive tooling : 어떤 도구가있는데?
The adaptive story
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 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);
Multi-headed solution? 다행히 살아 남았습니다.
http://windows.Microsoft.com
Dedicated, targeted apps
Adaptive tooling
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
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
다양한 View의 변화는Visual states가 책임집니다.
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
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>
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
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>
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
DEMO
Relative Panel
Adaptive UI,선택이 아닌 필수입니다.
http://windows.Microsoft.com
Review
The adaptive story : 어댑티브가뭔데?
Adaptive tooling : 어떤 도구가있는데?
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
http://windows.Microsoft.com
ReviewSourceSource
권영철, MVP + VINYL [email protected]