Custom TreeNode Icons (replace triangles) #6730

New issue

Open

opened 2023-08-17 09:19:23 +00:00 by qiaozhi-4 · 3 comments

qiaozhi-4 commented

2023-08-17 09:19:23 +00:00

(Migrated from github.com)

Version:1.89.8
Branch: imgui-master

Back-ends: imgui_impl_dx11.cpp + imgui_impl_win32.cpp (or specify if using a custom engine/back-end)
Compiler: Visual Studio 2019
Operating System: windows10

My English is not good, this is the translation of sorry.
I've looked through the questions, but I can't find them.
BeginnerDear ImGui ,I want to replace the triangle in front of the "ImGui::TreeNode" ,I have tried using "ImFontConfig.GlyphOffset = ImVec2(-18,3); // 设置字体偏移 "to block,But if the icon is translucent, it will not look good

Standalone, minimal, complete and verifiable example: (see https://github.com/ocornut/imgui/issues/2261)

			// 开始导航栏
			ImGui::BeginChild("Navigation", ImVec2(200, -1), true);
			if (ImGui::TreeNode(u8"\ue001" "Page 1")) {
				ImGui::Button(ICON_FA_SEARCH " Search");
				if (ImGui::TreeNode("Subpage 1.1")) {
					if (ImGui::Button("Button 1.1.1")) {
						// 处理按钮点击
					}
					ImGui::TreePop();
				}
				if (ImGui::TreeNode("Subpage 1.2")) {
					if (ImGui::Button("Button 1.2.1")) {
						// 处理按钮点击
					}
					ImGui::TreePop();
				}
				ImGui::TreePop();
			}

			if (ImGui::TreeNode("Page 2")) {
				if (ImGui::Button("Button 2.1")) {
					// 处理按钮点击
				}
				ImGui::TreePop();
			}

			// 结束导航栏
			ImGui::EndChild();

Version:1.89.8 Branch: imgui-master Back-ends: imgui_impl_dx11.cpp + imgui_impl_win32.cpp _(or specify if using a custom engine/back-end)_ Compiler: Visual Studio 2019 Operating System: windows10 My English is not good, this is the translation of sorry. I've looked through the questions, but I can't find them. BeginnerDear ImGui ,I want to replace the triangle in front of the "ImGui::TreeNode" ,I have tried using "ImFontConfig.GlyphOffset = ImVec2(-18,3); // 设置字体偏移 "to block,But if the icon is translucent, it will not look good ![I%5C)Q)DT YN@11V1K_6(1Y](https://github.com/ocornut/imgui/assets/82357518/bf0c032c-51cc-4127-be2f-8438b5c90329) **Standalone, minimal, complete and verifiable example:** _(see https://github.com/ocornut/imgui/issues/2261)_ ``` // 开始导航栏 ImGui::BeginChild("Navigation", ImVec2(200, -1), true); if (ImGui::TreeNode(u8"\ue001" "Page 1")) { ImGui::Button(ICON_FA_SEARCH " Search"); if (ImGui::TreeNode("Subpage 1.1")) { if (ImGui::Button("Button 1.1.1")) { // 处理按钮点击 } ImGui::TreePop(); } if (ImGui::TreeNode("Subpage 1.2")) { if (ImGui::Button("Button 1.2.1")) { // 处理按钮点击 } ImGui::TreePop(); } ImGui::TreePop(); } if (ImGui::TreeNode("Page 2")) { if (ImGui::Button("Button 2.1")) { // 处理按钮点击 } ImGui::TreePop(); } // 结束导航栏 ImGui::EndChild(); ```

GamingMinds-DanielC commented

2023-08-17 10:01:38 +00:00

(Migrated from github.com)

The triangle is just a real geometric triangle being rendered, it is not from the font. There is a way if you don't mind making custom versions of functions, but it isn't elegant. You could make a custom copy of TreeNode, from there call a custom copy of TreeNodeBehavior. In that custom version, look for calls to RenderArrow and replace them. I don't recommend doing this as it would make updating to newer versions of the library more difficult, but if you really must replace the arrow you can.

The triangle is just a real geometric triangle being rendered, it is not from the font. There is a way if you don't mind making custom versions of functions, but it isn't elegant. You could make a custom copy of `TreeNode`, from there call a custom copy of `TreeNodeBehavior`. In that custom version, look for calls to `RenderArrow` and replace them. I don't recommend doing this as it would make updating to newer versions of the library more difficult, but if you really must replace the arrow you can.

👍 2

qiaozhi-4 commented

2023-08-17 10:22:47 +00:00

(Migrated from github.com)

The triangle is just a real geometric triangle being rendered, it is not from the font. There is a way if you don't mind making custom versions of functions, but it isn't elegant. You could make a custom copy of TreeNode, from there call a custom copy of TreeNodeBehavior. In that custom version, look for calls to RenderArrow and replace them. I don't recommend doing this as it would make updating to newer versions of the library more difficult, but if you really must replace the arrow you can.

Thank you for your suggestion, is there a function with similar function (click to expand the subitem), and then it only shows text without the icon

> The triangle is just a real geometric triangle being rendered, it is not from the font. There is a way if you don't mind making custom versions of functions, but it isn't elegant. You could make a custom copy of `TreeNode`, from there call a custom copy of `TreeNodeBehavior`. In that custom version, look for calls to `RenderArrow` and replace them. I don't recommend doing this as it would make updating to newer versions of the library more difficult, but if you really must replace the arrow you can. Thank you for your suggestion, is there a function with similar function (click to expand the subitem), and then it only shows text without the icon

ocornut commented

2023-08-17 10:48:27 +00:00

(Migrated from github.com)

Linking to #6517 #6090 #2431 #2235