none
Treeview Control Parent Node Text Wrap

    Question

  • Hello,

    How can I get the text to "wrap" on a node in treeview?  I am using winforms .net4 vb.net

    Thanks!


    ddd
    Wednesday, November 16, 2011 4:05 PM

Answers

  • You will need to use the OwnerDrawText function to draw the node yourself,

            // Configure the TreeView control for owner-draw and add
            // a handler for the DrawNode event.
            myTreeView.DrawMode = TreeViewDrawMode.OwnerDrawText;
            myTreeView.DrawNode +=  new DrawTreeNodeEventHandler(myTreeView_DrawNode);
    
        // Draws a node.
        private void myTreeView_DrawNode(
            object sender, DrawTreeNodeEventArgs e)
        {
            // Draw the background and node text for a selected node.
            if ((e.State & TreeNodeStates.Selected) != 0)
            {
                // Draw the background of the selected node. The NodeBounds
                // method makes the highlight rectangle large enough to
                // include the text of a node tag, if one is present.
                e.Graphics.FillRectangle(Brushes.Green, NodeBounds(e.Node));
    
                // Retrieve the node font. If the node font has not been set,
                // use the TreeView font.
                Font nodeFont = e.Node.NodeFont;
                if (nodeFont == null) nodeFont = ((TreeView)sender).Font;
    
                // Draw the node text.
                e.Graphics.DrawString(e.Node.Text, nodeFont, Brushes.White,
                    Rectangle.Inflate(e.Bounds, 2, 0));
            }
    
            // Use the default background and node text.
            else 
            {
                e.DrawDefault = true;
            }
    
            // If a node tag is present, draw its string representation 
            // to the right of the label text.
            if (e.Node.Tag != null)
            {
                e.Graphics.DrawString(e.Node.Tag.ToString(), tagFont,
                    Brushes.Yellow, e.Bounds.Right + 2, e.Bounds.Top);
            }
    
            // If the node has focus, draw the focus rectangle large, making
            // it large enough to include the text of the node tag, if present.
            if ((e.State & TreeNodeStates.Focused) != 0)
            {
                using (Pen focusPen = new Pen(Color.Black))
                {
                    focusPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
                    Rectangle focusBounds = NodeBounds(e.Node);
                    focusBounds.Size = new Size(focusBounds.Width - 1, 
                    focusBounds.Height - 1);
                    e.Graphics.DrawRectangle(focusPen, focusBounds);
                }
            }
        }
    


    In the Draw string command, you can add "\n" to wrap the string,

                e.Graphics.DrawString(e.Node.Tag.ToString()+"\n"+"helloworld", tagFont,
                    Brushes.Yellow, e.Bounds.Right + 2, e.Bounds.Top);
    



    Mike Zhang[MSFT]
    MSDN Community Support | Feedback to us
    Thursday, November 17, 2011 5:34 AM
  • :)

    You do not need to convert the code yourself, you can view the VB.NET version code in this page after you click on the VB tab:

    http://msdn.microsoft.com/en-us/library/system.windows.forms.treeview.drawnode.aspx#Y400

    The NodeBounds is a function you can see it at the bottom of this class.

        Private Function NodeBounds(ByVal node As TreeNode) As Rectangle
    
            ' Set the return value to the normal node bounds.
            Dim bounds As Rectangle = node.Bounds
            If (node.Tag IsNot Nothing) Then
    
                ' Retrieve a Graphics object from the TreeView handle
                ' and use it to calculate the display width of the tag.
                Dim g As Graphics = myTreeView.CreateGraphics()
                Dim tagWidth As Integer = CInt(g.MeasureString( _
                    node.Tag.ToString(), tagFont).Width) + 6
    
                ' Adjust the node bounds using the calculated value.
                bounds.Offset(tagWidth \ 2, 0)
                bounds = Rectangle.Inflate(bounds, tagWidth \ 2, 0)
                g.Dispose()
            End If
            Return bounds
        End Function 'NodeBounds
    

    The tagFont is a Font type field in this class, it is defined at the beginning of this class, you can find it in the demo, too:

    Private tagFont As New Font("Helvetica", 8, FontStyle.Bold)
    
    Best wishes,


    Mike Zhang[MSFT]
    MSDN Community Support | Feedback to us
    Tuesday, November 22, 2011 7:23 AM

