After enabling the Azure storage to allow cross-origin requests using CORS. Now we are ready to query the storage entities using Javascript.

Know the URL

We start off by reading Microsoft Azure post about querying entities. According to the post, we can make a GET request to the Azure table using:

var urlPath = https://{accountName}.table.core.windows.net/{mytable}(PartitionKey='<partition-key>',RowKey='<row-key>')?$select=<comma-separated-property-names>

• Partition key and Row key are used to query a specific entity.
• The select query is used to filter on that specific column. (e.g.$select=timestamp will grab the entities’ timestamp).

Build the Signature

As reference, Microsoft Azure’s blog about Authentication for the Azure Storage Services, it shows what we need to construct the Signature String.
The formula to build the signature is Signature=Base64(HMAC-SHA256(UTF8(StringToSign)))

Things To Know:

• Shared Key Lite Authentication (Table Service) has a Signature String:

  StringToSign = Date + "\n" 
                 CanonicalizedResource
  

  Shared Key Authentication (Table Service) has a Signature String:

  StringToSign = VERB + "\n" + 
                 Content-MD5 + "\n" + 
                 Content-Type + "\n" +
                 Date + "\n" +
                 CanonicalizedResource;
  

• Canonicalized Resource has a format of: “/{accountname}/{query string}
  For example, If you want to call a GET request on:

  https://myaccount.table.core.windows.net/mytable()?$filter=<query-expression>&$select=<comma-separated-property-names>
  

  The query string is: mytable() [do not include anything after ‘?’]. So the Canonicalized Resource will be: /myaccount/mytable()

• Secret Key:
  Log in to your Microsoft Azure Portal -> Select the Storage account you want -> Manage Access Keys -> Primary Access Key or Secondary Access Key
• Lastly, the most confusing of all, encrypting the Signature String and Secret Key to form the Signature
  For encryption, I used Crypto-JS.
  Basically, we need to perform SHA-256 hash to produce the signature. Using Crypto-JS, it will be:

  var signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(CryptoJS.enc.Utf8.parse(stringToSign), CryptoJS.enc.Base64.parse(secretKey)));
  

Request Headers

There are only 2 required request headers when doing a request to Microsoft Azure:

• Authorization=”[SharedKey|SharedKeyLite] {AccountName}:{Signature}”
  (e.g. Authorization: SharedKeyLite testaccount1:uay+rilMVayH/SVI8X+a3fL8k/NxCnIePdyZSkqvydM=)
• Date or x-ms-date – make sure it’s in UTC.

Optional:

• x-ms-version – version of the operation for the request.
• Accept – content type of the response payload.
  • application/atom+xml
  • application/json;odata=nometadata
  • application/json;odata=minimalmetadata
  • application/json;odata=fullmetadata

In Action…

So using JQuery ajax, we call:

$.ajax({
		url: urlPath,
		type: 'GET',
		success: function (data) {
			//do something to data
		},
		beforeSend: function (xhr) {
			xhr.setRequestHeader('Authorization', "SharedKey " + accountName + ":" + signature);
			xhr.setRequestHeader('x-ms-date', dateInUTC);
			xhr.setRequestHeader('x-ms-version', '2014-02-14');
			xhr.setRequestHeader('Accept', 'application/json;odata=nometadata');
			xhr.setRequestHeader('DataServiceVersion', '3.0;NetFx');
			xhr.setRequestHeader('MaxDataServiceVersion', '3.0;NetFx');
		},
		error: function (rcvData) {
			console.log(rcvData);
		}
	});

And you are done! Happy Coding.

File Watcher

File Watcher is an application that continuously monitor your files. You can define files or a whole directory to look after, and have a custom action that notifies you every time those files/directory have been changed (created, deleted, renamed or error had occurred).

Simple Implementation Steps:

1. Create a new FileWatcher and define values for its properties

FileWatcher watcher = new FileWatcher();
watcher.Path = Path.GetDirectoryName(file); 
watcher.Filter = Path.GetFileName(file);
watcher.NotifyFilter = NotifyFilters.LastAccess | NotifyFilters.LastWrite
           | NotifyFilters.FileName | NotifyFilters.DirectoryName;

• Path of the directory to be monitored.
• Filter: “.txt” only watch text files, “GetFileName(file)” only watch that specific file.
• NotifyFilter: watch for changes in LastAccess, LastWrite, FileName, DirectoryName

2. Subscribe to Event Handlers
These will notify the user if there are changes to the file/directory the FileWatcher is watching.

