How to seperate background between 2 adjacent nodes

[The GridLock]

These are 2 adjacent nodes on my treeview.

you can see their green background merges! I want to be able to separate them to make them look better (the region between 2 nodes can transparent) by changing the height of the green background (narrowing for each node) or creating a certain distance between the 2 nodes. please give me the solution!

.

[Vijayalakshmi Roopkumar]

Hi Khanh 

 

Thank you for your contacting Syncfusion Support. 

 

We checked the reported requirement that you want to maintain the distance between two nodes in order to maintain accurate look for each node background customization. However , in our TreeViewAdv, we don't have a direct support to achieve your requirement. We will analyze about its feasibility and update you the details on 6th Nov, 2020. 

 

Please let us know if you have any other concerns. 

 

Regards, 

Vijayalakshmi VR 

[Vijayalakshmi Roopkumar]

Hi Khanh 

 

Thank you for your patience. 

 

We have checked the reported requirement that you want to maintain the distance between nodes to show the difference of background applied for particular control. In order to achieve your requirement, you can use the BeforeNodePaint event which will fire before when the nodes get drawn . Please find the code below: 

 

Code:[C#] 

 

 

//Customize Background of Nodes 

private void TreeViewAdv1_BeforeNodePaint1(object sender, Syncfusion.Windows.Forms.Tools.TreeNodeAdvPaintEventArgs e) 

{ 

LinearGradientBrush lBrush = new LinearGradientBrush(e.Node.Bounds, Color.Green, Color.Yellow, LinearGradientMode.Horizontal); 

e.Graphics.FillRectangle(lBrush, e.Node.Bounds); 

e.Graphics.DrawRectangle(new Pen(Color.Red), e.Node.Bounds); 

} 

 

 

In our sample, we have maintained border between each nodes: 

 

Sample: https://www.syncfusion.com/downloads/support/forum/159345/ze/TreeViewAdv_customization713821419 

 

Please try this suggestion and let us know if it is helps. 

 

Regards, 

Vijayalakshmi VR 

[The GridLock]

that's it Vijayalakshmi

Thanks!

[Elakkiya Muthukumarasamy]

Hi Khanh, 

 

Most welcome. 

 

We are glad to know that the reported issue is resolved at your end. Please get back to us if you need any other assistance. 

 

Regards, 

Elakkiya 

[Peter Groft]

To separate the background between two adjacent nodes, you can use a variety of techniques depending on the context and tools you are using. Here are a few general methods you can try:

Use a border or stroke: One way to separate the background between two nodes is to give each node a different colored border or stroke. This creates a clear visual boundary between the two nodes and makes them look distinct. You can adjust the thickness, color, and style of the border to suit your design needs.

Add a background color or pattern: Another way to separate the background between two nodes is to give each node a different background color or pattern. This is especially useful if you want to create a visual hierarchy or emphasize one node over the other. You can experiment with different colors, gradients, or patterns to find the one that works best for your design.

Use whitespace: Sometimes, the simplest way to separate two nodes is to use whitespace. By adding some space between the two nodes, you can create a visual break that makes them look distinct. This is a good option if you want a clean and minimalist design.

Apply shading or texture: You can also use shading or texture to separate the background between two nodes. This is a good option if you want to add some depth or visual interest to your design. You can experiment with different shades, gradients, or textures to find the one that works best for your design.

Regards,
Peter