在用户控件中绑定 ObservableCollection 依赖项属性

Question

我有一个 UserControl，它托管一个 TreeView，它有一个自定义集合，该集合继承自自定义 class 的 ObservableCollection。我正在尝试使用来自 ViewModel 的依赖项属性绑定到属性，虽然我已经证明该过程适用于另一个属性但在这里不起作用。

我确定这是我错过的愚蠢的事情，但我一直在兜圈子，有人能发现我的错误吗？

用户控件XAML:

<UserControl
x:Class="FileExplorer.TreeViewUserControl"
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:fe="clr-namespace:WpfControlLibrary.FileExplorer"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="FileExplorer"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<TreeView
    BorderThickness="0"
    ItemsSource="{Binding FileSystem, RelativeSource={RelativeSource AncestorType=UserControl}}"
    TreeViewItem.Collapsed="TreeView_Collapsed"
    TreeViewItem.Expanded="TreeView_Expanded"
    VirtualizingStackPanel.IsVirtualizing="True"
    VirtualizingStackPanel.VirtualizationMode="Recycling">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type fe:FileSystemObject}" ItemsSource="{Binding Items}">
            <StackPanel Margin="0,2" Orientation="Horizontal">
                <Image
                    Width="14"
                    Margin="2"
                    Source="{Binding Image}"
                    Stretch="Fill" />
                <TextBlock
                    VerticalAlignment="Center"
                    FontSize="{StaticResource FontSizeSmall}"
                    Text="{Binding Name}" />
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

用户控件的隐藏代码：

    Namespace FileExplorer
    Public Class TreeViewUserControl
        Inherits UserControl

#Region "Constructors"
        Public Sub New()

            ' This call is required by the designer.
            InitializeComponent()

            ' Add any initialization after the InitializeComponent() call.
            Me.DataContext = Me
        End Sub

#End Region

#Region "Properties"

        Public Shared ReadOnly FileSystemProperty As DependencyProperty = DependencyProperty.Register("FileSystem", GetType(FileSystemObjectCollection), GetType(TreeViewUserControl))

        Public Property FileSystem As FileSystemObjectCollection
            Get
                Return CType(GetValue(FileSystemProperty), FileSystemObjectCollection)
            End Get
            Set(ByVal value As FileSystemObjectCollection)
                SetValue(FileSystemProperty, value)
                FileExplorer.UpdateLayout()
            End Set
        End Property

#End Region

   Private Function GetFileSystemInfo(ByVal root As String) As FileSystemObjectCollection
        Dim items As New FileSystemObjectCollection

        ' Parse all the directories at the path
        For Each dir As String In Directory.GetDirectories(root)
            items.Add(New FileSystemObject(dir, root))
        Next

        ' Parse all the file at the path
        For Each file As String In Directory.GetFiles(root)
            items.Add(New FileSystemObject(file, root))
        Next

        Return items
    End Function

    Private Sub TreeView_Collapsed(sender As Object, e As RoutedEventArgs)
        Dim node As TreeViewItem = CType(e.OriginalSource, TreeViewItem)
        Dim fs As FileSystemObject = CType(node.DataContext, FileSystemObject)
        fs.Clear()
    End Sub

    Private Sub TreeView_Expanded(sender As Object, e As RoutedEventArgs)
        Dim node As TreeViewItem = CType(e.OriginalSource, TreeViewItem)
        Dim fs As FileSystemObject = CType(node.DataContext, FileSystemObject)
        If Not fs.HasChildren Then Exit Sub
        fs.Items = GetFileSystemInfo(fs.FullName)
    End Sub

    End Class

End Namespace

主窗口XAML:

<Window
    x:Class="MainWindow"
    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:fe="clr-namespace:WpfControlLibrary.FileExplorer;assembly=WpfControlLibrary"
    xmlns:local="clr-namespace:ModStudio.Client"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="clr-namespace:ModStudio.Client.ViewModels"
    Title="MainWindow"
    d:DesignHeight="600"
    d:DesignWidth="800"
    WindowStartupLocation="CenterOwner"
    WindowState="Maximized"
    mc:Ignorable="d">

    <Window.Resources>
        <vm:MainWindowViewModel x:Key="MainWindowViewModel" />
    </Window.Resources>

    <Grid>
        <fe:TreeViewUserControl DataContext="{StaticResource MainWindowViewModel}" FileSystem="{Binding ApplicationExplorer}" />
    </Grid>
</Window>

MainWindow 已将其 DataContext 设置为隐藏代码中的 ViewModel 的新实例。 MainWindowViewModel 有一个名为 ApplicationExplorer 的属性，它是 FileSystemObjectCollection 的一个实例。如前所述，FileSystemObjectCollection 继承自 ObservableCollection(Of FileSystemObject)。 FileSystemObject 实现了 INotifyPropertyChanged。如果我更改 ApplicationExplorer 属性，控件将保持空白。

这里我特意省略了一些代码，但如果需要可以添加它们。

Answer 1

不要在 UserControl 中设置 DataContext，即删除此行：

Me.DataContext = Me

当您像这样明确设置 DataContext 时，您打破了继承链，这意味着绑定到 window 中的 ApplicationExplorer 属性不再有效:

<fe:TreeViewUserControl DataContext="{StaticResource MainWindowViewModel}" 
                        FileSystem="{Binding ApplicationExplorer}" />

Answer 2

我进行了 3 处更改并成功运行！

已将 OnPropertyChanged 添加到 ApplicationExplorer：

Public Property ApplicationExplorer As FileSystemObjectCollection
    Get
        Return _applicationExplorer
    End Get
    Set(value As FileSystemObjectCollection)
        _applicationExplorer = value
        OnPropertyChanged(NameOf(ApplicationExplorer))
    End Set
End Property

更新了 UserControl 中的绑定：

<UserControl
    x:Class="FileExplorer.TreeViewUserControl"
    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:fe="clr-namespace:WpfControlLibrary.FileExplorer"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="FileExplorer"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">
    <TreeView
        BorderThickness="0"
        ItemsSource="{Binding FileSystem, RelativeSource={RelativeSource AncestorType=fe:TreeViewUserControl}}"
        TreeViewItem.Collapsed="TreeView_Collapsed"
        TreeViewItem.Expanded="TreeView_Expanded"
        VirtualizingStackPanel.IsVirtualizing="True"
        VirtualizingStackPanel.VirtualizationMode="Recycling">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate DataType="{x:Type fe:FileSystemObject}" ItemsSource="{Binding Items}">
                <StackPanel Margin="0,2" Orientation="Horizontal">
                    <Image
                        Width="14"
                        Margin="2"
                        Source="{Binding Image}"
                        Stretch="Fill" />
                    <TextBlock
                        VerticalAlignment="Center"
                        FontSize="12"
                        Text="{Binding Name}" />
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</UserControl>

按照您的建议从后面的 UserControl 代码中删除了 Me.DataContext = Me

在用户控件中绑定 ObservableCollection 依赖项属性

Binding an ObservableCollection Dependency Property in a User Control

wpf

treeview

user-controls

dependency-properties

observablecollection

在用户控件中绑定 ObservableCollection 依赖项 属性

Binding an ObservableCollection Dependency Property in a User Control

wpf

treeview

user-controls

dependency-properties

observablecollection

在用户控件中绑定 ObservableCollection 依赖项属性