More on Silverlight 3’s Navigation Framework

A few weeks ago, I blogged about a sample application I wrote that uses Silverlight 3’s WriteableBitmap class to draw views of the Mandelbrot set. I hadn’t used it long before I realized that it really needed Back-button support. You could drill down into the Mandelbrot set, but you couldn’t drill back out. Enabling the browser’s Back and Forward buttons seemed a natural way to remedy the situation, but Silverlight and the Back button have never gotten along very well.

Silverlight 3’s navigation framework enables the Back button by allowing developers to organize content into navigable “pages” and adding an entry to the browser’s history journal each time the user navigates from one page to another. It also adds deep linking support by making each page (and the state that defines it) bookmarkable. Having deep linking support would be a huge plus in my Mandelbrot viewer because users would be able to share fractal scenes by passing around URLs.

So I built a new version of the app that combines Silverlight 3’s navigation framework with self-referential pages to add deep linking and Back-button support. “Self-referential” means the application consists of a single page that navigates to itself to draw new views of the Mandelbrot set. Each navigation event is accompanied by a RESTful URL that defines precisely which region of the set to render. And each navigation event generates a history node that enables the user to back out of the current location by clicking the Back button.

You can try the app online, or you can download the source code and run it locally. Of course, you’ll need to have the Silverlight 3 Beta 1 Tools for Visual Studio installed to do the latter. As you peruse the source code, here are a few highlights to serve as guide posts:

• MainPage.xaml contains little more than a Frame control. The only “page” in the app is Mandelbrot.xaml.
• The logic for drawing a new view of the Mandelbrot set lives in the page’s OnNavigatedTo method and in the helper method named DrawMandelbrotSet. OnNavigatedTo looks for a query string containing four coefficients that define a rectangle in the complex plane; this rectangle identifies a region of the Mandelbrot set. When you let go of the mouse button after dragging a selection rectangle around the region you want to zoom into, the page navigates to itself and includes a new query string identifying that region.
• An instance of UriMapper declared in App.xaml converts raw URLs into RESTful ones and cleans up the stuff in the browser’s address bar a bit.

Check it out and if you find a particularly beautiful scene in the Mandelbrot set, post a link in the comments section so the rest of us can see it, too. And for kicks, here’s a scene to get you started.