我如何从 MVVM WPF 中的视图 go 到另一个视图？

Question

这里我有一个 WPF 应用程序，它是用 MVVM 结构制作的。 我是 C# WPF 的新手，不熟悉这个概念。 我试图通过按下按钮在一个视图中通过 function 切换到另一个视图。

这是应用程序的样子，

按下登录按钮后，将触发 function 以验证输入，如果有效则切换到另一个视图。 看起来像这样，

文件结构

我怎样才能切换视图？ 下面是一些代码供参考。

主窗口.xaml

<Window x:Class="QuizAppV2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:QuizAppV2"
        xmlns:viewModel="clr-namespace:QuizAppV2.MVVM.ViewModel"
        mc:Ignorable="d"
        Height="600" Width="920"
        WindowStartupLocation="CenterScreen"
        WindowStyle="None"
        ResizeMode="NoResize"
        Background="Transparent"
        AllowsTransparency="True">
    <Window.DataContext>
        <viewModel:MainViewModel/>
    </Window.DataContext>
    <Border Background="#272537"
            CornerRadius="20">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="75"/>
                <RowDefinition/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="Online Quiz"
                            Grid.Column="1"
                            FontSize="20"
                            Foreground="White"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"/>
                <StackPanel Grid.Column="2"
                            Margin="30,20"
                            Orientation="Horizontal"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Top">

                    <Button Content="–"
                            Background="#00CA4E"
                            Style="{StaticResource UserControls}"
                            Click="Minimise"/>
                    <Button Content="▢"
                            Background="#FFBD44"
                            Style="{StaticResource UserControls}"
                            Click="Restore"/>
                    <Button Content="X"
                            Background="#FF605C"
                            Style="{StaticResource UserControls}"
                            Click="Exit"/>
                </StackPanel>
            </Grid>
            <ContentControl Grid.Column="1"
                            Grid.Row="1"
                            Margin="20,10,20,50"
                            Content="{Binding CurrentView}"/>
        </Grid>
    </Border>
</Window>

MainViewModel.cs

using QuizAppV2.Core;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace QuizAppV2.MVVM.ViewModel
{
    class MainViewModel : ObservableObject
    {

        public RelayCommand LoginViewCommand { get; set; }
        public RelayCommand SubjectSelectionViewCommand { get; set; }
        public RelayCommand QuizViewCommand { get; set; }
        public RelayCommand ResultViewCommand { get; set; }

        public LoginViewModel LoginVM { get; set; }
        public SubjectSelectionViewModel SubjectSelectVM { get; set; }
        public QuizViewModel QuizVM { get; set; }
        public ResultViewModel ResultVM { get; set; }


        private object _currentView;

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

        public MainViewModel()
        {
            LoginVM = new LoginViewModel();
            SubjectSelectVM = new SubjectSelectionViewModel();
            QuizVM = new QuizViewModel();
            ResultVM = new ResultViewModel();
            CurrentView = SubjectSelectVM;

            LoginViewCommand = new RelayCommand(o =>
            {
                CurrentView = LoginVM;
            });
            SubjectSelectionViewCommand = new RelayCommand(o =>
            {
                CurrentView = SubjectSelectVM;
            });
        }
    }
}

登录查看.xaml

using QuizAppV2.MVVM.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace QuizAppV2.MVVM.View
{
    /// <summary>
    /// Interaction logic for LoginView.xaml
    /// </summary>
    public partial class LoginView : UserControl
    {
        public LoginView()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (UsrId.Text == "" || UsrName.Text == "")
            {
                UsrIDErrMsg.Visibility = Visibility.Visible;
                UsrNameErrMsg.Visibility = Visibility.Visible;
            }
            else
            {
                UsrIDErrMsg.Visibility = Visibility.Hidden;
                UsrNameErrMsg.Visibility = Visibility.Hidden;
                MainWindow.currentUser = new Student(UsrId.Text, UsrName.Text);
                
            }
        }
    }
}

