20150912 Adaptive UI 권영철
4 likes677 views
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.
20150912 Adaptive UI 권영철
- 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 : 어떤 도구가 있는데?
- 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? 다행히 살아 남았습니다.
- 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
- 20. 다양한 View의 변화는 Visual states가 책임집니다.
- 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); }; }
- 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>
- 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
- 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
- 33. Adaptive UI, 선택이 아닌 필수입니다.
- 34. http://windows.Microsoft.com Review The adaptive story : 어댑티브가 뭔데? Adaptive tooling : 어떤 도구가 있는데?
- 37. 권영철, MVP + VINYL I zerosteeler@outlook.com 010-4522-8103