I have a big layout that contains widgets and layouts of the following structure:
QVBoxLayout
QTableView
QPushButton
I set the margins, padding, and spacing on the layout to 0. The way this renders on Mac OS X, the button doesn't fill all of its space. Instead, there is some padding around it. Magically, the layout seems to know this, and makes sure the table view is exactly as wide as the button is wide:
When I remove the button, the table view returns to its full width:
How can I change it so the button, as well as the table view, become as wide as the layout?
I've played with stylesheet's padding and margin, and while I can use those to make the button wider, the extra padding around the tree view remains. The only solution I have so far is to wrap the button in another widget, and then set its margin and padding to 0 via stylesheet, but then I lose the rounded look.
you have to set layout margins to 0, not QPushButton's margins.
Take a look. this is designer look&feel:
This is QWidget's layout properties:
And this is final widget:
After some more experimentation, I found that it works as expected with a QToolButton instead of a QPushButton. That's not an explanation, but it's a solution.
Hmm. interesting. The following code is for testing your problem but could not find any. it just works as it is.(using Qt 4.8.2 on Mac OSX). The code is self containing. just put it as main.cpp to build application and click show and hide button to test.
#include <QtGui>
class FramedWidget : public QFrame
{
public:
FramedWidget(QWidget* inner, QWidget* parent=0)
: QFrame(parent)
{
setFrameStyle(QFrame::Panel | QFrame::Sunken);
QVBoxLayout* lay = new QVBoxLayout(this);
lay->setContentsMargins(0,0,0,0);
lay->setSpacing(0);
lay->addWidget(inner);
}
};
class LayoutWidget : public QSplitter
{
public:
LayoutWidget(QWidget* parent=0)
: QSplitter(parent)
{
QTableWidget* table = new QTableWidget;
m_button = new QPushButton("Testing...");
QPushButton* showButton = new QPushButton("Show");
QPushButton* hideButton = new QPushButton("Hide");
connect(showButton, SIGNAL(clicked()),
m_button, SLOT(show()));
connect(hideButton, SIGNAL(clicked()),
m_button, SLOT(hide()));
QWidget* tester = new QWidget;
QVBoxLayout* testerLay = new QVBoxLayout(tester);
testerLay->addWidget(table);
testerLay->addWidget(m_button);
QWidget* controller = new QWidget;
QVBoxLayout* controllerLay = new QVBoxLayout(controller);
controllerLay->addWidget(showButton);
controllerLay->addWidget(hideButton);
controllerLay->addWidget(new QTextEdit);
this->addWidget(new FramedWidget(controller));
this->addWidget(new FramedWidget(tester));
}
protected:
QPushButton* m_button;
};
int main(int argc, char** argv)
{
QApplication app(argc, argv);
LayoutWidget* editor = new LayoutWidget;
editor->show();
editor->raise();
return app.exec();
}
Another workaround that preserves the look of a push button is to put the layout in a QFrame container widget and set negative padding in the stylesheet. The container has to be a QFrame or padding won't work.
Related
I have a quite complex scene graph which has led me to some resizing problems. I'd be glad if you could help me solve it.
My root node is a BorderPane that its center is filled with a ListView. Each cell of the ListView is filled with a customized zoomable ScrollPane as below:
public class ZoomableScrollPane extends ScrollPane {
Group zoomGroup;
Scale scaleTransform;
LineChart<Number , Number> content;
double scaleValue = 1.0;
double delta = 0.1;
public ZoomableScrollPane(LineChart<Number , Number> content, double height) {
this.content = content;
this.setPrefHeight(height);
Group contentGroup = new Group();
zoomGroup = new Group();
contentGroup.getChildren().add(zoomGroup);
zoomGroup.getChildren().add(content);
setContent(contentGroup);
scaleTransform = new Scale(scaleValue, scaleValue, 0, 0);
zoomGroup.getTransforms().add(scaleTransform);
}
}
As you can see there is a LineChart inside of each ZoomableScrollPane. I want to do two things with this chart. Firstly, to somehow bind its width with the root layout to get the desired result in case of resizing the window (not zooming, zooming is OK), and secondly to change the chart's width at run time whenever a button is pressed:
public void handleButton(ActionEvent actionEvent) {
MainController.lineChart1.setPrefWidth(MainController.lineChart1.getPrefWidth() + CONSTANT);
}
The problem is that here I face a conflict. Cause the LineChart is the child of a Group (not a pane), I just know one way of resizability and that is to bind its width manually with the root BorderPane's like this:
MainController.lineChart1.prefWidthProperty().bind(fourChannels.widthProperty().subtract(40));
And in that case, I cannot change the LineChart's width at run time and will get A bound value cannot be set Exception.
I guess one solution could be revising the ZoomableScrollPane class to somehow avoid the need of manual binding, but really have no idea how to do it.
Any help on this would be greatly appreciated.
You can detect if a property is bound and then unbind it before manipulating it:
if (content.prefWidthProperty().isBound()) {
content.prefWidthProperty().unbind();
}
...
Presumably when you are zoomed in on a chart and the window is resized the content will already be larger than the viewport, so a forced change in width shouldn't kick in until the window is resized beyond the zoomed in size of the chart?
Given the different conditions you have you might be better off monitoring the size of the BorderPane/ListView and when that changes adjust the size of the charts that need it.
How to fix a ScrollPane scroll bar position at a specific position so that it displays for example the last item of it's child Table instead of the first item Table(default)? I try setScrollX and setScrollY but it doesn't work.
I have a game level menu(with many levels) and i would like to display the last unlocked level to the user when opening that menu.
You might have to call layout() on the ScrollPane yourself manually before trying to call setScrollX or setScrollY
When you want to avoid the ScrollPanes fling effect, use the following code in your show() method, so the ScrollPane immediately shows the exact position you specified.
scrollPane.layout();
scrollPane.setScrollPercentY(.5f);
scrollPane.updateVisualScroll();
Instead of setting the scrollPercent, you could also use
scrollPane.scrollTo(x, y, width, height);
or
scrollPane.setScrollY(y);
This works for me if you've got a vertically stacked pane:
setScrollPercentY(100);
This worked for me:
scrollPane.layout();
scrollPane.setScrollPercentY(100);
For me, all the previous answers did not work:
Even after calling scrollPane.layout() multiple times, the scroll pane still had an areaHeight (scrollHeight) of -2, 0, or sth else. Only later during subsequent layout calls the correct height would be set, causing an animation where the content would slide in from the top.
The only option that fixed it for my use case (scrolling to bottom initially after adding all the initial content) was to override the ScrollPane.layout() and scroll to bottom after each layout change:
open class BottomScrollingScrollPane(actor: Actor?, skin: Skin, style: String): ScrollPane(actor, skin, style) {
override fun layout() {
super.layout()
scrollTo(0f, 0f, 0f, 0f)
updateVisualScroll()
}
}
... and optionally, if you use libktx:
#Scene2dDsl
#OptIn(ExperimentalContracts::class)
inline fun <S> KWidget<S>.bottomScrollingScrollPane(
style: String = defaultStyle,
skin: Skin = Scene2DSkin.defaultSkin,
init: KBottomScrollingScrollPane.(S) -> Unit = {}
): KBottomScrollingScrollPane {
contract { callsInPlace(init, InvocationKind.EXACTLY_ONCE) }
return actor(KBottomScrollingScrollPane(skin, style), init)
}
class KBottomScrollingScrollPane(skin: Skin, style: String) : BottomScrollingScrollPane(null, skin, style), KGroup {
override fun addActor(actor: Actor?) {
this.actor == null || throw IllegalStateException("ScrollPane may store only a single child.")
this.actor = actor
}
}
One side effect is scrolling down again after each layout change, resize etc., but that's fine for me as the layout is very short-lived anyway.
this code is set the position, width and height of ScrollPane.
scroll.setBounds(0, 60, Gdx.graphics.getWidth(), 200);
I am struggling to set an background image for an QPushButton. No Success till now. Following is my code.
appsWidget::appsWidget(QWidget *parent)
:QWidget(parent)
{
QPushButton *button1 = new QPushButton("SETTINGS",this);
QPushButton *button2 = new QPushButton("TEST",this);
QPushButton *button3 = new QPushButton("IE",this);
button1->setStyleSheet("background-image:url(config.png)"); -> No success
qDebug("appWidget initialized.");
QHBoxLayout *layout = new QHBoxLayout;
layout->addWidget(button1);
layout->addWidget(button2);
layout->addWidget(button3);
this->setLayout(layout);
connect(button1,SIGNAL(clicked()),this,SLOT(setClickIndex1()));
connect(button2,SIGNAL(clicked()),this,SLOT(setClickIndex2()));
connect(button3,SIGNAL(clicked()),this,SLOT(setClickIndex3()));
}
The image I am using in the stylesheet is located in the same project folder.
Do anybody has any solution?
You have to set the flat attribute to true:
button1->setFlat(true);
You also have to set the autofillbackground -
button1->setAutoFillBackground(true);
You may want to look at QToolButton which doesn't require it to be flat in order to render an image. I'm using them in an app I'm writing at the moment and they look very nice:
m_showAddCommentButton = new QToolButton();
m_showAddCommentButton->setAutoFillBackground(true);
palette = m_showAddCommentButton->palette();
palette.setColor(QPalette::Button,QColor(82,110,166));
m_showAddCommentButton->setPalette(palette);
m_showAddCommentButton->setIcon(QIcon(":/uiImages/addComment_50_50.jpg"));
m_showAddCommentButton->setIconSize(QSize(40,40));
m_showAddCommentButton->setToolTip("Comment");
connect(m_showAddCommentButton, SIGNAL(clicked()),
manager, SLOT(showAddComment()));
hLayout->addWidget(m_showAddCommentButton,0);
(My image is stored as a resource)
Your css selector is not correct.
You should do something like:
button1->setStyleSheet("QPushButton{ background-image: url(config.png); }");
You can use brush as palette element to fill background for any widget, for QPushButton that works when button is flat.
QPixmap pixmap("image.jpg");
QPalette palette;
QPushButton *button= new QPushButton(this);
palette.setBrush(button->backgroundRole(), QBrush(pixmap));
button->setFlat(true);
button->setAutoFillBackground(true);
button->setPalette(palette);
I would like to use QColorDialog not as a dialog window but as a widget which I could insert into a layout. (More specifically as a custom sub menu in a context menu)
I looked into the QColorDialog sourcecode, and I could probably copy over a part of the internal implementation of the QColorDialog to achieve this, but is there a cleaner way to do this? I am using Qt 4.5.1...
QColorDialog is a dialog which means IT IS a widget. All you need to do is set a few window flags and drop it into your layout as you wish. Here is a (tested) example:
#include <QApplication>
#include <QMainWindow>
#include <QColorDialog>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
/* setup a quick and dirty window */
QMainWindow app;
app.setGeometry(250, 250, 600, 400);
QColorDialog *colorDialog = new QColorDialog(&app);
/* set it as our widiget, you can add it to a layout or something */
app.setCentralWidget(colorDialog);
/* define it as a Qt::Widget (SubWindow would also work) instead of a dialog */
colorDialog->setWindowFlags(Qt::Widget);
/* a few options that we must set for it to work nicely */
colorDialog->setOptions(
/* do not use native dialog */
QColorDialog::DontUseNativeDialog
/* you don't need to set it, but if you don't set this
the "OK" and "Cancel" buttons will show up, I don't
think you'd want that. */
| QColorDialog::NoButtons
);
app.show();
return a.exec();
}
You can do it clean in a very simple way by setting right window flags.
QColorDialog8 colorDialog = new ....
colorDialog->setWindowFlags(Qt::SubWindow);
You might want to look at some Qt Solutions, which will do at least part of what you want. For example, see the Color Picker solution, which they note is now available as an LGPL-licensed library also.
As an alternative (and probably less-supported) approach, I recall some work in the Qt-Labs about embedding Qt widgets, including QDialogs, into a QGraphicsScene. You could potentially do so, then change the view on your graphics scene so that only the portion of the color picker dialog you are interested in was visible to the user. It sounds very hackish, however.
Try subclassing QColorDialog
Use QGraphicsView and add QDialog to it. And add QGraphicsView to the widget if you want to show the dialog.
Building on #Wiz's answer, I made mine a popup menu off of a toolbar button using some C++11 features (lambdas and auto; works with VS2010 and gcc 4.6 with Qt 5.1.1):
auto dialog = new QColorDialog();
dialog->setWindowFlags( Qt::Widget );
dialog->setOptions( QColorDialog::DontUseNativeDialog | QColorDialog::ShowAlphaChannel );
auto action = new QWidgetAction( 0 );
action->setDefaultWidget( dialog );
auto menu = new QMenu();
menu->addAction( action );
// The dialog-as-widget closes on Ok/cancel, but the menu that holds it
// doesn't. We connect the two here. Because the dialog hides itself,
// we need to reshow it when the menu is coming up again.
connect( menu, &QMenu::aboutToShow, [=] { dialog->show(); } );
connect( dialog, &QColorDialog::rejected, [=] { menu->hide(); } );
connect( dialog, &QColorDialog::colorSelected,
[=]( const QColor& color )
{
menu->hide();
OnFillColorChanged( color ); // Call the "slot" in this class
});
auto button = new QToolButton();
button->setIcon( QIcon( ":/images/whatev.png") );
button->setText( tr("Fill") );
button->setStatusTip( tr("Choose fill color") );
button->setMenu( menu );
button->setPopupMode( QToolButton::InstantPopup );
button->setToolButtonStyle( Qt::ToolButtonTextUnderIcon );
toolbar->addWidget( button ); // toolbar is defined elsewhere
Base on previous answer from "metal" i suggest you to create the following method in a derived class of QAction:
void MyQAction::setPopupDialog(QDialog* dialog) {
QWidgetAction* action = new QWidgetAction(NULL);
action->setDefaultWidget(dialog);
QMenu* menu = new QMenu();
menu->addAction(action);
// Fix issues related to the way the dialogbox hide/show. Restablish proper handling,
// based on our requirement.
connect(menu, SIGNAL(aboutToShow()), dialog, SLOT(show()));
connect(dialog, SIGNAL(finished(int)), menu, SLOT(hide()));
setMenu(menu);
}
this will automate the process for any dialog box.
If there's a way to do this cleanly, I'm not aware of it. As I see it, you have a couple of options:
Subclass it and copy the code that actually constructs the widget, making edits to remove the part that creates the dialog window and replace it with some other container.
If you're not dead-set on using that particular dialog, the color triangle widget from qt solutions might work, because it isn't a dialog window. You can find it at http:// doc.trolltech.com/solutions/4/qtcolortriangle/qtcolortriangle.html (remove the space from the link)
I'm using .net 2.0 with Visual Studio 2005 and I am trying to add two different toolstrips to the top of the form such that they show up side-by-side. I want it to be like Word 2003, where you can add multiple toolstrips to the same row and have them show up in line with each other, rather than dedicating a row to each toolstrip.
So I added a ToolStripPanel and docked it to the top of the form (I didn't use a ToolStripContainer because I don't need all the extra panels; I just need the one at the top). I added both toolstrips and set their Stretch properties to False. I can get them to show up in the designer window side-by-side, but at runtime the ToolStripPanel separates the toolstrips and gives each toolstrip its own dedicated row. As if to add insult to injury, when i stop debugging and return back to the designer, I am finding that the designer is moving the toolstrips to their own row as well! Am I doing something wrong here?
I have been Googling all day and found some information about a ToolStripPanelRow object, but I don't see an easy way to add toolstrips to it (i.e. it doesn't have a ToolStripPanelRow.Controls.Add method or anything like that), all it has is a Controls() property that returns an Array of control objects, and I haven't had much luck trying to add items to that array. I also found some documentation on the ToolStripPanel.Join method, which sounds like it should do the job, so I tried all 3 overloads but they don't work as advertised. No matter what I do or which options I try, it always adds the new toolstrip to the top of the panel on its own row and pushes everything else down.
In the interests of full disclosure I should warn you that I have the ToolStripPanel and one of the toolstrips added to a baseclass form, and I am trying to add the other toolstrip to a subclass form that inherits from the baseclass form. The ToolStripPanel and ToolStrip in the baseclass form are both declared "Protected Friend", so this should be working. As I mentioned, the subclass form's designer window will allow me to do it (at least, for a time).
If anyone can help me get this working or at least shed some light on why it isn't, I would be extremely grateful.
I created a custom ToolStripPanel so that I could overload the LayoutEngine;
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.Layout;
namespace CustomGUI
{
class CustomToolStripPanel : ToolStripPanel
{
private LayoutEngine _layoutEngine;
public override LayoutEngine LayoutEngine
{
get
{
if (_layoutEngine == null) _layoutEngine = new CustomLayoutEngine();
return _layoutEngine;
}
}
public override Size GetPreferredSize(Size proposedSize)
{
Size size = base.GetPreferredSize(proposedSize);
foreach(Control control in Controls)
{
int newHeight = control.Height + control.Margin.Vertical + Padding.Vertical;
if (newHeight > size.Height) size.Height = newHeight;
}
return size;
}
}
}
Then the custom LayoutEngine lays out the ToolStrips;
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.Layout;
namespace CustomGUI
{
class CustomLayoutEngine : LayoutEngine
{
public override bool Layout(object container, LayoutEventArgs layoutEventArgs)
{
Control parent = container as Control;
Rectangle parentDisplayRectangle = parent.DisplayRectangle;
Control [] source = new Control[parent.Controls.Count];
parent.Controls.CopyTo(source, 0);
Point nextControlLocation = parentDisplayRectangle.Location;
foreach (Control c in source)
{
if (!c.Visible) continue;
nextControlLocation.Offset(c.Margin.Left, c.Margin.Top);
c.Location = nextControlLocation;
if (c.AutoSize)
{
c.Size = c.GetPreferredSize(parentDisplayRectangle.Size);
}
nextControlLocation.Y = parentDisplayRectangle.Y;
nextControlLocation.X += c.Width + c.Margin.Right + parent.Padding.Horizontal;
}
return false;
}
}
}
One thing that took a while is that changing the location / size of one ToolStrip item will cause the layout to re-fire, with the controls reordered. So I take a copy of the controls before the layout loop.
And you cant use AddRange(...) to add items to the Custom Panel for some reason - need to Add(...) them one at a time.
hope that helps (it's based on MSDN LayoutEngine Example, fixed for ToolStripPanels)
Wyzfen
System.Windows.Forms.FlowLayoutPanel can do the job.
Just put the ToolStrip controls in it with correct order.
I think in your case you can get away with just setting the LayoutStyle on your ToolStrip to ToolStripLayoutStyle.HorizontalStackWithOverflow rather than need your own custom LayoutEngine.
I asked a different question on a similar topic on how to handle layout with dynamic items to have better control of the overflow.