Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Sharing Code: Adding NavigationService

, 30 Jun 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
An example about NavigationService in share code scenarios, that will be registered in one IOC container and injected by the view model’s constructor.

Introduction

This sample has the goal to show an example about NavigationService in share code scenarios, that will be registered in one IOC container and injected by the view model’s constructor. The idea is to have an INavigationService interface that is portable and used in portable view models, that in practice will have different implementation in the platform project.

The source can be got here.

Building the sample

You only need Visual Studio 2012 and Windows 8, both the RTM version.

Description

Before starting the sample, I recommend to see the related samples that was created:

  1. Consuming Odata Service in Windows Store Apps (Include MVVM Pattern)
  2. Creating portable code in Windows Store Apps (PCL + MVVM + OData Services)
  3. Sharing Code between Windows Store and Windows Phone App (PCL + MVVM + OData)

In this moment we have a TitlesPage.xaml in both projects and in this samples we will create a second page called TitleDetailsPage.xaml and implementation for navigate between them and passing parameters.

Let’s start!

The main points are:

  1. INavigationService
  2. NavigationService in Windows Store Apps
  3. NavigationService in Windows Phone Apps
  4. Others details

1. INavigationService

Navigation is a verify important point in one application, because it allow us to switch between page and in some cases send data between them. There are some points to analyze:

  • In Windows Store app we navigate to type of the page that is an object and in Windows Phone apps we navigate to URI using the string name of the page;
  • For passing a parameter, we can send an object in a Windows Store app, but for Windows Phone apps we need to create a query string with the parameter;
  • More common features are the CanGoBack property and GoBack method;

In general, the for navigation must have:

  • Navigation method (that allow parameters)
  • GoBack method
  • CanGoBack property

Another “little problem” is the fact in portable class libraries i cannot use the page type, and an solution for it is to navigate for the ViewModel that will be used in next page. With this my INvaigationService could be:

/// <summary> 
/// The NavigationService interface. 
/// </summary> 
public interface INavigationService 
{ 
    /// <summary> 
    /// Gets a value indicating whether can go back. 
    /// </summary> 
    bool CanGoBack { get; } 

    /// <summary> 
    /// The go back. 
    /// </summary> 
    void GoBack(); 

    /// <summary> 
    /// The navigate. 
    /// </summary> 
    /// <param name="parameter"> 
    /// The parameter. 
    /// </param> 
    /// <typeparam name="TDestinationViewModel"> 
    /// The destination view model. 
    /// </typeparam> 
    void Navigate<TDestinationViewModel>(object parameter = null); 
}

Let’s see who it will be implemented in Windows Store apps.

2. NavigationService in Windows Store Apps

/// <summary> 
/// The navigation service. 
/// </summary> 
public class NavigationService : INavigationService 
{ 
    /// <summary> 
    /// The view model routing. 
    /// </summary> 
    private static readonly IDictionary<Type, Type> ViewModelRouting = new Dictionary<Type, Type>() 
                                                                  { 
                                                                      { 
                                                                          typeof(TitlesViewModel), typeof(TitlesPage) 
                                                                      }, 
                                                                      { 
                                                                          typeof(TitleDetailsViewModel), typeof(TitleDetailsPage) 
                                                                     } 
                                                                 }; 

    /// <summary> 
    /// Gets a value indicating whether can go back. 
    /// </summary> 
    public bool CanGoBack 
    { 
        get 
        { 
            return RootFrame.CanGoBack; 
        } 
    } 

    /// <summary> 
    /// Gets the root frame. 
    /// </summary> 
    private static Frame RootFrame 
    { 
        get { return Window.Current.Content as Frame; } 
    } 

    /// <summary> 
    /// The go back. 
    /// </summary> 
    public void GoBack() 
    { 
        RootFrame.GoBack(); 
    } 

    /// <summary> 
    /// Navigates the specified parameter. 
    /// </summary> 
    /// <typeparam name="TDestinationViewModel"> 
    /// The type of the destination view model. 
    /// </typeparam> 
    /// <param name="parameter"> 
    /// The parameter. 
    /// </param> 
    public void Navigate<TDestinationViewModel>(object parameter) 
    { 
        var dest = ViewModelRouting[typeof(TDestinationViewModel)]; 

        RootFrame.Navigate(dest, parameter); 
    } 
}

3. NavigationService in Windows Phone Apps

The implementation for the windows phone could be something like the following code:

