Using WPF, Virtual Earth, and WPF/E together...

A while back, I blogged about using WPF/E & Virtual Earth together.  The post is here.  I've also blogged about adding Virtual Earth in a Windows Forms application here (last paragraph).  What about WPF?  Given that the Virtual Earth v4 Map Control is delivered as a set of JavaScript libraries, the same approach we used in Windows Forms applies to WPF.  However, WPF does not ship with a "native" control with the same functionality as the WebBrowser control which ships with the .NET Framework 2.0.  The good news is the good folks in "WPF Land" thought about these types of dilemmas and created a really nice interoperability layer for WPF/Windows Forms.  There is a class called WindowsFormsHost in the System.Windows.Forms.Integration namespace which allows you to host Windows Forms controls in a WPF application (See Supported Scenarios in Windows Presentation Foundation and Windows Forms Interoperation).  One problem solved.

The next problem you will very quickly discover (or read about in the "Supported Scenarios" link) is that a "hosted Windows Forms control is drawn in a separate HWND, so it is always drawn on top of WPF elements."  Oh oh, that means you can't overlay WPF elements over the mapsmile_sad

WPF/E to the rescue!  Even though WPF & WPF/E have completely different runtimes, they share the same markup language.  WPF/E markup is a subset of WPF markup.  Therefore, you can target both technologies with one definition.  WPF/E is targeted at augmenting existing web technologies (works great with ASP.NET AJAX as well as other AJAX, DHTML/JavaScript applications).  The Virtual Earth v4 Map Control fits into this category (it's a JavaScript control which employs AJAX techniques).  I showed the two working together here

WPF/E is a perfect workaround to the WPF/Windows Forms interoperability limitation. 

The picture below shows a WPF application defined using XAML, which uses the WindowsFormsHost control to host the .NET Framework 2.0 WebBrowser control, which in turn points to an html file which uses the Virtual Earth v4 Map Control (JavaScript).  When you click the "Add Pushpin" WPF and then hover over the pushpin, you will get a popup with WPF/E elements (vector graphic, text, and video) defined using XAML.

As you can see, this approach even works in 3D mode!

You can download the sample code here

-Marc