Wiring Silverlight Into the Browser History/Back Button

While watching a presentation Jason Cook was doing on flash he suggested some of the tricks used by other technologies could be used with Silverlight. The trick I was interested in was particularly being able to wire things into the browser history so that the back button of the browser does something other then go back to a different web page. This turned out the be a simple task. The way my sample works is that the html file (or .net page etc) that is running the silverlght application includes this Silverlight Paging class. At the end of the page is a block that initializes the class. On initialization it adds an iframe to the root pointing at one of two proxy files. The silverlight application then needs to add a proxy handler for setting application state based on any key it wants and each time application 'state' changes that you want to be a history 'point' you just call 'AddPage' with a key on the class. When some one then hits the back button the browser loads a different proxy with a different key stored as a query string value; which is then returned to the proxy handler or 'delegate' that sets application state. Slick as a whistle.

So lets look at that in more detail. Starting from the page that hosts our Silverlight application we can see that there is a script include. That script file includes our class and at the bottom of the page is our initialization code.



In the block of script at the bottom we have two lines of code. The first creates a global reference and instance of our class and the second line calls the Init method. If we go to our class source and go to the Init method and all it does is do a document.write and inserts an iframe that our class will use to create history paging entries.

In the paging prototype we also see two other methods. The method 'AddPage' loads page proxies into our iframe to create entries using our key value.

SilverlightPager.AddPage( "somevalue that indicates state");

in my sample project we just use an indexer in our Scene object on on mouse click on the button this happens:

// Put clicked logic here
this.indexer++;

SilverlightPager.AddPage(this.indexer);

Our next method is called 'OnReturnPage' which is actually called by our proxy pages. So in our Silverlight application we call 'AddPage' and pass in a key value each time we change state in and what that to be a history point. In our sliverlight load we also need to associate a delegate to the 'PagingDelegate' member of our class like this:

SilverlightPager.PagingDelegate = MyAppChangeStateHandler;

This will then be called each time our application calls 'AddPage' or clicks the browsers history button. In both cases the page proxies are going to call OnReturnPage and pass in our path which will have the key as a querystring value that we then strip off and pass into the PagingDelegate to change the application state. So then we get a little Flash Magic Mojo for our Silverlight app.