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

  • 2 Replies
  • 37 Views
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?

*

texus

  • *****
  • 1499
    • View Profile
    • Texus's Blog
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());

Excellent, first option is easy so I'll go with it ;-)