watcher.Changed += FileChanged;
watcher.Renamed += FileRenamed;
watcher.Created += FileChanged;
watcher.Deleted += FileChanged;

private void FileRenamed( object sender, RenamedEventArgs e )
{
 Debug.WriteLine( string.Format( " {0} renamed to {1} at {2}", e.OldFullPath, e.FullPath, DateTime.Now.ToString( "MM/dd/yy H:mm:ss" ) ) );
}

private void FileChanged( object sender, FileSystemEventArgs e )
{
 Debug.WriteLine( string.Format( "{0} with path {1} has been {2} at {3}", e.Name, e.FullPath, e.ChangeType, DateTime.Now.ToString( "MM/dd/yy H:mm:ss" ));
}

3. Enable the FileWatcher.
NOTE: When Path is not set and EnableRaisingEvent is not set to true, specified file/directory will not be watched.

watcher.EnableRaisingEvents = true;

FileWatcher + Windows Services

Windows Services allows us to run assembly in the background. They are very suitable for the times when you need to continuously listen to incoming network connections, or monitor a directory or files.
Let’s make a Windows Service project by doing File -> New Project -> Windows Service
Do not forget to inherit from ServiceBase().

• By default, we already have the Run() in Program.cs that creates an instance of our FileWatcherService class.

  ServiceBase[] ServicesToRun;
  ServicesToRun = new ServiceBase[]
     {
        new FileWatcherService()
     };
  ServiceBase.Run(ServicesToRun);
  

When we start our service, the service will call the OnStart() inside our FileWatcherService().

• Like what was described above this post, we create an instance of the FileWatcher on OnStart() and subscribe to the events.
  OnStop(), we dispose the FileWatcher instance and unsubscribe to the events.

  protected override void OnStart( string[] args )
  {
  _fileWatcher = new FileWatcher( currentDirectory );
  _fileWatcher.Changed += FileChanged;
  _fileWatcher.EnableRaisingEvents = true;
  }
  

  protected override void OnStop()
  {
  _fileWatcher.Changed -= FileChanged;
  _fileWatcher.EnableRaisingEvents = false;
  _fileWatcher.Dispose();
  }
  

• a. Create an Installer: Add -> new Class
  b. After creating a new class, inherit the class from Installer [add reference to System.Configuration.Install]
  c. Create a new ServiceProcessInstaller() and ServiceInstaller — These install an executable that extend ServiceBase(), which is our FileWatcherService.
  d. Set the properties: ServiceName, Account, StartType, DisplayName, etc.
  NOTE: Set the ServiceName to be the same as the value of the ServiceName on the service itself.
  e. Add the 2 installers to the Installers collection.

  ServiceProcessInstaller processInstaller = new ServiceProcessInstaller();
  ServiceInstaller serviceInstaller = new ServiceInstaller();
  processInstaller.Account = ServiceAccount.NetworkService;
  serviceInstaller.DisplayName = "File Watcher Service";
  serviceInstaller.StartType = ServiceStartMode.Manual;
  serviceInstaller.ServiceName = "File Watcher Service";
  Installers.AddRange(new Installer[]
  {
    processInstaller, serviceInstaller
  });
  

• Install the service and start running it!
  a. Run Command Prompt [Visual Studio Command Prompt or Windows SDK Command Prompt] as Administrator.
  b. Go to the directory where the Windows Service executable is at.
  c. Type installutil {name of the service} (e.g. installutil FileWatcherService.exe).
  d. On Success, you will be able to see the Service on your Local Services list.
  
  

  Windows Service successfully installed

  
  e. To uninstall: type installutil /u {name of the service}

File Transfer Protocol (FTP) is a network protocol used to transfer files between computers and networks.
The FTP Url designates a file or a directory on an Internet Host that is accessible using FTP Protocol.
Normally, FTP Url is formatted: “ftp://”+ username + host + port + directory + filename

The syntax of FTP Url includes:

• Host – fully qualified domain name of network host or IP Address (e.g. 172.0.0.1)
• Port number to connect to – NOTE: if omitted, it defaults to 21
• Username (user id) on the host
• Password corresponding to the username

Here is a simple way to upload file to an FTP server:
1. Create an FtpWebRequest and pass in your FTP Url

FtpWebRequest ftpClient = (FtpWebRequest)FtpWebRequest.Create( "ftp://" + ftpPath + "/" + filename);
ftpClient.Credentials = new NetworkCredential( ftpUserName, ftpPassword );
ftpClient.Method = WebRequestMethods.Ftp.UploadFile;
ftpClient.UseBinary = true;
ftpClient.KeepAlive = true;
ftpClient.ContentLength = file.Length;

2. Copy the contents of the file to the request stream using GetRequestStream().
Do not forget to close the Stream.

Byte[] buffer = new byte[file.Length + 1];
int bytes = 0;
int totalBytes = (int)file.Length;
FileStream fileStream = file.OpenRead();

Stream stream = ftpClient.GetRequestStream();
while ( totalBytes > 0 )
{
bytes = fileStream.Read( buffer, 0, buffer.Length );
stream.Write( buffer, 0, bytes );
totalBytes = totalBytes - bytes;
}
 //fs.Flush();
fileStream.Close();
stream.Close();

3. To finish the process, we need to close the ftpClient’s WebResponse.

FtpWebResponse uploadResponse = (FtpWebResponse)ftpClient.GetResponse();
uploadResponse.Close();

Error Handling and other Gotcha’s

• It is important we surround our code with try catch block because we need to make sure we protect the users from Exceptions like invalid credentials, etc.
  This is handled using the ftpClient’s response’s StatusCode

  catch ( WebException ex )
  {
      FtpWebResponse response = (FtpWebResponse)ex.Response;
      switch ( response.StatusCode )
         {
            case FtpStatusCode.NotLoggedIn:
            Debug.WriteLine = "You entered invalid username/password. Try again.";
            break;
  
            default:
            Debug.WriteLine = "The server is inaccessible or taking too long to respond.";
            break;
          }
  }
  

• When creating FtpWebRequest and giving it the path (for example): “ftp://host:port/{directoryName}/{filename}, we need to make sure that {directoryName} has been created/should exist or it will throw an exception on GetRequestStream().
  

  Example:

  1. Create the directory, first.

   string directoryPath = "ftp://" + ftpPath + "/" + directory.Name;
   try
     {
      var request = (FtpWebRequest)FtpWebRequest.Create( directoryPath );
      request.Method = WebRequestMethods.Ftp.MakeDirectory;
      request.Credentials = new NetworkCredential( ftpUserName, ftpPassword );
      var uploadResponse = (FtpWebResponse)request.GetResponse();
      uploadResponse.Close();
     }
  

  2. Create FtpWebRequest and include directory to file path.

   var ftpClient = (FtpWebRequest)FtpWebRequest.Create( "ftp://" + ftpPath + "/"+ directory.Name + file.Name);
  

Introduction

Telestr8 is a desktop application that has a sole purpose of annotating images shared by Telestr8 Mate or any image shown in the desktop. At the end of every session, all images are stored in a folder in Picture Library (as .png) for future use.

As I mentioned on my previous blog post, Telestr8 works closely with Telestr8 Mate that it is important that Telestr8 is installed in one device and Telestr8 Mate is running on another device for them to communicate. From Telestr8 Mate, we can share images to Telestr8 and these shared images will be displayed in a panel on the top-right of Telestr8.

Card Panel where all shared and duplicated images are found

Feature: Desktop Mode

Telestr8_DesktopMode

Things you can do on desktop mode:

a) Toggle annotation mode on/off – This mode will allow you to annotate on any image you selected.
b) Duplicate your desktop image and add it to your card panel

