如何用嵌套ItemsControl+TabControl展示带3D坐标的Entry数据

首先，咱们得解决两个核心问题：按Z值聚合生成唯一Tab页，以及支持单个Entry对应多组坐标（在多个Tab中重复显示）。下面分步骤拆解实现：

1. 调整数据模型适配多坐标需求 #

你当前的Entry类仅包含一组坐标，无法满足"单个Entry有多个3D坐标"的需求，先修改模型：

public class Entry : BindableBase {
    private string _name;
    public string Name { 
        get => _name; 
        set => SetProperty(ref _name, value); 
    }

    // 一个Entry对应多组坐标，每组坐标对应一个Tab中的位置
    private ObservableCollection<EntryCoordinates> _coordinates = new();
    public ObservableCollection<EntryCoordinates> Coordinates {
        get => _coordinates;
        set => SetProperty(ref _coordinates, value);
    }
}

// EntryCoordinates保持原有双向绑定逻辑不变
public class EntryCoordinates : BindableBase {
    private int _x;
    public int X { 
        get => _x; 
        set => SetProperty(ref _x, value); 
    }

    private int _y;
    public int Y { 
        get => _y; 
        set => SetProperty(ref _y, value); 
    }

    private int _z;
    public int Z { 
        get => _z; 
        set => SetProperty(ref _z, value); 
    }

    // 新增关联所属Entry的属性，方便UI绑定
    public Entry ParentEntry { get; set; }
}

// EntryLayer保留，作为Entry的顶层集合
public class EntryLayer : ObservableCollection<Entry> { }

2. 在ViewModel中实现按Z值分组 #

要让TabControl按Z值生成唯一Tab，需要把所有Entry的坐标按Z值聚合。推荐用CollectionViewSource实现，它能自动响应集合变更：

public class MainViewModel : BindableBase {
    public EntryLayer Entries { get; } = new();

    // 按Z值分组后的视图集合
    public ICollectionView GroupedCoordinatesView { get; }

    public MainViewModel() {
        // 把所有Entry的坐标扁平化为带关联Entry的集合
        var flattenedCoordItems = new ObservableCollection<EntryCoordinates>();
        
        // 初始化时加载已有坐标
        foreach (var entry in Entries) {
            foreach (var coord in entry.Coordinates) {
                coord.ParentEntry = entry;
                flattenedCoordItems.Add(coord);
            }
            // 监听单个Entry的坐标集合变更，自动同步扁平集合
            entry.Coordinates.CollectionChanged += (s, e) => {
                if (e.NewItems != null) {
                    foreach (EntryCoordinates newCoord in e.NewItems) {
                        newCoord.ParentEntry = entry;
                        flattenedCoordItems.Add(newCoord);
                    }
                }
                if (e.OldItems != null) {
                    foreach (EntryCoordinates oldCoord in e.OldItems) {
                        flattenedCoordItems.Remove(oldCoord);
                    }
                }
            }
        }

        // 创建CollectionViewSource并设置按Z分组
        var cvs = new CollectionViewSource { Source = flattenedCoordItems };
        cvs.GroupDescriptions.Add(new PropertyGroupDescription(nameof(EntryCoordinates.Z)));
        GroupedCoordinatesView = cvs.View;
    }
}

3. XAML实现：TabControl + 嵌套ItemsControl（结合Rachel的Grid扩展） #

现在把分组后的集合绑定到TabControl，每个Tab内部用ItemsControl实现X/Y坐标定位：

<TabControl ItemsSource="{Binding GroupedCoordinatesView.Groups}"
            SelectedIndex="0">
    <!-- TabItem头部显示Z值 -->
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="Z = {Binding Name}" /> <!-- Name对应分组的Z值 -->
        </DataTemplate>
    </TabControl.ItemTemplate>

    <!-- TabItem内容：显示当前Z值下的所有Entry -->
    <TabControl.ContentTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Items}">
                <!-- 用Rachel的Grid扩展设置网格行列数 -->
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid local:GridHelpers.RowCount="20"  <!-- 根据业务需求设置最大行列 -->
                              local:GridHelpers.ColumnCount="20" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <!-- 每个Entry的显示模板，支持双向绑定修改 -->
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBox Text="{Binding ParentEntry.Name, Mode=TwoWay}" 
                                     Width="80" Margin="2"/>
                            <StackPanel Orientation="Horizontal">
                                <TextBox Text="{Binding X, Mode=TwoWay}" Width="30" Margin="1"/>
                                <TextBox Text="{Binding Y, Mode=TwoWay}" Width="30" Margin="1"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

                <!-- 绑定X/Y到Grid的行列，实现坐标定位 -->
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="ContentPresenter">
                        <Setter Property="Grid.Column" Value="{Binding X}" />
                        <Setter Property="Grid.Row" Value="{Binding Y}" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

4. 双向绑定的验证 #

因为Entry和EntryCoordinates都继承自BindableBase，只要UI控件绑定设置为Mode=TwoWay（TextBox的Text属性默认就是双向），修改UI内容会自动同步到数据源；反之，数据源属性变更也会实时刷新UI。

关键注意事项 #

• 避免重复Tab：必须按Z值聚合坐标，而不是直接绑定Entry集合，否则会为每个Entry生成独立Tab。
• 多坐标关联：通过给EntryCoordinates增加ParentEntry属性，确保UI能正确关联到所属的Entry实体。
• 集合变更响应：监听Entry.Coordinates的CollectionChanged事件，确保扁平集合和分组视图能实时更新。

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