WPF 3.5 WebBrowser control and ZIndex

StackOverflow https://stackoverflow.com/questions/83319

  •  01-07-2019
  •  | 
  •  

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

Was it helpful?

Solution

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.

OTHER TIPS

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.

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

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.

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.

I managed to solve this by using this structure, check out the properties configuration in each element:

<Canvas ClipToBounds="False">
     <Popup AllowsTransparency="True" ClipToBounds="False" IsOpen="True">
         <Expander>
            <Grid x:Name="YourContent"/>
         </Expander>
     <Popup>
</Canvas>

You just have to manage the Expander to show or hide your content, I'm using it for a menu bar, I think that the expander is optional depending on the case.

Check out this picture with the result, you can even show your controls on top of the WebBrowser and even outside the main window:

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top