谢谢

Answer 1

我建议使用“Datatemplate”。 放入主要的 window 资源如下：

<DataTemplate DataType="{x:Type viewmodel:QuizViewModel}">
            <local:QuizView/>
 </DataTemplate>
<DataTemplate DataType="{x:Type viewmodel:LoginViewModel}">
            <local:LoginView/>
 </DataTemplate>

等等... WPF 正在为您完成所有工作，它检查“CurrentView”属性和 select 如何根据合适的 DataTemplate 查看它。

Answer 2

导航是一个棘手的话题，有几种方法可以做到这一点，但由于您是 WPF 的新手，我试图概述一种简单的技术，根据您提供的示例，要求必须逐页 go，这是一个简单的想法将是换出内容。 我的意思是，当用户单击“登录”时，我们对用户进行身份验证并将 LoginPage 与其他页面交换，在您的情况下是测验页面，当用户选择任何选项时，我们将视图换成下一个视图等等在。

我用 Shell 机制编写了一个简单的解决方案。 本质上，我们在 MainWindow 中创建一个空的 shell（即它没有 UI），我们使用 NavigationService/Helper 将页面加载到这个空的 shell 中。 为了简单起见，我在这里使用了 singleton class，其中有 3 种主要方法，

RegisterShell：这必须是交换将发生的 Window，理想情况下需要设置一次。

加载视图：用新视图交换旧视图的方法，我为此使用了用户控件，因为大多数子视图都可以是 WPF 中的用户控件。

LoadViewWithCustomData：与上面类似，但具有更多的灵活性，因为它允许您提供额外的数据。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;

namespace Navigation
{
    class NavigationService
{
    /// <summary>
    /// Singleton so we keep on shell which views can use this to navigate to different pages.
    /// </summary>
    public static NavigationService Instance = new NavigationService();
    private MainWindow myShell;


    private NavigationService()
    {
    }

    /// <summary>
    /// Register the main shell so this service know where to swap the data out and in of
    /// </summary>
    /// <param name="theShell"></param>
    public void RegisterShell(MainWindow theShell)
    {
        this.myShell = theShell;
    }

    /// <summary>
    /// Swaps out any view to the shell.
    /// </summary>
    /// <typeparam name="T"></typeparam>
    public void LoadView<T>() where T : UserControl, new()
    {
        myShell.TheShell = new T();
    }

    /// <summary>
    /// Swaps out any view to the shell with custom data, here the user responsible to create UserControl with all the reqired data for the view.
    /// We can automate this via reflection if required.
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="theNewControl"></param>
    public void LoadViewWithCustomData<T>(UserControl theNewControl) where T : UserControl, new()
    {
        myShell.TheShell = theNewControl;
    }
}

现在这是我的登录页面的样子，这里重要的一行是NavigationService.Instance.LoadView<_4OptionQuizPage>()这实质上将用户发送到 _4OptionQuizPage。

    public partial class LoginPage : UserControl
        {
            public ICommand LoginClicked { get; }
            public LoginPage()
            {
                InitializeComponent();
                this.DataContext = this;
                LoginClicked = new SimpleCommand(OnLoginClicked);
            }
    
