Saturday, April 14, 2007

WPF/E - How To Put VirtualEarth Content Above WPF/E Content

During the implementation of the GeoPhoto User Control I ran into a problem I had not anticipated. Please allow me to setup the problem.

A WPF/E control is rendered as an ActiveX Control, which happens to also be considered a windowed control. Within IE 5.5+, HTML content cannot be layered above windowed controls in a straight forward approach. You may have seen this in some DHTML style menus on the web. You may have noticed a menu "hiding" behind a drop down list, though you would expect the menu to be above the list. Because the drop down list is an example of a windowed control, the menu is rendered under, or behind, the drop down list.

Occasionally, you may want to present HTML content, such as integrating Virtual Earth content, on top of your WPF/E content. The previously described problem, may cause some frustration. However, don't worry, here's how to get around the problem.
  • Place your HTML content within a DIV element.
  • Define the height and width of the DIV element. This is recommendation to ensure that everything is working properly.
  • Define the top and left positions of the DIV element.
  • Create an IFRAME element that is the same height and width of the DIV element.
  • Position the IFRAME element at the same location of your DIV element.

This works because as of Internet Explorer 5.5, IFRAME elements are no longer windowed controls. Crafty.

1 comment:

rbunn83815 said...

I just wanted to ask one question and let you know you do great work here. Anyhow, I am trying to figure out how to put html on top of a canvas. I see you left some great advice on that, but I'm a newbie to a lot of this. I was wondering if you could do a quick tutorial on how someone might add content on the "turning pages" sample Microsoft provided with the Feb. CTP release samples. It's a sample of a virtual book, but they've just got WPF content on all the pages. If I could put hyperlinks, buttons, etc. (in C#) that would be great. If you want to respond, but don't feel like doing a full tutorial or anything I am at rbunn83815 [at] yahoo [dot] com. Keep up the great work!