Tuesday, March 27, 2007

WPF/E - GeoPhoto - A User Control With Fun in Mind

UPDATE - 05.06.2007 - The content of this post is no longer valid with the 1.0 beta release of Silverlight.

Greetings,

One of my hobbies is Geocaching. Because of this, I decided to keep a blog regarding my caching adventures. I wanted this blog to be very heavily focused on pictures and location to help readers connect with the locations. This seemed like a perfect opportunity to create a reusable component that would allow me to load location specific images. The control displays images and if the "swap" icon is selected, a Virtual Earth map of the location of the photo is displayed. Hence the birth of GeoPhoto.

On the WPF/E side of the ball, this component is interesting because it demonstrates some very powerful, and valuable, techniques including:
  • Displaying HTML content ON TOP OF WPF/E content. I have not seen this implemented elsewhere. Everything else I have seen involves displaying WPF/E content on top of HTML content
  • Exposing ASP.NET user control properties to client (JavaScript) code
  • A fairly smooth slider "control".
  • Converting data from an XML file into JavaScript objects that are used throughout the application.
  • Creating a TRUE User Control in that you can actually use it several times on the same page.

This control reads the image: source, latitude, and longitude values from an xml file. The xml file location is actually exposed as a property of the user control. This control allows you to do the following:
  • Define the source of a picture and it's latitude, longitude
  • Define a latitude and longitude for a group of pictures
  • Define picture groups for multiple locations.

Please bear in mind, this control can be expanded upon to be more robust. This was primarily designed to be used for a specific case, and then I expanded it to be a bit more reusable, then I decided to share it through my blog. I hope you find it useful. There are several items that can definately be improved upon. One item is I would like to utilize the Downloader object more. Another one of these items is the fact that the control currently doesn't work in Firefox. I believe there is a bug in the Feb CTP that does not allow the SourceElement of a WPF/E control to be accessed when attempted through Firefox. I have posted a question on the forum regarding this. I hope to find some time to remedy this, and if so, I will definately make a post about it (so make sure you use the RSS subscription :)).

Over the next couple of weeks, leading up to MIX '07, I intend to write some more detailed posts regarding some of the points listed above. These posts will be based on the GeoPhoto control, and now is as good as time as any to make this control available. I look forward to your comments.

Project Information
    Source Code: here
    Requirements: WPF/E February 2007 CTP

5 comments:

Ryan Stewart said...

This is awesome! Can you throw in an example XML file so we can see the app working? I'd love to see it in action.

Chad Campbell said...

Ryan, There is a sample .xml file. It is located within the ./resources/data directory. You should be able to run the application straight from Visual Studio without any changes. Currently the images are being pulled from a publicly facing site I created. If this does not work, please post an additional comment, however I just tried it without any problems.

Ryan Stewart said...

Cool, thanks Chad. Do I need "orcas" for this?

Chad Campbell said...

Ryan,

You do not need Visual Studio "Orcas" for this. I did all of the development using Visual Studio 2005, however the only thing you need is something to develop ASP.NET applications with, and the WPF/E runtime. The open architecture of WPF/E permits you to perform WPF/E development in something as basic as Notepad. For more information, I would recommend reading the following: http://msdn2.microsoft.com/en-us/library/bb190632.aspx

Anonymous said...

Oh wow nice!