            private void OnLoginClicked()
            {
                // TODO : Authenticate user here.
    
                // Send the user to Quiz Page
                NavigationService.Instance.LoadView<_4OptionQuizPage>();
            }
        }

在 _4OptionQuizPage 中，我们可以有这样的东西，这是大部分业务逻辑可能驻留的地方，我在这里有 4 个按钮，其中 2 个显示消息框，但按钮 1 将您发送回登录页面，按钮 2 重新加载同一页面不同的数据（即将用户发送到下一个问题）

public partial class _4OptionQuizPage : UserControl, INotifyPropertyChanged
    {
        public ICommand Option1Clicked { get; }
        public ICommand Option2Clicked { get; }
        public ICommand Option3Clicked { get; }
        public ICommand Option4Clicked { get; }
        private string myQuestion;
        public event PropertyChangedEventHandler PropertyChanged;
        public string Question
        {
            get { return myQuestion; }
            set 
            {
                myQuestion = value;
                NotifyPropertyChanged();
            }
        }
        public _4OptionQuizPage() : this($"Question Loaded At {DateTime.Now}, this can be anything.")
        {
        }
        public _4OptionQuizPage(string theCustomData)
        {
            InitializeComponent();
            Question = theCustomData; 
            this.DataContext = this;
            this.Option1Clicked = new SimpleCommand(OnOption1Clicked);
            this.Option2Clicked = new SimpleCommand(OnOption2Clicked);
            this.Option3Clicked = new SimpleCommand(OnOption3Clicked);
            this.Option4Clicked = new SimpleCommand(OnOption4Clicked);
        }
        private void OnOption4Clicked()
        {
            MessageBox.Show("Option 4 selected, Store the results");
        }
        private void OnOption3Clicked()
        {
            MessageBox.Show("Option 3 selected, Store the results");
        }
        private void OnOption1Clicked()
        {
            NavigationService.Instance.LoadView<LoginPage>();
        }
        private void OnOption2Clicked()
        {
            NavigationService.Instance.LoadViewWithCustomData<LoginPage>(new _4OptionQuizPage("A custom question to emulate custom data"));
        }
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

最后，您的 MainWindow 将注册 shell 并将用户发送到 LoginPage，它的 XAML 文件中不应包含任何内容

    public partial class MainWindow : Window, INotifyPropertyChanged
{
    private object myShell;

    public object TheShell
    {
        get { return myShell; }

        set 
        { 
            myShell = value;
            this.NotifyPropertyChanged();
        }
    }

    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
        NavigationService.Instance.RegisterShell(this);
        NavigationService.Instance.LoadView<LoginPage>();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

}

MainWindow.xaml 应该是空的，本质上是一个 shell 用于其他所有内容。

<Window x:Class="Navigation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Navigation"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Content="{Binding TheShell}">
</Window>

Answer 3

如何让视图 model 参与页面导航有很多方法。
一般情况下，每个参与导航的class都必须访问你的导航API。
例如，您可以将导航逻辑移动到专用的 class NavigationService并提供对每个应该能够导航到不同视图的 class 的共享引用。

或者（推荐），您可以使用您在MainWindow上处理的路由命令，然后将命令委托给MainViewModel 。
在这种情况下，每个按钮都必须将目标作为CommandParameter传递。 该解决方案允许特定视图模型不直接参与导航。 您不需要用导航详细信息污染您的视图 model 类。

以下示例显示如何使用RoutedCommand从QuizView导航到ResultView 。

MainViewModel.cs
MainViewModel是唯一知道如何导航和了解相关细节的视图 model class。
这实现了可扩展性，同时保持视图 model 类的实现简单。

通常，要启用数据验证，让视图模型实现INotifyDataErrorInfo 。
然后，您可以在允许离开页面之前查询INotifyDataErrorInfo.HasErrors属性。

class MainViewModel : ObservableObject
{
  public object CurrentView { get; set; }
  private Dictionary<Type, INotifyPropertyChanged> ViewModelMap { get; }

  public MainViewModel()
  {
    this.ViewModelMap = new Dictionary<Type, INotifyPropertyChanged>
    {
      { typeof(QuizVm),  new QuizVm() },
      { typeof(ResultVm),  new ResultVm() },
    };
  }

  // Check if destination type is valid.
  // In case the navigation source implements INotifyDataErrorInfo,
  // check if the source is in a valid state (INotifyDataErrorInfo.HasEWrrors returns 'false').
  // This method is called by the view. It will delegate its ICommand.CanExecute to this method
  // If this method returns 'false' the command source e.g. Button will be disabled.
  public bool CanNavigate(Type navigationSourceType, Type navigationDestinationType)
    => CanNavigateAwayFrom(navigationSourceType) 
      && CanNavigateTo(navigationDestinationType);

