WPF中基于MVVM与ICommand的视图导航实现及两种设计优劣咨询

核心实现步骤： #

• 定义基础导航ViewModel：创建主ViewModel（如MainViewModel），实现INotifyPropertyChanged接口，包含CurrentViewModel属性，用于绑定到视图容器。
• 实现导航命令：编写实现ICommand的导航命令类（如NavigateCommand），在Execute方法中切换CurrentViewModel的实例（例如从HomeViewModel切换到SettingsViewModel）。
• 视图绑定与模板匹配：在MainWindow的XAML中，用ContentControl绑定CurrentViewModel，并通过DataTemplate将不同ViewModel类型映射到对应UserControl，让WPF自动根据ViewModel切换显示视图。

代码示例： #

主ViewModel：

public class MainViewModel : INotifyPropertyChanged
{
    private object _currentViewModel;
    public object CurrentViewModel
    {
        get => _currentViewModel;
        set
        {
            _currentViewModel = value;
            OnPropertyChanged();
        }
    }

    public ICommand NavigateToHomeCommand { get; }
    public ICommand NavigateToSettingsCommand { get; }

    public MainViewModel()
    {
        NavigateToHomeCommand = new NavigateCommand(() => CurrentViewModel = new HomeViewModel());
        NavigateToSettingsCommand = new NavigateCommand(() => CurrentViewModel = new SettingsViewModel());
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

导航命令类：

public class NavigateCommand : ICommand
{
    private readonly Action _execute;
    public event EventHandler CanExecuteChanged;

    public NavigateCommand(Action execute)
    {
        _execute = execute;
    }

    public bool CanExecute(object parameter) => true;
    public void Execute(object parameter) => _execute();
}

MainWindow XAML：

<Window.DataContext>
    <local:MainViewModel />
</Window.DataContext>
<Grid>
    <StackPanel Orientation="Horizontal">
        <Button Content="首页" Command="{Binding NavigateToHomeCommand}" Margin="5"/>
        <Button Content="设置" Command="{Binding NavigateToSettingsCommand}" Margin="5"/>
    </StackPanel>
    <ContentControl Content="{Binding CurrentViewModel}" Margin="0,30,0,0"/>
</Grid>

<Window.Resources>
    <DataTemplate DataType="{x:Type local:HomeViewModel}">
        <local:HomeUserControl />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:SettingsViewModel}">
        <local:SettingsUserControl />
    </DataTemplate>
</Window.Resources>

MainWindow
  
   ↓
  
ContentControl
  
   ↓
  
ViewModel switching
  
   ↓
  
UserControl

这种设计属于良好的MVVM实践，原因如下：

• 完全遵循关注点分离原则：视图仅负责展示，导航逻辑由ViewModel控制，无直接操作视图对象的代码。
• 低耦合：视图与ViewModel通过数据绑定关联，更换视图或ViewModel时互不影响，便于维护和扩展。
• 可测试性：ViewModel可独立于视图进行单元测试，无需依赖WPF控件环境。
• 统一导航管理：所有视图切换通过ViewModel属性变更实现，逻辑集中，易于追踪和修改。

MainWindow
  
 ↓
  
Button
  
 ↓
  
Command
  
 ↓
  
TransactionsView (Window)

这种设计被认为是不良设计，核心问题在于违反MVVM设计原则：

• 高耦合：Command的Execute方法直接创建并显示TransactionsView实例，导致ViewModel依赖具体视图类，打破视图与ViewModel的分离。
• 可测试性丧失：ViewModel无法脱离WPF窗口环境做单元测试，测试时会实际弹出窗口，增加测试成本与复杂度。
• 导航逻辑分散：每个窗口的打开逻辑写在单独Command中，无法统一管理导航规则（如权限校验、窗口生命周期控制）。
• 扩展性差：后续若需修改导航行为（如将窗口改为弹窗或嵌入到ContentControl），需修改ViewModel代码，不符合开闭原则。

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