如何将MainView的内容区域从HomeView切换为DetailsView

我的应用界面如下：

整个窗口定义在MainWindow.xaml中，绿色区域为ContentControl：

<ContentControl Grid.Row="1"
   Grid.Column="1"
   Margin="5"
   Content="{Binding CurrentView}"/>

MainViewModel代码如下：

public RelayCommand HomeViewCommand { get; set; }
public RelayCommand DetailsViewCommand { get; set; }

public HomeViewModel HomeVm { get; set; }
public DetailsViewModel DetailsVm { get; set; }
private object _currentView;

public object CurrentView
{
    get { return _currentView; }
    set 
    {
        _currentView = value;
        OnPropertyChanged();    
    }
}

public MainViewModel()
{
    HomeVm = new HomeViewModel();
    DetailsVm = new DetailsViewModel();
    CurrentView = HomeVm;

    HomeViewCommand = new RelayCommand(o =>
    {
        CurrentView = HomeVm;
    });
}

MainView当前及默认内容为HomeView，我已实现HomeView列表项的点击事件触发逻辑。现需了解，在HomeViewModel的点击触发方法中，应编写何种代码才能将MainView的内容区域切换为DetailsView。我的HomeViewModel相关代码如下：

private void RaisePropertyChanged(string propertyName)
{
        var handler = PropertyChanged;

        if (handler != null)
        {
            //something here to change the currentView of the MainViewModel
        }
}

下面提供几种可行的实现方式，按耦合程度从高到低排列：

方式1：构造函数注入MainViewModel引用 #

让HomeViewModel持有MainViewModel的实例，直接修改其CurrentView属性：

1. 修改HomeViewModel，添加带参数的构造函数：

public class HomeViewModel : INotifyPropertyChanged
{
    private readonly MainViewModel _mainVm;

    // 注入MainViewModel实例
    public HomeViewModel(MainViewModel mainVm)
    {
        _mainVm = mainVm;
    }

    // 列表项点击触发的方法
    private void OnListItemClicked()
    {
        // 切换到DetailsView
        _mainVm.CurrentView = _mainVm.DetailsVm;
    }

    // 你的PropertyChanged实现
    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改MainViewModel的构造函数，创建HomeViewModel时传入自身：

public MainViewModel()
{
    // 传入当前MainViewModel实例
    HomeVm = new HomeViewModel(this);
    DetailsVm = new DetailsViewModel();
    CurrentView = HomeVm;

    HomeViewCommand = new RelayCommand(o =>
    {
        CurrentView = HomeVm;
    });
}

方式2：自定义事件通知 #

在HomeViewModel中定义事件，MainViewModel订阅该事件，收到通知后切换视图：

1. 在HomeViewModel中添加自定义事件：

public class HomeViewModel : INotifyPropertyChanged
{
    // 定义跳转详情页的事件
    public event Action NavigateToDetails;

    // 列表项点击触发的方法
    private void OnListItemClicked()
    {
        // 触发事件
        NavigateToDetails?.Invoke();
    }

    // 你的PropertyChanged实现
    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 在MainViewModel中订阅事件：

public MainViewModel()
{
    HomeVm = new HomeViewModel();
    // 订阅事件，收到通知后切换视图
    HomeVm.NavigateToDetails += () => 
    {
        CurrentView = DetailsVm;
    };

    DetailsVm = new DetailsViewModel();
    CurrentView = HomeVm;

    HomeViewCommand = new RelayCommand(o =>
    {
        CurrentView = HomeVm;
    });
}

方式3：MVVM框架消息机制（如Prism EventAggregator、MvvmLight Messenger） #

如果项目使用MVVM框架，可通过消息传递实现完全解耦：
以MvvmLight为例：

1. 在HomeViewModel中发送跳转消息：

// 定义消息类
public class NavigateToDetailsMessage { }

public class HomeViewModel : INotifyPropertyChanged
{
    // 列表项点击触发的方法
    private void OnListItemClicked()
    {
        // 发送跳转消息
        Messenger.Default.Send(new NavigateToDetailsMessage());
    }

    // 你的PropertyChanged实现
    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 在MainViewModel中注册消息监听：

public MainViewModel()
{
    HomeVm = new HomeViewModel();
    DetailsVm = new DetailsViewModel();
    CurrentView = HomeVm;

    // 监听跳转消息，收到后切换视图
    Messenger.Default.Register<NavigateToDetailsMessage>(this, message =>
    {
        CurrentView = DetailsVm;
    });

    HomeViewCommand = new RelayCommand(o =>
    {
        CurrentView = HomeVm;
    });
}

选型建议 #

• 方式1实现简单，适合小型项目，但存在ViewModel间的耦合；
• 方式2通过事件解耦，符合MVVM关注点分离原则；
• 方式3适合复杂项目，完全解耦各个ViewModel模块。

内容的提问来源于stack exchange，提问作者Ruby Rain