Verwendung gängiger ImGui Steuerelemente

Zuerst entfernen wir alle Steuerelemente aus der vorherigen Lektion und erstellen ein einfaches leeres Fenster ohne jegliche Komponenten.

#pragma comment(linker, "/SUBSYSTEM:windows /ENTRY:mainCRTStartup")
#pragma execution_character_set("utf-8")

#include <GLFW/glfw3.h>
#include "imgui.h"
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <cstdio>
#include <string>
#include <fstream>
#include <windows.h>
#include <io.h>
#include <commdlg.h>  // Benötigter Header für Dateidialoge

#include <iostream>
using namespace std;

// Schrift einstellen, um Fragezeichen-Zeichenstörungen bei Texteingabe zu beheben
// Füge den passenden Schriftpfad für dein Betriebssystem hinzu oder nutze die Standardschrift des Systems
void SetupFont(ImGuiIO& io)
{
    // Üblicher Pfad für chinesische Schrift unter Windows
    const char* font_path = "C:/Windows/Fonts/msyh.ttc"; // Microsoft YaHei
    float font_size = 18.0f;

    // Lade gängigen Bereich vereinfachter chinesischer Zeichen
    ImVector<ImWchar> ranges;
    ImFontGlyphRangesBuilder builder;
    builder.AddRanges(io.Fonts->GetGlyphRangesChineseSimplifiedCommon());
    builder.BuildRanges(&ranges);

    // Benutzerdefinierte Schrift laden
    io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, ranges.Data);

    // Bei Bedarf für mehrsprachige Unterstützung ergänzen:
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesJapanese());
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesKorean());
}


int main()
{

    if (!glfwInit())
    {
        printf("GLFW Initialisierung fehlgeschlagen\n");
        return -1;
    }

    const char* glsl_version = "#version 330";
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    GLFWwindow* window = glfwCreateWindow(800, 600, "Fenstertitel", nullptr, nullptr);
    if (!window)
    {
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSwapInterval(1);

    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    ImGui::StyleColorsLight();

    SetupFont(io); // Schrift laden, um Zeichenstörungen zu beheben

    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init(glsl_version);

    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        ImGui::SetNextWindowPos(ImVec2(0, 0));
        ImGui::SetNextWindowSize(io.DisplaySize);

        ImGuiWindowFlags window_flags = ImGuiWindowFlags_NoDecoration
            | ImGuiWindowFlags_NoMove
            | ImGuiWindowFlags_NoResize
            | ImGuiWindowFlags_NoSavedSettings;

        ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 0.0f);
        ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);

        ImGui::Begin("Fenstertitel", nullptr, window_flags);

        // Bereich für UI-Steuerelemente beginnen

        // Bereich Ende

        ImGui::End();
        ImGui::PopStyleVar(2);

        ImGui::Render();
        int width, height;
        glfwGetFramebufferSize(window, &width, &height);
        glViewport(0, 0, width, height);
        glClearColor(0.12f, 0.12f, 0.12f, 1.f);
        glClear(GL_COLOR_BUFFER_BIT);
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

        glfwSwapBuffers(window);
    }

    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}Code-Sprache: C++ (cpp)

Im Folgenden erstellen wir nacheinander alle ImGui-Steuerelemente.

Text-Steuerelement

ImGui::Text("Hallo, Welt %d", 123);Code-Sprache: PHP (php)

Der Text wird von links nach rechts beginnend an der oberen linken Ecke ausgegeben.

Schaltfläche

        // Schaltfläche anzeigen, Code im Block wird bei Klick ausgeführt
        if (ImGui::Button("Speichern"))
        {
            // Dieser Code läuft nach dem Klick
        }Code-Sprache: PHP (php)

Es gibt sehr viele verschiedene Steuerelemente. Sehen wir uns das vollständige Beispiel unten an, das alle gängigen Komponenten auf einmal rendert.

#pragma comment(linker, "/SUBSYSTEM:windows /ENTRY:mainCRTStartup")
#pragma execution_character_set("utf-8")

#include <GLFW/glfw3.h>
#include "imgui.h"
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <cstdio>
#include <string>
#include <cstring>
#include <windows.h>
#include <io.h>
#include <iostream>
using namespace std;

