Building Metro style UIs

1. DEV354 Building Metro style UIs Paul Gusmorino Lead Program Manager Microsoft Corporation

2. Agenda • What is Metro style UI? • How can I build Metro style UIs for Windows 8? • XAML (C++/C#) • HTML and Windows Library for JavaScript (JS) • Common patterns of Metro style UI • You’ll leave with examples of how to: • Use common patterns to create great Metro style UIs

3. What is Metro style UI?

4. A set of common user interface patterns

5. grounded in a set of design principles

6. supported by the Windows 8 platform.

7. demo What is Metro style UI? Examples from apps on the Windows 8 Release Preview!

8. A set of common user interface patterns grounded in a set of design principles and supported by the Windows 8 platform.

9. Patterns of Metro style UI • Layout • Navigation • Commanding • Scrolling Content • PresentingData • Essential Controls • Text Editing

10. Principles of Metro style UI • Pride in craftsmanship • Fast and fluid • Authentically digital • Do more with less • Win as one

11. Platform for Metro style UI • For C++/C#: • XAML • For Javascript: • HTML • Windows Library for JavaScript • All powered by the same underlying Windows 8 platform capabilities!

12. Layout Patterns for Metro style UI

13. Layout Patterns for Metro style UI Fixed Filled and Snapped Adaptive

14. demo Layout Patterns

15. Layout Patterns Takeaways • Determine whether your layout should be fixed or adaptive • Support snapped state as a fully functional mode of your app • Consider supporting portrait layout when applicable • Use platform support to achieve high performance layout

16. Navigation Patterns for Metro style UI

17. Navigation Patterns Hub Flat Back

18. demo Navigation Patterns

19. Navigation Patterns Takeaways • Use hub pattern with hierarchical structure for apps with large collections of content to explore or multiple sections or categories. • Use flat pattern with a navigation bar for apps with multiple tabs, documents, instant messages, game sessions, or other cases with relatively few sections. • Enable users to go back using standard back button pattern. • Use seamless, inline navigation between pages in the app with standard page transition animations.

20. Commanding Patterns for Metro style UI

21. Commanding Patterns App Bar Settings Pane Flyout Context Menu Tooltip Message Dialog

22. demo Commanding Patterns

23. Commanding Patterns Takeaways • Use App Bar and Flyout to show more commands ‘on demand’ • Use Tooltip to show more information • Consistent, lightweight invocation and dismiss model • Optimized for touch, mouse, and keyboard • Positioned correctly based on system context • Flexibility to define the content in a way that is native to HTML or XAML

24. Scrolling Content Patterns for Metro style UI

25. Scrolling Content Patterns • Idle • No Scrollbar • Touch & Keyboard • Panning Indicator • Mouse • Scrollbar

26. Scrolling Content Patterns - Behaviors • Panning • Zooming • Rails • Inertia • Boundary feedback • Snap points • Nesting • Chaining

27. demo Scrolling Content Patterns

28. Scrolling Content Patterns Takeaways • Use the built-in Scroll Views to get the right user experience • Works for touch, mouse, and keyboard • Achieve sticks-to-the-finger performance • For XAML, use ScrollView control • For HTML, use CSS overflow to get “ScrollView”

29. Presenting Data Patterns for Metro style UI

30. Presenting Data Patterns List View Grid View Flip View

31. Presenting Data Patterns Grouping Single & Multi Select Built-in Animations

32. Presenting Data Patterns Semantic Zoom

33. demo Presenting Data Patterns

34. Presenting Data Patterns Takeaways • Visible way to make your app shine with the Metro design style • Consistent interaction model and behaviors built in • Use List/Grid Views for collections of data • Define your own rich templates ‘natively’ in both HTML and XAML • Connect to your own data: local or cloud • Use Semantic Zoom to scale experience to more data

35. Essential Control Patterns for Metro style UI

36. Essential Control Patterns Button Hyperlink Ratings ListBox Slider Checkbox Combo Box Time Picker Progress Bar Progress Ring Toggle Switch Date Picker Radio Button

37. Essential Control Patterns Button Hyperlink Ratings ListBox Slider Checkbox Combo Box Time Picker Progress Bar Progress Ring Toggle Switch Date Picker Radio Button

38. demo Essential Control Patterns

39. Everyday WidgetPatterns Takeaways • Use the everyday widgets to get a great user experience • Take full advantage of multi-touch screens • Highly flexible styling and customizations: • Realize your scenarios and your app’s own ‘look’ • Retain common feel and functionality

40. Text Editing Patterns for Metro style UI

41. Text Editing Patterns Single-Line Text Box Password Clear Button Reveal Button Multi-Line Text Box Rich Text Box

42. Text Editing Patterns - Behaviors Text Selection Cut, Copy, and Paste Mouse & Keyboard Touch Spellchecking

43. Text Editing Patterns - Touch Keyboard

44. demo Text Editing Patterns

45. Text Editing Patterns Takeaways • Powerful text editing experience • Optimized for touch, mouse, and keyboard • Spellchecking! • Integration with touch keyboard

46. What is Metro style UI?

47. A set of common user interface patterns • Layout • Navigation • Commanding • Scrolling Content • PresentingData • Everyday Widgets • Text editing

48. grounded in a set of design principles • Pride in craftsmanship • Fast and fluid • Authentically digital • Do more with less • Win as one

49. supported by the Windows 8 platform. • For C++/C#: • XAML • For Javascript: • HTML • Windows Library for JavaScript • All powered by the same underlying Windows 8 platform capabilities!

50. A set of common user interface patterns grounded in a set of design principles and supported by the Windows 8 platform.