Question

I have a bunch of controls derived from System.Windows.Forms.UserControl, which are then being displayed in a browser (Internet Explorer only). The page they are in has a border (a div) that I want the controls to go ‘under’, but they all draw on top of it.

I’ve seen pages claiming that what I need to do is make the UserControls ‘windowless’, and examples of how to do it in VisualBasic or in SilverLight, but nothing helpful for me (I’m using C++ and C# here)

So, any ideas?

Answer 1

There was a trick that used to be common for putting divs over native elements in IE. You put a transparent iframe with nothing in it under the div you’re trying to raise;

<!-- windows forms garbage here -->

<iframe id="underlay" src="javascript:false" frameborder="0" style="Alpha(style=0,opacity=0)"></iframe>
<div id="overlay"></div>

This would push overlay into a new directx layer (not to be confused with browser layer, ie z-index).

EDIT: Found why it didn’t work: “The other technique, which uses the IFRAME element’s ALLOWTRANSPARENCY attribute, actually pertains to making the interior page background of the IFRAME transparent, so that any content inside the IFRAME can have transparency. However, this mode changes the nature of the IFRAME and it no longer serves our purpose for blocking out windowed controls.”

The fix is to use an alpha filter for the transparency effect instead of ALLOWTRANSPARENCY.