c# - OwnerDrawText模式下TreeView节点文本的定位和高亮

我的问题

我正在尝试创建一个 TreeView，它会将与搜索词匹配的节点文本部分加粗。我的代码来自 this question .使用或不使用 ImageList 时，我都会遇到相同/相似的问题，但我会在此处发布未使用的版本。当我呈现我的文本时，我得到类似这样的结果，其中文本的最后部分被截断，但仅一些节点。即版本看起来不错，但其余版本的文本数量不同。

我认为我的 TextFormatFlags 标志对此有影响，但如果我在测量/渲染文本期间不传递这些标志，节点将在左侧切断。

如果我绘制粗体文本，还会引入垂直间距问题。你可以看到当我使用 Plan 作为搜索词时，它比文本的其余部分高一点。

如果我选择一个节点，您会看到我再次遇到水平间距问题。

我的问题

没有加粗的节点渲染的水平大小问题
使用粗体部分呈现的节点的垂直大小问题
呈现粗体和事件节点的水平大小问题。

更新代码

感谢@jimi，我能够巩固一些东西。我在他回答时接近了，但下面是我根据他的建议所做的更改。我确实做了一些与他不同的事情。

当 ( formClosing || e.Bounds.X == -1 ) 为真时，我立即退出 tree_DrawNode 以避免一些图形故障。你可以在下面看到我的评论。
我喜欢 BuildDrawingString 清理代码的方式。我添加了一个计算出的 Width 属性，另外我修复了一个关于返回匹配文本的错误。
我在节点有焦点时绘制高亮背景，在没有焦点时绘制窗口背景以更好地模拟默认的 TreeView 行为。尤其是当鼠标在一个节点上向下移动，然后在其他地方向上移动时。

我不是仅仅使用 e.Bounds 来绘制背景矩形，而是基于 e.Node.Bounds x/y、渲染文本所需的宽度和一点点来创建我自己的矩形填充。

private void tree_DrawNode( object sender, DrawTreeNodeEventArgs e )
{
    var textPadding = 2;

    // formClosing - don't need to redraw when shutting down, avoids seeing a little glitch with text offset
    // e.Bounds.X == -1 - when form loads, all *non-top level* nodes seem to draw on top of each other on first line
    //                    causing a big 'black blur' to happen when form loads b/c text is mashed together
    if ( formClosing || e.Bounds.X == -1 )
    {
        return;
    }

    using ( var boldFont = new Font( tree.Font, FontStyle.Bold ) )
    {
        var stringParts = BuildDrawingString( e, fieldSearch.Text, boldFont ).ToArray();

        // To better emulate default behavior, draw the 'selected' look only when focused, so if
        // you click down on item, originally selected item draws 'normal' and item clicking on is 'selected'
        // and if you let up on mouse outside of node, it reverts back to how it was.
        var isSelected = e.State.HasFlag( TreeNodeStates.Focused );
        var color = isSelected ? Color.White : tree.ForeColor;

        // Use e.NodeBounds X,Y and width of measured text with just a little bit of 
        // padding on left and right, e.Bounds was too wide.
        var nodeRectangle = new Rectangle(
                e.Node.Bounds.X,
                e.Node.Bounds.Y,
                stringParts.Sum( p => p.Width ) + textPadding * 2,
                e.Node.Bounds.Height
            );

        e.Graphics.FillRectangle( isSelected ? SystemBrushes.Highlight : SystemBrushes.Window, nodeRectangle );

        if ( isSelected )
        {
            using ( var focusPen = new Pen( Color.Black ) { DashStyle = System.Drawing.Drawing2D.DashStyle.Dot } )
            {
                nodeRectangle.Size = new Size( nodeRectangle.Width - 1, nodeRectangle.Height - 1 );
                e.Graphics.DrawRectangle( focusPen, nodeRectangle );
            }
        }

        var point = new Point( e.Node.Bounds.X + textPadding, e.Node.Bounds.Y );

        foreach ( var part in stringParts )
        {
            var font = part.Selected ? boldFont : tree.Font;
            RenderNodeText( part.Text, e, font, point, color );
            point.Offset( part.Width, 0 );
        }
    }
}

private void RenderNodeText( string text, DrawTreeNodeEventArgs e, Font font, Point offset, Color color )
{
    var size = e.Node.Bounds.Size;
    var rect = new Rectangle( offset, size );
    TextRenderer.DrawText( e.Graphics, text, font, rect, color, e.Node.BackColor, treeFlags );
}

private IEnumerable<(string Text, bool Selected, int Width)> BuildDrawingString( DrawTreeNodeEventArgs e, string pattern, Font boldFont )
{
    var itemContent = e.Node.Text;

    int measureText( string t, bool s ) => TextRenderer.MeasureText( e.Graphics, t, s ? boldFont : tree.Font, e.Bounds.Size, treeFlags ).Width;

    if ( pattern.Length == 0 )
    {
        yield return (itemContent, false, measureText( itemContent, false ));
    }
    else
    {
        var matches = Regex.Split( itemContent, $"(?i){pattern}" );
        var currentCharacter = 0;
        var patternLength = pattern.Length;

        for ( int i = 0; i < matches.Length; i++ )
        {
            if ( matches[ i ].Length >= 0 )
            {
                yield return (
                    matches[ i ], 
                    false, 
                    measureText( matches[ i ], false ) 
                );

                currentCharacter += matches[ i ].Length;
            }

            if ( i < matches.Length - 1 )
            {
                var matchText = itemContent.Substring( currentCharacter, patternLength );
                yield return (
                    matchText,
                    true,
                    measureText( matchText, true )
                );

                currentCharacter += patternLength;
            }
        }
    }
}

新的转折

我将此处创建的所有最终代码从 WinForms 应用程序移动到 VSTO Word AddIn 项目/窗体中的窗体，并且由于某种原因字体呈现不同。

一般的字体(normal font)看起来更细更小。
粗体字体似乎比普通字体偏移了一点。

在下图中，顶部的表单是来自 Word 的表单，第二个表单(Form1 的标题)是我的 WinForms 应用程序。作为 VSTO 加载项运行时是否存在兼容性问题或其他问题？

原始代码

    private void Form1_Load( object sender, EventArgs e )
    {
        tree.DrawMode = TreeViewDrawMode.OwnerDrawText;
        tree.DrawNode += tree_DrawNode;
        tree.Font = new Font( "Microsoft YaHei UI", 10F, FontStyle.Regular, GraphicsUnit.Point, 0 );
        // tree.ImageList = imageList;
        tree.Nodes.Add( "PlanInfo" );
        tree.Nodes[ 0 ].Nodes.Add( "Version" );
        tree.Nodes[ 0 ].Nodes.Add( "Plan Name" );
        tree.Nodes[ 0 ].Nodes.Add( "Plan Sponsor" );
    }

    TextFormatFlags treeFlags = TextFormatFlags.Top | TextFormatFlags.Left | TextFormatFlags.NoPadding;

    private void tree_DrawNode( object sender, DrawTreeNodeEventArgs e )
    {
        var currentX = 0;
        var searchText = e.Node.Text;
        var searchTerm = fieldSearch.Text;
        var matches = Regex.Split( searchText, "(?i)" + searchTerm );
        var point = new Point( e.Node.Bounds.X + currentX, e.Node.Bounds.Y );
        var isSelected = ( e.State & TreeNodeStates.Selected ) != 0;
        var color = isSelected ? Color.White : tree.ForeColor;

        if ( isSelected )
        {
            e.Graphics.FillRectangle( SystemBrushes.Highlight, e.Node.Bounds );
        }

        if ( !string.IsNullOrEmpty( searchTerm ) && matches != null )
        {
            var currentCharacter = 0;
            var currentMatch = 0;
            var keyLength = searchTerm.Length;

            foreach ( var m in matches )
            {
                if ( !string.IsNullOrEmpty( m ) )
                {
                    point.Offset(
                        RenderNodeText( m, e, FontStyle.Regular, point, color ).Width,
                        0
                    );

                    currentCharacter += m.Length;
                }

                currentMatch++;

                if ( currentMatch < matches.Length || ( string.IsNullOrEmpty( m ) && currentMatch == 1 ) )
                {
                    var boldText = searchText.Substring( currentCharacter, keyLength );

                    point.Offset(
                        RenderNodeText( boldText, e, FontStyle.Bold, point, color ).Width,
                        0
                    );

                    currentCharacter += keyLength;
                }
            }
        }
        else
        {
            RenderNodeText( e.Node.Text, e, FontStyle.Regular, point, color );
        }
    }

    private Size RenderNodeText( string text, DrawTreeNodeEventArgs e, FontStyle altStyle, Point offset, Color color )
    {
        using ( var font = new Font( tree.Font, altStyle ) )
        {
            var size = e.Node.Bounds.Size;
            var textWidth = TextRenderer.MeasureText( e.Graphics, text, font, size, treeFlags );
            var rect = new Rectangle( offset, size );
            TextRenderer.DrawText( e.Graphics, text, font, rect, color, Color.Transparent, treeFlags );
            return textWidth;
        }
    }

最佳答案

部分资料见previous question没有晋级。

TextFormatFlags很重要:这些设置对文本的呈现方式有很大影响。此外，每个控件都有自己的特定要求，也许差异很小 - 就像在这种情况下 - 但无论如何我们都需要适应。
当文本向左对齐并垂直居中时，TreeView 控件的效果会更好。
TextRenderer非常精确，但我们想给它手(如前所述)始终使用矩形作为引用容器来测量和绘制文本。可能不使用点，您会注意到使用这个简单的引用时，结果可能会在类似情况下发生变化。在控件上绘制时，我们真的不希望那样。
您从原始代码中删除了 TextFormatFlags.NoClipping，不好，这是一个管理员。除非你真的想剪辑文本，但你需要指定如何剪辑它。可以为此组合其他标志。

具体到这个问题:

e.State == TreeNodeStates.Selected还不够，我们还需要测试TreeNodeStates.Focused , otherwise we have a weird difference in the Text rendering when a Node is selected or focused;这些是不同的状态:一个节点可以被选中，另一个节点被聚焦，两者必须被平等地渲染。
DrawTreeNodeEventArgs 的图形边界之间存在细微差别。和节点项的边界。绘制背景时，使用前者，定义Node文本的约束，改用后者。
对同一段Text使用不同权重的Font，必须以Node的bounds为起始位置，使用TextRenderer.MeasureText返回的measures ，对这些度量求和并手动偏移文本位置(如前所述，依靠 MeasureText 的精度)。
节点是否有图像并不重要，我们只需要考虑初始偏移量，等于 e.Node.Bounds.X。在代码中，它存储在 int drawingPosition = e.Node.Bounds.X; 中。

视觉效果:

TextFormatFlags twFormat = TextFormatFlags.Left | TextFormatFlags.VerticalCenter | 
                           TextFormatFlags.NoClipping | TextFormatFlags.NoPadding;

private void tree_DrawNode(object sender, DrawTreeNodeEventArgs e)
{
    Color textColor = e.Node.ForeColor;
    Color backColor = e.Node.BackColor == Color.Empty ? tree.BackColor : e.Node.BackColor;

    if (e.State.HasFlag(TreeNodeStates.Selected) || e.State.HasFlag(TreeNodeStates.Focused)) {
        textColor = SystemColors.HighlightText;
        backColor = SystemColors.Highlight;
    }
    using (var brush = new SolidBrush(backColor)) {
        e.Graphics.FillRectangle(brush, e.Bounds);
    }

    string searchText = fieldSearch.Text;  // Search string from TextBox
    int drawingPosition = e.Node.Bounds.X;
    foreach (var part in BuildDrawingString(e.Node.Text, searchText)) {
        var style = part.Selected ? FontStyle.Bold : FontStyle.Regular;
        drawingPosition += RenderNodeText(part.Text, e, style, new Point(drawingPosition, e.Node.Bounds.Y), textColor).Width;
    }
}

private Size RenderNodeText(string text, DrawTreeNodeEventArgs e, FontStyle altStyle, Point offset, Color foreColor)
{
    using (var font = new Font(tree.Font, altStyle)) {
        var size = e.Node.Bounds.Size;
        var textWidth = TextRenderer.MeasureText(e.Graphics, text, font, size, twFormat);
        var rect = new Rectangle(offset, size);
        TextRenderer.DrawText(e.Graphics, text, font, rect, foreColor, e.Node.BackColor, twFormat);
        return textWidth;
    }
}

private IEnumerable<(string Text, bool Selected)> BuildDrawingString(string itemContent, string pattern)
{
    if (pattern.Length == 0) {
        yield return (itemContent, false);
    }
    else {
        var matches = Regex.Split(itemContent, $"(?i){pattern}");
        int pos = itemContent.IndexOf(pattern, StringComparison.CurrentCultureIgnoreCase);
        for (int i = 0; i < matches.Length; i++) {
            if (matches[i].Length == 0 && i < matches.Length - 1) {
                yield return (itemContent.Substring(pos, pattern.Length), matches[i].Length > 0 ? false : true);
            }
            else {
                yield return (matches[i], false);
                if (i < matches.Length - 1) {
                    yield return (itemContent.Substring(pos, pattern.Length), true);
                }
            }
        }
    }
}

关于c# - OwnerDrawText模式下TreeView节点文本的定位和高亮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63121949/

c# - OwnerDrawText模式下TreeView节点文本的定位和高亮

我的问题

我的问题

更新代码

新的转折

原始代码

上一篇：python - 将 Minibatch 标准偏差应用于 Keras GAN 层的正确方法

下一篇：matplotlib - 情节 mpl_to_plotly 错误 : 'Spine' object has no attribute 'is_frame_like'