WPF 3.5 WebBrowser control and ZIndex

问题

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

回答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.

回答2:

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.

回答3:

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

flounder.com
msdn

回答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.

回答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:

When the Image drag starts, create a Bitmap of the WebBrowser using "RenderTargetBitmap"
Add your Bitmap to the canvas, using the same width/location as the webbrowser
webControl.Visibility = Visibility.Hidden.
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.

回答6:

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:

来源：https://stackoverflow.com/questions/83319/wpf-3-5-webbrowser-control-and-zindex

标签

wpf

browser

z-index