// Schrift einstellen, um Fragezeichen-Zeichenstörungen bei Texteingabe zu beheben
// Füge den passenden Schriftpfad für dein Betriebssystem hinzu oder nutze die Standardschrift des Systems
void SetupFont(ImGuiIO& io)
{
    // Üblicher Pfad für chinesische Schrift unter Windows
    const char* font_path = "C:/Windows/Fonts/msyh.ttc"; // Microsoft YaHei
    float font_size = 18.0f;

    // Lade gängigen Bereich vereinfachter chinesischer Zeichen
    ImVector<ImWchar> ranges;
    ImFontGlyphRangesBuilder builder;
    builder.AddRanges(io.Fonts->GetGlyphRangesChineseSimplifiedCommon());
    builder.BuildRanges(&ranges);

    // Benutzerdefinierte Schrift laden
    io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, ranges.Data);

    // Bei Bedarf für mehrsprachige Unterstützung ergänzen:
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesJapanese());
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesKorean());
}

// ===================== Globale Variablen zur Bindung an Steuerelemente =====================
char buf[256] = "Testtext für Einzeileingabe";
char bufMulti[1024] = "Mehrzeilentextfeld\nZweite Zeile\nDritte Zeile Chinesisch-Test";
float fVal = 0.5f;
int iVal = 50;
bool checkBox1 = false;
bool checkBox2 = true;
int radioIdx = 0;
int comboSel = 0;
ImVec4 color = ImVec4(0.2f, 0.7f, 0.9f, 1.0f);
bool showPopupWin = false;
bool showModal = false;
int tabIndex = 0;
float progress = 0.35f;