  private bool CanNavigateAwayFrom(Type navigationSourceType) 
    => this.ViewModelMap.TryGetValue(navigationSourceType, out INotifyPropertyChanged viewModel)
      && viewModel is INotifyDataErrorInfo notifyDataErrorInfo
        ? !notifyDataErrorInfo.HasErrors
        : true;

  private bool CanNavigateTo(Type navigationDestinationType)
    => this.ViewModelMap.ContainsKey(navigationDestinationType);

  // This method is called by the view. It will delegate its ICommand.Execute to this method
  public void NavigateTo(Type destinationType)
  {
    if (this.ViewModelMap.TryGetValue(destinationType, out INotifyPropertyChanged viewModel))
    {
      this.CurrentView = viewModel;
    }
  }
}

MainWindow.xaml.cs

partial class MainWindow : Window
{
  public static RoutedCommand NavigateCommand { get; } = new RoutedUICommand(
    "Navigate to view command", 
    nameof(NavigateCommand), 
    typeof(MainWindow));

  private MainViewModel MainViewModel { get; }

  public MainWindow()
  {   
    InitializeComponent();

    this.MainViewModel = new MainViewModel();
    this.DataContext = this.MainViewModel;

    var navigateCommandBinding = new CommandBinding(MainWindow.NavigateCommand, ExecuteNavigateCommand, CanExecuteNavigateCommand);
    this.CommandBindings.Add(navigateCommandBinding);
  }

  private void CanExecuteNavigateCommand(object sender, CanExecuteRoutedEventArgs e)
  {
    if (e.Source is not FrameworkElement commandSource)
    {
      return;
    }

    Type navigationSourceType = commandSource.DataContext.GetType();
    Type navigationDestinationType = (Type)e.Parameter;
    e.CanExecute = this.MainViewModel.CanNavigate(navigationSourceType, navigationDestinationType);
  }

  private void ExecuteNavigateCommand(object sender, ExecutedRoutedEventArgs e)
  {
    var destinationViewModelType = (Type)e.Parameter;
    this.MainViewModel.NavigateTo(destinationViewModelType);
  }
}

主窗口.xaml
要实际呈现视图（例如自定义控件），您需要定义一个隐式DataTemplate （没有x:Key指令），它具有关联视图 model class 作为DataType 。 然后， ContentControl将自动选择与ContentControl.Content属性值的类型相匹配的正确类型。

<Window>
  <Window.Resources>
    <DataTemplate DataType="{x:Type local:QuizVM}">
      <QuizView />
    </DataTemplate>

    <DataTemplate DataType="{x:Type local:ResultVM}">
      <ResultView />
    </DataTemplate>
  </Window.Resources>

  <ContentControl Content="{Binding CurrentView}" />
</Window>

如果视图需要导航，它必须使用 static 路由命令（在MainWindow中定义和处理）并将目标视图 model 的Type作为CommandParameter传递。
这样，导航就不会污染视图模型并停留在视图内。

QuizView.xaml

<QuizView>
  <Button Content="Next"
          Command="{x:Static local:MainWindow.NextPageCommand}"
          CommandParameter="{x:Type local:ResultVM}"/>
</QuizView>

结果视图.xaml

<ResultView>
  <Button Content="Back"
          Command="{x:Static local:MainWindow.NextPageCommand}"
          CommandParameter="{x:Type local:QuizVM}"/>
</ResultView>

因为视图model类一般不直接参与导航，
他们不必执行任何相关命令或依赖任何导航服务。
导航完全由MainWindow及其MainViewModel控制。

对于可选的数据验证，让他们实施INotifyDataErrorInfo 。

QuizVM.cs

class QuizVM : INotifyPropertyChnaged, INotifyDataErrorInfo
{
}

结果VM.cs

class ResultVM : INotifyPropertyChnaged, INotifyDataErrorInfo
{
}

Answer 4

此示例演示了两种导航方法。 通常很有用，因为您说要从登录开始，但在用户登录之前不显示任何菜单等。然后一旦他们登录，您需要某种菜单或视图列表，他们可以导航到仍然是 static。

我的主窗口纯粹是一个包含所有内容的 shell。

它的标记是：

