DevExpress官网

DevExpress WinForms拥有180+组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！

在本教程中，您将学习如何使用DevExpress Grid View（网格视图）事件自定义行预览部分的内容和大小。首先您将自定义文本来包含来自多个数据字段的值，然后根据各个部分的内容指定预览部分的高度，最后使用CustomDraw事件将图像添加到预览中。

获取DevExpress WinForms v25.2正式版下载

DevExpress技术交流群11：749942875      欢迎一起进群讨论

开始

从启用了行预览部分的网格控件开始，您可以在其中显示Description字段中的值。

显示来自多个数据字段的值

首先，您将看到如何使用另外两个字段（MPG City和MPG Highway）的值扩展这些预览部分。

在设计时，访问网格视图的设置并为GridView.CalcPreviewText事件编写处理程序。声明一个单独的CalculateMyPreviewText方法，该方法使用CalcPreviewTextEventArgs.RowHandle参数获取数据行，然后获取三个字段的值：MPG City， MPG Highway和Description。如果描述为空，则该方法只返回一个空字符串。否则，它将返回一个组合了所有三个字段值的字符串。

在事件处理程序中调用此方法来指定CalcPreviewTextEventArgs.PreviewText参数值，从而自定义要显示的文本。

C#

private void gridView1_CalcPreviewText(object sender, DevExpress.XtraGrid.Views.Grid.CalcPreviewTextEventArgs e) {
e.PreviewText = CalculateMyPreviewText(e.RowHandle);
}

private string CalculateMyPreviewText(int rowHandle) {
DataRow row = gridView1.GetDataRow(rowHandle);
string mpgcity = row["MPG City"].ToString();
string mpghwy = row["MPG Highway"].ToString();
string description = row["Description"].ToString();
if (string.IsNullOrEmpty(description))
return string.Empty;
return string.Format("MPG City: {0}, MPG Highway: {1}\n{2}", mpgcity, mpghwy, description);
}

当您运行应用程序时，将看到只显示第一个字符串，因为网格不会自动计算自定义文本的预览高度。

将GridView.PreviewLineCount属性设置为5，可以看到Description字段的值也会显示出来。

指定单个预览部分的高度

所有预览部分为5行文本预留空间，即使它不是必需的。预览文本为空，仍会显示空白区域。

要解决这个问题，关闭应用程序并为Grid View（网格视图）的GridView.MeasurePreviewHeight事件编写处理程序。如果Description字段值为空字符串，则代码将高度设置为0，否则使用尚未定义的GetRowImage函数将高度设置为该行中图像的高度。

然后定义这个函数，以便它从指定行的Image字段中获取Bitmap。

C#

using DevExpress.XtraGrid.Views.Grid;
// ...
private void gridView1_MeasurePreviewHeight(object sender, DevExpress.XtraGrid.Views.Grid.RowHeightEventArgs e) {
GridView view = sender as GridView;
if (view == null) return;
DataRow row = view.GetDataRow(e.RowHandle);
if (row["Description"].ToString() == String.Empty)
e.RowHeight = 0;
else
e.RowHeight = GetRowImage(e.RowHandle).Height;
}

private Bitmap GetRowImage(int rowHandle) {
DataRow row = gridView1.GetDataRow(rowHandle);
if (row["Image"] == System.DBNull.Value)
return null;
byte[] imageData = (byte[])row["Image"];
return new Bitmap(new System.IO.MemoryStream(imageData));
}

运行应用程序。您将看到默认情况下，包含文本的所有预览部分都显示不止一行，具有空Description字段值的行不显示预览。

向预览部分添加图像

现在添加图像，返回到设计时并处理GridView.CustomDrawRowPreview事件。用于计算预览高度的GetImage方法显然在这里也很有用，使用CustomDrawEventArgs.Cache参数绘制获得的图像。

然后计算要绘制文本的矩形，考虑到图像宽度和额外的20像素偏移，初始化左上角，矩形的宽度也被调整为适合图像。

下一步是获取文本，这是使用本教程开始时声明的CalculateMyPreviewText方法完成的，并在GridView.CalcPreviewText事件中使用。最后指定修剪样式并绘制文本，设置CustomDrawEventArgs.Handled为true来禁用默认绘画。

C#

private void gridView1_CustomDrawRowPreview(object sender, DevExpress.XtraGrid.Views.Base.RowObjectCustomDrawEventArgs e) {
Bitmap image = GetRowImage(e.RowHandle);
e.Cache.DrawImage(image, e.Bounds.X, e.Bounds.Y, image.Width, image.Height);

Point textOrigin = new Point(e.Bounds.X + image.Width + 20, e.Bounds.Y + 4);
Rectangle textRect = new Rectangle(textOrigin.X, textOrigin.Y, e.Bounds.Width - textOrigin.X, e.Bounds.Height - 8);
string text = CalculateMyPreviewText(e.RowHandle);
StringFormat format = e.Appearance.GetStringFormat();
format.Trimming = StringTrimming.EllipsisWord;
e.Cache.DrawString(text, e.Appearance.Font, e.Appearance.GetForeBrush(e.Cache), textRect, format);

e.Handled = true;
}

运行应用程序来查看结果，现在可以隐藏显示与行预览部分中显示的信息相同的列。

更多DevExpress线上公开课、中文教程资讯请上中文网获取

关于慧都科技

慧都是⼀家⾏业数字化解决⽅案公司，专注于软件、⽯油与⼯业领域，以深⼊的业务理解和⾏业经验，帮助企业实现智能化转型与持续竞争优势。

慧都科技是DevExpress的中国区的合作伙伴，DevExpress作为用户界面领域的优秀产品，帮助企业高效构建权限管理、数据可视化（如网格/图表/仪表盘）、跨平台系统（WinForms/ASP.NET/.NET MAUI）及行业定制解决方案，加速开发并强化交互体验。

相关产品： DevExpress WinForms Subscription, DevExpress Universal Subscription,