Windows通用应用中从ViewModel调用Frame控件的实现方法

我懂你现在的困扰——开发UWP应用时，想在ViewModel里操控页面上的frameMainPage，但直接引用UI控件又会破坏MVVM的分离原则对吧？下面给你几个既符合MVVM规范又能实现需求的实用方案：

方案1：事件聚合器（解耦首选） #

这是MVVM场景下最常用的解耦方式，通过发布订阅事件让ViewModel通知View执行UI操作，完全不直接依赖控件。

• 首先定义一个导航请求事件类：

public class NavigateRequestEvent
{
    public Type TargetPageType { get; set; }
    public object Parameter { get; set; } // 可选，用于传递导航参数
}

• 在ViewModel中注入事件聚合器（可以用Prism的IEventAggregator，也可以自己实现简易版），发布导航请求：

public class MainViewModel
{
    private readonly IEventAggregator _eventAggregator;

    public MainViewModel(IEventAggregator eventAggregator)
    {
        _eventAggregator = eventAggregator;
        NavigateCommand = new RelayCommand(() => 
        {
            _eventAggregator.GetEvent<NavigateRequestEvent>().Publish(
                new NavigateRequestEvent { TargetPageType = typeof(YourTargetPage) }
            );
        });
    }

    public ICommand NavigateCommand { get; }
}

• 在MainPage的代码后台订阅事件，操控Frame执行导航：

public sealed partial class MainPage : Page
{
    private readonly IEventAggregator _eventAggregator;
    private SubscriptionToken _navigateToken;

    public MainPage()
    {
        InitializeComponent();
        _eventAggregator = App.Current.Resources["EventAggregator"] as IEventAggregator; // 假设已在App.xaml中注册实例
        SubscribeToEvents();
    }

    private void SubscribeToEvents()
    {
        _navigateToken = _eventAggregator.GetEvent<NavigateRequestEvent>().Subscribe(request =>
        {
            frameMainPage.Navigate(request.TargetPageType, request.Parameter);
        });
    }

    protected override void OnNavigatedFrom(NavigationEventArgs e)
    {
        base.OnNavigatedFrom(e);
        // 取消订阅避免内存泄漏
        _eventAggregator.GetEvent<NavigateRequestEvent>().Unsubscribe(_navigateToken);
    }
}

方案2：抽象导航服务接口 #

通过定义导航服务接口，让ViewModel依赖抽象而非具体的Frame控件，由View层实现接口完成实际导航操作。

• 定义导航服务接口：

public interface INavigationService
{
    void Navigate(Type pageType, object parameter = null);
    void GoBack();
}

• 在MainPage中实现该接口，关联到frameMainPage：

public class MainNavigationService : INavigationService
{
    private readonly Frame _frame;

    public MainNavigationService(Frame frame)
    {
        _frame = frame;
    }

    public void Navigate(Type pageType, object parameter = null)
    {
        _frame.Navigate(pageType, parameter);
    }

    public void GoBack()
    {
        if (_frame.CanGoBack)
        {
            _frame.GoBack();
        }
    }
}

• 在ViewModel中注入服务并调用：

public class MainViewModel
{
    private readonly INavigationService _navigationService;

    public MainViewModel(INavigationService navigationService)
    {
        _navigationService = navigationService;
        NavigateCommand = new RelayCommand(() => 
        {
            _navigationService.Navigate(typeof(YourTargetPage));
        });
    }

    public ICommand NavigateCommand { get; }
}

• 在MainPage构造函数中给ViewModel传递服务实例：

public MainPage()
{
    InitializeComponent();
    var navigationService = new MainNavigationService(frameMainPage);
    DataContext = new MainViewModel(navigationService);
}

方案3：简易命令绑定（适合小型项目） #

如果项目规模小，不想引入复杂框架，可以用这种快速实现方式（虽略违背MVVM，但足够轻便）：

• ViewModel中定义命令：

public class MainViewModel
{
    public ICommand NavigateCommand { get; set; }

    public MainViewModel()
    {
        NavigateCommand = new RelayCommand<Type>(_ => {});
    }
}

• 在MainPage代码后台给命令绑定导航逻辑：

public MainPage()
{
    InitializeComponent();
    var viewModel = (MainViewModel)DataContext;
    viewModel.NavigateCommand = new RelayCommand<Type>(pageType =>
    {
        frameMainPage.Navigate(pageType);
    });
}

• 在XAML中给触发控件绑定命令并传参：

<Button Content="跳转页面" Command="{Binding NavigateCommand}" CommandParameter="{x:Type local:YourTargetPage}"/>

注意：方案3虽简单，但ViewModel和View存在间接耦合，更适合小型快速开发场景，大型项目优先选方案1或2。

内容的提问来源于stack exchange，提问作者Mr. Developer