More WPFE, Virtual Earth, and AJAX goodness!

I was inspired by WPF/E and "Layering" Content and Using Opacity with a WPFE / Virtual Earth Mashup to try something similar but different.  I wanted to be able to show WPFE content (vector graphics, text, and video) on a map when I hover over a pushpin.  So I hacked away and this is what I came up with:

The two "buttons" in the top left corner were created using WPFE.  If you click on them, the map will zoom in (+) and out (-).  The buttons on the bottom are standard html input tags.  When you click on the "Add a Pushpin with a WPFE PopUp" button, I programmatically wire up my own hover behavior for the pushpin.  The contents of the popup are pure WPFE goodness!  Check out the transparent background which allows you to see the map underneath!  I put a black border around the div so you can see that the actual size of the WPFE container (aghost).  You can't actually interact with the map unless you are outside of the black border.  I tested the sample in both FireFox 2.0 and IE7.  I think it is really cool how WPFE works with existing web programming technologies.  Here we have HTML, WPFE, JavaScript, and AJAX (the Virtual Earth control is an AJAX control) all happily coexisting!

You can download the sample code from here.  I still need to investigate how to post working samples to, so no live demo.  I'll post a better code walk through or maybe even a screencast when I have some time.  For now, you can download the code and tinker with it yourself. 

Here are some things I would like to try to add to the sample next:

  • See if I can get it working with the 3D mode of the Virtual Earth Map Control (I had this mostly working, but had to pull the code due to time constraints)
  • Add pushpins to the  map by calling a web service using the JavaScript proxy feature of ASP.NET AJAX
  • Add Road/Aerial/Hybrid & 2D/3D WPFE "buttons" next to the Zoom buttons
  • Package the sample up as a Windows Vista Sidebar gadget

One of the things I have been asked quite often from customers doing full blown WPF programming is "I'm building a WPF app which uses the WebBrowser control to integrate Virtual Earth.  How do I display WPF vector graphics on top of the map?"  See my this post for an example of how to do use the Virtual Earth Map Control with WinForms.  "The short answer is that you can't due to the fact that the WebBrowser control is a WinForms control which wraps IE.  When you use the WinForms integration feature that ships with WPF to host a WinForms control, the WinForms control has a higher z-order than any of the WPF content.  Therefore, you can't overlay WPF content on the map.  However, using the approach I use in the sample above, you can use WPFE in the hosted html file.  Yes, you are running both the WPF & WPFE at the same time.  However, you get the benefit of using XAML for both your WPF app and the map overlays.  That means you can use the Expression tools for both :).  In addition to the TODO above, I plan on putting together a sample that uses the approach I just described.

Make sure you install the WPFE CTP before you try the sample:).