使用带有 prism 的 MVVM 在视图之间进行更改

Question

我是 WPF 新手，但根据我所读到的内容，构建应用程序的正确方法是在同一窗口上切换视图。 我的意思是类似于带有菜单和显示视图的工作区的“框架”。

到目前为止，我一直在关注这个， http://jesseliberty.com/2011/01/06/windows-phone-from-scratch%E2%80%93mvvm-light-toolkit-soup-to-nuts-3/ 但这是针对 WP7 的，我无法在 WPF 应用程序上使用 NavigationService。

我可以说我想要的最简单的事情是， mainwindow.xaml 上有一个显示按钮的视图，当我按下该按钮时，我希望在同一窗口上显示一个新视图（并且旧视图消失） 。

实施这样的事情的正确方法是什么？

编辑：这开始于使用 mvvm-light，但最终演变为 prism。请参阅我的最后一个答案以了解更多详细信息。

Answer 1

这是一个很好的问题 - 当我开始使用 MVVM 时，我也遇到过类似的问题。我只使用 MS 的 Prism/CAL 库。

我相信您正在寻找的是 CAL 中的区域的想法。它基本上是一个呈现事物的命名容器控件。基本上，您可以在顶级 UI 部分中命名一个区域，例如主窗口。您的应用程序可能有一小部分：可能是页眉、页脚和主窗口区域。 （无论如何，我就是这样做的。）。然后，您可以从后面的代码中通过区域管理器访问该区域，清除它，然后放入 ViewModel。 ViewModel 被映射到适当的 View，瞧，新的 View 出现了。

从编码的角度来看，我通常看到它是这样分解的：
您有某种 NavigationController，它具有一两个清除区域并显示新 ViewModel->View 的方法，并且还具有诸如 GoToPageX() 之类的方法。这抽象了区域经理。然后每个页面都有一个 ViewModel 和一个 View。每个 ViewModel 通过依赖注入接收 NavigationController（但如果您不使用 DI，则可以创建新的）。然后在 ViewModel 上，它公开一个映射到按钮并调用 NavigationController 的命令。

在某个地方，您还必须将 ViewModel 与用于显示它们的视图一起注册。

这是一个 NavigationController 的示例：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Practices.Prism.Regions;
using Microsoft.Practices.Unity;
using KSheets.CoreModule.Presenter;
using Zephyr.Core.Logging;
using KSheets.CoreSheets.Sheet;
using System.IO;

namespace KSheets.CoreModule.Switch
{
    public class Switchboard : ISwitchboard
    {
        private ILoggingService<ISwitchboard> m_Logger;
        private IRegionManager m_RegionManager;
        private IUnityContainer m_UnityContainer;

        public Switchboard(
            ILoggingService<ISwitchboard> loggingService,
            IRegionManager regionManager,
            IUnityContainer unityContainer
            )
        {
            if (loggingService == null) throw new ArgumentNullException("loggingService");
            if (regionManager == null) throw new ArgumentNullException("regionManager");
            if (unityContainer == null) throw new ArgumentNullException("unityContainer");

            m_RegionManager = regionManager;
            m_UnityContainer = unityContainer;
            m_Logger = loggingService;
        }

        public void GoHome()
        {
            m_Logger.Log("Going home");

            var worksheetEditor = m_UnityContainer.Resolve<IWorksheetEditor>();
            worksheetEditor.Initialize();
            LoadView(RegionNames.EditorRegion, worksheetEditor);

            var batchExporter = m_UnityContainer.Resolve<IExportBatchPresenter>();
            LoadView(RegionNames.ExporterRegion, batchExporter);
        }

        private void LoadView(string regionName, object newView)
        {
            var region = m_RegionManager.Regions[regionName]; 
            var oldViews = region.Views;
            foreach (var oldView in oldViews)
                region.Remove(oldView);
            region.Add(newView);
            region.Activate(newView);
        }
    }
}