• This means you can take a screenshot of your desktop so you can annotate on it.
• This will then be added to your card panel for future use.

c) View any connections (IP Address) your device is connected to.
d) Help menu – You will be able to read 3 pages worth of documentation on how to use the menu of Telestr8 (like this blog post, but more detailed).
e) Exit Telestr8

Feature: Annotation Mode

Telestr8_AnnotationMode

Things you can do on Annotation Mode:

a) Select brush size and brush color for annotating.
b) Toggle erase on/off
c) Erase all annotations (strokes, etc.) on the image you are working on.
d) Create a copy of the image you are currently working on and automatically add it to the collection of images you have on your card panel.
e) View help menu
f) Done annotating! – Saves all the strokes or any changes made on that image replacing its original image.

Favorite Feature

• While working on this application, I have 2 main features I can call my “favorite”:
  1) Being able to save on clipboard with an animation to show you did, and
  2) On Exit, the animation of showing all of the images stored in your card panel and one by one getting moved out of the view mode then at the end of the process, all of it are display in the photos library with all of the images saved as PNG files.
• These features are accomplished by using Storyboard’s DoubleAnimation and also using Blend to do fluid layout. Both features have very challenging animations that once you get the hang of it, it becomes very easy to deal with.

Telestr8 Mate is a WinRT (Windows Runtime) Application designed primarily to share pictures from your Photos Application or any photos-sharing application you have.
Since Telestr8 Mate was also planned to be on Windows Store, there is a guide that comes along with the application. Also, when app is launched, there is a step-by-step instructions on how to go about using it.

