在 Xamarin.Forms 中使用 MVVM 进行页面导航 [英] Page Navigation using MVVM in Xamarin.Forms

问题描述

我正在开发 xamarin.form 跨平台应用程序，我想通过单击按钮从一个页面导航到另一个页面.因为我不能在 ViewModel 中执行 Navigation.PushAsync(new Page2()); 因为它只能在 Code-Behid 文件中实现.请提出任何方法来做到这一点?

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?

这是我的观点:

<?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>

这是我的 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));
    }
}

推荐答案

一种方法是您可以通过 VM 构造函数传递导航.由于页面继承自 VisualElement，因此它们直接继承了 Navigation 属性.

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

文件隐藏代码:

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

然后在您的 VM 中，添加 INavigation 属性并将构造函数更改为接受 INavigation.然后您可以使用此属性进行导航:

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());
    }
    ...
}

请注意您应该修复的代码问题:GoToPage2() 方法必须设置为 async 并返回 Task 类型.此外，该命令将执行异步操作调用.这是因为您必须异步进行页面导航！

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!

希望有帮助！

这篇关于在 Xamarin.Forms 中使用 MVVM 进行页面导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！