WPF 動態生成的 TreeView，復選框不顯示

Question

我正在嘗試使用 MVVM 在 WPF 項目中創建動態生成的 TreeView。 我創建了一個 HierarchicalDataTemplate 和一個它將綁定到的 CheckableItem 模型。 我的 ViewModel 上有一個 CheckableItem 類型屬性，在構建 ViewModel 時填充該屬性。 然后我讓 XAML 使用模板來創建 TreeView，但沒有顯示任何內容。 我需要 TreeView 包含復選框，如果我選中了更高級別的復選框，它應該檢查所有較低級別的復選框。 它應該是這樣的：

我不確定是什么問題導致它不顯示。

ChekableItem 類：

public class CheckableItem
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private string _name;
        public string Name
        {
            get { return _name; }
            set 
            { 
                _name = value;
                OnPropertyChanged("Name");
            }
        }
        public ObservableCollection<CheckableItem> Children { get; set; }
        private Visibility _isChecked;
        public Visibility IsChecked
        {
            get { return _isChecked; }
            set
            {
                _isChecked = value;
                OnPropertyChanged("IsChecked");
                CheckChildren(value);               
            }
        }
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        private void CheckChildren(Visibility parentIsChecked)
        {
            foreach (CheckableItem child in Children)
            {
                child.IsChecked = parentIsChecked;
            }
        }

視圖模型：

    private CheckableItem miscellaneousImports;
    public CheckableItem MiscellaneousImports
    {
        get { return miscellaneousImports; }
        set
        {
            miscellaneousImports = value;
            OnPropertyChanged("MiscellaneousImports");
        }
    }
    private void LoadCheckableItems()
            {
                miscellaneousImports = new CheckableItem()
                {
                    Name = "Miscellaneous Imports"
                };
                miscellaneousImports.Children = new ObservableCollection<CheckableItem>();
                miscellaneousImports.Children.Add(new CheckableItem()
                {
                    Name = "GPO Import"
                });
            }
     protected void OnPropertyChanged(string propertyName)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }

查看 XAML：

    <Window x:Class="CAVA_IAS.Views.CaImportView"
        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:models="clr-namespace:CAVA_IAS.Models"
        mc:Ignorable="d"
        Title="CaImportView" SizeToContent="WidthAndHeight">
    <Window.Resources>
        <HierarchicalDataTemplate DataType="{x:Type models:CheckableItem}" ItemsSource="{Binding 
            Children}">
            <StackPanel Orientation="Horizontal">
                <CheckBox IsChecked="{Binding IsChecked}"/>
                <TextBlock Text="{Binding Name}"/>
            </StackPanel>
        </HierarchicalDataTemplate>
    </Window.Resources>

    <StackPanel>
        <Label Content="Miscellaneous Imports" HorizontalAlignment="Center" />
        <ScrollViewer>
            <TreeView ItemsSource="{Binding MiscellaneousImports, Mode=TwoWay, 
                  UpdateSourceTrigger=PropertyChanged}" FontSize="10" Height="450"/>
        </ScrollViewer>
    </StackPanel>

Answer 1

您的問題是 TreeView 的 ItemsSource 需要是某種列表。 現在您將它綁定到單個 CheckableItem。

在你的 ViewModel 中，你應該有這樣的東西：

private ObservableCollection<CheckableItem> miscellaneousImports;
public ObservableCollection<CheckableItem> MiscellaneousImports
{
    get { return miscellaneousImports; }
    set
    {
        miscellaneousImports = value;
        OnPropertyChanged("MiscellaneousImports");
    }
}

或者綁定到 Xaml 中 CheckableItem 的 Children 屬性，如下所示：

<TreeView ItemsSource="{Binding MiscellaneousImports.Children, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" FontSize="10" Height="450"/>