Tip of the day - Windows 8 Metro apps & frame navigation failure

As I was working on a Windows 8 Metro application yesterday, I reached a point where I needed to navigate across several pages. Navigation itself in Metro is a breeze - it can be organized through a Frame-based model, where there is a single page that contains a Frame element that can fetch views to the end-user. That being said, I quickly put together the required structure and tried to perform view navigation. Didn't work too well.

Let's say that I have created a new blank page called CaptureView. Normally, the navigation code referencing it would look like this:

Frame.Navigate(typeof(CaptureView).FullName);

Nothing wrong with it, but when I looked at the main page - no custom view was loading. After setting the breakpoint on the line, I concluded that it indeed was hit, and the line of code executed. There were no exceptions whatsoever and the Output screen didn't notify me of any errors. So I started digging through XAML. Look at this:

<UserControl x:Class="Peek.Views.CaptureView"
    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"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignHeight="425" d:DesignWidth="1020">

    <Grid Background="#4284B2" Width="1020" Height="425">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="510"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <Border BorderThickness="2" BorderBrush="White">
            <StackPanel>
                
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

This totally fails to show up when navigating to it. On the other hand, the next piece of XAML code works:

<Page x:Class="Peek.Views.CaptureView"
    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"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignHeight="425" d:DesignWidth="1020">

    <Grid Background="#4284B2" Width="1020" Height="425">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="510"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <Border BorderThickness="2" BorderBrush="White">
            <StackPanel>
                
            </StackPanel>
        </Border>
    </Grid>
</Page>

Did you spot the difference yet? The first one is a UserControl, the second one is a Page. You cannot Frame-navigate to a UserControl, but you can do that with a Page. By default, when you are adding a new item to your project, even though it is called Blank Page, it will still be a user control. Make sure you change the type accordingly.