building a sample metro style canvas paint app using html l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Building a sample Metro style canvas paint app using HTML PowerPoint Presentation
Download Presentation
Building a sample Metro style canvas paint app using HTML

Loading in 2 Seconds...

play fullscreen
1 / 19

Building a sample Metro style canvas paint app using HTML - PowerPoint PPT Presentation


  • 147 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Building a sample Metro style canvas paint app using HTML' - roman


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
agenda
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
canvas paint
demo

Canvas Paint

Let’s take a look at the app.

basic architecture
Basic architecture

Navigation System

Art Board

Gallery View

Canvas

App Bar

Palettes

List View

App Bar

building canvas paint
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
building canvas paint9
Building canvas paint
  • Starting from the Visual Studio Project templates
  • Building the views of the app
  • Implementing drawing on the canvas
what s left
What’s left?
  • Creating a custom startup path
  • Customized snapping behavior
what did we learn
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
related sessions and labs
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
feedback and questions http forums dev windows com session feedback http bldw in sessionfeedback
thank you

Feedback and questions http://forums.dev.windows.com

Session feedbackhttp://bldw.in/SessionFeedback

slide18

© 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.