TGUI Forum

General Category => Help requests => Topic started by: Kvaz1r on 20 March 2020, 12:48:25

Title: How to create listView with width equal of window and without redundant scroll?
Post by: Kvaz1r on 20 March 2020, 12:48:25
I want to create listview that will place full width of window but without scrollbar when it's redundant.

MCVE:

Code: [Select]
#include <TGUI/TGUI.hpp>

class MyFrame
{
public:
    MyFrame()
    {
        window.create(sf::VideoMode(800, 600), "MCVE");
        gui.setTarget(window);

        auto listView = tgui::ListView::create();
        listView->setSize(window.getSize().x, window.getSize().y);

        listView->addColumn(L"Key");
        listView->addColumn(L"Value");

        listView->setColumnWidth(0, window.getSize().x * 0.2f);
        listView->setColumnWidth(1, window.getSize().x * 0.8f);

        gui.add(listView);
    }
    void main()
    {
        while (window.isOpen())
        {
            sf::Event event;
            while (window.pollEvent(event))
            {
                if (event.type == sf::Event::Closed)
                    window.close();
                gui.handleEvent(event);
            }
            window.clear();
            gui.draw();
            window.display();
        }
    }
    sf::RenderWindow window;
    tgui::Gui gui;
};

int main()
{
    MyFrame().main();
}

Is it possible?
Title: Re: How to create listView with width equal of window and without redundant scroll?
Post by: texus on 20 March 2020, 18:12:55
You can have the last column fill the remaining space instead of manually setting the width (the configured width will be used as minimum column width, it could be set to 0 to make the minimum width of the column equal to the width of the "Value" string):
listView->setColumnWidth(0, window.getSize().x * 0.2f);
listView->setColumnWidth(1, 0);
listView->setExpandLastColumn(true);

Alternatively, you would have to manually subtract all pixels that are drawn next to your columns. Each column has an extra pixel next to it (the column separator). Even your last column has this, unless you set setExpandLastColumn to true. The default white theme also has a border of 1 pixel on each side. So the code you would need looks like this:
const double clientWidth = window.getSize().x - listView->getRenderer()->getBorders().getLeft() - listView->getRenderer()->getBorders().getRight();
listView->setColumnWidth(0, clientWidth * 0.2f - listView->getSeparatorWidth());
listView->setColumnWidth(1, clientWidth * 0.8f - listView->getSeparatorWidth());
Title: Re: How to create listView with width equal of window and without redundant scroll?
Post by: Kvaz1r on 20 March 2020, 18:22:39
Excellent, first option is easy so I'll go with it ;-)