Navigation Using Unmapped URIs
,There are numerous ways of allowing the user to perform page navigation. This section looks at using Buttons with code-beside to open external URLs, and at HyperlinkButtons, which can rely solely on XAML. In subsequent chapters you explore other techniques to perform navigation including the use of commands and a custom navigation service.
Internal URIs
When navigating to PhoneApplicationPages within an application, URIs either must be relative to the root directory of the project and use the relative path syntax, as shown in the following excerpt:
Uri uri = new Uri("/DirectoryName/PageName.xaml", UriKind.Relative);
or they must use the relative component URI format, such as that used in the following example:
Uri uri = new Uri("/AssemblyName;component/PageName.xaml", UriKind.Relative);
The assembly name segment must be the name of an assembly that is locatable at runtime. The name of a project’s output assembly can be found in the project properties editor by right-clicking the project node in the Solution Explorer and selecting Properties, or by pressing Alt+Enter.
The HyperlinkButton control can be used to allow the user to navigate directly to a page within your application, as shown:
<HyperlinkButton NavigateUri="/Directory/PageName.xaml" Content="Internal Page" />
External Navigation Using the Button Control
The Button control is a flexible way for determining user intent. A Button can be used for navigation by subscribing to its Click event, as shown in the following excerpt from the ProductDetailsView.xaml in the downloadable sample code:
<Button Click="Button_ExternalLink_Click"
Tag="{Binding Product.ExternalUrl}"
Content="External Page" />
The WebBrowserTask allows you to navigate to external URIs using the phone’s built-in web browser Internet Explorer. This causes your app to be deactivated while the user views the page. You explore tasks in more detail in Chapter 14.
To provide the WebBrowserTask with the location of the web page, use the button’s Tag property. The Click event handler, which initiates the WebBrowserTask, is shown in the following excerpt:
void Button_ExternalLink_Click(object sender, RoutedEventArgs e)
{
FrameworkElement button = sender as FrameworkElement;
if (button == null || button.Tag == null)
{
return;
}
WebBrowserTask task = new WebBrowserTask
{
Uri = new Uri(button.Tag.ToString(), UriKind.Absolute)
};
task.Show();
}
External Navigation Using the HyperlinkButton Control
The disadvantage of using a Button control for links to external content is that it does not provide the familiar look and feel of a hyperlink. The HyperlinkButton control provides an easier way for navigating to pages within an application. There is a trick to using the HyperlinkButton with external URIs. Set its TargetName property to _blank, as shown in the following example:
<HyperlinkButton TargetName="_blank" NavigateUri="http://create.msdn.com"
Content="http://create.msdn.com" />
Note
Failing to set the HyperlinkButton.TargetName to _blank, when using an external URI, raises the Frame.NavigationFailed event when the button is tapped.
Hosting Web Content Within an App
An alternative to using the phone’s built-in Internet Explorer app is to host the content in a Microsoft.Phone.Controls.WebBrowser control.
The following excerpt from the WebBrowserView.xaml page, in the downloadable sample code, shows a WebBrowser placed within the main content grid of a page:
<Grid x:Name="ContentGrid" Grid.Row="1">
<phone:WebBrowser Source="{Binding Url}"/>
</Grid>
Here the Source property of the WebBrowser is bound to the Url property of the viewmodel. The WebBrowser control is discussed in greater detail in Chapter 7, “Employing Media and Web Elements.”
A dedicated web browser page can be used in your app to host all external content. To launch the dedicated web browser page, a relative URI can be constructed using the Binding.StringFormat property, as shown in the following excerpt:
<HyperlinkButton
NavigateUri="{Binding ExternalUrl, StringFormat=/WebBrowser/{0}}"
Content="External Page" />
Backslashes are used to escape the curly brackets in the StringFormat value.
The StringFormat property transforms the HyperlinkButton’s binding expression into the following:
string.Format("/WebBrowser/{0}", ExternalUrl);
URI mapping is used to pass the external URL as a query string parameter. This is explored further in a later section.