使用 MVVM 获取选定的 TreeViewItem

Question

所以有人建议使用 WPF TreeView，我想：“是的，这似乎是正确的方法。”现在，几个小时后，我简直不敢相信使用这个控件有多么困难。通过大量研究，我能够让 TreeView 控件正常工作，但我根本找不到将所选项目添加到视图模型的“正确”方法。我不需要从代码中设置所选项目；我只需要我的视图模型知道用户选择了哪个项目。

到目前为止，我有这个 XAML，它本身不是很直观。这都在 UserControl.Resources 标签内：

<CollectionViewSource x:Key="cvs" Source="{Binding ApplicationServers}">
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="DeploymentEnvironment"/>
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

<!-- Our leaf nodes (server names) -->
<DataTemplate x:Key="serverTemplate">
    <TextBlock Text="{Binding Path=Name}"/>
</DataTemplate>

<!-- Note: The Items path refers to the items in the CollectionViewSource group (our servers).
           The Name path refers to the group name. -->
<HierarchicalDataTemplate x:Key="categoryTemplate"
                          ItemsSource="{Binding Path=Items}"
                          ItemTemplate="{StaticResource serverTemplate}">
    <TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>
</HierarchicalDataTemplate>

这是树视图：

<TreeView DockPanel.Dock="Bottom" ItemsSource="{Binding Source={StaticResource cvs}, Path=Groups}"
              ItemTemplate="{StaticResource categoryTemplate}">
            <Style TargetType="TreeViewItem">
                <Setter Property="IsSelected" Value="{Binding Path=IsSelected}"/>
            </Style>
        </TreeView>

这可以按环境（开发、QA、产品）正确显示服务器。但是，我在 SO 上找到了各种获取所选项目的方法，其中许多方法令人费解且困难。是否有一种简单 方法可以将所选项目添加到我的视图模型中？

注意：TreeView 上有一个SelectedItem 属性，但它是只读的。令我沮丧的是只读就可以了。我不想通过代码更改它。但是我不能使用它，因为编译器抱怨它是只读的。

还有一个看似优雅的建议来做这样的事情：

<ContentPresenter Content="{Binding ElementName=treeView1, Path=SelectedItem}" />

我问了这个问题：“您的视图模型如何获取此信息？我知道ContentPresenter 持有所选项目，但我们如何将其传递给视图模型？”但是还没有答案。

所以，我的总体问题是：“有没有一种简单的方法可以将所选项目添加到我的视图模型中？”

Answer 1

要做你想做的事，你可以修改TreeView的ItemContainerStyle：

<TreeView>
  <TreeView.ItemContainerStyle>
    <Style TargetType="TreeViewItem">
      <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
    </Style>
  </TreeView.ItemContainerStyle>
</TreeView>

您的视图模型（树中每个项目的视图模型）必须公开一个布尔值 IsSelected 属性。

如果您希望能够控制特定的 TreeViewItem 是否被扩展，您也可以为该属性使用 setter：

<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>

然后，您的视图模型必须公开一个布尔值 IsExpanded 属性。

请注意，这些属性是双向的，因此如果用户在树中选择一个节点，则视图模型的 IsSelected 属性将设置为 true。另一方面，如果您在视图模型上将IsSelected 设置为true，则将选择该视图模型的树中的节点。扩展也是如此。

如果树中的每个项目都没有视图模型，那么你应该得到一个。没有视图模型意味着您将模型对象用作视图模型，但要使其正常工作，这些对象需要 IsSelected 属性。

要在您的父视图模型（您绑定到 TreeView 并且具有一组子视图模型的视图模型）上公开一个 SelectedItem 属性，您可以这样实现它：

public ChildViewModel SelectedItem {
  get { return Items.FirstOrDefault(i => i.IsSelected); }
}

---

如果您不想跟踪树上每个单独项目的选择，您仍然可以使用TreeView 上的SelectedItem 属性。但是，为了能够做到“MVVM 风格”，您需要使用混合行为（可作为各种 NuGet 包使用 - 搜索“混合交互性”）。

这里我添加了一个EventTrigger，每当树中选定的项目发生变化时，它都会调用一个命令：

<TreeView x:Name="treeView">
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="SelectedItemChanged">
      <i:InvokeCommandAction
        Command="{Binding SetSelectedItemCommand}"
        CommandParameter="{Binding SelectedItem, ElementName=treeView}"/>
    </i:EventTrigger>
  </i:Interaction.Triggers>
</TreeView>

您必须在返回 ICommand 的 TreeView 的 DataContext 上添加属性 SetSelectedItemCommand。当树视图的选定项更改时，将调用命令上的Execute 方法，并将选定项作为参数。创建命令的最简单方法可能是使用DelegateCommand（谷歌它以获取实现，因为它不是 WPF 的一部分）。

在不使用笨重命令的情况下允许双向绑定的一种可能更好的替代方法是使用 Steve Greatrex 在 Stack Overflow 上提供的 BindableSelectedItemBehavior。

Answer 2

我可能会使用 SelectedItemChanged 事件在您的 VM 上设置相应的属性。

Answer 3

根据 Martin 的回答，我制作了一个简单的应用程序，展示了如何应用建议的解决方案。

示例代码使用 Cinch V2 框架来支持 MVVM，但可以轻松更改为使用您喜欢的框架。

对于那些感兴趣的人，在 GitHub 上here is the code

希望对你有帮助。

Answer 4

聚会有点晚了，但对于现在遇到这种情况的人来说，我的解决方案是：

1. 添加对“System.Windows.Interactivity”的引用
2. 将以下代码添加到您的树形视图元素中。 <i:Interaction.Triggers> <i:EventTrigger EventName="SelectedItemChanged"> <i:InvokeCommandAction Command="{Binding SomeICommand}" CommandParameter="{Binding ElementName=treeviewName, Path=SelectedItem}" /> </i:EventTrigger> </i:Interaction.Triggers>

这将允许您使用标准 MVVM ICommand 绑定来访问 SelectedItem，而无需使用后面的代码或一些冗长的工作。

Answer 5

也迟到了，但作为 MVVMLight 用户的替代方案：

1. 将 TreeViewItem 绑定到您的 ViewModel 以获取 IsSelected 属性的更改。
2. 创建发送 SelectedItem ViewModel 或 Model 项的 MVVMLight 消息（如 PropertyChangeMes​​sage）
3. 注册您的 TreeView 主机（或其他一些 ViemModel，如有必要）以收听此消息。

整个实现速度非常快，运行良好。

这里是 IsSelected 属性（SourceItem 是所选 ViewModel 项的 Model 部分）：

       Public Property IsSelected As Boolean
        Get
            Return _isSelected
        End Get
        Set(value As Boolean)
            If Me.HasImages Then
                _isSelected = value
                OnPropertyChanged("IsSelected")
                Messenger.Default.Send(Of SelectedImageFolderChangedMessage)(New SelectedImageFolderChangedMessage(Me, SourceItem, "SelectedImageFolder"))
            Else
                Me.IsExpanded = Not Me.IsExpanded
            End If
        End Set
    End Property

这里是虚拟机主机代码：

    Messenger.Default.Register(Of SelectedImageFolderChangedMessage)(Me, AddressOf NewSelectedImageFolder)

    Private Sub NewSelectedImageFolder(msg As SelectedImageFolderChangedMessage)
        If msg.PropertyName = "SelectedImageFolder" Then
            Me.SelectedFolderItem = msg.NewValue
        End If
    End Sub