All replies

  • You will need to use the OwnerDrawText function to draw the node yourself,

            // Configure the TreeView control for owner-draw and add
            // a handler for the DrawNode event.
            myTreeView.DrawMode = TreeViewDrawMode.OwnerDrawText;
            myTreeView.DrawNode +=  new DrawTreeNodeEventHandler(myTreeView_DrawNode);
    
        // Draws a node.
        private void myTreeView_DrawNode(
            object sender, DrawTreeNodeEventArgs e)
        {
            // Draw the background and node text for a selected node.
            if ((e.State & TreeNodeStates.Selected) != 0)
            {
                // Draw the background of the selected node. The NodeBounds
                // method makes the highlight rectangle large enough to
                // include the text of a node tag, if one is present.
                e.Graphics.FillRectangle(Brushes.Green, NodeBounds(e.Node));
    
                // Retrieve the node font. If the node font has not been set,
                // use the TreeView font.
                Font nodeFont = e.Node.NodeFont;
                if (nodeFont == null) nodeFont = ((TreeView)sender).Font;
    
                // Draw the node text.
                e.Graphics.DrawString(e.Node.Text, nodeFont, Brushes.White,
                    Rectangle.Inflate(e.Bounds, 2, 0));
            }
    
            // Use the default background and node text.
            else 
            {
                e.DrawDefault = true;
            }
    
            // If a node tag is present, draw its string representation 
            // to the right of the label text.
            if (e.Node.Tag != null)
            {
                e.Graphics.DrawString(e.Node.Tag.ToString(), tagFont,
                    Brushes.Yellow, e.Bounds.Right + 2, e.Bounds.Top);
            }
    
            // If the node has focus, draw the focus rectangle large, making
            // it large enough to include the text of the node tag, if present.
            if ((e.State & TreeNodeStates.Focused) != 0)
            {
                using (Pen focusPen = new Pen(Color.Black))
                {
                    focusPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
                    Rectangle focusBounds = NodeBounds(e.Node);
                    focusBounds.Size = new Size(focusBounds.Width - 1, 
                    focusBounds.Height - 1);
                    e.Graphics.DrawRectangle(focusPen, focusBounds);
                }
            }
        }
    


    In the Draw string command, you can add "\n" to wrap the string,

                e.Graphics.DrawString(e.Node.Tag.ToString()+"\n"+"helloworld", tagFont,
                    Brushes.Yellow, e.Bounds.Right + 2, e.Bounds.Top);
    



    Mike Zhang[MSFT]
    MSDN Community Support | Feedback to us
    Thursday, November 17, 2011 5:34 AM
  • I am writing to check the status of the issue on your side. 
    What about this problem now? 
    Would you mind letting us know the result of the suggestions?

    Mike Zhang[MSFT]
    MSDN Community Support | Feedback to us
    Saturday, November 19, 2011 11:32 AM
  • Hello,

    I am having issues with the vb.net conversion.  My compiler does not recognize nodebounds & tagfont.

        Private Sub TreeView1_DrawNode(sender As System.Object, e As System.Windows.Forms.DrawTreeNodeEventArgs) Handles TreeView1.DrawNode
            If (e.State And TreeNodeStates.Selected) <> 0 Then
                ' Draw the background of the selected node. The NodeBounds
                ' method makes the highlight rectangle large enough to
                ' include the text of a node tag, if one is present.
                e.Graphics.FillRectangle(Brushes.Green, <strong>NodeBounds</strong>(e.Node))
    
                ' Retrieve the node font. If the node font has not been set,
                ' use the TreeView font.
                Dim nodeFont As Font = e.Node.NodeFont
                If nodeFont Is Nothing Then
                    nodeFont = DirectCast(sender, TreeView).Font
                End If
    
                ' Draw the node text.
                e.Graphics.DrawString(e.Node.Text, nodeFont, Brushes.White, Rectangle.Inflate(e.Bounds, 2, 0))
            Else
    
                ' Use the default background and node text.
                e.DrawDefault = True
            End If
    
            ' If a node tag is present, draw its string representation 
            ' to the right of the label text.
            If e.Node.Tag IsNot Nothing Then
                e.Graphics.DrawString(e.Node.Tag.ToString(), <strong>tagFont</strong>, Brushes.Yellow, e.Bounds.Right + 2, e.Bounds.Top)
            End If
    
            ' If the node has focus, draw the focus rectangle large, making
            ' it large enough to include the text of the node tag, if present.
            If (e.State And TreeNodeStates.Focused) <> 0 Then
                Using focusPen As New Pen(Color.Black)
                    focusPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot
                    Dim focusBounds As Rectangle = <strong>NodeBounds</strong>(e.Node)
                    focusBounds.Size = New Size(focusBounds.Width - 1, focusBounds.Height - 1)
                    e.Graphics.DrawRectangle(focusPen, focusBounds)
                End Using
            End If
        End Sub
    

     


    ddd
    Monday, November 21, 2011 3:12 PM
  • :)

    You do not need to convert the code yourself, you can view the VB.NET version code in this page after you click on the VB tab:

    http://msdn.microsoft.com/en-us/library/system.windows.forms.treeview.drawnode.aspx#Y400

    The NodeBounds is a function you can see it at the bottom of this class.

        Private Function NodeBounds(ByVal node As TreeNode) As Rectangle
    
            ' Set the return value to the normal node bounds.
            Dim bounds As Rectangle = node.Bounds
            If (node.Tag IsNot Nothing) Then
    
                ' Retrieve a Graphics object from the TreeView handle
                ' and use it to calculate the display width of the tag.
                Dim g As Graphics = myTreeView.CreateGraphics()
                Dim tagWidth As Integer = CInt(g.MeasureString( _
                    node.Tag.ToString(), tagFont).Width) + 6
    
                ' Adjust the node bounds using the calculated value.
                bounds.Offset(tagWidth \ 2, 0)
                bounds = Rectangle.Inflate(bounds, tagWidth \ 2, 0)
                g.Dispose()
            End If
            Return bounds
        End Function 'NodeBounds
    

    The tagFont is a Font type field in this class, it is defined at the beginning of this class, you can find it in the demo, too:

    Private tagFont As New Font("Helvetica", 8, FontStyle.Bold)
    
    Best wishes,


    Mike Zhang[MSFT]
    MSDN Community Support | Feedback to us
    Tuesday, November 22, 2011 7:23 AM
  • I am writing to check the status of the issue on your side. 
    What about this problem now? 
    Would you mind letting us know the result of the suggestions?

    Mike Zhang[MSFT]
    MSDN Community Support | Feedback to us
    Thursday, November 24, 2011 9:49 AM
  • Hi Mike

    Just trying to wrap the text in a treeview node myself. Also using VB Net. From what I can see, your C# code only amends drawing for selected/highlighted text. My treeview contains some Nodes with names in excess of 100 characters. I want these to appear within certain bounds. I can't seem to set the drawing bounds of the node.

    Help is appreciated.

    Zstrom

    Sunday, February 09, 2014 12:03 AM