WPF 3.5 WebBrowser control and ZIndex

Question

I'm trying to figure out why the control does not honor ZIndex.

Example 1 - which works fine

   <Canvas>
       <Rectangle Canvas.ZIndex="1" Height="400" Width="600" Fill="Yellow"/>
       <Rectangle Canvas.ZIndex="2" Height="100" Width="100" Fill="Red"/>
   </Canvas>

Example 2 - which does not work

   <Canvas>
       <WebBrowser Canvas.ZIndex="1" Height="400" Width="600" Source="http://www.stackoverflow.com"/>
       <Rectangle Canvas.ZIndex="2" Height="100" Width="100" Fill="Red"/>
  </Canvas>

Thanks, -- Ed

Answer 1

You are running into a common WPF pitfall, most commonly called the "The Airspace Problem". A possible solution is to NOT use the WebBrowser control, and instead go for something a little crazier - namely an embedded WebKit browser rendering directly to WPF. There are two packages that do this; Awesomonium (commercial) and Berkelium (open-source). There's a .NET wrapper for both of these.

Answer 2

Unfortunately this is because the WebBrowser control is a wrapper around the Internet Explorer COM control. This means that it gets its own HWND and does not allow WPF to draw anything over it. It has the same restrictions as hosting any other Win32 or WinForms control in WPF.

MSDN has more information about WPF/Win32 interop.

Answer 3

You could SetWindowRgn to fake the overlapping area by hiding it as shown here:

• flounder.com
• msdn

Answer 4

I solved a similar issue where I was hosting a 3rd party WinForms control in my WPF application. I created a WPF control that renders the WinForms control in memory and then paints it to a bitmap. Then I use DrawImage in the OnRender method to draw the rendered content. Finally I routed mouse events from my control to the hosted control. In the case of a web browser you would also have to route keyboard events.

My case was fairly easy - a chart with some simple mouse interaction. A web browser control may have other issues that I didn't take into consideration. Anyway I hope that helps.