Create Metro style apps quickly with built-in controls

1. APP-211T Create Metro style apps quickly with built-in controls Paul Gusmorino Lead Program Manager, Windows 8 Microsoft Corporation

2. Agenda • What’s new with controls in Windows 8? • Walkthrough the built-in controls and their key features • Getting started using controls • with HTML5 and JS • with XAML and C#/C++ You’ll leave with examples of how to • Use built-in controls to create great Metro style apps

3. What’s new with controls in Windows 8?

4. New and improved set of built-in controls.

5. Designed for touch, mouse, and keyboard.

6. Fit your app’s look, yet preserve a common feel.

7. Native to HTML. Native to XAML.

8. demo //build/ Conference app What’s new with controls in Windows?

9. ‘Native’ to both HTML and XAML • For XAML • For all controls  XAML control model • For HTML and JS • For many control concepts  HTML5 standard controls and CSS • For new control concepts  Windows Library for JavaScript

10. Windows Library for JavaScript (WinJS)library for building Metro style apps using JavaScript • Make your apps look and feel great • Matches the Windows Metro design style • Controls for common user experiences • Designed for touch as well as traditional input • Scales across form factors • Build your apps fast and with high quality • Web technologies you’re already familiar with • Modern patterns for responsive, reliable apps • Leverage interactive design tools

11. Toggle Switch (XAML) XAML: <ToggleSwitch Header="Wi-finetworking" x:Name="MyToggle" /> C#: MyToggle.Toggled += newRoutedEventHandler(ToggleWifi);

12. Toggle Switch (HTML) • HTML: • <divdata-win-control="WinJS.UI.Toggle" • data-win-options="{title: 'Wi-fi networking'}" • id="myToggle" • </div> JavaScript: WinJS.UI.getControl(myToggle).addEventListener("change", toggleWifi);

13. Additional benefits • Accessibility • World readiness • Crisp visuals • Performance • Metro style

14. Best way to implement common UI patterns so you can focus on what makes your app great!

15. Walkthrough the built-in controls and their key features

16. Built-in controls • Everyday widgets • Text editing • Scrolling content • Presenting data • Commanding surfaces

17. Everyday widgets

18. Everyday widgets Button Hyperlink Ratings ListBox Slider Checkbox Combo Box Time Picker Progress Bar Progress Ring Toggle Switch Date Picker Radio Button

19. Everyday widgets - custom styled Button Hyperlink Ratings ListBox Slider Checkbox Combo Box Time Picker Progress Bar Progress Ring Toggle Switch Date Picker Radio Button

20. demo SDK sample Everyday widgets

21. Everyday widgets 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

22. Text editing

23. Text editing controls Single-Line Text Box Password Clear Button Reveal Button Multi-Line Text Box Rich Text Box

24. Text editing controls - behaviors Text Selection Cut, Copy, and Paste Mouse & Keyboard Touch Spellchecking

25. Text editing controls - touch keyboard

26. demo //build/ Conference app Text editing

27. demo SDK sample Text editing

28. Text editing controls takeaways • Powerful text editing experience • Optimized for touch, mouse, and keyboard • Spellchecking! • Integration with touch keyboard

29. Scrolling content

30. Scrolling content with ScrollView • Idle • No scrollbar • Touch & keyboard • Panning indicator • Mouse • Scrollbar

31. Scrolling content with ScrollView • Panning • Zooming • Rails • Inertia • Boundary feedback • Snap points • Nesting • Chaining

32. demo Memories Scrolling content: pan

33. demo Measure-It! Scrolling content: zoom

34. demo Air Craft Scrolling content: snap points

35. Scrolling content 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”

36. Presenting data

37. Presenting data controls List View Grid View Flip View

38. Presenting data controls Grouping Single & Multi Select Built-in Animations

39. Semantic zoom

40. demo Flash Cards Presenting data

41. demo News Presenting data

42. demo Memories Presenting data

43. demo //build/ Conference app Presenting data

44. ListView data templating (HTML) • <divdata-win-control="WinJS.Binding.Template"id="myTemplate"> • <divstyle="width:110px; margin:10px"> • <imgdata-win-bind="src: picture" style="height: 60px; width: 60px"/> • <input type="button"data-win-bind="value:buttonText"/> • </div> • </div> • <divheight="400" • data-win-control="WinJS.UI.ListView" id="listview1" • data-win-options="{dataSource: myData, itemRenderer: myTemplate}"> • </div>

45. ListViewdata templating (XAML) • <DataTemplate x:Key="MyTemplate"> • <Grid Width="110" Margin="10,10,10,10"> • <Image Source="{Binding Image}" Height="60" Width="60"> • <ButtonContent="{BindingButtonText}" > • </Grid> • </DataTemplate> • <GridHeight="400"> • <GridView x:Name="ListView1"Width="Auto" Height="Auto” • ItemTemplate="{StaticResourceMyTemplate}" /> • </Grid>

46. Presenting data controls 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

47. Commanding surfaces

48. Commanding surfaces App Bar Settings Pane Flyout Context Menu Tooltip Message Dialog

49. demo Notespace Commanding surfaces – app Bar

50. demo Weather Commanding surfaces – Flyout