Navigating Between Views
To load and display a view in a Frame control, you need to navigate to it. Navigation operations can be initiated either by code; by a control, such as the HyperlinkButton control; by property bindings, or from the browser via the user clicking the Back and Forward buttons or changing the URI in the address bar. How you invoke a navigation operation depends on from where you are attempting to initiate the navigation. In this section we'll take a look at the various ways that you can initiate a navigation operation in your application, but let's first look at how you specify a view to load and display using a URI.
Using View URIs
In much the same way that a URL can be used to specify the location of a web page to retrieve from a server, you can specify the location of a view to load and display in your application using a URI.
Note A URL (uniform resource locator) is a type of URI (uniform resource identifier)—a URL is a subset of a URI, as is a URN (uniform resource name). There is a lot of confusion as to the difference between the terms and when to use them. “URI” is the more generic term and thus is generally the safest to use. More information on the differences can be found in the following Wikipedia article:
http://en.wikipedia.org/wiki/Uniform_Resource_Identifier.
This URI will specify the path to the view in your project. For example, in the project you created from the Silverlight Business Application project template, the Home.xaml file would have a URI of /Views/Home.xaml. If you look again at Figure 3-2, you will see that the Home.xaml view can be found in the Views folder, which you can see is represented in the URI. You can therefore load and display this view by navigating to this URI.
To pass data to a view in the URI, you can append query string parameters to it, in much the same way that you might append query string parameters to the URL to a web page. You can even perform fragment navigation (these will be discussed later in this chapter).
Before attempting to load a view from a URI, the Frame control will run it through a URI mapper. A URI mapper takes in a URI and converts it to the path of the view in your application that it corresponds to, using a custom mapping scheme that you can define. This means that when navigating to a view, instead of having to specify the full path of the view to navigate to, you can simply navigate to a custom URI representing that view, and the URI mapper will translate it to the actual path for the Frame control to navigate to. For example, you can define that the “/Home” URI maps to the view found at “/Views/Home.xaml”. Configuring URI mapping will be discussed in detail later in this chapter.
Note It's even possible to navigate to a view in another assembly referenced by your project. The path to the view needs to be of the form “/[assembly];component/[viewpath]”. For example, if the Home.xaml view existed in the Views folder of a referenced assembly named MyViews.dll, the path to navigate to it would be “/MyViews;component/Views/Home.xaml”.
Navigating using the Frame Control
When you are trying to navigate to a view and display it within a Frame control, you can simply use the navigation methods on the Frame control:
NavigateGoBackGoForwardStopLoadingRefresh
The Navigate method navigates to a view, taking the URI of the view as a parameter. For example, the following code instructs a Frame (named ContentFrame) to navigate to the Home.xaml view in the project's Views folder:
ContentFrame.Navigate(new Uri("/Views/Home.xaml", UriKind.Relative));
Note We are explicitly specifying that a relative URI is being passed in via the UriKind parameter. Although the Uri class has a constructor where only the URI needs to be passed in, it will assume it is an absolute URI instead of a relative URI, and an exception will be raised.
The GoBack and GoForward methods are fairly self-explanatory. They simply mimic the user clicking on the browser's Back and Forward buttons.
The StopLoading method is rarely used when using the Navigation Framework out of the box but can be useful when you implement a custom content loader (discussed later in this chapter) that undertakes a task asynchronously before loading a view that you want to cancel. This will raise the NavigationStopped event on the Frame control.
The Refresh method reloads the current view. Navigating to the URI of the currently loaded view using the Navigate method doesn't actually reload that view, but you can force a reload using this method.
Navigating using the NavigationService Object
The previous example is fine when you are initiating the navigation from the page hosting the Frame control. However, you also might attempt to initiate a navigation operation in code from within a view itself, where you don't have a reference to the Frame control. In this case, the current view is closed, and the view being navigated to is displayed in its place. This is where the NavigationService object, provided by the inherited Page class via a property, comes in. It has the methods that you can use to request a navigation operation on the Frame control hosting the view. It contains the same navigation methods that you will find on the Frame control, and thus is used in the same way:
NavigationService.Navigate(new Uri("/Home", UriKind.Relative));
Using a HyperlinkButton Control
Another way to initiate a navigation operation is to use the HyperlinkButton control. The HyperlinkButton control contains built-in functionality to request a Frame to navigate to a given view. Here is some sample XAML to define a HyperlinkButton element to navigate to the Home view:
<HyperlinkButton Name="HomeLink" NavigateUri="/Home"
TargetName="ContentFrame" Content="home" />
In this example we are doing the following:
- Giving the element a name (
Name) - Providing the URI to navigate to (
NavigateUri) - Specifying the name of the Frame to navigate within (
TargetName) - Setting the hyperlink's text to be displayed on the screen (
Content)
If you have only one Frame on the page, you can leave the TargetName property blank. If you are using the HyperlinkButton control within a view, you can leave the TargetName property blank in that case too.
Note The HyperlinkButton control can also be used to navigate to standard HTML web pages, although these won't be displayed within a Frame control, and attempts to do so will raise an exception. To navigate to a web page, set the TargetName property to _blank, which will open the link in a new browser window, or set it to _self to open it in the current browser window/tab—closing your Silverlight application.
Using the Source Property of the Frame Control
The Frame control has a Source property to which you can assign a URI for the Frame control to navigate to and display. This is most useful when you want to bind to a data source containing the URI of the view to be displayed. However, the Source property expects a value of type Uri, so if you wish to bind it to a string, you will need to use a ValueConverter to convert the value to a type of Uri.
User-Initiated Navigation
One of the features of the navigation framework is that the current view's URI is appended to the application's URL in the browser's address bar as a bookmark. The user can enter or modify this bookmark manually and have the application navigate to the view that they specify. The Frame control will note this, parse the URI in the bookmark by using a URI mapping scheme and then load the corresponding XAML view within the Frame. This is a concept known as deep linking, which will be discussed in more detail later in this chapter.