MVVM：视图导航未正常工作

Question

我使用了Brian Noyes的Pluralsight课程“WPF MVVM深入”作为我的主要参考资料，他所展示的内容非常出色。然而，我想基于一个工具栏按钮（它是VS 2015扩展包的一部分）来切换视图，而不是基于UtilitiesView上点击的按钮来切换视图。用户可以在工具栏按钮中选择特定实例。

UtilitiesView是打开Package Extension窗口时的一个用户控件。因此，这是UtilitiesView中的xaml代码：

<UserControl.Resources>
    <DataTemplate DataType="{x:Type engines:CalcEngineViewModel}">
        <engines:CalcEngineView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type engines:TAEngineViewModel}">
        <engines:TAEngineView/>
    </DataTemplate>
</UserControl.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />                         
    </Grid.RowDefinitions>
    <Grid x:Name="NavContent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width ="*"/>
            <ColumnDefinition Width ="*"/>
            <ColumnDefinition Width ="*"/>
        </Grid.ColumnDefinitions>
        <Button Content="Calc"
                Command ="{Binding ChangeViewModelCommand}"
                CommandParameter="CalculationEngine"
                Grid.Column="0"/>
        <Button Content="TA"
                Command ="{Binding ChangeViewModelCommand}"
                CommandParameter="TAEngine"
                Grid.Column="1"/>

    </Grid>
    <Grid x:Name="MainContent"
        Grid.Row="1">
        <ContentControl Content="{Binding CurrentEngineViewModel}"/>
    </Grid>

