Looking for a tile layout kind of widget.
Looking for a tile layout kind of widget.
I'm looking for a widget that can show something like this,
This is a screenshot I found on just a random website. But I want something that can show those rectangular kind of tiles, that can be clicked on, like big folders in a file manager for example, that can also display images and some text below the tile, like folder name. It doesn't have to be exact but close.
This is a screenshot I found on just a random website. But I want something that can show those rectangular kind of tiles, that can be clicked on, like big folders in a file manager for example, that can also display images and some text below the tile, like folder name. It doesn't have to be exact but close.
Re: Looking for a tile layout kind of widget.
There is nothing in wxWidgets that does this, and i also don't know any external component for it.
I'd use a wxHtmlWindow for that. Even with its limitations, it's sufficient for this function and lightweight compared to a wxWebView control.
I'd use a wxHtmlWindow for that. Even with its limitations, it's sufficient for this function and lightweight compared to a wxWebView control.
Use the source, Luke!
Re: Looking for a tile layout kind of widget.
Interesting, thanks for suggestion. Looks like for using wxHtmlWindow I also have to write some HTML. My HTML skills are very basic but I can do that.
Is it also possible to use normal widgets like wxButton or wxTextCtrl for example, inside a wxHtmlWindow?
Re: Looking for a tile layout kind of widget.
Theoretically yes, but i requires jumping through some hoops and i would advise against it anyway. If you want to use standard controls, you could just build the layout using sizers, wxStaticBitmaps, and wxStaticTexts etc. But it you have many items to display, you could run into the Windows handle limit.
But you can react to clicks in a wxHtmlWindow by using HTML links.
Use the source, Luke!
Re: Looking for a tile layout kind of widget.
If all that you need are images and text and we are talking about reasonable amount of them - I'd start with just wxFlexGridSizer with wxBitmapButtons and wxStaticTexts inside. And by user click provide some pop-up modal dialog with additional info. But without knowing use-case it's hard to tell something specific.
Re: Looking for a tile layout kind of widget.
I see, I'm basically trying to make a GUI frontend for the package manager of the Linux distribution that I'm using an app store basically. So there would be a lot of images and control needed to show in a single page, as there are a lot of software in the repositories, and I want to show them as tiles, so if user clicks on a software tile, it then opens its info sort of page, that can have information about that software, screenshots reviews and all. I initially started wxListCtrl with wxLC_ICON as the style, but the icons are very small, I want larger size, that's why I was looking for something like how steam has those tiles, as it was what I had in mind for how a app store would look like.doublemax wrote: ↑Sun Sep 19, 2021 4:36 pm Theoretically yes, but i requires jumping through some hoops and i would advise against it anyway. If you want to use standard controls, you could just build the layout using sizers, wxStaticBitmaps, and wxStaticTexts etc. But it you have many items to display, you could run into the Windows handle limit.
But you can react to clicks in a wxHtmlWindow by using HTML links.
Re: Looking for a tile layout kind of widget.
wxBitmapButton seems like a good option, but in the previous post doublemax said, it is possible run in to window handle limit, and I will be needing a lot of buttons. I am basically trying to make a app store for the operating system that I'm using.Kvaz1r wrote: ↑Sun Sep 19, 2021 4:43 pm If all that you need are images and text and we are talking about reasonable amount of them - I'd start with just wxFlexGridSizer with wxBitmapButtons and wxStaticTexts inside. And by user click provide some pop-up modal dialog with additional info. But without knowing use-case it's hard to tell something specific.
Re: Looking for a tile layout kind of widget.
You can update bitmaps when user scroll your window up or down, I don't think you want show at once more than 40 bitmaps. This is exactly what do wxListCtrl under virtual mode.
Re: Looking for a tile layout kind of widget.
I see, this looks interesting, I have never defined the window to be scroll-able manually. But I did find this widget called wxVScrolledWindow, so I replaced the top wxPanel with wxVScrolledWindow, everything is working, but I don't understand how do I tell it to show only certain number of buttons at a time, and allow the rest to be shown as the user scrolls down.Kvaz1r wrote: You can update bitmaps when user scroll your window up or down, I don't think you want show at once more than 40 bitmaps. This is exactly what do wxListCtrl under virtual mode.
I had this going on so far, just used a single icon for Firefox as a example,
Here is of code for what I have in the above screenshot,
Code: Select all
cMainFrame::cMainFrame()
:wxFrame(NULL, wxID_ANY, "PacStore", wxDefaultPosition, wxSize(800, 600))
{
SetMinSize(wxSize(800, 600));
m_MainSizer = new wxBoxSizer(wxVERTICAL);
m_ScrolledSizer = new wxBoxSizer(wxVERTICAL);
m_TilesSizer = new wxGridSizer(m_nFieldWidth, m_nFieldHeight, 20, 20);
// m_Panel = new wxPanel(this, wxID_ANY);
m_ScrolledWindow = new wxVScrolledWindow(this, wxID_ANY, wxDefaultPosition, wxDefaultSize);
m_ScrolledWindow->SetVirtualSize(800, 600);
m_Tiles = new wxBitmapButton*[m_nFieldWidth * m_nFieldHeight];
for (int x = 0; x < m_nFieldWidth; x++)
{
for (int y = 0; y < m_nFieldHeight; y++)
{
m_Tiles[y * m_nFieldWidth + x] = new wxBitmapButton(m_ScrolledWindow, GET_BUTTON + (y * m_nFieldWidth + x),
wxBitmap("/home/apoorv/Downloads/firefox_icon_n.gif", wxBITMAP_TYPE_GIF),
wxDefaultPosition, wxSize(20, 40));
m_TilesSizer->Add(m_Tiles[y * m_nFieldWidth + x], 1, wxALL | wxEXPAND);
m_Tiles[y * m_nFieldWidth + x]->Bind(wxEVT_BUTTON, &cMainFrame::OnClickButton, this);
}
}
m_MainSizer->Add(m_ScrolledWindow, 1, wxALL | wxEXPAND, 2);
m_ScrolledSizer->Add(m_TilesSizer, 1, wxALL | wxEXPAND, 2);
this->SetSizer(m_MainSizer);
this->Layout();
this->Center(wxBOTH);
m_ScrolledWindow->SetSizer(m_ScrolledSizer);
m_ScrolledSizer->Fit(m_ScrolledWindow);
m_ScrolledSizer->SetSizeHints(m_ScrolledWindow);
m_ScrolledSizer->Layout();
}
Re: Looking for a tile layout kind of widget.
Ok, it seems that I was wrong - there isn't a way to move sizers inside wxVScrolledWindow.
What if draw only bitmaps? What should happen when user click on bitmap?
What if draw only bitmaps? What should happen when user click on bitmap?
Re: Looking for a tile layout kind of widget.
Okay, I got it somewhat working with wxScrolledWindow, I found this viewtopic.php?t=44256 post, about a similar problem as mine. I basically added the wxPanel back and set the ScrollRate of wxScrolledWindow to 5 - 5, also added the wxVSCROLL flag to the constructor of wxScrolledWindow, here is the code,
Code: Select all
cMainFrame::cMainFrame()
:wxFrame(NULL, wxID_ANY, "PacStore", wxDefaultPosition, wxSize(800, 600))
{
SetMinSize(wxSize(800, 600));
m_MainSizer = new wxBoxSizer(wxVERTICAL);
m_TopSizer = new wxBoxSizer(wxVERTICAL);
m_ScrolledSizer = new wxBoxSizer(wxVERTICAL);
m_TilesSizer = new wxGridSizer(m_nFieldWidth, m_nFieldHeight, 20, 20);
m_Panel = new wxPanel(this, wxID_ANY);
m_ScrolledWindow = new wxScrolledWindow(m_Panel, wxID_ANY, wxDefaultPosition, wxDefaultSize, wxVSCROLL | wxBORDER_THEME);
m_ScrolledWindow->SetScrollRate(5, 5);
m_Tiles = new wxBitmapButton*[m_nFieldWidth * m_nFieldHeight];
for (int x = 0; x < m_nFieldWidth; x++)
{
for (int y = 0; y < m_nFieldHeight; y++)
{
m_Tiles[y * m_nFieldWidth + x] = new wxBitmapButton(m_ScrolledWindow, GET_BUTTON + (y * m_nFieldWidth + x),
wxBitmap("/home/apoorv/Downloads/firefox_icon_n.gif", wxBITMAP_TYPE_GIF),
wxDefaultPosition, wxSize(20, 40));
m_TilesSizer->Add(m_Tiles[y * m_nFieldWidth + x], 1, wxALL | wxEXPAND);
m_Tiles[y * m_nFieldWidth + x]->Bind(wxEVT_BUTTON, &cMainFrame::OnClickGetPackageName, this);
}
}
m_TopSizer->Add(m_ScrolledWindow, 1, wxALL | wxEXPAND, 2);
m_ScrolledSizer->Add(m_TilesSizer, 1, wxALL | wxEXPAND, 2);
m_MainSizer->Add(m_Panel, 1, wxALL | wxEXPAND, 2);
this->SetSizer(m_MainSizer);
this->Layout();
this->Center(wxBOTH);
m_ScrolledWindow->SetSizer(m_ScrolledSizer);
m_ScrolledSizer->Fit(m_ScrolledWindow);
m_ScrolledSizer->SetSizeHints(m_ScrolledWindow);
m_ScrolledSizer->Layout();
m_Panel->SetSizer(m_TopSizer);
m_TopSizer->Fit(m_Panel);
m_TopSizer->SetSizeHints(m_Panel);
m_TopSizer->Layout();
}
Here is how it looks currently,
Re: Looking for a tile layout kind of widget.
With that approach you still create all those buttons at once. So back to my questions:apoorv569 wrote: ↑Wed Sep 22, 2021 5:55 am I increased the FieldWidth and FieldHeight to 20 and 5 respectively. Now I do have a vertical scrollbar. The problem I have now is, how do I limit the amount of buttons shown at once, and also the size of button. Because as of now, you can see the more buttons I add more they shrink and try to fit inside the sizer.
Re: Looking for a tile layout kind of widget.
Check out wxWrapSizer: https://docs.wxwidgets.org/trunk/classw ... sizer.htmlThe problem I have now is, how do I limit the amount of buttons shown at once, and also the size of button. Because as of now, you can see the more buttons I add more they shrink and try to fit inside the sizer.
Use the source, Luke!
Re: Looking for a tile layout kind of widget.
Yes, I am aware all the buttons will be created at once.Kvaz1r wrote: With that approach you still create all those buttons at once. So back to my questions:
I can use only bitmaps, but buttons have that hover and click effect that bitmap doesn't. Now that can be added as a logic, OnHover or OnClick for example. But I think there must be some logic that can be applied to bitmap buttons as well, so only buttons that are visible get created.Kvaz1r wrote: What if draw only bitmaps? What should happen when user click on bitmap?
When the user clicks on the button or bitmap, it should basically open a different view or page that has the application's information, such as publisher, size, repository its being downloaded from, reviews, screenshots and all. Just like how all the app stores work.
Re: Looking for a tile layout kind of widget.
Oh! This is nice, this does fix the problem somewhat. I noticed that when I expand the window size, more stuff appears, but once I get expand it to the point that the scrollbar disappears, and then I make the window small again, I don't get the scroll bar back, they all still stay in the same layout. Is this behavior expected? I thought it would go back to showing less when the window is made smaller again.doublemax wrote: Check out wxWrapSizer: https://docs.wxwidgets.org/trunk/classw ... sizer.html