1 / 64

Create Metro style apps quickly with built-in controls

APP-211T. Create Metro style apps quickly with built-in controls. Paul Gusmorino Lead Program Manager, Windows 8 Microsoft Corporation. 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

Antony
Download Presentation

Create Metro style apps quickly with built-in controls

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related