WinUI3 GridView如何在扁平ItemsSource中插入可视化表头且不影响数据索引

方案1：直接绑定SelectedItem（推荐，最简洁） #

放弃依赖SelectedIndex，直接绑定SelectedItem到ViewModel属性，无需处理索引偏移，直接获取选中的FileItem对象：

修改ViewModel： #

public class MyViewModel : ObservableObject // 假设继承自CommunityToolkit.Mvvm的ObservableObject
{
    public ObservableCollection<IGridItem> Items { get; set; } = new();
    private FileItem _selectedFile;
    public FileItem SelectedFile
    {
        get => _selectedFile;
        set => SetProperty(ref _selectedFile, value);
    }

    // 维护仅存储数据项的集合，用于获取数据索引
    public ObservableCollection<FileItem> FileItems { get; set; } = new();

    public MyViewModel()
    {
        // 添加分组表头和数据项
        Items.Add(new HeaderItem { Title = "Images" });
        var img1 = new FileItem { Name = "vacation.jpg" };
        Items.Add(img1);
        FileItems.Add(img1);
        
        var img2 = new FileItem { Name = "party.png" };
        Items.Add(img2);
        FileItems.Add(img2);
        
        Items.Add(new HeaderItem { Title = "Documents" });
        var doc1 = new FileItem { Name = "resume.pdf" };
        Items.Add(doc1);
        FileItems.Add(doc1);
    }

    // 获取选中项的干净数据索引
    public int GetSelectedDataIndex()
    {
        if (SelectedFile == null) return -1;
        return FileItems.IndexOf(SelectedFile);
    }
}

修改XAML： #

<GridView ItemsSource="{x:Bind ViewModel.Items}"
          ItemTemplateSelector="{StaticResource MySelector}"
          SelectionMode="Single"
          SelectedItem="{x:Bind ViewModel.SelectedFile, Mode=TwoWay}">
</GridView>

点击选中项时，SelectedFile会直接拿到对应的FileItem，调用GetSelectedDataIndex()即可获取无偏移的数据索引，完全规避UI索引干扰。

方案2：自定义索引映射逻辑（若必须使用SelectedIndex） #

如果业务依赖SelectedIndex，可在ViewModel中添加DataSelectedIndex属性，通过监听UI索引变化自动计算干净的数据索引：

修改ViewModel： #

public class MyViewModel : ObservableObject
{
    public ObservableCollection<IGridItem> Items { get; set; } = new();
    private int _uiSelectedIndex = -1;
    public int UiSelectedIndex
    {
        get => _uiSelectedIndex;
        set
        {
            SetProperty(ref _uiSelectedIndex, value);
            // 同步计算数据索引
            if (value >= 0 && value < Items.Count)
            {
                var item = Items[value];
                if (item is FileItem)
                {
                    DataSelectedIndex = Items.Take(value).Count(i => i is FileItem);
                }
                else
                {
                    DataSelectedIndex = -1; // 选中表头时设为无效值
                }
            }
            else
            {
                DataSelectedIndex = -1;
            }
        }
    }

    private int _dataSelectedIndex = -1;
    public int DataSelectedIndex
    {
        get => _dataSelectedIndex;
        set => SetProperty(ref _dataSelectedIndex, value);
    }

    // 构造函数同之前，省略...
}

修改XAML： #

<GridView ItemsSource="{x:Bind ViewModel.Items}"
          ItemTemplateSelector="{StaticResource MySelector}"
          SelectionMode="Single"
          SelectedIndex="{x:Bind ViewModel.UiSelectedIndex, Mode=TwoWay}">
</GridView>

UI索引变化时，ViewModel会自动统计当前索引前的所有FileItem数量，生成干净的DataSelectedIndex，无需手动编写偏移逻辑。

额外优化：禁用表头项的选择 #

为避免用户选中表头项，可在ContainerContentChanging事件中设置表头项不可交互：

private void GridView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    if (args.Item is HeaderItem)
    {
        args.ItemContainer.IsEnabled = false;
        args.ItemContainer.IsHitTestVisible = false;
    }
    else
    {
        args.ItemContainer.IsEnabled = true;
        args.ItemContainer.IsHitTestVisible = true;
    }
}

在XAML中绑定事件：

<GridView ItemsSource="{x:Bind ViewModel.Items}"
          ItemTemplateSelector="{StaticResource MySelector}"
          SelectionMode="Single"
          ContainerContentChanging="GridView_ContainerContentChanging"
          SelectedItem="{x:Bind ViewModel.SelectedFile, Mode=TwoWay}">
</GridView>

用户无法点击选中表头项，进一步简化选择逻辑。

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