Take the 2-minute tour ×

I've followed some examples trying to layer a rectangle over the WebBrowser object:

Here is the MSDN example link. (I got it to work)

Layers issue using Z-Index

Here is the code I'm trying to get to work:

    <Canvas Margin="2,4,0,-450" >
        <Rectangle Height="452" Canvas.ZIndex="1000" Name="rectangle1" Stroke="Black" Width="524" Opacity=".5" Fill="#8CBABABA" Canvas.Top="-7" Canvas.Left="-3" />
        <WebBrowser Name="mapBrowser" Canvas.ZIndex="999" Margin="5,5,5,5"  Height="452" Width="516" Canvas.Top="-11" />

I'm trying to make the WebBrowser appear grayed out by making the rectangle appear over top of it. I'll also disable it.

Can anybody point to what I'm doing wrong?

share|improve this question
Which version of .Net? There are known "airspace" issues with WPF and WebBrowser. –  user7116 Mar 28 '13 at 19:15
embarrassed @sixlettervariables How do I check. I'm VS2010 if that tells you. –  Nallware Mar 28 '13 at 19:28
You're using at most 4.0, so yeah you won't be able to overlay anything with the WebBrowser control. –  user7116 Mar 28 '13 at 19:29
Pooh. Any simple workarounds? –  Nallware Mar 28 '13 at 19:30
the WPF webbrowser is actually a wrapper around the ActiveX stuff. you wont be able to place WPF UI elements over it. I suggest taking a look at Awesomium. –  HighCore Mar 28 '13 at 20:38

1 Answer 1

up vote 0 down vote accepted

I solved this issue by creating a .png image which I placed in the same space as the webbrowser. It looks like a grayed-out version of what first appears in the webbrowser. Then I conditionally hid the webbrowser which makes the image visible. This is the only way I've found to make it work using .Net 4.0.

share|improve this answer

Your Answer


