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

http://windows.Microsoft.com

Review광고

kaki104@daum.net

권영철zerosteeler@outlook.com010-4522-8103

감사합니다.• MSDN Forum http://aka.ms/msdnforum

• TechNet Forum http://aka.ms/technetforum

http://aka.ms/td2015_again

TechDays Korea 2015에서 놓치신 세션은 Microsoft 기술 동영상 커뮤니티 Channel 9에서

추후에 다시 보실 수 있습니다.