前言
在做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}");
}
}
总结
通过这次实践，我发现用Grid控件从后台代码生成表格，虽然代码量比用DataGrid多一些，但灵活性大大增强。特别是当表格结构需要根据数据动态变化时，这种方法显得尤为实用。关键是要理清数据结构，合理规划Grid的行列布局，再通过代码动态生成控件并设置其位置。虽然过程有点繁琐，但最终的效果让人满意。
关键词
WPF、C#、Grid、动态表格、后台代码、DataGrid、行列可变、代码生成、控件布局、数据绑定
最后
如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。
也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！
优秀是一种习惯，欢迎大家留言学习！
