MVVM using page navigation on Windows Phone 7

Question

The navigation structure in Windows Phone 7 is a shortened version of what is in Silverlight. You can only go to Uri, not browse. Because the NavigationService is attached to the view, how people get it to fit into MVVM. For instance:

public class ViewModel : IViewModel { private IUnityContainer container; private IView view; public ViewModel(IUnityContainer container, IView view) { this.container = container; this.view = view; } public ICommand GoToNextPageCommand { get { ... } } public IView { get { return this.view; } } public void GoToNextPage() { // What do I put here. } } public class View : PhoneApplicationPage, IView { ... public void SetModel(IViewModel model) { ... } } 

I am using the Unity IOC container. First I have to enable my view model, and then use the View property to get the view and then show it. However, using the NavigationService, I have to pass the Uri view. I have no way to create a view model. Is there any way around this.

Answer 1

Instead of passing the view through the constructor. You can first create a view using the NavigationService and pass it to the view model. For instance:

 public class ViewModel : IViewModel { private IUnityContainer container; private IView view; public ViewModel(IUnityContainer container) { this.container = container; } public ICommand GoToNextPageCommand { get { ... } } public IView { get { return this.view; } set { this.view = value; this.view.SetModel(this); } } public void GoToNextPage() { // What do I put here. } } PhoneApplicationFrame frame = Application.Current.RootVisual; bool success = frame.Navigate(new Uri("View Uri")); if (success) { // I'm not sure if the frame Content property will give you the current view. IView view = (IView)frame.Content; IViewModel viewModel = this.unityContainer.Resolve<IViewModel>(); viewModel.View = view; } 

Answer 2

If you are using Mvvm Light, you can try:

Windows Phone 7 - Navigate Between Pages Using MVVM Light Messaging Messages

(See a similar post: Silverlight Navigation using Mvvm-light (oobe) + MEF? )

Answer 3

I believe that a view model should be created and registered when the application starts. By placing it inside the root DataContext, all pages will automatically receive a link to it without any code or IoC tricks.

  // Code to execute when the application is launching (eg, from Start) // This code will not execute when the application is reactivated private void Application_Launching(object sender, LaunchingEventArgs e) { m_ViewModel = new PrimaryViewModel(RootFrame) ; RootFrame.DataContext = m_ViewModel; } // Code to execute when the application is activated (brought to foreground) // This code will not execute when the application is first launched private void Application_Activated(object sender, ActivatedEventArgs e) { m_ViewModel = new PrimaryViewModel(RootFrame) ; m_ViewModel.Activated(PhoneApplicationService.Current.State); RootFrame.DataContext = m_ViewModel; } 

Answer 4

If you use the MVVM architecture, you can submit the navigation page after registering with Messenger. Create a model class (say NavigateToPageMessage) with a string variable (e.g. PageName). You want to pass the line from homepage.xaml to newpage.xaml and then to the Home viewmodel just send a message like this under the command you linked (e.g. HomeNavigationCommand)

 private void HomeNavigationCommandHandler() { Messenger.Default.Send(new NavigateToPageMessage {PageName = "newpage"}); } 

In the new Viewmodel, you need to register this messenger,

 Messenger.Default.Register<NavigateToPageMessage>(this, (action) => ReceiveMessage(action)); private object ReceiveMessage(NavigateToPageMessage action) { var page = string.Format("/Views/{0}.xaml", action.PageName); NavigationService.Navigate(new System.Uri(page,System.UriKind.Relative)); return null; } 

// Assuming your views are in the view folder