</Grid>
</UserControl>`

可以看到，有两个按钮通过绑定ChangeViewModelCommand并传递一个字符串值（"CalculationEngine"或"TAEngine"）来切换视图。

这是UtilitiesViewModel.cs类：

 public class UtilitiesViewModel : BindableBase
{
    #region Fields

    public RelayCommand<string> ChangeViewModelCommand { get; private set; }

    private CalcEngineViewModel calcViewModel = new CalcEngineViewModel();
    private TAEngineViewModel taViewModel = new TAEngineViewModel(); 

    private BindableBase currentEngineViewModel;

    public BindableBase CurrentEngineViewModel
    {
        get { return currentEngineViewModel; }
        set
        {
            SetProperty(ref currentEngineViewModel, value);
        }
    }


    #endregion

    public UtilitiesViewModel()
    {          
        ChangeViewModelCommand = new RelayCommand<string>(ChangeViewModel);      
    }



    #region Methods

    public void ChangeViewModel(string viewToShow) //(IEngineViewModel viewModel)
    {
        switch (viewToShow)
        {
            case "CalculationEngine":
                CurrentEngineViewModel = calcViewModel;
                break;
            case "TAEngine":
                CurrentEngineViewModel = taViewModel;
                break;
            default: 
                CurrentEngineViewModel = calcViewModel;
                break;
        }            
    }

    #endregion
}

这里是BindableBase.cs:

public class BindableBase : INotifyPropertyChanged
{
    protected virtual void SetProperty<T>(ref T member, T val, [CallerMemberName] string propertyName = null)
    {
        if (object.Equals(member, val)) return;

        member = val;
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    protected virtual void OnPropertyChanged(string propertyName)
    {         
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));     
    }
}

我使用一个简单的ViewModelLocator类来将视图与它们的视图模型链接起来：

 public static class ViewModelLocator
{
    public static bool GetAutoWireViewModel(DependencyObject obj)
    {
        return (bool)obj.GetValue(AutoWireViewModelProperty);
    }

    public static void SetAutoWireViewModel(DependencyObject obj, bool value)
    {
        obj.SetValue(AutoWireViewModelProperty, value);
    }

    // Using a DependencyProperty as the backing store for AutoWireViewModel.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty AutoWireViewModelProperty =
        DependencyProperty.RegisterAttached("AutoWireViewModel", typeof(bool), typeof(ViewModelLocator), new PropertyMetadata(false, AutoWireViewModelChanged));

    private static void AutoWireViewModelChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (DesignerProperties.GetIsInDesignMode(d)) return;
        var viewType = d.GetType();
        var viewTypeName = viewType.FullName;
        var viewModelTypeName = viewTypeName + "Model";
        var viewModelType = Type.GetType(viewModelTypeName);
        var viewModel = Activator.CreateInstance(viewModelType);
        ((FrameworkElement)d).DataContext = viewModel;
    }
}

如前所述，使用UtilitiesView.xaml上定义的按钮切换视图是有效的。

工具栏按钮从Package.cs类中调用UtilitiesViewModel.cs中上述提到的ChangeViewModel方法，但即使CurrentEngineViewModel属性被设置为不同的值，它也不会反映在UtilitiesView.xaml上。

当我进行调试时，无论哪种情况，都会正确地进入BindableBase的SetProperty方法，但是在ToolBar按钮的情况下，ViewModelLocator中的AutoWireViewModelChanged方法从未被调用。

我不知道为什么。我原以为UtilitiesView中与UtilitiesViewModel的CurrentEngineViewModel属性的绑定足够了？

我试图将其视为对模型组件进行更改，而视图应该对此做出响应，即使实际上我将ToolBar按钮作为人们认为的视图组件的一部分。

这是在Package.cs类中调用ChangeViewModel方法的方式：

if (Config.Engine.AssemblyPath.Contains("Engines.TimeAndAttendance.dll"))
                {
                    uvm.ChangeViewModel("TAEngine");
                }
                else //Assume Calculation Engine
                {
                    uvm.ChangeViewModel("CalculationEngine"); 
                }

我希望我已经提供了足够的细节。

更新 1

关于gRex的评论，我认为可能有两个UtilitiesViewModel对象。

这是在打开包扩展的自定义窗口时发生的情况：

public class SymCalculationUtilitiesWindow : ToolWindowPane
{
    /// <summary>
    /// Initializes a new instance of the <see cref="SymCalculationUtilitiesWindow"/> class.
    /// </summary>
    public SymCalculationUtilitiesWindow() : base(null)
    {
        this.Caption = "Sym Calculation Utilities";

        this.ToolBar = new CommandID(new Guid(Guids.guidConnectCommandPackageCmdSet), Guids.SymToolbar);
        // This is the user control hosted by the tool window; Note that, even if this class implements IDisposable,
        // we are not calling Dispose on this object. This is because ToolWindowPane calls Dispose on
        // the object returned by the Content property.
        this.Content = new UtilitiesView();

    }

}

AutoWireViewModelChanged方法用于将UtilitiesViewModel链接到UtilitiesView的Content上。

在Package.cs类中，我有这个字段:

 private UtilitiesViewModel uvm;

在Initialize方法中，我有以下内容：

 uvm = new UtilitiesViewModel();

在原始帖子上方（UPDATE之前），uvm对象用于调用ChangeViewModel方法并传递适当的字符串参数。

这会给我两个不同的对象，对吗？ 如果是这样，并且假设这可能是问题的根本原因，我该如何改进这个问题？必须使UtilitiesViewModel成为单例吗？

更新2

我已经在Github上添加了一个解决方案。功能略有更改，因此我不需要与原始解决方案的其他部分进行任何交互。 因此，连接按钮（工具栏上）使用“TAEngine”参数调用ChangeViewModel方法，保存按钮（工具栏上）也是如此，但是使用“CalculationEngine”作为参数。目前，DataTemplates仍然被注释，因此只能看到文本中的类名。 这里是链接。在Visual Studio的实验实例中，可以在View -> Other Windows -> SymplexityCalculationUtilitiesWindow找到该窗口。 如果您没有Visual Studio SDK，则可能需要下载它。

更新3

我使用Unity IoC容器和ContainerControlledLifetimeManager来确保我没有两个不同的UtilitiesViewModels。在实现这一点后，工具栏按钮可以导航到正确的视图。

- Igavshne

---

ViewModelLocator 在哪里使用？ - Andrew Stephens

当您单击按钮时，您在UI中看到什么？ ContentControl（VM应该出现的位置）是否仅保持空白？尝试注释掉DataTemplates并查看发生了什么-现在在单击按钮时是否可以看到您两个VM类的名称？ - Andrew Stephens

如果你看到类名发生变化，那就说明你的ContentControl绑定和VM RelayCommand正在工作（而不是某种模板/样式问题）。如果这种情况没有发生，那么你可能需要仔细检查一下相关方面。 - Andrew Stephens

谢谢，我还是卡住了。在调试时，从工具栏/包侧正确设置CurrentEngineViewModel的值，但在UtilitiesView中没有反映出来，尽管绑定是这样设置的。 - Igavshne

我现在愿意拿兜里所有的钱打赌这是一个绑定问题。请检查“输出窗口”以查找绑定错误。正如@gReX所建议的那样，下载解决方案可能是最理想的。你可以考虑把它放在GitHub上吗？ - Mike Eason

Answer 1

如果没有绑定错误，请检查视图的DataContext是否设置了uvm对象。

您可以使用snoop在DataContext选项卡中查看更改。

1. 首先将准星拖到窗口上。
2. 按下Strg+Shift并将鼠标移到一个控件上以选择它
3. 切换到datacontext选项卡，查看CurrentEngineViewModel是否已更改。

[更新] 根据您的评论，我认为ToolBar-Buttons使用的uvm对象不是设置为View的DataContext的对象。因此，更改无法生效。

请检查获取uvm对象和初始化DataContext的代码。 [更新2] 您必须解决“你有两个对象”的问题。使ViewModel成为单例将很有用。我更喜欢引入某种引导和/或单例服务来访问视图模型。

然后，而不是

uvm = new UtilitiesViewModel();

你可以像这样设置它：

uvm = yourService.GetUtilitiesViewModel();

“使用工厂或缓存。如果您使用相同的对象，则数据模板将立即起作用。

MVVM在开始时具有较陡的学习曲线，因为有许多不同的方法可以实现它。但请相信我，这样做的好处是值得努力的。以下是一些链接：

- 建议和最佳实践 - MVVM中的ViewModel定位器 但我不确定这是否适用于Brian Noyes的Pluralsight课程、您的视图模型定位器和特定的引导程序。

对于额外的帮助，我想到了一些基于您在此帖子中提供的信息的东西。在您的视图中，缺少注册ViewModel的链接可以在由视图加载事件触发的命令中完成：

您可以在视图中调用一个命令以注册您的ViewModel：”

<Window ... >
<i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
        <core:EventToCommand Command="{Binding RegisterViewModelCommand}" PassEventArgsToCommand="False"/>
    </i:EventTrigger>
</i:Interaction.Triggers>
<Grid>

通过在Expression Blend中引用System.Windows.Interactivity.dll，以及从EventToCommand中实现一些方法，例如在MvvmLight中。

然后在您的命令处理程序中调用yourService.RegisterUtilitiesViewModel(this) 不太确定这是否是最佳方法，但至少是一种方法。我更喜欢使用Prism和依赖注入进行一些引导，但这是另一个故事。

- gReX

---

感谢提供 Snoop 的链接，这会很有用。如果我选择工具栏，它没有任何有意义的 DataContext。如果我选择 UtilitiesView 的 MainContent 部分，则可以看到 CurrentEngineViewModel 变量作为 DataContext 的一部分。然后，如果我使用工具栏按钮更改值（例如从 CalcEngineViewModel 更改为 TAEngineViewModel），它不会显示 DataContext 已更新，它仍然显示 CalcEngineViewModel（即使在正常调试时似乎通过 SetProperty）。 - Igavshne

感谢您的额外帮助。我正在尝试使用Unity，但是遇到了一些程序集依赖错误，所以我还没有能够测试是否所有东西都可以协同工作，但我认为主要问题是我有两个对象。您值得获得奖励。 :-) - Igavshne

@JustiThyme 感谢您的慷慨奖励。我使用MEF进行依赖注入，也必须注意细节。 - gReX