How to create listView with width equal of window and without redundant scroll?

Started by Kvaz1r, 20 March 2020, 12:48:25

Kvaz1r

I want to create listview that will place full width of window but without scrollbar when it's redundant.

MCVE:

#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?

texus

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):
Code (cpp) Select
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:
Code (cpp) Select
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());

Kvaz1r