WPF 动态生成行列可变表格的实现方法-编程实验室

前言

在做WPF开发的时候，经常会遇到需要展示表格数据的场景。大家最熟悉的可能是DataGrid控件，它用起来方便，绑定数据简单。

但有个问题一直困扰着我：当表格的列数不固定，需要根据数据动态变化时，DataGrid就显得有些力不从心了。

最近在做一个项目时，正好遇到了这样的需求——要根据测量数据动态生成行列可变的表格，经过一番摸索，最终用Grid控件从后台代码实现了这个功能，效果还不错，今天就来分享一下。

正文

项目背景是这样的：我们需要展示一组宽度测量数据，每组数据包含多个边缘的振幅值，而不同组的边缘数量是不一样的。如果用传统的DataGrid，列数固定，很难灵活展示这种数据结构。

于是，我决定放弃DataGrid，转而使用Grid控件，通过代码动态生成表格。

效果演示

从图中可以看到，表格的列数是根据数据动态生成的，每组数据的边缘数量不同，表格的列数也随之变化，而且每组数据之间有明显的分隔，整体效果清晰明了。

实现方法

先看前台XAML部分：

<dxlc:LayoutControl> <Grid HorizontalAlignment="Left" VerticalAlignment="Top" cal:Message.Attach="[Event Loaded]=[Grid_Loaded($source,$eventArgs)]" /> </dxlc:LayoutControl>

我把Grid放在了dxlc:LayoutControl中，这样当表格尺寸超出界面分配的长宽时，会自动出现滚动条，用户体验更好。

再来看后台代码。首先定义数据模型：

public class WidthMetrologyDTO { public bool IsMeasureSuccess { get; set; } public double Degree { get; set; } public string ImageFilePath { get; set; } public double Width { get; set; } public double EdgeNum { get; set; } public List<EdgePosition> EdgePositions { get; set; } } public class EdgePosition { public double EdgesAmplitude { get; set; } }

然后在代码中定义Grid和数据集合：

public Grid resultDisplayGrid; public BindableCollection<WidthMetrologyDTO> WidthMetrologyData { get; set; } = new BindableCollection<WidthMetrologyDTO>();

在Grid加载时获取Grid对象：

public void Grid_Loaded(object sender, RoutedEventArgs e) { resultDisplayGrid = (Grid)sender; }

接着添加一些测试数据：

public void ResultDispaly() { try { WidthMetrologyData.Clear(); WidthMetrologyData.Add(new WidthMetrologyDTO { Width = 345.1, EdgeNum = 3, EdgePositions = new List<EdgePosition> { new EdgePosition(){EdgesAmplitude = 1.1}, new EdgePosition(){EdgesAmplitude = 2.2}, new EdgePosition(){EdgesAmplitude = 3.3}, }, }); WidthMetrologyData.Add(new WidthMetrologyDTO { Width = 345.2, EdgeNum = 2, EdgePositions = new List<EdgePosition> { new EdgePosition(){EdgesAmplitude = 4.4}, new EdgePosition(){EdgesAmplitude = 5.5}, }, }); WidthMetrologyData.Add(new WidthMetrologyDTO { Width = 345.3, EdgeNum = 4, EdgePositions = new List<EdgePosition> { new EdgePosition(){EdgesAmplitude = 6.6}, new EdgePosition(){EdgesAmplitude = 7.7}, new EdgePosition(){EdgesAmplitude = 8.8}, new EdgePosition(){EdgesAmplitude = 9.9}, }, }); WidthMetrologyData.Add(new WidthMetrologyDTO { Width = 345.0, EdgeNum = 1, EdgePositions = new List<EdgePosition> { new EdgePosition(){EdgesAmplitude = 0.66}, }, }); AddResultGrid(); } catch (Exception ex) { //logger.Debug($"ResultData add fail : {ex}"); } }

最后是生成表格的核心代码：

public void AddResultGrid() { try { resultDisplayGrid.Children.Clear(); var gridColumns = 2 + WidthMetrologyData.OrderByDescending(index => index.EdgePositions.Count).FirstOrDefault().EdgePositions.Count; var gridRows = 16; //添加grid行 for (int i = 0; i < gridColumns; i++) { var columnDefinition = new ColumnDefinition(); resultDisplayGrid.ColumnDefinitions.Add(columnDefinition); if (i == 1) { columnDefinition.Width = new GridLength(2, GridUnitType.Star);//相对尺寸 } else { columnDefinition.Width = new GridLength(1, GridUnitType.Star); } //columnDefinition.Width = GridLength.Auto; } //添加grid列 for (int i = 0; i < gridRows; i++) { var rowDefinition = new RowDefinition(); resultDisplayGrid.RowDefinitions.Add(rowDefinition); rowDefinition.Height = new GridLength(30, GridUnitType.Pixel);//绝对尺寸 } //添加数据 //var controlWidth = 100; //var controlHeight = 30; for (int degreeIndex = 0; degreeIndex < WidthMetrologyData.Count; degreeIndex++) { var rowsCount = 3; var columnsCount = WidthMetrologyData[degreeIndex].EdgePositions.Count; for (int row = 0; row < rowsCount; row++) for (int column = 0; column < columnsCount + 2; column++) { TextBlock tb = new TextBlock(); //tb.Width = controlWidth; //tb.Height = controlHeight; //tb.HorizontalAlignment = HorizontalAlignment.Left; //tb.VerticalAlignment = VerticalAlignment.Center; Border border = new Border(); border.BorderBrush = System.Windows.Media.Brushes.BlueViolet; border.BorderThickness = new Thickness(1); border.Child = tb; border.SetValue(Grid.RowProperty, row + degreeIndex * 4); border.SetValue(Grid.ColumnProperty, column); resultDisplayGrid.Children.Add(border); if (row == 0 && column >= 2) { tb.Text = (column - 1).ToString(); } else if (row == 1 && column >= 2) { tb.Text = WidthMetrologyData[degreeIndex].EdgePositions[column - 2].EdgesAmplitude.ToString(); } else if (row == 2 && column >= 2) { if (column == 2) { tb.Text = WidthMetrologyData[degreeIndex].Width.ToString(); //tb.Width = columnsCount * controlWidth; tb.SetValue(Grid.ColumnSpanProperty, columnsCount); } else { continue; } } if (column == 0) { if (row == 0) { switch (degreeIndex) { case 0: tb.Text = "第一组"; break; case 1: tb.Text = "第二组"; break; case 2: tb.Text = "第三组"; break; case 3: tb.Text = "第四组"; break; default: break; } //tb.Height = 3 * controlHeight; tb.SetValue(Grid.RowSpanProperty, 3); } else { continue; } } if (column == 1) { switch (row) { case 0: tb.Text = "ID"; break; case 1: tb.Text = "Value"; break; case 2: tb.Text = "Fraction"; break; default: tb.Text = string.Empty; break; } //tb.Width = controlWidth; } } } resultDisplayGrid.Width = (gridColumns + 1)* 40; //resultDisplayGrid.Height = gridRows * controlHeight; } catch (Exception ex) { //logger.Error($"Add result grid fail,{ex}"); } }