WPF如何绑定单个节点集合同时绘制节点与连接线？

我正在开发一款WPF节点/图视图应用，每个节点拥有固定（计算得出）的位置、文本内容及子节点列表。当所有位置重新计算完成后，希望在Canvas上绘制这些节点，并绘制每个节点到其子节点的连接线。

当前实现方案 #

我参考了相关方案，维护两个集合：一个存储节点，一个存储节点间的Connector，通过CompositeCollection进行绑定。相关XAML与数据结构如下：

XAML代码 #

<ItemsControl x:Name="Collection">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type local:Node}">
            <TextBox Text="{Binding Text}" Width="160" Height="100"/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Connector}">
            <Line Stroke="Black" StrokeThickness="1"
                  X1="{Binding From.X}" Y1="{Binding From.Y}"
                  X2="{Binding To.X}" Y2="{Binding To.Y}" />
        </DataTemplate>
    </ItemsControl.Resources>
</ItemsControl>

C#数据结构 #

public class Node
{
    public string Text { get; set; }
    public double X { get; set; }
    public double Y { get; set; }

    public List<Node> Children;

    public Point RightConnector => new Point(X + 160, Y + 50);
    public Point LeftConnector => new Point(X, Y + 50);
}

public class Connector
{
    public Point From { get; set; }
    public Point To { get; set; }
}

代码中遍历每个节点的子节点，显式创建Connector实例，填充两个ObservableCollection后加入CompositeCollection，再绑定到ItemsControl的ItemsSource。

期望优化方向 #

当前方案可行，但希望优化为：

• 仅维护一个存储所有节点的主ObservableCollection；
• 每个节点通过ObservableCollection（或存储节点名称/ID的集合）维护子节点引用；
• 将主节点集合绑定到ItemsControl；
• 让WPF针对每个集合项，同时绘制节点本身及其到所有子节点的连接线（不再需要Connector类，连接线由源节点与子节点位置隐式定义）。

请问如何实现让WPF响应单个集合项，同时绘制节点与对应连接线？

可以通过在Node的DataTemplate中嵌入ItemsControl绘制连接线的方式实现，不需要额外的Connector类，直接利用节点的子节点集合生成连线。

步骤1：调整Node类的子节点集合为ObservableCollection #

确保子节点集合是可观察的，同时实现INotifyPropertyChanged让位置变化时自动更新连线：

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

public class Node : INotifyPropertyChanged
{
    public string Text { get; set; }
    
    private double _x;
    public double X
    {
        get => _x;
        set { _x = value; OnPropertyChanged(); }
    }

    private double _y;
    public double Y
    {
        get => _y;
        set { _y = value; OnPropertyChanged(); }
    }

    public ObservableCollection<Node> Children { get; } = new ObservableCollection<Node>();

    public Point RightConnector => new Point(X + 160, Y + 50);
    public Point LeftConnector => new Point(X, Y + 50);

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

步骤2：修改ItemsControl的DataTemplate #

在Node的DataTemplate中添加专门绘制连接线的ItemsControl，绑定到当前节点的Children集合，利用Canvas的绝对定位特性绘制Line：

<ItemsControl x:Name="nodeCollection" ItemsSource="{Binding Nodes}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <!-- 节点本身的定位 -->
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
            <!-- 让节点UI显示在连线之上 -->
            <Setter Property="Panel.ZIndex" Value="1"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type local:Node}">
            <Grid>
                <!-- 节点UI -->
                <TextBox Text="{Binding Text}" Width="160" Height="100" Background="White" BorderBrush="Black"/>
                <!-- 绘制当前节点到所有子节点的连线 -->
                <ItemsControl ItemsSource="{Binding Children}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Line Stroke="Black" StrokeThickness="1"
                                  <!-- 起点：当前节点的右侧连接点 -->
                                  X1="{Binding DataContext.RightConnector.X, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                  Y1="{Binding DataContext.RightConnector.Y, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                  <!-- 终点：子节点的左侧连接点 -->
                                  X2="{Binding LeftConnector.X}"
                                  Y2="{Binding LeftConnector.Y}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </DataTemplate>
    </ItemsControl.Resources>
</ItemsControl>

关键说明 #

1. 连线坐标绑定：通过RelativeSource获取父级ItemsControl的DataContext（即当前节点），拿到连线起点；子节点的终点直接绑定其LeftConnector属性。
2. 层级控制：给节点的ContentPresenter设置Panel.ZIndex="1"，确保节点UI显示在连线之上，避免遮挡。
3. 自动更新：Node实现INotifyPropertyChanged后，X/Y属性变化时连接点会自动更新；Children是ObservableCollection，子节点增删时连线会自动同步。
4. 移除Connector类：所有连线逻辑通过DataTemplate绑定实现，无需维护额外的Connector集合。

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