/// <summary> 
/// The navigation service. 
/// </summary> 
public class NavigationService : INavigationService 
{ 
    /// <summary> 
    /// The view model routing. 
    /// </summary> 
    private static readonly Dictionary<Type, string> ViewModelRouting = new Dictionary<Type, string> 
            { 
                  { 
                      typeof(TitlesViewModel), "View/TitlesPage.xaml" 
                  }, 
                  { 
                      typeof(TitleDetailsViewModel), "View/TitleDetailsPage.xaml" 
                 } 
             }; 

    /// <summary> 
    /// Gets a value indicating whether can go back. 
    /// </summary> 
    public bool CanGoBack 
    { 
        get 
        { 
            return RootFrame.CanGoBack; 
        } 
    } 

    /// <summary> 
    /// Gets the root frame. 
    /// </summary> 
    private Frame RootFrame 
    { 
        get { return Application.Current.RootVisual as Frame; } 
    } 
 
    /// <summary> 
    /// Decodes the navigation parameter. 
    /// </summary> 
    /// <typeparam name="TJson">The type of the json.</typeparam> 
    /// <param name="context">The context.</param> 
    /// <returns>The json result.</returns> 
    public static TJson DecodeNavigationParameter<TJson>(NavigationContext context) 
    { 
        if (context.QueryString.ContainsKey("param")) 
        { 
            var param = context.QueryString["param"]; 
            return string.IsNullOrWhiteSpace(param) ? default(TJson) : 
                            JsonConvert.DeserializeObject<TJson>(param); 
        } 

        throw new KeyNotFoundException(); 
    } 

    /// <summary> 
    /// The go back. 
    /// </summary> 
    public void GoBack() 
    { 
        RootFrame.GoBack(); 
    } 

    /// <summary> 
    /// Navigates the specified parameter. 
    /// </summary> 
    /// <typeparam name="TDestinationViewModel">The type of the destination view model.</typeparam> 
    /// <param name="parameter">The parameter.</param> 
    public void Navigate<TDestinationViewModel>(object parameter) 
    { 
        var navParameter = string.Empty; 
        if (parameter != null) 
        { 
            navParameter = "?param=" + JsonConvert.SerializeObject(parameter); 
        } 
 
        if (ViewModelRouting.ContainsKey(typeof(TDestinationViewModel))) 
        { 
            var page = ViewModelRouting[typeof(TDestinationViewModel)]; 

            this.RootFrame.Navigate(new Uri("/" + page + navParameter, UriKind.Relative)); 
        } 
    } 
}
There are some differences for each implementation, the big one is the way we sent parameters in Windows Phone app, because it must be a query string.

 

4. Others details: With this i need to register the view model and the NavigationService interface and implementation, in ViewModelLocator:

 

/// <summary> 
/// This class contains static references to all the view models in the 
/// application and provides an entry point for the bindings. 
/// </summary> 
public class ViewModelLocator 
{ 
    /// <summary> 
    /// Initializes a new instance of the ViewModelLocator class. 
    /// </summary> 
    public ViewModelLocator() 
    { 
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default); 
        
        if (!SimpleIoc.Default.IsRegistered<IServiceManager>()) 
        { 
           // For use the fake data do: 
           // FakeServiceManager.FakeImagePath = "ms-appx:///Images/FakeImage.png"; 
           // SimpleIoc.Default.Register<IServiceManager, FakeServiceManager>(); 
           SimpleIoc.Default.Register<IServiceManager, ServiceManager>(); 

           SimpleIoc.Default.Register<INavigationService, NavigationService>(); 
        } 

        SimpleIoc.Default.Register<TitlesViewModel>(); 
        SimpleIoc.Default.Register<TitleDetailsViewModel>(); 
    } 

    /// <summary> 
    /// Gets the titles view model. 
    /// </summary> 
    public TitlesViewModel TitlesViewModel 
    { 
        get 
        { 
            return ServiceLocator.Current.GetInstance<TitlesViewModel>(); 
        } 
    } 

    /// <summary> 
    /// Gets the title details view model. 
    /// </summary> 
    /// <value> 
    /// The title details view model. 
    /// </value> 
    public TitleDetailsViewModel TitleDetailsViewModel 
    { 
        get 
        { 
            return ServiceLocator.Current.GetInstance<TitleDetailsViewModel>(); 
        } 
    } 

    /// <summary> 
    /// The cleanup. 
    /// </summary> 
    public static void Cleanup() 
    { 
        // TODO Clear the ViewModels 
    } 
}

 

and the TitlesViewModel will be updated with an new method:

 

