如何在UWP中创建只读SpreadSheet Table并实现指定功能？

当然有现成的实现方案！我之前在项目里刚好做过类似的需求，下面给你一个完整的WPF示例（如果是WinUI/UWP的话思路完全一致，只是控件API略有差异），涵盖你要的所有功能：

1. XAML布局部分 #

首先是界面代码，我们用DataGrid作为表格控件，它原生支持列排序、列宽调整，再加上双击事件触发弹窗：

<Window x:Class="DataGridDemo.MainWindow"
        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:local="clr-namespace:DataGridDemo"
        mc:Ignorable="d"
        Title="DataGrid示例" Height="450" Width="800">
    <Grid>
        <!-- 核心表格控件 -->
        <DataGrid x:Name="ItemDataGrid"
                  Margin="20"
                  ItemsSource="{Binding ItemList}"
                  CanUserSortColumns="True"  <!-- 开启列排序 -->
                  CanUserResizeColumns="True" <!-- 开启列宽调整 -->
                  SelectionMode="Single"  <!-- 单选模式 -->
                  MouseDoubleClick="ItemDataGrid_MouseDoubleClick">
            <!-- 定义表格列 -->
            <DataGrid.Columns>
                <DataGridTextColumn Header="ID" Binding="{Binding Id}" Width="Auto"/>
                <DataGridTextColumn Header="名称" Binding="{Binding Name}" Width="*"/>
                <DataGridTextColumn Header="描述" Binding="{Binding Description}" Width="2*"/>
                <DataGridTextColumn Header="创建时间" Binding="{Binding CreateTime}" Width="Auto"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

<!-- 独立的详情弹窗（WPF中用Window模拟，WinUI直接用ContentDialog） -->
<Window x:Class="DataGridDemo.ItemDetailDialog"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="详情弹窗" Width="400" Height="300" WindowStartupLocation="CenterOwner">
    <StackPanel Margin="20">
        <TextBlock Text="ID:" FontWeight="Bold"/>
        <TextBlock Text="{Binding Id}" Margin="0 5 0 15"/>
        <TextBlock Text="名称:" FontWeight="Bold"/>
        <TextBlock Text="{Binding Name}" Margin="0 5 0 15"/>
        <TextBlock Text="描述:" FontWeight="Bold"/>
        <TextBlock Text="{Binding Description}" Margin="0 5 0 15"/>
        <TextBlock Text="创建时间:" FontWeight="Bold"/>
        <TextBlock Text="{Binding CreateTime}" Margin="0 5 0 15"/>
        <Button Content="关闭" Width="100" HorizontalAlignment="Right" Click="Button_Click"/>
    </StackPanel>
</Window>

2. C#逻辑部分 #

接下来是后台代码，包括数据源定义、双击事件处理和弹窗逻辑：

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace DataGridDemo
{
    // 数据模型类
    public class ItemModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public DateTime CreateTime { get; set; }
    }

    public partial class MainWindow : Window
    {
        // 作为DataSource的可观察集合（支持自动更新UI）
        public ObservableCollection<ItemModel> ItemList { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;

            // 初始化模拟数据
            ItemList = new ObservableCollection<ItemModel>
            {
                new ItemModel { Id = 1, Name = "产品A", Description = "这是测试产品A", CreateTime = new DateTime(2024, 1, 1) },
                new ItemModel { Id = 2, Name = "产品B", Description = "这是测试产品B", CreateTime = new DateTime(2024, 2, 15) },
                new ItemModel { Id = 3, Name = "产品C", Description = "这是测试产品C", CreateTime = new DateTime(2024, 3, 20) }
            };
        }

        // 双击表格行触发的事件
        private void ItemDataGrid_MouseDoubleClick(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            // 获取选中的项
            var selectedItem = ItemDataGrid.SelectedItem as ItemModel;
            if (selectedItem != null)
            {
                // 打开详情弹窗并绑定数据
                var detailDialog = new ItemDetailDialog();
                detailDialog.DataContext = selectedItem;
                detailDialog.ShowDialog();
            }
        }
    }

    // 详情弹窗的后台代码
    public partial class ItemDetailDialog : Window
    {
        public ItemDetailDialog()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Close();
        }
    }
}

3. 关键功能解析 #

• 列排序与调整：只需要给DataGrid设置CanUserSortColumns="True"和CanUserResizeColumns="True"，控件就会自动处理排序逻辑（点击列头切换升序/降序）和列宽拖拽调整。
• 双击打开弹窗：通过MouseDoubleClick事件获取当前选中的行数据，然后将数据绑定到弹窗的DataContext，弹窗就能自动显示选中项的详情。
• 数据源绑定：用ObservableCollection<T>作为DataSource，确保数据变更时UI能自动更新，这是WPF/WinUI里的标准做法。

如果是WinUI的话，只需要把DataGrid换成WinUI.Controls.DataGrid，弹窗用ContentDialog（直接在代码里创建并调用ShowAsync()方法），核心逻辑完全一样。

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