当视图是分层的并且需要换入换出时定位 ViewModel 的策略

Question

假设我正在为汽车构建一个导航系统：

• 主窗口将包含一个屏幕、模式按钮和音量控件。
• 根据系统的模式，屏幕会显示音频、气候或导航面板。
• 当处于音频模式时，会有另一组模式按钮和一个可以显示收音机、CD 或 MP3 控件的面板。

我过去对此类安排的策略是让我的视图模型遵循与视图完全相同的层次结构。所以：

• MainViewModel 将有一个 ScreenViewModel。
• ScreenViewModel 将具有 AudioViewModel、ClimateViewModel 和 NavigationViewModel。它还具有 CurrentViewModel 属性，该属性将设置为音频、气候或导航视图模型，具体取决于系统模式。
• AudioViewModel 与 ScreenViewModel 类似，保存每个音频系统模式（收音机、CD 和 MP3）的视图模型以及用于存储当前模式的视图模型的属性。

将视图绑定到视图模型的 XAML 的结构如下：

<Window.Resources>
    <DataTemplate DataType="{x:Type vm:AudioViewModel}">
        <view:AudioPanel />
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:ClimateViewModel}">
        <view:ClimatePanel />
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:NavigationViewModel}">
        <view:NavigationPanel />
    </DataTemplate>
</Window.Resources>

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

如果用户正在收听广播并决定在导航系统中输入目的地，他们将单击“导航模式”按钮。 MainWindowViewModel 上会有一个命令将系统模式更改为“导航”并将 CurrentViewModel 设置为 NavigationViewModel。这将导致导航视图被交换。非常干净的解决方案。

不幸的是，虽然这种方式在执行模式下工作得很好，但当尝试在 Expression Blend 中使用从属视图（例如 AudioPanel）时，它会崩溃，因为父视图模型 (MainWindowViewModel) 不存在来提供 AudioViewModel。

MVVM Light 和 Simple MVVM 等工具包似乎支持的解决方案是使用 ViewModelLocator，然后通过绑定到定位器上的正确属性来将视图设置为自己的 DataContext。然后定位器提供视图模型的实例。

“ViewModelLocator 的处理方式”解决了“可设计性”问题，但我不清楚如何表示层次关系并处理一个视图与另一个视图的交换。从概念上讲，让视图模型保存子视图模型对我来说更有意义。它正确地表示了视图的层次结构，视图的交换非常简单，如果不再需要某个视图，则只需删除对父级的引用，即可对关联的视图模型及其所有下级进行垃圾收集。

问题

构建 ViewModelLocator 来处理分层视图、基于系统模式的视图进出以及视图删除的最佳实践是什么？

具体来说：

• 如何组织视图模型以便清楚地表示层次关系？
• 如何处理将一个现有视图替换为另一个视图（例如用导航面板替换音频面板）？
• 当不再需要关联的父视图时，如何确保释放父视图模型和子视图模型以进行垃圾回收？

Answer 1

视图层次结构中的当前视图似乎是视图“状态”的一部分，因此它将有一个自己的“模型”（视图模型）实体来管理这种关系。我不会为此使用 IoC 容器，但我会使用它来注册“视图管理器”用来创建“子视图”的工厂。

Answer 2

事实证明，Visual Studio/Blend 中有一个 XAML 设计属性，允许您设置元素的设计时 DataContext。这仅适用于设计时，因此应该可以使用数据模板继续连接DataContext（即，可能根本不需要ViewModelLocator或ViewManager）。

例如，假设您有一个名为 AudioPanel 的视图和一个名为 AudioViewModel 的视图模型。

您只需要在 AudioViewModel 中初始化一些设计时数据...

public class AudioViewModel : ViewModelBase
{
    public int Volume { get; set; }
    public AudioMode Mode { get; set; }
    public ViewModelBase ModePanelViewModel { get; set; }

    public AudioViewModel()
    {
        if (IsInDesignMode)
        {
            Volume = 5;
            Mode = AudioMode.Radio;
            ModePanelViewModel = new RadioViewModel();
        }
    }
}

...然后在您的视图中，您只需要声明一个 d:DataContext 属性。 ..

<UserControl x:Class="NavSystem.Views.AudioPanel"
             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:vm="clr-namespace:NavSystem.ViewModels"
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance vm:AudioViewModel, IsDesignTimeCreatable=True}">

只要您为设计时发挥作用的每个视图模型编写默认构造函数，就应该可以在 VS 或 Blend 设计器中查看复合用户界面。

请参阅此博客文章了解更多详细信息：
http://karlshifflett.wordpress。 com/2009/10/28/ddesigninstance-ddesigndata-in-visual-studio-2010-beta2/