Important!

Telestr8 Mate is the companion app of Telestr8 (a desktop application). Telestr8 will be discussed on a blog post following this, but it is important to know that in order for Telestr8 Mate to function properly, you will need to download and install Telestr8 App, as well.

Here are the features of Telestr8 Mate:

Settings

When app is launched, Telestr8 Mate provides a screen with instructions on how to connect to an IP Address where Telestr8 (A desktop application that I will discuss following this blog) is installed.

Screen for connecting using Telestr8 Mate

Steps in connecting:

a) Find out what IP Address Telestr8 is connected to by running the program and clicking on the settings button (computer icon).
b) Go back to Telestr8 Mate, select the settings charm, go to service settings and put IP Address on the text box or select any discovered device that pops up below the validate button.

c) Validate!

Sharing

Once Telestr8 Mate changed screen to “YOU ARE CONNECTED”, congratulations you are now ready to share your images to Telestr8.

Instructions on how to share using telestr8 mate

Steps in sharing images using Telestr8 Mate

a) Find the image you want to share on your Photos Application.
b) Click on Share charm and select Telestr8 Mate.
c) Share!
d) You should be able to see the picture you shared on whatever device you installed Telestr8 in. The picture will appear at the top-right corner of Telestr8 app.

Lessons Learned

• As a developer, being able to work with WinRT application is a big deal. I had the chance to struggle figuring out Application Lifecycle: OnSuspended, OnResuming, OnLaunched and just about how will my breakpoints on OnResuming event will be hit.
• I learned how WinRT works by reading other’s blogs, thorough researching and just TRYING IT OUT MYSELF.
• Lastly, just a shout-out that following this post is Telestr8 App, so keep reading!

From the previous blog entry, on our diary application, we used the framework to help us navigate from the MainPage to the Diary Page and vice versa.
On the Diary Page, we will notice that if we write some text on the textbox, when we navigate away from that page and go back to the diary page, the text is not persisted. This means that the text is not stored. So navigating away from the page, we lose that text.

How do we fix this? Simple! The framework has its way! So, let’s get to coding mode.

1) Let’s edit the DiaryPageVM.cs and add a text property to bind to our textbox.
We also need a Bindable class (part of the framework) to have a way for us not be notified when the property is updated.
In the Bindable class, the NotifyPropertyChanged method fires the INotifyPropertyChanged.PropertyChanged event for the Property that you pass in.
Luckily, the framework already has a class we can inherit that takes care of this; instead of us making another helper class.

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

        private string _diaryText;
        public string DiaryText
        {
            get { return _diaryText; }
            set
            {
                _diaryText = value;
                NotifyPropertyChanged(() => DiaryText);
            }
        }
    }

2) Now that we have a text property to bind to the textbox, we need the framework to persist the state of our application.
On the same page (DiaryPageVM.cs) we need an interface — ISupportTransientState

public class DiaryVM : Bindable, IRequireNavigationService, ISupportTransientState

• This interface tells the framework that our ViewModel has a transient state.
• The framework then is responsible for persisting and restoring the state.

3) Add a TransientState class that will have the properties that we need its state to be persisted — Text!

[DataContract]
public class TransientState
        {
            [DataMember]
            public string Text { get; set; }
        }

• The DataContract and DataMember are both used for serialization. That means, the data is being stored and its value can be access in the same or different computer environment.

4) Implement the methods of the ISupportTransientState.
4a) GetTransientStateTypes() that returns all the TransientState that we need.

public IEnumerable GetTransientStateTypes()
        {
            yield return typeof(TransientState);
        }

4b) GetTransientState() that sets the value of the TransientState’s Text property to the DiaryText and creates an instance of the TransientState class.

public object GetTransientState()
        {
            return new TransientState { Text = DiaryText };
        }

4c) UpdateTransientState() that updates the value of the Text property when DiaryText gets updated.

public void UpdateTransientState(object untypedState)
        {
            TransientState state = (TransientState)untypedState;
            DiaryText = state.Text;
        }