 <Window ......
    Title="{Binding Title}" 
    Content="{Binding}"
    />

此示例首先对所有导航使用 viewmodel。 视图模型被模板化到 UI 中。

后面的代码还有更多。

public partial class LoginNavigationWindow : Window
{
    public Type ParentViewModel
    {
        get { return (Type)GetValue(ParentViewModelProperty); }
        set { SetValue(ParentViewModelProperty, value); }
    }

    public static readonly DependencyProperty ParentViewModelProperty =
        DependencyProperty.Register(name: "ParentViewModel",
        propertyType: typeof(Type),
        ownerType: typeof(LoginNavigationWindow),
        typeMetadata: new FrameworkPropertyMetadata(
            defaultValue: null,
        propertyChangedCallback: new PropertyChangedCallback(ParentViewModelChanged)
      ));
    private static void ParentViewModelChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var vm = Activator.CreateInstance((Type)e.NewValue);
        ((Window)d).DataContext = vm;
        Task.Run(((IInitiatedViewModel)vm).Initiate);
    }

    public LoginNavigationWindow()
    {
        InitializeComponent();
        WeakReferenceMessenger.Default.Register<ParentNavigate>(this, (r, pn) =>
        {
            this.SetValue(LoginNavigationWindow.ParentViewModelProperty, pn.ParentViewModelType);
        });
    }

Messenger 注册将使用依赖属性切换出窗口的数据上下文。 该消息只是一个 class 具有传递类型的属性

public class ParentNavigate
{
    public Type ParentViewModelType { get; set; }
}

回调 ParentViewModelChanged 采用一个类型，将其实例化并在 window 上设置数据上下文。

通常，您对保留 window 或父级视图的 state 不感兴趣。 您已经登录。如果您想重新登录，您将重新开始并输入用户名和密码。

入口点有点不寻常，因为我处理应用程序启动并依赖于该依赖属性回调。

    private void Application_Startup(object sender, StartupEventArgs e)
    {
        var mw = new LoginNavigationWindow();
        mw.Show();
        mw.SetValue(LoginNavigationWindow.ParentViewModelProperty, typeof(LoginViewModel));
    }

而不是一个充满菜单等的主窗口，我当然什么也没有。

我有一个 LoginUC 是您将在启动时看到的第一件事。 这只是说明性的。

在真正的应用程序中导航之前，我们将从用户那里获取输入并对其进行验证。 我们只是对这里的导航感兴趣，所以这个版本只有一个按钮可以导航到 MainViewModel：

<Grid>
    <StackPanel>
        <TextBlock Text="Log in"/>
        <Button Content="Go"
                Command="{Binding LoadMainCommand}"/>
    </StackPanel>
</Grid>
</UserControl>

我的 LoginViewModel 有命令、标题和任务。

public partial class LoginViewModel : BaseParentViewModel
{
    [RelayCommand]
    private async Task LoadMain()
    {
        var pn = new ParentNavigate{ ParentViewModelType = typeof(MainViewModel) };
        WeakReferenceMessenger.Default.Send(pn);
    }
    public LoginViewModel()
    {
        Title = "Please Log In first";
    }

    public override async Task Initiate()
    {
        // Get any data for login here
    }
}

基础父视图模型

public partial class BaseParentViewModel : ObservableObject, IInitiatedViewModel
{
    [ObservableProperty]
    private string title = string.Empty;

