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

Question

所以我关注了一个在线视频，该视频向我展示了如何在 WPF 应用程序中实现 MVVM。请注意，当涉及到它们时，我是新手。

我有以下 class 组成我的 WPF 应用程序的模型、视图和 ViewModel 层：

应用程序 class（.xaml 和 .xaml.cs）
主窗口class（.xaml 和.xaml.cs）
MainWindowViewModel.cs
MalfunctionsView（.xaml 和 .cs）
MalfunctionsViewModel.cs
部件视图（.xaml 和 .cs）
PartsViewModel.cs

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

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

我包括了我为 App class 和 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}" />

在您的 ViewModel 中：

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?

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

How to display different views on MainWindow

wpf

mvvm