Building Metro style apps that print - PowerPoint Presentation

Building Metro style apps that print Jon KayProgram ManagerDarren DavisPrincipal Software Development EngineerMicrosoft Corporation PLAT-679T

Agenda Understand how printing works in Metro style appsCreating great printed output from your Metro style appsHTML5/JSXAMLDirect2D/XPS You’ll leave with examples of how to Print the way you always wanted to Customize the Microsoft print e xperience for your specific app

Focus on your app. Focus on your content. Leave the printing to Windows.

Takeaways Register for and support printing in your Metro style appCustomize the Microsoft print experience Be creative- make your user’s imagination reality

Air Craft app A fun app which formats content and prints in a variety of waysdemo

What you saw The Microsoft printing experiencePrinting via the Device charm and a buttonPrinting content that is different from what is on the screen

Using the print contract in Metro style apps

Understanding the pieces The content you want to print: the document s ource Your app Coordinates printing between your app and Windows Print manager The print operation: manages options and printing of your document Print task

Digging into the print t askDocument source- the content to be printed Print t ask o ptions- h ow the document is to be printed; obtained from the user and your app

Content Creation Windows Printing Your App Printers Print Subsystem Focus on content , leave the printers to Windows Print Drivers Metro style Printing API Microsoft Print Experience Print Manager HTML5 XAML XPS Direct2D

The print contract in Metro style apps using HTML5/JS

Initialize the Print Task Register for printing Windows paginates Windows provides preview Windows sends output to the printer HTML5/JS simplifies printing

Utilizing the print manager, document source, and print task var pm = Windows . Graphics . Printing . PrintManager . getForCurrentView (); pm . onprinttaskinitializing = printHandlerInstance._ executePrint;_executePrint: function (e) { var d = document .getHTMLPrintDocument(); var printTask = e . request . initializePrintTask ( d , "Air Craft Print Operation " ); }

Launching the Microsoft print experience via a buttonWindows. Graphics . Printing . PrintManager . showPrintUI ();

How to format your content for printing CSSonBeforePrint / onAfterPrint events

Build Printer

Using CSS to hide elements @media print { div.viewManagerContainer { display : none ; } .object3d-preview-background { display : none ; } @media screen{ .printContent { display: none; } }

Using CSS to organize elements #dartGrid .item2 , # dartGrid .item5 , # dartGrid .item8 , # dartGrid .item11 { padding : 0 0 10px 0; margin: 0; -ms-grid-column-align: end; -ms-grid-row-align: center;}

Using CSS to modify content size or prevent page breaks @media print { . instructionsPrint { page-break-inside : avoid ; width : 99% ; height: 99%; }}

Using onBeforePrint/onAfterPrint for contentwindow . document . body . onbeforeprint = printHandlerInstance . _ beforePrint ; window . document . body . onafterprint=printHandlerInstance._afterPrint ;_beforePrint: function (e) { var /*@dynamic*/ elementToPrint = printHandlerInstance.elementToPrintRetriever(); elementToPrint . className += " printContent " ; document . body .appendChild(elementToPrint ); },_afterPrint : function (e ) { var printContentList = document . querySelectorAll ( ". printContent " ); for ( var i = 0 ; i < printContentList . length ; i ++) { printContentList[i].parentElement.removeChild(printContentList[i]);}}

Build Printer

Utilize and customize the Microsoft print experience.

Choose which options show up Reorder options Set defaults Customize the Microsoft p rint e xperience

Microsoft print experience - standard optionsNumber of copiesOrientationColorPaper size Print duplex Collation N-up Print m edia t ype Paper source Print quality Staple Hole punching Binding

Choosing/ordering options printTask.options.displayedOptions.clear(); printTask.options.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.copies); printTask.options.displayedOptions.append ( Windows.Graphics.Printing.StandardPrintTaskOptions.colorMode ); printTask.options.displayedOptions.append ( Windows.Graphics.Printing.StandardPrintTaskOptions.mediaSize ); printTask.options.displayedOptions.append ( Windows.Graphics.Printing.StandardPrintTaskOptions.mediaType );

Set default options // Letter size try { e . target . options . mediaSize = Windows . Graphics .Printing.PrintMediaSize.northAmericaLetter ; } catch ( exception) { MyPlane . Utilities.Debug.log(exception); }// Color try { e . target . options . colorMode = Windows . Graphics.Printing. PrintColorMode.color; } catch ( exception ) { MyPlane . Utilities . Debug . log ( exception ); }

Adding printing support to Metro style apps that use HTML5/JS is easy.

The print contract in Metro style apps using XAML

Metro style app using XAML/C#An app that customizes the print experience with app specific options demo

Initialize the Print Task with a PrintDocument Register for printing Paginate Provide XAML content for preview Provide XAML content for printing XAML simplifies printing

Use PrintTaskAdvancedOptions to create custom options Item list options Text options Mix standard and custom options Respond to changes – use the OptionChanged event Making the p rint experience your own

Adding printing support to Metro style apps that use XAML is easy.

The print contract in Metro style apps using Direct2D or XPS

Printing D2D or XPS content Initialize Print Task with your Document Source Register for printing Paginate content Create preview pages Create final print pages

Use the D2D PrintControl to convert from D2D commands to XPS content Use D2D drawing commands to layout your content on a D2D Command List Use the D2D PrintControl to convert the Command List to XPS Use XPS directly if you need to Creating your document s ource

Windows 8 enables you to create high quality printed output from Metro style apps that use Direct2D or XPS.

Recap

Focus on your app. Focus on your content. Leave the printing to Windows.

Takeaways Register for and support printing in your Metro style appCustomize the Microsoft print e xperience Be creative- make your user’s imagination reality

Related sessions APP-408T- Integrating with the Windows device experience APP-914T- The lifetime of XAML text: from input to display through printing PLAT-769T- Achieving high performance 2D graphics with Direct2D HW-238T- Connecting printing devices to Windows using v4 printer drivers HW-652T- Building a great Metro style device app for your printer

Further reading and documentation How-To guides for Metro style printing in the Windows SDKWindows.Graphics.Printing namespace Windows.Graphics.Printing.Advanced namespace Print Document Package Reference pages Windows SDK samples Metro style HTML5/JS Printing Metro s tyle XAML Printing Metro style D2D/C++ Printing

Feedback and q uestions http://forums.dev.windows.com Session f eedback http ://bldw.in/SessionFeedback t hank you

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