5) Bind the DiaryText to the textbox in DiaryPage.xaml

        <TextBox Grid.Row="1"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch" Margin="100"
                 AcceptsReturn="True"
                 Text="{Binding DiaryText, Mode=TwoWay}"/>

And we are done! Now let’s run the program and make sure it works.
THINGS TO REMEMBER:

• When we navigate to the DiaryPage and put some text on the textbox, and we navigate away from that page, the text gets persisted and clicking the ‘ForwardButton’ restores the state of the text.
• Now the question is why not click the Go to Diary button (center) of the MainPage? On my previous blog entry about Navigation, I talked about when we click the Go to Diary button, we are creating a new instance of the DiaryPage. When we click that instead of the forward button, the text will not be there.
• If we try to use the navigation arrows at the top of our application, we are keeping the same instance of the DiaryPage, which means we will see that the text is persisted

For reference, Here is a link to the solution

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

Windows Runtime (WinRT) is used to make Windows store applications. The problem is that the WinRT API is designed in a way that Views and ViewModels are tightly coupled. This means that all the business logic, events like button click, are in “code-behind” of the view instead of it being in the view model. This Framework allows us to enforce a solid MVVM pattern that puts all the business logic in the view model making it decoupled from the view.

Before we make use of the functionalities of the framework, we need to make sure that it is referenced correctly in our project.
To read an in-depth explanation about the framework, refer to this: Introduction of WinRT Framework

1) In Visual Studio, create a new Blank App project

2) Add a reference to the framework

3) We need to change the base class of the app-class to DefaultApplication. By doing this, the DefaultApplication takes care of the initialization of the framework. This means that the framework will automatically be set up for us. To do this, we need to change <application> tag to <mvvm:DefaultApplication> and we also need to add a namespace: xmlns:mvvm=”using:WinRTFramework.DefaultImplementations”

<mvvm:DefaultApplication x:Class="DemoProject.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mvvm="using:WinRTFramework.DefaultImplementations">

4) Since we changed the base class to DefaultApplication on the xaml, we need to do the same thing in the code behind (App.xaml.cs)
We need the App to inherit from DefaultApplication.

sealed partial class App : DefaultApplication

5) Now, we need to add a new class called MainPageVM.cs. This will become the view model of our MainPage View.

6) Then we implement methods of DefaultApplication:
6a) IsSearchSupported tells the Framework if we support search or not..
For this instance, we will not be doing search so we can just set the value to ‘false’. Down the road, if we want to make an application that supports searching, we can just change the value to return ‘true’

protected override bool IsSearchSupported
	    {
	        get { return false; }
	    }

6b) Next we need to provide the framework with an adapter to our IoC Container, which will allow the framework to create instances from our ViewModels Types. If you use your own IoC Container (such as Autofac or Prism), you should develop an IoCAdapter by implementing the IoCAdapter Interface. If, however, your project does not use an IoC Container, you can use the framework’s DefaultIoCAdapter, which is a very simplistic IoC Container implementation that uses types’ default constructors to create their instances.

protected override IIoCAdapter IoCAdapter
	    {
		  get { return new DefaultIoCAdapter(_viewToVMMap.Values); }
	    }

6c) The framework uses an instance of a IViewViewModelMapper to find out which View belongs to which ViewModel and vice versa. If you follow a fixed naming pattern in your project (such as the ViewModel for Page XYZPage is always called XYZViewModel), you would develop an IViewViewModelMapper which finds matching partners according to this naming rule. If you, however, don’t have such a naming rule, you can use the Framework’s DefaultViewViewModelMapper which accepts an instance of a Dictionary that simply maps the type of a View to the type of a ViewModel

Dictionary _viewToVMMap = new Dictionary();
 public App()
        {
			_viewToVMMap.Add(typeof(MainPage), typeof(MainPageVM));
        }

protected override IViewViewModelMapper ViewViewModelMapper
	    {
		    get { return new DefaultViewViewModelMapper(_viewToVMMap, IoCAdapter); }
	    }

6d) Lastly, we want to tell the framework what page we want to navigate to. We achieve this by specifying in the Navigate() method what ViewModel of the page that we want to navigate to.
This means that if we want to navigate to the MainPage View, we need to specify its view-model to the Navigate method like this — Navigate<MainPageVM>().

	    protected override bool NavigateToInitialPage(INavigationService navigationService)
	    {
		    return navigationService.Navigate();
	    }

Here is the link to the solution