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"/&gt;
       <Rectangle Canvas.ZIndex="2" Height="100" Width="100" Fill="Red"/>
  </Canvas>

Thanks, -- Ed

Answer 1

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 2

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.

Answer 3

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

• flounder.com
• msdn

Answer 4

You can also use a transparent Popup control to have something float on top of the WebBrowser control. More information and a code sample can be found here.

Answer 5

I hit this issue as well. In my case I was dragging images from one panel into the WebBrowser, but of course as soon as my image moved into the browser it was hidden.

Currently working on the following solution:

1. When the Image drag starts, create a Bitmap of the WebBrowser using "RenderTargetBitmap"
2. Add your Bitmap to the canvas, using the same width/location as the webbrowser
3. webControl.Visibility = Visibility.Hidden.
4. When the drag is released, remove your bitmap and set webControl.Visibility = Visible.

This solution is very specific to my situation, but maybe it will give you some ideas.