Silverlight 2 Map / DataGrid Demo (Part 2)

In Part 1 we created a n-tier Silverlight application which used LINQ and Silverlight 2 including the new controls.  That version takes a simple text box parameter for the state we want to look for.  Now let's spruce it up a bit with a map component.  The end result will look like this:

I've posted the source code for the full demo here.  Hopefully you were able to create Part 1 without it.  But you'll need the map markup to do the next step.

Once you have downloaded the code, copy the map in page.xaml into your project.  After you reload the designer you'll see the USA map in the split pane view:

The xaml for the map is a Canvas and a large collection of <Path> items for each state.  A Path is a set of points that bound a region.  If you open page.xaml now in Expression you will be able to click on each Path item to see its name and location:

In this case I've selected Washington state which has the name Path_412.  Because the Path has a x:Name, we can write code against it just our button.  Navigate back to VS2008 and add the following code to the project:

Now when the user clicks anywhere inside the Path for Washington, our handler will get called allowing us to search for items in the database.

With a little more code we can also hook up hover effects to change the color as you move in/out of the state region:

As the mouse enters the Path for the state, its color is changed and vice versa.  Now that you have the basic mechanisms, you could start hooking up all sorts of behavior.  For example you could show the text name of the state, show the state flag, or even play a video bounded by the region.  These are the sorts of features that really set apart Silverlight from normal HTML/AJAX applications.

The obvious next step in the demo is to create a table of the state and path objects and hook up the events in a more generic way.  I've left this as an exercise to the user.

Hopefully these two tutorials have been useful for you, enjoy!