Trouble with UriMapper

Question

I got the navigation up and running in my application but I wanted to hide the real path to views so I wrote this UriMapper:

<Application
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="MyApplication.App" 
    xmlns:navcore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation">
 <Application.Resources>
  <!-- Resources scoped at the Application level should be defined here. -->
        <navcore:UriMapper x:Key="uriMapper">
            <navcore:UriMapping Uri="{}{page}" MappedUri="/Views/{page}.xaml" />
        </navcore:UriMapper>
 </Application.Resources>
</Application>

Here is my navigation button click event code:

    private void NavigateButton_Click(object sender, RoutedEventArgs e)
    {
        Button btn = sender as Button;
        string uri = btn.Tag.ToString();

        this.ContentFrame.Navigate(new Uri(uri, UriKind.RelativeOrAbsolute));
    }

And here is XAML of a button:

<Button Content="Home" Click="NavigateButton_Click" Tag="Home" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="30" />

However, when I click on a button, I am getting this error:

Content for the URI cannot be loaded. The URI may be invalid.

At this line:

this.ContentFrame.Navigate(new Uri(uri, UriKind.RelativeOrAbsolute));

What am I doing wrong?

EDIT:

More XAML files... MainPage.xaml:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
             mc:Ignorable="d" 
             x:Class="MyApplication.MainPage">

    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush ImageSource="/bg.jpg" Stretch="Fill"/>
        </Grid.Background>
        <Rectangle Fill="#FF252525" Stroke="Black" Opacity="0.7" RadiusX="10" RadiusY="10" Margin="0,100,0,0" StrokeThickness="0" Width="600" HorizontalAlignment="Center" Height="350" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
        <Canvas x:Name="NavigationCanvas" Margin="0,50,0,0" HorizontalAlignment="Center" Width="600">
            <toolkit:ExpressionDarkTheme Height="30" Canvas.Left="188" Canvas.Top="11" Width="100" Foreground="White" Background="{x:Null}">
                <Button Content="Home" Click="NavigateButton_Click" Tag="Home" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="30" />
            </toolkit:ExpressionDarkTheme>
                        <!-- etc more buttons -->
        </Canvas>

        <navigation:Frame x:Name="ContentFrame" Margin="15,115,15,0" Height="320" VerticalAlignment="Top" Source="Home">            
        </navigation:Frame>
    </Grid>
</UserControl>

Home.xaml:

<navigation:Page x:Class="MyApplication.Views.Home" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    Title="Home">

    <Grid x:Name="LayoutRoot" Width="570" Height="320" >
        <TextBlock TextWrapping="Wrap" Foreground="White">
            Home.
        </TextBlock>
    </Grid>

</navigation:Page>

Answer 1

This outlines the issues, give this a try...