带复选框的WPF树形列表开发需求咨询

Hey there! Let's work through building that WPF TreeView with checkbox hierarchy sync and a custom byte array attached to each node. I’ve implemented this pattern many times, so here’s a robust solution aligned with the checkbox TreeView behavior you’re referencing:

1. Core ViewModel Design (with Checkbox Sync Logic) #

We’ll start with a base ViewModel to handle property change notifications, then a TreeNodeViewModel that manages the checked state, child nodes, and your custom byte array. This follows MVVM best practices for WPF:

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

public abstract class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class TreeNodeViewModel : ViewModelBase
{
    private bool? _isChecked;
    private byte[] _byteData;

    public string DisplayName { get; set; }
    public ObservableCollection<TreeNodeViewModel> Children { get; } = new ObservableCollection<TreeNodeViewModel>();
    public TreeNodeViewModel Parent { get; set; }

    public bool? IsChecked
    {
        get => _isChecked;
        set => SetIsChecked(value, true, true);
    }

    public byte[] ByteData
    {
        get => _byteData;
        set
        {
            _byteData = value;
            OnPropertyChanged();
        }
    }

    private void SetIsChecked(bool? value, bool updateChildren, bool updateParent)
    {
        if (_isChecked == value) return;

        _isChecked = value;
        OnPropertyChanged(nameof(IsChecked));

        // Sync child nodes when parent is toggled
        if (updateChildren && value.HasValue)
        {
            foreach (var child in Children)
            {
                child.SetIsChecked(value, true, false);
            }
        }

        // Update parent's checked state (if parent exists)
        if (updateParent && Parent != null)
        {
            Parent.UpdateCheckedState();
        }
    }

    private void UpdateCheckedState()
    {
        bool? newState = null;
        foreach (var child in Children)
        {
            if (!child.IsChecked.HasValue)
            {
                newState = null;
                break;
            }
            if (newState == null)
            {
                newState = child.IsChecked;
            }
            else if (newState != child.IsChecked)
            {
                newState = null;
                break;
            }
        }
        SetIsChecked(newState, false, true);
    }
}

Key Notes Here: #

• The IsChecked property uses a nullable bool to support three states (checked, unchecked, indeterminate/half-checked) for parent nodes.
• SetIsChecked handles syncing child nodes when a parent is toggled, and triggers an update to the parent node's state when a child is changed.
• ByteData is a straightforward property to store your node-specific byte array—you can extend this with validation or serialization if needed.
• Pro Tip: Always set the Parent property on child nodes; this is what enables the parent's state to update when children are toggled.

2. XAML View Implementation #

Now let's build the TreeView UI with a HierarchicalDataTemplate to render the tree structure, and bind the checkbox to our ViewModel's IsChecked property:

<TreeView ItemsSource="{Binding RootNodes}">
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <!-- Optional: Auto-expand nodes by default -->
            <Setter Property="IsExpanded" Value="True"/>
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal" Margin="2">
                <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"
                          VerticalAlignment="Center"/>
                <TextBlock Text="{Binding DisplayName}"
                           Margin="4,0"
                           VerticalAlignment="Center"/>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

How This Works: #

• The HierarchicalDataTemplate tells WPF how to render each node and its children.
• The CheckBox uses two-way binding to sync the UI state with the ViewModel—clicking a parent checkbox will automatically toggle all children, and vice versa.
• The StackPanel keeps the checkbox and node display name aligned neatly.

3. Usage Example (Building the Tree & Assigning Byte Arrays) #

Finally, let's create a sample ViewModel to hold our root nodes, populate the tree, and assign unique byte arrays to each node:

// Main ViewModel that holds the root tree nodes
public class MainViewModel : ViewModelBase
{
    public ObservableCollection<TreeNodeViewModel> RootNodes { get; } = new ObservableCollection<TreeNodeViewModel>();
}

// In your window/user control code-behind or initialization logic
var mainVm = new MainViewModel();

// Build sample tree with byte arrays
var rootNode1 = new TreeNodeViewModel 
{ 
    DisplayName = "Root Node 1", 
    ByteData = new byte[] { 0x01, 0x02, 0x03 } 
};

var childNode1a = new TreeNodeViewModel 
{ 
    DisplayName = "Child 1A", 
    Parent = rootNode1, 
    ByteData = new byte[] { 0x04 } 
};

var childNode1b = new TreeNodeViewModel 
{ 
    DisplayName = "Child 1B", 
    Parent = rootNode1, 
    ByteData = new byte[] { 0x05, 0x06, 0x07 } 
};

rootNode1.Children.Add(childNode1a);
rootNode1.Children.Add(childNode1b);

var rootNode2 = new TreeNodeViewModel 
{ 
    DisplayName = "Root Node 2", 
    ByteData = new byte[] { 0x08, 0x09 } 
};

mainVm.RootNodes.Add(rootNode1);
mainVm.RootNodes.Add(rootNode2);

// Set the window's DataContext to the main ViewModel
DataContext = mainVm;

Final Tips #

• If you need to serialize the tree state (including checked states and byte arrays), you can add JSON/XML serialization logic to the TreeNodeViewModel.
• For large trees, consider adding virtualization to the TreeView to improve performance—add VirtualizingStackPanel.IsVirtualizing="True" to the TreeView.

内容的提问来源于stack exchange，提问作者Egor Vasilyev