Implementing Navigation in Silverlight Application

There are two ways to implement navigational applications in silverlight:

1. In silverlight 3.0 we have navigation feature in the form of Frame class and Page class.
2. We can implement navigation by manipulating the rootvisual.

Implementing Navigation by manipulating RootVisual

One way to implement navigation in Silverlight application is manipulating the applications root visual since we can not change the rootvisual once it is assigned.

To implement navigation in a silverlight application we can use grid control as the applications root visual then add and remove controls at runtime to create a navigation application in which users can move from one page to another.

In the App.xaml.cs file we implement a method like this.

        // This Grid will host our pages.
        private Grid rootGrid = new Grid();
     
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            rootGrid.Children.Add(new MainPage());
            this.RootVisual = rootGrid;
        }

Now we can remove the page from the grid and add another one to create a navigable application.

      public static void Navigate(UserControl newPage)
        {
        // Get the current application object and cast it to
        // an instance of the custom (derived) App class.
        App currentApp = (App)Application.Current;
        // Change the currently displayed page.
        currentApp.rootGrid.Children.Clear();
        currentApp.rootGrid.Children.Add(newPage);
        }

Assuming we have a silverlight control Page2 we can move from one page to another using code like this:

App.Navigate(new Page2());

Now if we want to manage the state of the page we can keep the instance of the page in a collection so that it can be retrieved later when the user navigates back to the page.

For identifying the pages we can create string constants or still better enum.

So for maintaining the state we use the following code in the app class.

public enum Pages
 {
 MainPage,
 DemoPage, 
 AboutPage
 }

private static Dictionary<Pages, UserControl> pageCache =new Dictionary<Pages, UserControl>();

       public static void Navigate(Pages newPage)
        {
            // Get the current application object and cast it to
            // an instance of the custom (derived) App class.
            App currentApp = (App)Application.Current;
            // Check if the page has been created before.
            if (!pageCache.ContainsKey(newPage))
            {
                // Create the first instance of the page,
                // and cache it for future use.
                Assembly assembly = type.Assembly;
                pageCache[newPage] = (UserControl)assembly.CreateInstance(
                type.Namespace + "." + newPage.ToString());
            }
            // Change the currently displayed page.
            currentApp.rootGrid.Children.Clear();
            currentApp.rootGrid.Children.Add(pageCache[newPage]);
        }


The limitation with this approach that the browser has no idea of the current silverlight page being displayed , the browser is aware of only the HTML or aspx page hosting the control.

Other disadvantage with this approach is that if we want to navigate through a long sequence of pages this manual approach is cumbersome.

If we want to add support for browser navigation we need to use Silverlights navigation system through the Page and Frame classes which are available in silverlight 3.0

Both of these classes provides navigation features of the silverlight navigation system.

Implementing Navigation by using Frames

Frame control is content control meaning it provides content property that points to the single child that the control can contain.But we use the navigate() method instead which apart from changing the content property also updates the browsers page history and updates the browsers URI.

To use the Frame class first we need to map the xml namespace to the System.Windows.Controls namespace

xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"      

Now we declare the Frame class in xaml with the name mainframe which can use in the code to navigate to the different page.

<navigation:Frame x:Name="mainFrame"></navigation:Frame>

In the button click event handlers we can use code like below:

mainFrame.Navigate(new Uri("/About.xaml", UriKind.Relative));

If our silverlight application is hosted in TestPage.html ,this will display URI in the browser like this :

localhost://Navigation/TestPage.html#/About.xaml

If we bookmark the above URL and return back then we will get the About.xaml control loaded in the page . This feature is called deep linking.

In the next article we will see how to implement navigation by using Page class.