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 Izerosteeler@outlook.com010-4522-8103