조막만한 화면부터 대박만한 화면까지 고생 끝 적응(Adaptive UI) 시작! - TechDays Korea 2015
•
3 likes•522 views
하나의 앱으로 모든 디바이스를 지원하기 위해서 만들어진 UWP(Universal Windows Platform) 앱 개발에는 Responsive, Adaptive, Tailored 등 다양한 디자인 기법들이 함께 사용됩니다. XAML 개발자로 활동하고 있는 권영철 MVP와 함께 Windows 10을 위한 디자인 기법에 대해 알아봅니다.
Recommended
More Related Content
Similar to 조막만한 화면부터 대박만한 화면까지 고생 끝 적응(Adaptive UI) 시작! - TechDays Korea 2015
Similar to 조막만한 화면부터 대박만한 화면까지 고생 끝 적응(Adaptive UI) 시작! - TechDays Korea 2015 (20)
Recently uploaded
Recently uploaded (20)
조막만한 화면부터 대박만한 화면까지 고생 끝 적응(Adaptive UI) 시작! - TechDays Korea 2015
- 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
- 3. http://windows.Microsoft.com Agenda Adaptive UI는? Adaptive UI를 위한 도구 Agenda
- 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 선택이 아닌 필수입니다.
- 34. http://windows.Microsoft.com Review Adaptive UI는? Adaptive UI를 위한 도구 Review
- 39. 감사합니다. • MSDN Forum http://aka.ms/msdnforum • TechNet Forum http://aka.ms/technetforum