There are two ways to implement navigational applications in silverlight:
- In silverlight 3.0 we have navigation feature in the form of Frame class and
Page class.
- 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.