The document discusses adaptive UI design for Windows 10 applications. It introduces visual states that allow defining unique layouts for different device families and screen sizes. Developers can use adaptive triggers to automatically transition between visual states based on properties like window width. The document demonstrates visual states, adaptive triggers, and the RelativePanel control to simplify building adaptive UIs with Visual State Setters that rearrange elements between states. It recommends testing for one-handed interfaces on smaller devices and provides resources for learning more.

1. http://windows.Microsoft.com
Developer’s guide to Windows 10
Adaptive UI
권영철 / MVP + 바이널아이

2. Phone Small Tablet
2-in-1s
(Tablet or Laptop)
Desktops
& All-in-OnesPhablet Large Tablet
Classic
Laptop
Xbox IoTSurface Hub Holographic
Windows 10

3. http://windows.Microsoft.com
Agenda
The adaptive story : 어댑티브가 뭔데?
Adaptive tooling : 어떤 도구가 있는데?

4. The adaptive story

5. http://windows.Microsoft.com
(반응)

6. http://windows.Microsoft.com
(적응)

7. http://windows.Microsoft.com
(비례 확대/축소)

8. http://windows.Microsoft.com
Tailored design
새 술은 새 부대에, 특별한 장치에는 특별한 경험을
Phone (portrait)
Tablet (landscape) / Desktop

9. http://windows.Microsoft.com
Tailored design
Build pages/code for individual families
Use 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);

10. Multi-headed solution?
다행히 살아 남았습니다.

11. http://windows.Microsoft.com
Dedicated, targeted apps

12. Adaptive tooling

13. http://windows.Microsoft.com
Visual States
Define XAML views
Unique layout for distinct states
Simplify animation
Automatically implement state transitions
Build in Blend
Design and preview states and transitions

14. http://windows.Microsoft.com
Visual States

15. http://windows.Microsoft.com

16. http://windows.Microsoft.com
Visual States

17. http://windows.Microsoft.com
Visual States

18. http://windows.Microsoft.com
Visual States

19. DEMO
Visual states

20. 다양한 View의 변화는
Visual states가 책임집니다.

21. DEMO
Visual States Manager

22. 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);
};
}

23. DEMO
Adaptive triggers

24. Adaptive triggers,
이거 하나면 코드가 필요없습니다.

25. http://windows.Microsoft.com
Adaptive triggers
Code-free state transition
Two built-in triggers
MinWindowHeight (Taller than this)
MinWindowWidth (Wider than this)
<VisualState x:Name="VisualState500min">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="501" />
</VisualState.StateTriggers>
</VisualState>

26. DEMO
Custom triggers

27. Custom triggers,
별의별 시나리오를 싹다 지원합니다.

28. 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

29. http://windows.Microsoft.com
WindowsStateTriggers
DeviceFamilyStateTrigger
NetworkConnectionStateTrigger
OrientationStateTrigger
IsTrueStateTrigger (IsActive)
IsFalseStateTrigger
IsNullOrEmptyStateTrigger
IsTypePresentStateTrigger
EqualsStateTrigger
NotEqualStateTrigger
CompareStateTrigger
InputTypeTrigger
RegexStateTrigger
ComposisiteStateTrigger
…
Currently available triggers

30. http://windows.Microsoft.com
Visual state setters
Setting a simple, scalar value
Great when you think of ENUM values like Visibility, Stretch, etc
Does not invoke a 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>

31. http://windows.Microsoft.com
XAML's RelativePanel control
A child or two act as a anchor elements
They are relative to the panel
Other children are relative to the anchors
RelativePanel.Above = "ElementName"
RelativePanel.RightOf = "ElementName"
RelativePanel.Below = "ElementName"
RelativePanel.LeftOf = "ElementName"
RelativePanel simplifies adaptive UI
A simple Visual State setter can rearrange the UI
One element can move a family of related elements

32. DEMO
Relative Panel

33. Adaptive UI,
선택이 아닌 필수입니다.

34. http://windows.Microsoft.com
Review
The adaptive story : 어댑티브가 뭔데?
Adaptive tooling : 어떤 도구가 있는데?

35. 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

36. http://windows.Microsoft.com
ReviewSourceSource

37. 권영철, MVP + VINYL I
zerosteeler@outlook.com
010-4522-8103