[Td 2015]조막만한 화면에서 대박만한 화면까지. 고생 끝 적응(adaptive ui) 시작(권영철)
0 likes699 views
This document discusses adaptive user interfaces (UIs) in Windows 10 and the tools available for building them. Adaptive UIs automatically adjust based on factors like screen size and orientation. Visual states and triggers in XAML allow defining different layouts and transitions between states. The RelativePanel control and visual state setters also help create adaptive UIs by anchoring and rearranging elements relative to each other between states.
[Td 2015]조막만한 화면에서 대박만한 화면까지. 고생 끝 적응(adaptive ui) 시작(권영철)
- 1. http://windows.Microsoft.com Developer’s guide to Windows 10 조막만한 화면부터 대박만한 화면까지 고생 끝 적응( ) 시작 권영철 / MVP + 바이널아이 !Adaptive UI
- 2. Phone Small Tablet 2-in-1s (Tablet or Laptop) Desktops & All-in-OnesPhablet Large Tablet Classic Laptop Xbox IoTSurface Hub Holographic Windows 10
- 8. http://windows.Microsoft.com Tailored design(맞춤) 특별한 장치에는 특별한 경험을(그에 걸맞는) Phone (portrait) Tablet (landscape) / Desktop
- 9. 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);
- 10. Multi-headed solution? 다행히 살아 남았습니다.
- 11. http://windows.Microsoft.com 특정 타깃을 집중 공략하는 앱 솔루션
- 12. Adaptive UI를 위한 도구
- 13. 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
- 20. Visual states View의 변화를 책임집니다.
- 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 코드 몰라도 상태 변경 가능 기본 제공되는 트리거가 2개 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 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>
- 31. 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
- 33. Adaptive UI 선택이 아닌 필수입니다.
- 39. 감사합니다. • MSDN Forum http://aka.ms/msdnforum • TechNet Forum http://aka.ms/technetforum
- 40. http://aka.ms/td2015_again TechDays Korea 2015에서 놓치신 세션은 Microsoft 기술 동영상 커뮤니티 Channel 9에서 추후에 다시 보실 수 있습니다.