/// <summary> 
/// The show title details. 
/// </summary> 
/// <param name="myTitle"> 
/// The my title. 
/// </param> 
/// <returns> 
/// The <see cref="bool"/>. 
/// </returns> 
public bool ShowTitleDetails(MyTitle myTitle) 
{ 
    if (_navigationService != null) 
    { 
        _navigationService.Navigate<TitleDetailsViewModel>(myTitle); 
        return true; 
    } 

    return false; 
}

 

and in TitlesPage.xaml.cs we will add the:

 

/// <summary> 
/// Handles the OnItemClick event of the Title control. 
/// </summary> 
/// <param name="sender">The source of the event.</param> 
/// <param name="e">The <see cref="ItemClickEventArgs" /> instance containing the event data.</param> 
private void Title_OnItemClick(object sender, ItemClickEventArgs e) 
{ 
    var titlesViewModel = DataContext as TitlesViewModel; 
    if (titlesViewModel != null) 
    { 
        var item = e.ClickedItem as MyTitleItemView; 
        if (item != null) 
        { 
            titlesViewModel.ShowTitleDetails(item.Item); 
        } 
    } 
}

 

that allow to navigate to the next page. Here i am using the method from view model to keep the same code between platforms.

 

Note: The reason for this is because there are differences between Behaviors between platforms, and the implementation I tested for Windows Store apps don't liked.

 

Source code files

 

  • IServiceManager.cs has the IServiceManager interface and define the interface for the ServiceManager.
  • ServiceManager.cs has the ServiceManager class and it encapsulate the NetFlixService and exposes only the methods that is need in ViewModel.
  • FakeServiceManager.cs is the implementation of the IServiceManager, but is a fake data.

 

  • TitlesViewModel.cs has TitlesViewModel class and it is used for binding with the DataContext from TitlesPage.
  • TitleDetailsViewModel that represent the view model that will be binding to the TitleDetailsPage.
  • ViewModelLocator.cs has the ViewModelLocator class that help to binding the view model with the view.
  • ViewModelHelper.cs has the ViewModelHelper class the helps to create grouped data.

 

  • TitlesPage.xaml and TitlesPage.xaml.cs that is the main page.
  • TitleDetailsPage.xaml that represent the page with details from selected item in TitlesPage.xaml.
  • Templates.xaml is a resource dictionary that has the DataTemplate for the view.
  • NetFlixItemTemplateSelector.cs has the NetFlixItemTemplateSelector that is used for get the ItemTemplate for each item in the GridView.
  • TitleDetailsPage.xaml that represent the page with details from selected item in TitlesPage.xaml.

 

More information

 

 

Run the sample 

 

This sample requires a Nuget package restore. For it, you should follow the steps:

 

Open the solution (.sln file), the aspect should be:

 

 

Go to Top Menu > Tools > Library Package Manager

 

 

We will see something like this:

 

 

Download process will start....

 

 

At the end, is recommend to close the solution and then open again.

 

To debug the app and then run it, press F5 or use Debug > Start Debugging. To run the app without   debugging, press Ctrl+F5 or use Debug > Start Without Debugging

 

More information

 

Ask me on twitter @saramgsilva

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

saramgsilva
Software Developer (Senior)
Portugal Portugal
I studied mathematics in University of Coimbra, but since i finish my degree I’m working in software development using Microsoft technologies.
 
Actually I am a Windows 8 Store App and Windows Phone Developer in Portugal, with experience in the development of projects within the operational planning of public transport, payments and multimedia.
 
I was presented with Microsoft Most Valuable Professional (MVP) 2013 – Visual C# and Nokia Developer Champion.
 

My profissional profile:
 
Windows 8 Store Apps Developer
Windows Phone Developer
Silverlight Developer
WPF Developer
 
My Certifications::
 
MCTS: .NET Framework 4.0, Windows Applications
MCPD: Windows Developer 3.5
MCTS: .NET Framework 3.5, Windows Forms Applications
MCTS: .NET Framework 3.5 Windows Presentation Foundation Applications
 
If you want to know more about my career see my linkedin profile.
Follow on   Twitter

Comments and Discussions

 
QuestionNavigation Parameter PinmemberWilliam E. Kempf30-Jun-14 3:32 
GeneralMy vote of 5 PinmemberVitorHugoGarcia7-Mar-13 7:52 
GeneralRe: My vote of 5 Pinmembersaramgsilva7-Mar-13 8:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411022.1 | Last Updated 30 Jun 2014
Article Copyright 2013 by saramgsilva
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid