DevExpress GridView长文本行高优化:默认显部分内容+全文查看方案
DevExpress GridView Memo列默认显示多行+全文查看方案指引
作为常年和DevExpress WinForms打交道的开发者,针对你的需求,给你整理了几个落地性强的方案,都是项目里实测好用的:
方案1:鼠标悬停显示Tooltip(最简实现)
这个方案零额外UI,用户体验友好,适合快速落地:
- 开启Memo编辑项的Tooltip:
repositoryItemMemoEdit.ShowToolTips = true - 自定义Tooltip内容:如果默认Tooltip只显示截断文本,你可以通过
GridView.CustomDrawCell事件,把完整文本赋值给e.ToolTip:Private Sub GridView1_CustomDrawCell(sender As Object, e As DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs) Handles GridView1.CustomDrawCell If e.Column.FieldName = "你的描述列名" Then Dim fullText As String = e.CellValue.ToString() ' 判断文本是否超过2行(根据字体和列宽计算高度) Dim textHeight As Integer = TextRenderer.MeasureText(fullText, repositoryItemMemoEdit.Font, New Size(e.Bounds.Width, 0), TextFormatFlags.WordBreak).Height Dim lineHeight As Integer = repositoryItemMemoEdit.Font.Height If textHeight > lineHeight * 2 Then e.ToolTip = fullText End If End If End Sub - 进阶优化:用
TooltipController统一管理Tooltip样式,比如设置自动弹出延迟、背景色等。
方案2:展开/收起按钮(交互性最强)
适合需要用户主动控制显示的场景,步骤如下:
- 设置默认行高:先计算2行文本的高度,固定默认行高:
Dim defaultRowHeight As Integer = repositoryItemMemoEdit.Font.Height * 2 + 8 ' 加8是上下边距 GridView1.RowHeight = defaultRowHeight GridView1.OptionsView.RowAutoHeight = False - 绘制展开/收起按钮:在
GridView.CustomDrawCell事件中,给超过2行的单元格绘制一个小图标(比如+/-):Private Sub GridView1_CustomDrawCell(sender As Object, e As DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs) Handles GridView1.CustomDrawCell If e.Column.FieldName = "你的描述列名" Then Dim fullText As String = e.CellValue.ToString() Dim textHeight As Integer = TextRenderer.MeasureText(fullText, repositoryItemMemoEdit.Font, New Size(e.Bounds.Width, 0), TextFormatFlags.WordBreak).Height Dim lineHeight As Integer = repositoryItemMemoEdit.Font.Height If textHeight > lineHeight * 2 Then ' 绘制展开/收起图标(可使用DevExpress自带的ImageCollection) Dim iconBounds As New Rectangle(e.Bounds.Right - 16, e.Bounds.Top + 2, 12, 12) If GridView1.GetRowHeight(e.RowHandle) = defaultRowHeight Then e.Graphics.DrawImage(My.Resources.ExpandIcon, iconBounds) Else e.Graphics.DrawImage(My.Resources.CollapseIcon, iconBounds) End If ' 截断文本,避免覆盖图标 Dim truncatedText As String = TextRenderer.MeasureText(fullText, repositoryItemMemoEdit.Font, New Size(e.Bounds.Width - 20, 0), TextFormatFlags.WordBreak Or TextFormatFlags.EndEllipsis).ToString() e.DisplayText = truncatedText End If End If End Sub - 处理点击事件:在
GridView.MouseDown事件中,判断点击的是图标区域,切换行高:Private Sub GridView1_MouseDown(sender As Object, e As MouseEventArgs) Handles GridView1.MouseDown Dim hitInfo As GridHitInfo = GridView1.CalcHitInfo(e.Location) If hitInfo.InRowCell AndAlso hitInfo.Column.FieldName = "你的描述列名" Then Dim fullText As String = GridView1.GetRowCellValue(hitInfo.RowHandle, hitInfo.Column).ToString() Dim textHeight As Integer = TextRenderer.MeasureText(fullText, repositoryItemMemoEdit.Font, New Size(hitInfo.Column.Width, 0), TextFormatFlags.WordBreak).Height Dim lineHeight As Integer = repositoryItemMemoEdit.Font.Height If textHeight > lineHeight * 2 Then Dim iconBounds As New Rectangle(hitInfo.Bounds.Right - 16, hitInfo.Bounds.Top + 2, 12, 12) If iconBounds.Contains(e.Location) Then If GridView1.GetRowHeight(hitInfo.RowHandle) = defaultRowHeight Then ' 展开:自动计算行高 GridView1.SetRowHeight(hitInfo.RowHandle, textHeight + 8) Else ' 收起:恢复默认行高 GridView1.SetRowHeight(hitInfo.RowHandle, defaultRowHeight) End If End If End If End If End Sub
方案3:超链接弹窗(独立查看体验)
适合需要大面积查看编辑文本的场景,实现思路:
- 绘制超链接样式文本:在
CustomDrawCell事件中,把超过2行的文本截断,加上“...查看全文”,并设置为蓝色下划线样式:Private Sub GridView1_CustomDrawCell(sender As Object, e As DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs) Handles GridView1.CustomDrawCell If e.Column.FieldName = "你的描述列名" Then Dim fullText As String = e.CellValue.ToString() Dim textHeight As Integer = TextRenderer.MeasureText(fullText, repositoryItemMemoEdit.Font, New Size(e.Bounds.Width, 0), TextFormatFlags.WordBreak).Height Dim lineHeight As Integer = repositoryItemMemoEdit.Font.Height If textHeight > lineHeight * 2 Then e.DisplayText = $"{TextRenderer.MeasureText(fullText, repositoryItemMemoEdit.Font, New Size(e.Bounds.Width, 0), TextFormatFlags.WordBreak Or TextFormatFlags.EndEllipsis)}...查看全文" ' 设置绘制样式为超链接 e.Appearance.ForeColor = Color.Blue e.Appearance.Options.UseForeColor = True e.Appearance.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Near End If End If End Sub - 弹出窗口显示全文:在
GridView.RowCellClick事件中,判断点击的是超链接文本,弹出一个带MemoEdit的窗口:Private Sub GridView1_RowCellClick(sender As Object, e As DevExpress.XtraGrid.Views.Grid.RowCellClickEventArgs) Handles GridView1.RowCellClick If e.Column.FieldName = "你的描述列名" Then Dim fullText As String = GridView1.GetRowCellValue(e.RowHandle, e.Column).ToString() Dim textHeight As Integer = TextRenderer.MeasureText(fullText, repositoryItemMemoEdit.Font, New Size(e.Column.Width, 0), TextFormatFlags.WordBreak).Height Dim lineHeight As Integer = repositoryItemMemoEdit.Font.Height If textHeight > lineHeight * 2 Then ' 新建弹窗Form,里面放一个MemoEdit Dim detailForm As New Form() detailForm.Text = "详细描述" detailForm.Size = New Size(600, 400) Dim memoEdit As New DevExpress.XtraEditors.MemoEdit() memoEdit.Dock = DockStyle.Fill memoEdit.Text = fullText memoEdit.Properties.ReadOnly = True detailForm.Controls.Add(memoEdit) detailForm.ShowDialog() End If End If End Sub
额外优化建议
- 性能优化:如果数据量较大,建议提前在DataTable中添加一个隐藏列,存储文本的行数或计算后的高度,避免每次绘制都重复计算
TextRenderer.MeasureText - 统一样式:用DevExpress的
Appearances机制统一设置Tooltip、弹窗的样式,保持和主应用一致 - 编辑支持:如果需要编辑全文,可以在弹窗的MemoEdit中开启编辑模式,编辑完成后同步回GridView的数据源
内容的提问来源于stack exchange,提问作者J.L
相关产品推荐
相关产品推荐

