Problem printing WebBrowser control from Backstage

Jun 15, 2010 at 1:27 PM

My main window contains a large webbrowser control (containing a google maps map), which I need to be able to print. If I add the standard print menu to Backstage, opening the backstage menu collapses the webbrowser, which prevents me from printing it (I just get a blank page).

I can print it by placing a Print button somewhere else on the ribbon, but I think that breaches the fluent UI guide, and anyway, I rather like having the preview appear on the right side of the backstage.

So any idea how I can print (and preview) my browser control, and remain within the rules?


(I'm printing by rendering the browser's FrameworkElement to xps, which I can then send either to the preview pane or the printer)

Jun 15, 2010 at 2:52 PM

Yah, that is pain. We have to hide webbrowser control, otherwise this control will be overlap everything including backstage (webbrowser based on windowsformshost technology).

1) Can you just create new one and render it?
2) Also you can unhide it with mywebbrowser.Visibility = Visibility.Visible.

Is it help?

Jun 15, 2010 at 5:52 PM

2. Yes you can, but it just splurts all over the backstage (as you pointed out)

1. I can try making a copy of the framework element (a complete new render would take quite a long time) before the backstage opens and see what happens. Any chance of a PreviewBackstageOpening/PreviewBackstageClosing event?


Sep 6, 2010 at 12:13 PM

I've managed to kind of work around this by moving the  browser beyond the window bounds during the IsVisibleChanged event for my print tab's grid. It does work, but it's kinda clunky and you sometimes get the browser flashing briefly.


I'm hoping there will be a proper solution in v2...? This is a big deal for my app.


Oct 12, 2010 at 10:06 AM

Any progress with this? I can't see any improvement in v2.0...

I've even tried printing outside the Backstage, but there is another problem: The browser is dropped in the printout by the height of the ribbon and window top border (if you minimise the ribbon, the drop is reduced), and this cuts off  the corresponding amount from the bottom of the print. I can get a suitable print by tweaking the margins on the browser control, but this then ruins the screen display, as the browser trashes the ribbon.

I cannot emphasise enough how important it is to get this working. Thanks.


Oct 13, 2010 at 8:11 AM

What particularly can we do to help you?
Why would you just remove temporary it from the window & print it out?


Jan 1, 2011 at 10:38 AM

Well here I am right here with Tim on this one. I'm wanting to create a backstage print preview control using webbrowser.  The user clicks print on the backstage menu and when the print tab opens it displays a preview using the webbrowser control on the right side.

Problems I'm having:

1) If you hide or click a different backstage tab, say Recent then click back to Print the webbrowser dissapears.

2) You can see the first webbrowser control on the main window through the backstage windows, so as that both webbrowser controls are seen at the same time, one overlapping the other.

3) No real events tied to the Fluent tabs that we can include triggers to perhaps refresh the drawn control, or if so Not working for me.

    example: Having event handler that fires if the currently selected Fluent tab gets switched to another tab, or fluent windows itself loses or gains focus.

The thing here is, I feel both Tim and myself are wanting to create a print window that resembles Word 2010's Print window, using the webbrowser control as the form display control since you can construct page information and populate it. This has the potential of making a very powerful interface.

Jan 15, 2011 at 10:27 AM

I found a viable work around for our displaying problem Tim.


If you add some code to the Backstage.IsOpen event trigger lke this

        private void MyBackStage_IsOpenChanged(object sender, DependencyPropertyChangedEventArgs e)
             if (MyBackStage.IsOpen && tbContacts != null)
                  tbContacts.Visibility = Visibility.Hidden;
                  PrintBrowser.Visibility = Visibility.Visible;
                  PrintBrowser.Width = Window.Width - 450;
             else if (tbContacts != null)
                  tbContacts.Visibility = Visibility.Visible;
                  PrintBrowser.Visibility = Visibility.Hidden;
                  PrintBrowser.Width = Window.Width - 450;
tbContacts is the control containing my webbrowser control on my main WPF window. PrintBrowser is of course the webbrowser control I'm using that is displayed inside the Backstage window.
When you open or close the backstage window you simply check to see if the control in question exists yet, or has been drawn, hence the tbContacts != null.
If it is and you have Backstage window open then you hide the main windows webcontrol so that it cannot be seen through the Backstage window.
and vice versa, if the Backstage window is closed it hides the PrintBrowser webcontrol and makes the one on the Main window visible. In the case of this it still only makes it visible if my
tbContacts actually contains a tab, otherwise I don't want my tabcontrol visible anyways.
like this


I still have a few minor issues to work around but it's nothing to do with the displayment of the webbrowser controls inside a backstage window now. Hope this help you Tim, you've helped me a lot in the past.

Jan 16, 2011 at 8:52 AM

Hi Adam, thanks for that - I'll give it a try and see how it works out. My webbrowser holds a google map with a lot of custom overlays, which can be quite slow to generate, so I'll need to see how big an overhead this gives me. But if it works... :)