Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Page Navigation using MVVM in Xamarin.Forms

Tags:

I am working on xamarin.form cross-platform application , i want to navigate from one page to another on button click. As i cannot do Navigation.PushAsync(new Page2()); in ViewModel because it only possible in Code-Behid file. please suggest any way to do this?

Here is my View:

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              x:Class="Calculator.Views.SignIn"              xmlns:ViewModels="clr-namespace:Calculator.ViewModels;assembly=Calculator">          <ContentPage.BindingContext>         <ViewModels:LocalAccountViewModel/>     </ContentPage.BindingContext>          <ContentPage.Content>             <StackLayout>             <Button Command="{Binding ContinueBtnClicked}" />             </StackLayout>     </ContentPage.Content> </ContentPage> 

Here is my ViewModel:

public class LocalAccountViewModel : INotifyPropertyChanged {     public LocalAccountViewModel()     {         this.ContinueBtnClicked = new Command(GotoPage2);     }              public void GotoPage2()     {         /////     }          public ICommand ContinueBtnClicked     {         protected set;         get;     }          public event PropertyChangedEventHandler PropertyChanged;          protected virtual void OnPropertyChanges([CallerMemberName] string PropertyName = null)     {         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropertyName));     } } 
like image 605
Waleed Arshad Avatar asked Apr 06 '17 11:04

Waleed Arshad


People also ask

Does Xamarin use MVVM?

MvvmCross is a cross-platform MVVM library that allows you to put a common PCL directly from xamarin. android and xamrin. ios.

How do I use navigation page in Xamarin form?

Open Visual Studio 2017 Community Edition then go to File -> New -> Project click on Project. Now, a new window will open in that window under installed select Visual C# -> Cross -Platform. Now, select Cross Platform App (Xamarin), now give the name of the project and set the location for that folder and then click OK.

What is MVVM Xamarin forms?

The MVVM pattern enforces a separation between three software layers — the XAML user interface, called the View; the underlying data, called the Model; and an intermediary between the View and the Model, called the ViewModel.


1 Answers

One way is you can pass the Navigation through the VM Constructor. Since pages inherit from VisualElement, they directly inherit the Navigation property.

Code behind file:

public class SignIn : ContentPage {     public SignIn(){        InitializeComponent();        // Note the VM constructor takes now a INavigation parameter        BindingContext = new LocalAccountViewModel(Navigation);     } } 

Then in your VM, add a INavigation property and change the constructor to accept a INavigation. You can then use this property for navigation:

public class LocalAccountViewModel : INotifyPropertyChanged {     public INavigation Navigation { get; set;}      public LocalAccountViewModel(INavigation navigation)     {         this.Navigation = navigation;         this.ContinueBtnClicked = new Command(async () => await GotoPage2());     }      public async Task GotoPage2()     {         /////         await Navigation.PushAsync(new Page2());     }     ... } 

Note an issue with your code that you should fix: The GoToPage2() method must be set async and return the Task type. In addition, the command will perform an asynchronous action call. This is because you must do page navigation asychronously!

Hope it helps!

like image 192
TaiT's Avatar answered Sep 30 '22 20:09

TaiT's