如何使用TreeView连接Silverlight和MVVM中的视图？

Question

我正在构建一个Silverlight应用程序，它包含左侧列中的菜单选项TreeView和右侧列中的ContentView。我们的想法是TreeView的SelectedItemChanged事件将改变内容区域中的视图。

实现这一目标的'最纯粹的MVVM'是什么？

我的想法是使用TreeMenuView和TreeMenuViewModel来管理菜单事件，但之后我有点迷失了。我可以使用EventAggregator从TreeMenuViewModel向“ContentViewModel”发送消息，然后根据消息args设置其当前的ContentView，但肯定会破坏MVVM，因为ViewModel不应该知道关于UI结构如View？

我在这里错过了一些简单的东西吗？

ViewModel图层如何驱动视图选择？

Answer 1

我会创建一个ShellViewModel，其中包含：

• ObservableCollection<ViewModelBase> AvailablePages
• int SelectedPageIndex
• ViewModelBase CurrentPage，返回AvailablePages[SelectedPageIndex]

您的ShellView可以是您想要的任何内容。如果您想在AvailablePages中显示TreeView，请继续。请记住将SelectedIndex绑定到`SelectedPageIndex

在您的情况下，我会创建一个DockPanel，左边的TreeView绑定到AvailablePages，右边的ContentControl创建ContentControl.Content绑定到CurrentPage

修改

这是一个例子

<DockPanel>
    <TreeView DockPanel.Dock="Right"
              ItemsSource="{Binding AvailablePages}"
              SelectedItem="{Binding SelectedPageIndex}">
    ...
    </TreeView>

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

然后使用DataTemplates来定义包含CurrentPage的ContentControl的外观

<Window.Resources>
    <DataTemplate DataType="{x:Type local:HomePageViewModel}" />
         <local:HomePageView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:CustomerViewModel}" />
         <local:CustomerView />
    </DataTemplate>
</Window.Resources>

Answer 2

好的我试了一下

TreeMenuViewModel中的

：

public string PropSelectedItem
{
get;
set;
}

TreeMenuView中的

：

<TreeView Context="{Binding TreeMenuViewModel}" Content="{Binding PropSelectedItem, Mode=OneWayToSource}"/>

ContentViewModel中的

：

public ViewModelBase PropSelectedItem
{
get
 {
switch(TreeMenuViewModelStatic.PropSelectedItem)
{
  case "Booo": return typeof(View1);
  case "Foo": return typeof(View2);
}


  }
private set;
}

ContentView中的

：

<ContentControl Context="{Binding TreeMenuViewModel}" Content="{Binding PropSelectedItem, Mode=OneWay}"/>

你需要一个价值转换器