Forward- and back-button support in Silverlight

I noticed in the screencast below, that Silverlight seems to offer a great implicit way of supporting browser’s forward- and back-buttons. The basic idea is to modify the current url by adding or removing tags without forcing a page refresh.

Example: In the video below, a basic Twitter client is being developed using Silverlight. The main part is wrapped into a navigation component which automatically stacks sub-components, similar to the ViewStack component in Adobe Flex. The difference is now, if the displayed component changes, also the current url changes. For example, if the user sees the “home” view and clicks on “search”, the url, displayed in the browser, changes from http://www.example.com/application#/home to http://www.example.com/application#/search.

If the user now clicks the back-button, the Silverlight application automatically switches back to the home view.

This truly is a great (and so simple!) way of supporting browser history inside of plugin-based RIA technologies. I wished, there would be something like this for Flex.

4 thoughts on “Forward- and back-button support in Silverlight

  1. Raoul Rubin says:

    You cover a lot of good material here. I haven’t used Silverlight since the 1.1/2.0 version. A lot has changed! Thanks for helping me start getting up to speed on the new features.

  2. Patch says:

    Can this be done without using a “Navigation” App? I have created a silverlight app and need to figure out how to use the back/fwd buttons but did not choose Navigation.

    Thanks

  3. As you can see at date of the blog article, the information provided here is already almost 1 year old.
    Since then, Silverlight has made huge progress and many things changed and to be honest, I am not really up-to-date regarding SL development.

    However, although using a navigation component would probably be the easiest way, I think that it’s possible to manipulate the forward and backward buttons manually.

    The basic trick behind it is to manipulate the URL by modifying a special anchor tag at the end of it.

    For example, let’s say the following is the url to your app

    http://www.yourdomain.com/slapp

    Let’s also say, the user clicks on a button called “contact” (within the application), then you could modify the URL from within Silverlight so it looks like this:

    http://www.yourdomain.com/slapp#contact

    This way, the website won’t be reloaded but your Silverlight application can load the contact data and display it to the user.

    If the user now presses the back button in his browser, the URL will get reverted back to the prior state and the Silverlight application still remains in the browser window displaying the original information.

    This is the basic principle how the navigation app shown in the video above works.
    You can observe this behavior by the way by looking at the url while the demo application is running. You’ll see that only the short part at the end of the url changes while the user is navigating through the app.

    So, basically you have to do two things:

    1. Manipulate the URL by adding and removing “#nameOfTheContent” tags to the end of it
    2. Catch the events which are fired when the URL changes and load the correct data based on this URL.

    Of course, google’s also always a good source for finding more information about this: https://encrypted.google.com/search?sourceid=chrome&ie=UTF-8&q=silverlight+forward+back+buttons ;-)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.