Navigating to a new page from the View Model in Windows Phone 8.1 universal app
Solution 1
Ok, I have found an answer to this question. Took a bit of investigation but I eventually found the preferred MVVM-Light way of doing this. I don't take credit for this answer in anyway but just posting it here in case people are looking for an answer to this question.
Create an INavigationService interface as follows:
public interface INavigationService
{
void Navigate(Type sourcePageType);
void Navigate(Type sourcePageType, object parameter);
void GoBack();
}
Create a NavigationService class as follows:
public class NavigationService : INavigationService
{
public void Navigate(Type sourcePageType)
{
((Frame)Window.Current.Content).Navigate(sourcePageType);
}
public void Navigate(Type sourcePageType, object parameter)
{
((Frame)Window.Current.Content).Navigate(sourcePageType, parameter);
}
public void GoBack()
{
((Frame)Window.Current.Content).GoBack();
}
}
Now in the ViewModelLocator, set it up like this:
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance",
"CA1822:MarkMembersAsStatic",
Justification = "This non-static member is needed for data binding purposes.")]
public MainViewModel Main
{
get
{
return ServiceLocator.Current.GetInstance<MainViewModel>();
}
}
static ViewModelLocator()
{
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
if (ViewModelBase.IsInDesignModeStatic)
{
SimpleIoc.Default.Register<INavigationService, Design.DesignNavigationService>();
}
else
{
SimpleIoc.Default.Register<INavigationService>(() => new NavigationService());
}
SimpleIoc.Default.Register<MainViewModel>();
}
Next setup a navigation service for design time as follows:
public class DesignNavigationService : INavigationService
{
// This class doesn't perform navigation, in order
// to avoid issues in the designer at design time.
public void Navigate(Type sourcePageType)
{
}
public void Navigate(Type sourcePageType, object parameter)
{
}
public void GoBack()
{
}
}
My MainViewModel constructor is as follows:
public MainViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
...
Now you can simply use this to navigate in your viewmodel:
_navigationService.Navigate(typeof(WelcomeView));
For more details on the original author Laurent Bugnion see this article and associated code. http://msdn.microsoft.com/en-us/magazine/jj651572.aspx
Solution 2
There is a new and simpler implementation here: https://marcominerva.wordpress.com/2014/10/10/navigationservice-in-mvvm-light-v5/
First we create the NavigationService
and DialogService
(for the page navigation params):
public ViewModelLocator() {
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
var navigationService = this.CreateNavigationService();
SimpleIoc.Default.Register<INavigationService>(() => navigationService);
SimpleIoc.Default.Register<IDialogService, DialogService>();
SimpleIoc.Default.Register<MainViewModel>();
SimpleIoc.Default.Register<DetailsViewModel>();
}
private INavigationService CreateNavigationService() {
var navigationService = new NavigationService();
navigationService.Configure("Details", typeof(DetailsPage));
// navigationService.Configure("key1", typeof(OtherPage1));
// navigationService.Configure("key2", typeof(OtherPage2));
return navigationService;
}
Then we create a RelayCommand
and NavigationService
in your ViewModel
, like so:
public class MainViewModel : ViewModelBase {
private INavigationService _navigationService;
public RelayCommand<Tuple<string, string>> DetailsCommand { get; set; }
public MainViewModel(INavigationService navigationService) {
this._navigationService = navigationService;
DetailsCommand = new RelayCommand<Tuple<string, string>>((args) => NavigateTo(args));
}
public void NavigateTo(Tuple<string, string> args) {
this._navigationService.NavigateTo(args.Item1, args.Item1);
}
public void ClickAndNavigate() {
NavigateTo(new Tuple<string, string>("AdminPivotPage", "Test Params"));
}
}
And finally, we can get the page navigation params like so:
public sealed partial class DetailsPage : Page {
// ...
protected override void OnNavigatedTo(NavigationEventArgs e) {
var parameter = e.Parameter as string; // "My data"
base.OnNavigatedTo(e);
}
}
But to read the arguments passed in page navigation in MVVM pattern, you can take a look here.
Related videos on Youtube
AndrewJE
By day: Write some .Net code for some company in the UK. I use WPF, Forms, Windows 10, SQL Server, Oracle, Angular, ASP.NET, UWP, TDD, Xamarin - Android By night: Write some Unity.
Updated on June 04, 2022Comments
-
AndrewJE almost 2 years
I am working on a windows phone 8.1 universal app and want to find the best way of handling page navigations without having large amounts of logic in the code behind. I want to keep the code behind in my View as uncluttered as possible. What is the accepted MVVM way of navigating to a new page in response to a button click?
I currently have to send a RelayComnmand message from the ViewModel to the view with the details of the page to navigate to. This means that the code behind has to be wired up as follows:
public MainPage() { InitializeComponent(); Messenger.Default.Register<OpenArticleMessage>(this, (article) => ReceiveOpenArticleMessage(article)); ... } private object ReceiveOpenArticleMessage(OpenArticleMessage article) { Frame.Navigate(typeof(ArticleView)); }
This just doesn't seem the best way although it does work. How can I do the page navigations directly from the ViewModel? I am using MVVM-Light in my project.
-
Harsha Bhat over 9 yearsany way we can use this to access the backstack entries?
-
Rico Suter over 9 yearsThe problem here is that your view models have a dependencies to the view classes (typeof(...)) which should be avoided in a strict MVVM environment...
-
Walter Jr. over 9 yearsPlease! How can I bind the DetailsCommand to a GridViewItem that I'm populating with external JSON source data?
-
Schrödinger's Box over 9 yearsThis is not related to this question, however you can take a look here: How to bind the ItemClick event to a Command and pass the clicked item to it
-
bleepzter about 7 yearsYou should create a mapping of View-to-View model using a dictionary in your navigation service. The view model would tell the type of view model it wants to navigate, and the navigation service would look the view model type (as a key) and find the corresponding view. This way your views and view models are completely independent of each other.