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.
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.
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.
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.