这是一个以编程方式向 ViewModel 注册视图的示例。许多人在 XAML 中执行此操作，但您也可以在代码中执行此操作，如果您使用依赖项注入，IMO 效果会更好，因为您可以在模块加载时同时注册视图和依赖项注入内容。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;

namespace Zephyr.WPF.Utils
{
    public static class ResourceUtils
    {
        public static void RegisterView<T, U>()
        {
            DataTemplate template = new DataTemplate();
            FrameworkElementFactory factory = new FrameworkElementFactory(typeof(U));
            template.DataType = typeof(T).FullName;
            template.VisualTree = factory;
            Application.Current.Resources.Add(new DataTemplateKey(typeof(T)), template);
        }
    }
}

        private void RegisterViews()
        {
            ResourceUtils.RegisterView<WorksheetDisplay, WorksheetDisplayView>();
            ResourceUtils.RegisterView<ProblemSelector, ProblemSelectorView>();
            ResourceUtils.RegisterView<WorksheetEditor, WorksheetEditorView>();
            ResourceUtils.RegisterView<ExportBatchPresenter, ExportBatchView>();
        }

归根结底，您需要一小段 UI 感知代码（或者一个 UI 控件，用于侦听从非 UI 代码发送的消息，该代码了解一点关于 UI 的信息，例如区域名称）并允许您将 ViewModel 粘合到位。但是，此代码通常非常少，并且除了开箱即用的组件之外，绝对不需要隐藏代码。当您第一次在 WPF 中实际实现 MVVM 时，需要了解很多内容；启动并运行一个简单的应用程序需要一个陡峭的学习曲线。

Answer 2

我来这里是为了补充 J-Trana 的答案。

他确实让我对棱镜产生了好奇，我很高兴他做到了。这太棒了。
在过去的几周里，我一直在阅读有关它的内容，观看文档以及它附带的快速入门示例。这些是我的主要参考资料。

所以，关于解决方案......

棱镜区域确实是我想要的。他提供的总机是我实现的关键，但我对其进行了一些调整。

首先，我在其中传递了 UnityContainer，这样我可以获得更大的灵活性。 （或者说我认为它给了我。）
其次，我创建了一个方法 LoadModule （因为我有一个模块化结构），如下所示。

public void LoadModule(string module) { 
            IModuleManager moduleManager = m_UnityContainer.Resolve(); 

            moduleManager.LoadModule(module); 
}

据我所知，当这个 LoadModule 执行我的模块的 Initialize() 方法时，就像这样......

public void Initialize()
    {

        Switchboard switchboard = Switchboard.GetSwitchboard();

        IUnityContainer container = switchboard.GetCatalog();

        switchboard.LoadView(RegionNames.ShellMainRegion, container.Resolve<HelloWorldView>());

    }

这有效！

一些值得注意的提示：
- `//为视图提供上下文(ViewModel)的属性。

    [Dependency]
    public HelloWorldViewModel HelloWorldViewModel
    {
        set
        {
            this.DataContext = value;
        }
    }

• 它将 ViewModel 连接到视图，作为视图背后代码的属性。
• this.Container.RegisterType();
• 我这样注册我的模块：

` Type HelloWorldType = typeof(HelloWorldModule);
this.ModuleCatalog.AddModule(new ModuleInfo()

        {

            ModuleName = ModuleNames.HelloWorldModule,

            ModuleType = HelloWorldType.AssemblyQualifiedName,

            InitializationMode = InitializationMode.OnDemand

        }); `

- 我的总机位于我的基础设施模块上。视图创建会上升到拥有它的模块，这解决了我的问题。

我希望这不会太令人困惑，我真的想要一些关于我如何做这些事情的评论...我这样做的方式“正确”吗？有更优雅的方式吗？
像这样的东西......

无论如何，我希望这可以帮助和激励那些正在尝试学习棱镜的人。

PS：这个代码标签是如何工作的？我可以更改标签吗？ mvvm-light 不再有意义了。