URI Mapping

Relying on URIs that include the full path to each page in your app can make your app brittle and difficult to change the physical location of individual pages. If a page is moved, all references to that file must be updated. This can lead to maintainability issues as the size of the project grows.

The URI mapping system of Windows Phone apps allows requests for a URI to be routed to a different URI, and uses a single configuration point for the management of page URIs. Mapped URIs can be made shorter and are, thus, less subject to typographical errors. They also allow the exclusion of technology specific information, such as the .xaml page file extension, making it easier to retarget business logic for different platforms.

To use URI mapping, you must assign a System.Windows.Navigation.UriMapper instance to the UriMapper property of an app’s PhoneApplicationFrame. This can be done in XAML, as shown in the following excerpt from the App.xaml file in the downloadable sample code:

Click here to view code image

<Application
    x:Class="DanielVaughan.WPUnleashed.Examples.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <Application.RootVisual>
            <phone:PhoneApplicationFrame x:Name="RootFrame">
                <phone:PhoneApplicationFrame.UriMapper>
                    <navigation:UriMapper>
                        <navigation:UriMapper.UriMappings>
                            <navigation:UriMapping
                              Uri="/ProductDetails/{productId}"
         MappedUri="/Navigation/ProductDetailsView.xaml?productId={productId}" />
                            <navigation:UriMapping Uri="/WebBrowser/{url}"
                        MappedUri="/WebBrowser/WebBrowserView.xaml?url={url}" />
                        </navigation:UriMapper.UriMappings>
                    </navigation:UriMapper>
                </phone:PhoneApplicationFrame.UriMapper>
            </phone:PhoneApplicationFrame>
        </Application.RootVisual>

        <!-- Content omitted. -->
</Application>

The UriMapping class contains a Uri property and a MappedUri property. When navigation is requested from the Uri value, it is rerouted to the MappedUri property.

By using the curly brace syntax, as shown in the previous excerpt, a substring of the requested URI can be transplanted into the rerouted MappedUri value. This is especially useful when you want to target the same page using different URIs, and where the query string can be used to convey the action to be undertaken by the page.

In the previous excerpt you see a UriMapping for the ProductDetailsView page. The ProductDetailsView displays detailed information for a particular product, identified by a query string parameter. When navigating to the ProductDetails page, if the requested URL is /ProductDetails/2, this is rerouted to /Navigation/ProductDetailsView.xaml?productId=2.

If you were to request the ProductDetailsView page using the NavigationService, as shown in the following example, the request would be rerouted accordingly:

NavigationService.Source = new Uri("/ProductDetails/2", UriKind.Relative);

The product to be displayed can then be determined in the ProductsDetailsView by reading the productId query string parameter, as demonstrated in the following excerpt:

Click here to view code image

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    string productIdString = NavigationContext.QueryString["productId"];
    int productId = int.Parse(productIdString);
    ViewModel.LoadProduct(productId);
}

You see later in this chapter how the viewmodel uses the product ID to retrieve the product information from a WCF service.