On the WinRT Framework: Getting Started blog, we got everyone setup on referencing the Framework to our project.
Now we are ready to move on to Navigation.

Overview: For this example, we will make a Diary App that has a Main Page and Diary Page.
The Navigation between the Main page and Diary page will be a “Go Forward” and “Back” button.

1) Let us first create DiaryPageVM.cs (class) and a DiaryPage.xaml (page)

2) On MainPageVM.cs, we need a DelegateCommand to navigate to the diary page.

• DelegateCommand works like a ‘Click’ property of a button, but unlike ‘Click’, DelegateCommand is used in the ViewModel and not on the code-behind.
• This points out the idea of MVVM pattern that the view is decoupled from the viewmodel.
• The implementation of IRequireNavigationService tells the framework that our ViewModel would like to get access to the Framework’s NavigationService in order to be able to navigate to other pages
• This interface has a NavigationService property that has a Navigate method that we can use to tell framework which view model we want to navigate to.
• In this case, we want to navigate to DiaryPageVM, so we can simply say NavigationService.Navigate<DiaryPageVM>();

public class MainPageVM : IRequireNavigationService
	{
		public DelegateCommand NavigateToDiaryCommand
		{
			get
			{
				return new DelegateCommand(() => NavigationService.Navigate());
			}
		}

		public INavigationService NavigationService { get; set; }
	}

3) On MainPage.xaml, we add the buttons to navigate to the Diary page
One button (in the middle) to instantiate a new instance of a diary page to navigate to.
The other button (at the top-left) to navigate to the same instance of the diary page that was already created.

 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <Button HorizontalAlignment="Left"
                Command="{Binding NavigationService.GoForwardCommand}"
                Style="{StaticResource BackButtonStyle}">
            <Button.RenderTransform>
                <RotateTransform Angle="180"
                                 CenterX="30"
                                 CenterY="26" />
            </Button.RenderTransform>
        </Button>
        
        <StackPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Content="Go to Diary"
                    Command="{Binding NavigateToDiaryCommand}"></Button>
        </StackPanel>
    </Grid>

• The NavigationService already has a property GoForwardCommand that we can access for the navigation.
• The NavigationToDiaryCommand is the DelegateCommand that we just created on the viewmodel.

4) On DiaryPageVM.cs, we need a way to navigate away from the diary page back to the main page.
This means that we need to implement the IRequireNavigationService on the MainPageVM, so we can access the NavigationService property.

public class DiaryVM : IRequireNavigationService
	{
	    public INavigationService NavigationService { set; get; }
	}

5) On DiaryPage.xaml, we need to add the button to navigate back to the main page and a textbox to put our diary entry.

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <Button HorizontalAlignment="Left"
                Command="{Binding NavigationService.GoBackCommand}"
                Style="{StaticResource BackButtonStyle}">
        </Button>

        <TextBox Grid.Row="1"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch" Margin="100"
                 AcceptsReturn="True"/>
    </Grid>

When we run the program, we notice that on the Main Page, there is only one button (center). The reason is there is no instance of diary page yet.
When we click the ‘Go to Diary’ button, it creates the diary page instance, so when we navigate back to the main page, we can see the ‘forward’ button.

Congratulations! You built an app that can be navigated from one page to another.
Here is the link to the whole solution