I implemented custom nodes by referring to https://docs.telerik.com/devtools/winforms/controls/treeview/working-with-nodes/custom-nodes.
I want to display an icon on the left, and on the right, display Title, line, and Text in order from top to bottom.
The first problem is that when displaying, the distance between line and Text is large, and adjusting the Padding and Margin of each element in CreateChildElements has no effect. See Figure 1 and Figure 1-1. If other items are commented out and only Title or Text is retained on the right, the display is correct, and it also displays correctly when TextWrap = true, as shown in Figure 2 and Figure 2-1.
The second problem is that when both Title and Text are displayed correctly, the display area is wrong when TextWrap = true, as shown in Figure 3,Figure 3-1.
The red rectangle in the figure indicates the error point.
Does anyone know where the problem lies?
I want to display an icon on the left, and on the right, display Title, line, and Text in order from top to bottom.
The first problem is that when displaying, the distance between line and Text is large, and adjusting the Padding and Margin of each element in CreateChildElements has no effect. See Figure 1 and Figure 1-1. If other items are commented out and only Title or Text is retained on the right, the display is correct, and it also displays correctly when TextWrap = true, as shown in Figure 2 and Figure 2-1.
The second problem is that when both Title and Text are displayed correctly, the display area is wrong when TextWrap = true, as shown in Figure 3,Figure 3-1.
The red rectangle in the figure indicates the error point.
Does anyone know where the problem lies?
protected override void CreateChildElements()
{
_root = new StackLayoutElement {
Orientation = Orientation.Horizontal,
StretchHorizontally = true,
StretchVertically = true,
NotifyParentOnMouseInput = true
};
_rightPanel = new StackLayoutElement
{
Orientation = Orientation.Vertical,
StretchHorizontally = true,
StretchVertically = true,
NotifyParentOnMouseInput = true,
ShouldHandleMouseInput = true
};
_rightPanel.Click += RightPanel_Click;
_titleEl = new LightVisualElement
{
ShouldHandleMouseInput = false,
NotifyParentOnMouseInput = true,
TextAlignment = System.Drawing.ContentAlignment.MiddleLeft,
TextWrap = true
};
_line = new LinePrimitive
{
BackColor = Color.Black,
Margin = new Padding(6, 4, 6, 4),
LineWidth = 1,
MinSize = new Size(0, 1)
};
_textEl = new LightVisualElement
{
ShouldHandleMouseInput = false,
NotifyParentOnMouseInput = true,
TextAlignment = System.Drawing.ContentAlignment.MiddleLeft,
Margin = new Padding(6, 0, 6, 2),
TextWrap = true,
AutoSize = true
};
_rightPanel.Children.Add(_titleEl);
_rightPanel.Children.Add(_line);
_rightPanel.Children.Add(_textEl);
_leftIconHost = new StackLayoutElement
{
Orientation = Orientation.Vertical,
MinSize = new Size(20, 20),
MaxSize = new Size(20, int.MaxValue),
StretchVertically = true,
NotifyParentOnMouseInput = true
};
_icon = new ImagePrimitive
{
Alignment = System.Drawing.ContentAlignment.MiddleCenter,
StretchHorizontally = false,
StretchVertically = true,
Margin = new Padding(6, 2, 6, 2)
};
_icon.ShouldHandleMouseInput = true;
_icon.NotifyParentOnMouseInput = true;
_icon.MouseEnter += Icon_MouseEnter;
_icon.MouseLeave += Icon_MouseLeave;
_icon.Click += Icon_Click;
_leftIconHost.Children.Add(_icon);
_root.Children.Add(_leftIconHost);
_root.Children.Add(_rightPanel);
this.Children.Add(_root);
}
I appreciate the provided code. I have reviewed the code, and I am not exactly sure where this space comes from. The provided code snippet is not enough to isolate this in a sample project. In general, when creating a custom node with custom elements, it will be better to arrange them manually. I would suggest checking the How to arrange elements in a custom RadTreeView node KB article that demonstrates this approach. You can use the code in the KB article as a starting point and modify it to fit in your scenario.