如何在 WPF 中创建动态变化的表？

Posted 2023-02-26

【中文标题】如何在 WPF 中创建动态变化的表？

【英文标题】：How to create a dynamically changing table in WPF?

【发布时间】：2021-01-18 15:31:33

【问题描述】：

这是一个示例表格图像：

（出于解释的目的，图像中的线条没有重叠。）

红色区域为固定部分，代表标题。

并且绿色区域的大小固定为 3 列，但可以添加新列。很快，绿色区域应该可以左右滚动了。您可以通过向左或向右滚动绿色区域来检查超过 4 个列表单元格。

蓝色区域包含绿色区域，可以添加新行。很快，蓝色区域应该可以上下滚动了。并且，向蓝色区域添加一行意味着将蓝色区域中的 2 列和绿色区域中的 3 列或更多列添加为一行。 （绿色区域每行的列数相同。）

问题 1： 我可以使用 WPF 提供的 TextBox、Grid、ScrollBar 基本 UI 控件创建这样的表格吗？

问题 2： 应该如何组成表格UI的内部结构？我想到的第一种方法是将每一行组合为一个 UserControl。但我不确定。

【问题讨论】：

看起来像 DataGrid

【参考方案1】：

你可以

我不知道最好的方法，但这里有一个你可能不想做但有效的例子。我只制作了 3 行 6 列的 xaml，但您可以使用后面的代码创建所有这些......即使它很糟糕，它仍然可以帮助您：

 <StackPanel>
 <Button Content="Top" />
 <ScrollViewer Height="250" >
     <DockPanel Background="AliceBlue" LastChildFill="False">
         <StackPanel Orientation="Vertical" >
             <StackPanel Orientation="Horizontal" Height="100">
                 <Label Content="Column1" Width="100"/>
                 <Label Content="Column2" Width="100"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" Height="100">
                 <Label Content="Column1" Width="100"/>
                 <Label Content="Column2" Width="100"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" Height="100">
                 <Label Content="Column1" Width="100"/>
                 <Label Content="Column2" Width="100"/>
             </StackPanel>

         </StackPanel>
         <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Width="500" Background="Green" DockPanel.Dock="Right">
             <StackPanel Orientation="Vertical">

                 <StackPanel Orientation="Horizontal" Height="100">
                     <Label Content="Column3" Width="200"/>
                     <Label Content="Column4" Width="200"/>
                     <Label Content="Column5" Width="200"/>
                     <Label Content="Column6" Width="200"/>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" Height="100">
                     <Label Content="Column3" Width="200"/>
                     <Label Content="Column4" Width="200"/>
                     <Label Content="Column5" Width="200"/>
                     <Label Content="Column6" Width="200"/>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" Height="100">
                     <Label Content="Column3" Width="200"/>
                     <Label Content="Column4" Width="200"/>
                     <Label Content="Column5" Width="200"/>
                     <Label Content="Column6" Width="200"/>
                 </StackPanel>



             </StackPanel>
         </ScrollViewer>
     </DockPanel>
 </ScrollViewer>