    virtual public async Task Initiate() { }
}

界面

public interface IInitiatedViewModel
{
    Task Initiate();
}

此接口的目的是为我们提供一种通用方法，让任何视图模型都能获取所需的任何数据。 通过设置数据上下文，然后启动一个后台线程来获取该数据，视图将快速出现，然后填充它需要的任何数据。 如果获取该数据需要一段时间，那么至少在任务仍在继续工作的同时视图是“向上”并且快速可见的。

在一个更完整的示例中，我们将在基础视图模型中使用 IsBusy，它将从 true 开始并更改为 false。 这将在视图中驱动一个“throbber”或总线指示器。

资源字典使用数据类型将视图模型数据模板与用户控件相关联：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:LoginNavigation"
                    >
    <DataTemplate DataType="{x:Type local:MainViewModel}">
        <local:MainUC/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:LoginViewModel}">
        <local:LoginUC/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:SubjectsViewModel}">
        <local:SubjectsView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:ResultViewModel}">
        <local:ResultView/>
    </DataTemplate>
</ResourceDictionary>

即合并到 app.xaml

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary  Source="/Resources/ViewDataTemplates.xaml"/>
             </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

登录后，window 的全部内容将被替换。 数据上下文从 LoginViewModel 更改为 MainViewModel，然后模板化到 MainUC 中：

public partial class MainViewModel : BaseParentViewModel
{

    [ObservableProperty]
    private object currentChildViewModel;

    [ObservableProperty]
    private List<ChildViewModel> childViewModelList;

    [RelayCommand]
    private async Task ChildNavigation(ChildViewModel cvm)
    {
        if (cvm.Instance == null)
        {
            cvm.Instance = Activator.CreateInstance(cvm.ViewModelType);
            if (cvm.Instance is IInitiatedViewModel)
            {
                Task.Run(((IInitiatedViewModel)cvm.Instance).Initiate);
            }
        }
        CurrentChildViewModel = cvm.Instance;
    }

    public override async Task Initiate()
    {
        ChildViewModelList = new List<ChildViewModel>()
        {
            new ChildViewModel{ DisplayName="Subjects", ViewModelType= typeof(SubjectsViewModel) },
            new ChildViewModel{ DisplayName="Results", ViewModelType= typeof(ResultViewModel) }
        };
    }
    public MainViewModel()
    {
        Title = "Quiz";
    }
}

当然，您可能希望有更多视图并选择一个最初显示，这将在 Initiate 中设置。

主要UC：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ListBox ItemsSource="{Binding ChildViewModelList}"
             HorizontalContentAlignment="Stretch">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Button Content="{Binding DisplayName}"
                        Command="{Binding DataContext.ChildNavigationCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
                        CommandParameter="{Binding}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <ContentPresenter Content="{Binding CurrentChildViewModel}"
                      Grid.Column="1"/>
</Grid>
</UserControl>

在视图中，您会在左列中获得一个按钮列表，这些按钮将允许在右列中导航。 但当然要保留 MainUC。

这可以是菜单或选项卡控件，而不是列表框。

单击按钮会调用 MainViewModel 中的命令，并将 ChildViewModel 的实例作为参数传递。

然后用于实例化视图模型、设置 CurrentChildViewmodel 并缓存实例。

CurrentChildViewmodel 本身当然会被模板化到 MainUC 中的用户控件中。

public partial class ChildViewModel : ObservableObject
{
    public string DisplayName { get; set; }

    public Type ViewModelType { get; set; }

    public object Instance { get; set; }
}

这是一种相当简单的方法，在现实世界中，您可能需要依赖注入、工厂等大量应用程序。 但这已经是 Stack Overflow 答案的相当多的代码了。

其余的视图模型和视图只是简单的实现，以证明它一切正常。 例如

public partial class SubjectsViewModel : ObservableObject, IInitiatedViewModel
{
    public async Task Initiate()
    {
        // Get any data for Subjects here
    }
}

和

    <Grid>
        <TextBlock Text="Subjects"/>
    </Grid>
</UserControl>