Adding scollbar to a panel?

Started by starkhorn, 11 February 2015, 00:33:06


Is is possible to add a vertical and horizontal scrollbar to a panel? I don't want to use a child window as I don't want the user to move the panel.
If so, is there any example code that shows how to do this?

Many thanks in advance.


You can use the scrollbar anywhere, you actually have to handle everything it does yourself.

Here is an example of a panel containing 5 pictures and a scrollbar to scroll through them. The comments in the code explain what each part does. I'll probably add this to the example code on my website later today.
Storing previousScrolbarValue is needed to figure out how much to move all widgets. But knowing the original location of one of the widgets and calculating the distant position based on that will work just as well.
Code (cpp) Select
#include <TGUI/TGUI.hpp>

int previousScrolbarValue = 0;

// Function that will be called when scrolling
void scrollPanel(tgui::Panel::Ptr panel, const tgui::Callback& callback)
    int distanceToMove = previousScrolbarValue - callback.value;

    // Move all widgets that are inside the panel
    for (auto& widget : panel->getWidgets())
        widget->setPosition(widget->getPosition().x, widget->getPosition().y + distanceToMove);

    previousScrolbarValue = callback.value;

int main()
    sf::RenderWindow window(sf::VideoMode(800, 600), "TGUI window");
    tgui::Gui gui(window);

    if (gui.setGlobalFont("TGUI/fonts/DejaVuSans.ttf") == false)
        return 1;

    // Create the panel
    tgui::Panel::Ptr panel(gui);
    panel->setPosition(50, 50);
    panel->setSize(240, 360);
    panel->setBackgroundColor(sf::Color(200, 200, 200));

    // Add some widgets to it (image1.png to image5.png)
    for (unsigned int i = 1; i <= 5; ++i)
        tgui::Picture::Ptr pic(*panel);
        pic->load("image" + std::to_string(i) + ".png");
        pic->setSize(240, 180);
        pic->setPosition(0, (i-1) * 180);

    // Add a scrollbar
    // Note that we add it to the gui and not to the panel.
    // Doing so allows us to easily move everything inside the panel when scrolling
    tgui::Scrollbar::Ptr scrollbar(gui);
    scrollbar->setSize(20, 360);
    scrollbar->setPosition(panel->getPosition() + sf::Vector2f(panel->getSize().x, 0));
    scrollbar->setLowValue(360); // Viewable area (height of the panel)
    scrollbar->setMaximum(5 * 180); // Total area (height of the 5 images)

    // Call the scrollPanel function that we defined above when scrolling
    scrollbar->bindCallbackEx(std::bind(scrollPanel, panel, std::placeholders::_1), tgui::Scrollbar::ValueChanged);

    // Mainloop
    while (window.isOpen())
        sf::Event event;
        while (window.pollEvent(event))
            if (event.type == sf::Event::Closed)



    return 0;


Awesome - thank you so much yet again Texus.