int main()
{
    SetConsoleOutputCP(65001);
    if (!glfwInit())
    {
        printf("GLFW Initialisierung fehlgeschlagen\n");
        return -1;
    }

    const char* glsl_version = "#version 330";
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    GLFWwindow* window = glfwCreateWindow(1000, 700, "Demo aller gängigen ImGui-Steuerelemente", nullptr, nullptr);
    if (!window)
    {
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSwapInterval(1);

    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    ImGui::StyleColorsLight();

    SetupFont(io);

    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init(glsl_version);

    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        ImGui::SetNextWindowPos(ImVec2(0, 0));
        ImGui::SetNextWindowSize(io.DisplaySize);

        ImGuiWindowFlags window_flags = ImGuiWindowFlags_NoDecoration
            | ImGuiWindowFlags_NoMove
            | ImGuiWindowFlags_NoResize
            | ImGuiWindowFlags_NoSavedSettings;

        ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 0.0f);
        ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);

        ImGui::Begin("Hauptfenster", nullptr, window_flags);

        // ========== 1. Oberste Menüleiste ==========
        if (ImGui::BeginMenuBar())
        {
            if (ImGui::BeginMenu("Datei"))
            {
                if (ImGui::MenuItem("Neu", "Ctrl+N")) {}
                if (ImGui::MenuItem("Speichern", "Ctrl+S")) {}
                ImGui::Separator();
                if (ImGui::MenuItem("Beenden"))
                    glfwSetWindowShouldClose(window, true);
                ImGui::EndMenu();
            }
            if (ImGui::BeginMenu("Werkzeuge"))
            {
                if (ImGui::MenuItem("Popup-Beispiel öffnen"))
                    showPopupWin = true;
                ImGui::EndMenu();
            }
            ImGui::EndMenuBar();
        }
        ImGui::Spacing();

        // ========== 2. Basis-Text-Steuerelemente ==========
        ImGui::Text("===== Text-Steuerelemente =====");
        ImGui::Text("Normaler Text Hallo Welt %d", 123);
        ImGui::TextColored(ImVec4(1, 0, 0, 1), "Roter farbiger Text");
        ImGui::TextDisabled("Grauer deaktivierter Text");
        ImGui::BulletText("Aufzählungspunkt Text 1");
        ImGui::BulletText("Aufzählungspunkt Text 2");
        ImGui::Spacing();

        // ========== 3. Schaltflächen-Gruppe ==========
        ImGui::Text("===== Schaltflächen =====");
        if (ImGui::Button("Normale Schaltfläche"))
            cout << "Normale Schaltfläche geklickt" << endl;
        ImGui::SameLine();
        if (ImGui::SmallButton("Kleine Schaltfläche"))
            cout << "Kleine Schaltfläche geklickt" << endl;
        ImGui::SameLine();
        if (ImGui::Button("Breite Schaltfläche", ImVec2(120, 0)))
            cout << "Benutzerdefinierte breite Schaltfläche geklickt" << endl;
        ImGui::Spacing();

        // ========== 4. Eingabefelder ==========
        ImGui::Text("===== Eingabesteuerelemente =====");
        ImGui::InputText("Einzeileingabe", buf, IM_ARRAYSIZE(buf));
        ImGui::InputTextWithHint("Eingabe mit Hinweis", "Inhalt eingeben...", buf, IM_ARRAYSIZE(buf));
        ImGui::InputFloat("Gleitkommazahl-Eingabe", &fVal);
        ImGui::InputInt("Ganzzahl-Eingabe", &iVal);
        ImGui::Spacing();
        ImGui::Text("Mehrzeilentextfeld:");
        ImVec2 multiSize = ImVec2(500, 80);
        ImGui::InputTextMultiline("##multi", bufMulti, IM_ARRAYSIZE(bufMulti), multiSize);
        ImGui::Spacing();

        // ========== 5. Schieberegler & Ziehleisten ==========
        ImGui::Text("===== Schieberegler / Ziehelemente =====");
        ImGui::SliderFloat("Gleitkomma-Schieberegler", &fVal, 0.0f, 1.0f);
        ImGui::SliderInt("Ganzzahl-Schieberegler", &iVal, 0, 100);
        ImGui::DragFloat("Float-Ziehleiste", &fVal, 0.01f);
        ImGui::DragInt("Int-Ziehleiste", &iVal, 1.0f);
        ImGui::Spacing();

        // ========== 6. Checkboxen & Radiobuttons ==========
        ImGui::Text("===== Checkboxen & Radiobuttons =====");
        ImGui::Checkbox("Checkbox A", &checkBox1);
        ImGui::Checkbox("Checkbox B", &checkBox2);
        ImGui::Text("Radiogruppe:");
        ImGui::RadioButton("Option 1", &radioIdx, 0); ImGui::SameLine();
        ImGui::RadioButton("Option 2", &radioIdx, 1); ImGui::SameLine();
        ImGui::RadioButton("Option 3", &radioIdx, 2);
        ImGui::Spacing();

        // ========== 7. Dropdown Combo ==========
        ImGui::Text("===== Dropdown Combo =====");
        const char* items[] = { "Option A", "Option B", "Option C", "Option D" };
        ImGui::Combo("Dropdown-Auswahl", &comboSel, items, IM_ARRAYSIZE(items));
        ImGui::Spacing();

        // ========== 8. Farbauswahl ==========
        ImGui::Text("===== Farbeditor =====");
        ImGui::ColorEdit4("RGBA-Farbe", (float*)&color);
        ImGui::ColorButton("Farbvorschau-Feld", color);
        ImGui::Spacing();

        // ========== 9. Fortschrittsbalken & Trennlinien ==========
        ImGui::Text("===== Fortschrittsbalken / Trennlinien =====");
        ImGui::ProgressBar(progress, ImVec2(300, 0));
        ImGui::Text("Fortschrittswert: %.2f", progress);
        ImGui::Separator(); // Horizontale Trennlinie
        ImGui::Spacing();

        // ========== 10. Einklappbare Baumknoten ==========
        ImGui::Text("===== Einklappbare Baum-Panels =====");
        if (ImGui::CollapsingHeader("Einklappbares Panel – Klicken zum Ausklappen"))
        {
            ImGui::Text("Inhalt des inneren Panels");
            ImGui::Button("Schaltfläche im Panel");
        }
        if (ImGui::TreeNode("Baumknoten"))
        {
            ImGui::BulletText("Unterpunkt 1");
            ImGui::BulletText("Unterpunkt 2");
            ImGui::TreePop();
        }
        ImGui::Spacing();

        // ========== 11. Tab-Leiste TabBar ==========
        ImGui::Text("===== Tabs / TabBar =====");
        ImGui::BeginTabBar("TabBar");
        if (ImGui::BeginTabItem("Tab 1"))
        {
            ImGui::Text("Inhalt von Tab 1");
            ImGui::EndTabItem();
        }
        if (ImGui::BeginTabItem("Tab 2"))
        {
            ImGui::Text("Inhalt von Tab 2");
            ImGui::EndTabItem();
        }
        ImGui::EndTabBar();
        ImGui::Spacing();

        // ========== 12. Tabelle Table ==========
        ImGui::Text("===== Tabellen-Steuerelement =====");
        if (ImGui::BeginTable("table1", 3, ImGuiTableFlags_Borders))
        {
            ImGui::TableSetupColumn("ID");
            ImGui::TableSetupColumn("Name");
            ImGui::TableSetupColumn("Wert");
            ImGui::TableHeadersRow();

            // Zeile 1
            ImGui::TableNextRow();
            ImGui::TableNextColumn(); ImGui::Text("1");
            ImGui::TableNextColumn(); ImGui::Text("Test A");
            ImGui::TableNextColumn(); ImGui::Text("%.2f", fVal);
            // Zeile 2
            ImGui::TableNextRow();
            ImGui::TableNextColumn(); ImGui::Text("2");
            ImGui::TableNextColumn(); ImGui::Text("Test B");
            ImGui::TableNextColumn(); ImGui::Text("%d", iVal);
            ImGui::EndTable();
        }
        ImGui::Spacing();

        // ========== 13. Rechtsklick-Kontextmenü ==========
        ImGui::Text("===== Rechtsklick-Menü (Rechtsklick auf diesen Text) =====");
        if (ImGui::IsItemClicked(ImGuiMouseButton_Right))
            ImGui::OpenPopup("RightMenu");
        if (ImGui::BeginPopup("RightMenu"))
        {
            ImGui::MenuItem("Kontextpunkt 1");
            ImGui::MenuItem("Kontextpunkt 2");
            ImGui::Separator();
            ImGui::MenuItem("Menü schließen");
            ImGui::EndPopup();
        }
        ImGui::Spacing();

        // ========== 14. Normales Popup-Fenster (nicht modal) ==========
        if (showPopupWin)
        {
            ImGui::OpenPopup("PopupWindow");
            showPopupWin = false;
        }
        if (ImGui::BeginPopup("PopupWindow"))
        {
            ImGui::Text("Nicht-modales Popup, Hauptfenster bleibt bedienbar");
            if (ImGui::Button("Popup schließen"))
                ImGui::CloseCurrentPopup();
            ImGui::EndPopup();
        }

        // ========== 15. Modaler Dialog ==========
        if (ImGui::Button("Modalen Dialog öffnen"))
            showModal = true;
        if (showModal)
        {
            ImGui::OpenPopup("ModalDialog");
            showModal = false;
        }
        if (ImGui::BeginPopupModal("Modaler Dialog", nullptr, ImGuiWindowFlags_AlwaysAutoResize))
        {
            ImGui::Text("Ein modaler Dialog sperrt das Hauptfenster; er muss zuerst geschlossen werden");
            if (ImGui::Button("OK", ImVec2(120, 0)))
            {
                ImGui::CloseCurrentPopup();
            }
            ImGui::EndPopup();
        }

        ImGui::End();
        ImGui::PopStyleVar(2);

        ImGui::Render();
        int width, height;
        glfwGetFramebufferSize(window, &width, &height);
        glViewport(0, 0, width, height);
        glClearColor(0.12f, 0.12f, 0.12f, 1.f);
        glClear(GL_COLOR_BUFFER_BIT);
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

        glfwSwapBuffers(window);
    }

    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}Code-Sprache: C++ (cpp)

Sie können sich langsam mit der Verwendung jedes Steuerelements vertraut machen.

Die Bibliothek an Steuerelementen ist sehr umfangreich und deckt sämtliche Anforderungen für die Entwicklung einfacher Hilfsprogramme vollständig ab. Es gibt einklappbare Bäume, Tab-Seiten, alle Formular-Steuerelemente: Ein-/Mehrzeilentextfelder, Radiobuttons, Checkboxen, Dropdowns, Fortschrittsbalken, einklappbare Panels, Tabellen, Rechtsklick-Menüs, Farbauswahl und vieles mehr. Probieren Sie sie einfach selbst aus.