locked
How to print background colors and images on Windows Store App

    Question

  • I want to append a printing function for Windows Store App.

    On HTML5+JavaScript, it uses setSource(MSApp.getHtmlPrintDocumentSource()) with the HTML document. But neither background images nor background colors are printed as it is. 

    On Internet Explorer 11, it can print those by the printing option.  Are there API or CSS which realize this at Windows Store App program? 

    Thursday, March 6, 2014 11:58 PM

Answers

  • Hi,

    From Internet Explorer 9 to Internet Explorer 11, you cannot see the printing background colors in Internet Tools->Advance Setting.

    But you can open Internet, then click File (Alt+f)> Page setup to check/uncheck Print background colors and images. See the link below:

    http://answers.microsoft.com/en-us/ie/forum/ie9-windows_7/internet-explorer-9-stop-printing-background/84388323-6ff3-4218-8529-74d5da42d8d3

    Afterenable Print background colors and images in Internet, you should create the print css file and define background color in print preview content:

    #rootGrid
    {
        width: 100%;
        height: 100%;
        display: block;
        
    }
    
    #inputLabel, #outputLabel, #input, #statusMessage
    {
        display: none;
    }
    
    .article
    {
        
         background: Blue;
        color: red;
        float: left;
    }
    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, March 11, 2014 7:26 AM

All replies

  • Hi,

    To format the app's screen for printing, you can create a cascading style sheet (CSS) that defines the styles that change when printing. If you want to print background color, you should define the background in CSS. And by use of CSS, you can hide content, resize elements, adjust margins, remove elements such as backgrounds and scrollbars, change fonts and colors, and a lot more. You can refer to the links to get more information:

    http://blogs.msdn.com/b/windowsappdev/archive/2012/09/25/creating-a-great-printing-experience-in-windows-8.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/hh761451.aspx

    And refer to the sample:

    http://code.msdn.microsoft.com/windowsapps/Print-Sample-c544cce6

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, March 7, 2014 2:01 AM
  • Of cource, I looked at these pages, but the reference about a background printing had neither. 
    Friday, March 7, 2014 4:47 AM
  • Hi,

    From Internet Explorer 9 to Internet Explorer 11, you cannot see the printing background colors in Internet Tools->Advance Setting.

    But you can open Internet, then click File (Alt+f)> Page setup to check/uncheck Print background colors and images. See the link below:

    http://answers.microsoft.com/en-us/ie/forum/ie9-windows_7/internet-explorer-9-stop-printing-background/84388323-6ff3-4218-8529-74d5da42d8d3

    Afterenable Print background colors and images in Internet, you should create the print css file and define background color in print preview content:

    #rootGrid
    {
        width: 100%;
        height: 100%;
        display: block;
        
    }
    
    #inputLabel, #outputLabel, #input, #statusMessage
    {
        display: none;
    }
    
    .article
    {
        
         background: Blue;
        color: red;
        float: left;
    }
    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, March 11, 2014 7:26 AM