如何在 MainWindow 上显示不同的视图

Question

所以我关注了一个在线视频，该视频向我展示了如何在 WPF 应用程序中实现 MVVM。请注意，我对他们俩都是新手。

我有以下类构成我的 WPF 应用程序的模型、视图和视图模型层：

• 应用类（.xaml 和 .xaml.cs）
• MainWindow 类（.xaml 和 .xaml.cs）
• MainWindowViewModel.cs
• MalfunctionsView（.xaml 和 .cs）
• MalfunctionsViewModel.cs
• PartsView（.xaml 和 .cs）
• PartsViewModel.cs

基本上我只有两个视图（故障和部件）加载到 MainWindow 视图中。

我现在已经设置好了，这样我就可以在主窗口中注释代码以显示 MalfunctionView 或 PartsView。例如，如果我想查看 MalfunctionView，那么我将所有 PartsView 代码注释掉，然后在 VS 中重新运行它。是的，我知道......这很可悲和可悲，但我还没有学会如何卸载一个视图并即时加载另一个视图。这让我想到了我的问题：如何从 MainWindow 中卸载一个视图，然后将另一个视图加载到 MainWindow 中？ 例如，我在 PartsView 上有一个名为 Select 的按钮，单击该按钮时然后需要从 MainWindow 中卸载 PartsView 并在其位置加载 MalfunctionsView。

我包含了 App 类和 MainWindow View 和 MainWindow ViewModel 的代码，以便可以看到我当前如何将 ViewModel（用户控件）加载到 MainWindow 中。

App.xaml.cs

public partial class App : Application {
        protected override void OnStartup(StartupEventArgs e) {
            base.OnStartup(e);

            // Create MainWindow ViewModel
            var mainWindowVM = new MainWindowVM();

            // Create MainWindow View
            MainWindow mainWindowVw = new MainWindow();

            // Set MainWindow View datacontext to MainWindow ViewModel and then show the window
            mainWindowVw.DataContext = mainWindowVM;
            mainWindowVw.Show();   
        }
    }

MainWindow.xaml

<Window x:Class="PAM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:PAM.ViewModel"
        xmlns:vw="clr-namespace:PAM.View"
        Title="Parts and Malfunctions" Height="800" Width="550">

    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:MalfunctionsViewModel}">
            <vw:MalfunctionsView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:PartsViewModel}">
            <vw:PartsView />
        </DataTemplate>
    </Window.Resources>

    <Grid Width="Auto" Height="Auto">
        <ScrollViewer>
            <ItemsControl Width="Auto" Height="Auto" ItemsSource="{Binding ViewModels}"></ItemsControl>
        </ScrollViewer>
    </Grid>
</Window>

MainWindowViewModel.cs

public class MainWindowViewModel : ViewModelBase {

        readonly MalfunctionRepository _mfRepo;
        //readonly PartsRepository _pRepo;

        ObservableCollection<ViewModelBase> _viewModels;

        public ObservableCollection<ViewModelBase> ViewModels {
            get {
                if (_viewModels == null)
                    _viewModels = new ObservableCollection<ViewModelBase>();

                return _viewModels;
            }
        }

        public MainWindowViewModel() {

            // ================================
            // Malfunctions ViewModel
            _mfRepo = new MalfunctionRepository();

            MalfunctionsViewModel viewModel = new MalfunctionsViewModel(_mfRepo);

            // ================================
            // Parts ViewModel
            //_pRepo = new PartsRepository();

            //PartsViewModel viewModel = new PartsViewModel(_pRepo);

            this.ViewModels.Add(viewModel);
        }
    }

Answer 1

在您的 MainWindow.xaml 中：

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

在您的视图模型中：

private object content;
public object Content
{
    get { return content; }
    set
{
    content = value; 
    NotifyPropertyChanged(p => p.Content);
}       

...

MalfunctionsViewModel mvm = new MalfunctionsViewModel(_mfRepo);
Content = mvm;

...

PartsViewModel pvm = new PartsViewModel(_pRepo);
Content = pvm;

查看几年前我提出的非常相似的问题：WPF MVVM: How to load views "on demand" without using plug-in architecture?