1 / 19

Building a sample Metro style canvas paint app using HTML

TOOL-787C. Building a sample Metro style canvas paint app using HTML. David Owens II SDET II Microsoft Corporation. Agenda. A brief look at the app Overview of the app’s structure Walkthrough building some of the components You’ll leave with examples of how to

roman
Download Presentation

Building a sample Metro style canvas paint app using HTML

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. TOOL-787C Building a sample Metro style canvas paint app using HTML David Owens II SDET II Microsoft Corporation

  2. Agenda • A brief look at the app • Overview of the app’s structure • Walkthrough building some of the components You’ll leave with examples of how to • Create an app from a Visual Studio project template • Provide the basic implementation for multi-touch drawing

  3. demo Canvas Paint Let’s take a look at the app.

  4. App overview

  5. Basic architecture Navigation System Art Board Gallery View Canvas App Bar Palettes List View App Bar

  6. Building canvas paint • Starting from the Visual Studio Project templates • Building the views of the app • Implementing drawing on the canvas • Creating a custom startup path • Customized snapping behavior

  7. demo Getting started building the app

  8. What have we done?

  9. Building canvas paint • Starting from the Visual Studio Project templates • Building the views of the app • Implementing drawing on the canvas

  10. What’s left? • Creating a custom startup path • Customized snapping behavior

  11. demo Finish up the app

  12. Review

  13. What did we learn? • Start an app from a project template • Create the views from item templates • Handle drawing on the canvas • Creating custom startup logic • Creating custom snapping behavior

  14. Next Steps

  15. Go build some apps!

  16. Related sessions and labs • [APP-185T] Make great Metro style apps that are touch-optimized using HTML5 • [APP-186T] Build advanced touch apps in Windows 8 • [PLAT-192C] Bring pen and touch input to your Metro style apps with ink • [TOOL-486T] A deep dive into Expression Blend for designing Metro style apps using HTML • [TOOL-501T] Introducing the Windows libraries for JavaScript • [TOOL-514T] Debugging your Metro style apps using HTML

  17. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

  18. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related