Published
Friday, December 15, 2006 5:00 PM
by
mtaulty
This gets more interesting by the day (for me, anyway :-)).
I wondered what happened if I wanted to "overlay" WPF/E content on top of other content in the browser and the most interesting content I could think of was a map from Virtual Earth.
It took about 1 minute to work out how to get the default map in Virtual Earth (with most of the minute being spent navigating to the help page that says how to do it) and then I drew this little triangle thing in Expression Design that you can see on the screen below and then brought that Path object in to the WPF/E environment and positioned a windoless WPF/E Canvas right over the top of the Virtual Earth map control and set both of them to the same width and height (using the z-index to make sure that the WPF/E content is on top).
I set up event handlers in Javascript for the MouseEnter,MouseLeave, MouseLeftButtonUp, MouseLeftButtonDown, MouseMove events that fire from the Canvas object and the only handler that really does anything with the map is the MouseMove handler which just calls Pan on the map to move it around the screen.
So...when we're dragging this map around it's actually the WPF/E Canvas that catches the drag event and passes it on to the VE control underneath.
I could see some people (with graphical talent) doing some seriously cool things with Virtual Earth on the back of this.
Here's the link to the sample;
http://mtaulty.com/wpfe/ex9.html
There's a little animation on the funny looking Path object in the middle to make it grow and shrink a little just to show that our WPF/E content is "live".