Docking an existing QWidget in QWindow

Question

For those who are very familiar with C# or VB.NET using the UserControl component in the .NET Framework (which is the hottest framework in my opinion), you were used to adding several buttons that preview different user controls as follows:

1) First you would prepare an appropriate user interface (contains 3 buttons and a single panel on the right area to view each user control after clicking one of the added buttons).

2) Adding 3 user controls from the solution explorer...

3) Inserting the content on each user control...

4) Implementing code for the 3 buttons on the frmMain.cs as the following (for this implementation we will be implementing the "Welcome" button carrying the object name as welcomeBtn , and the rest will have identical code but different user control names instead):

private void welcomeBtn_Click(object sender, EventArgs e)
{
    //Clear up everything from the panel if any item exist(s)...
    mainPanel.Controls.Clear();

    //Create a new instance of a user control for the button...
    UserControl1_Welcome welcome = new UserControl1_Welcome();

    //Show up the created instance of the user control
    mainPanel.Controls.Add(welcome);
}

5) Finally, the program will end up initially like this when running:

http://i.stack.imgur.com/OENwG.png

** Usage of the program **

When you click on the "Welcome" button for example, the result should be expected to be like this:

http://i.stack.imgur.com/iCyo3.png

... and when you click on a different button, lets say "License Agreement" button, you would expect to see something other than your current selection.

MAIN QUESTION How can we bring the simplicity of Windows Forms in QT CREATOR by applying the "QDockWidget"?

I have tried inserting the QDockWidget component with no problems, but when I try to do the equivalent .NET code for adding the QWidget inside the QDockWidget:

ui->dockWidget->setWidget(myWidget);

which I think is equivalent to this line of code in C#.NET (correct me if I'm wrong here):

ui.Controls.Add(myWidget);

After using this code, my program won't crash nor shows anything running...

PS I'm sorry for linking the images, I don't have 10 reputation for making them show up...

Answer 1

What I want is to have a program that does the same thing with the C# example (showing a user control based on the click of a button).

If you want to show a particular widget based on a button click, I suggest to use a QStackedWidget A simple example would be like this:

// In the constructor of your CustomWidget

// Create your buttons
QPushButton* firstButton = new QPushButton("First Button", this);
QPushButton* secondButton = new QPushButton("Second Button", this);
QPushButton* thirdButton = new QPushButton("Third Button", this);

// Create your (custom) widgets
QLabel* firstPageWidget = new QLabel("First Label", this);
QLabel* secondPageWidget = new QLabel("Second Label", this);
QLabel* thirdPageWidget = new QLabel("Third Label", this);

// Add them to the stackWidget
/*QStackedWidget* */ m_stackedWidget = new QStackedWidget(this);
m_stackedWidget->addWidget(firstPageWidget);
m_stackedWidget->addWidget(secondPageWidget);
m_stackedWidget->addWidget(thirdPageWidget);

// Insert buttons and stackWidget to CustomWidget 

QVBoxLayout* layoutStack = new QVBoxLayout();
layoutStack->addWidget(m_stackedWidget);

QVBoxLayout* layoutButtons = new QVBoxLayout();
layoutButtons->addWidget(firstButton);
layoutButtons->addWidget(secondButton);
layoutButtons->addWidget(thirdButton);

QHBoxLayout* layout = new QHBoxLayout();
layout->addLayout(layoutButtons);
layout->addLayout(layoutStack);
setLayout(layout);

// Connect button clicks to slots
connect(firstButton, SIGNAL(clicked()), this, SLOT(onFirstButtonClicked()));
connect(secondButton, SIGNAL(clicked()), this, SLOT(onSecondButtonClicked()));
connect(thirdButton, SIGNAL(clicked()), this, SLOT(onThirdButtonClicked()));

Then you change the currently visible widget in the slots:

void CustomWidget::onFirstButtonClicked() {
    m_stackedWidget->setCurrentIndex(0);
}
void CustomWidget::onSecondButtonClicked() {
    m_stackedWidget->setCurrentIndex(1);
}
void CustomWidget::onThirdButtonClicked() {
    m_stackedWidget->setCurrentIndex(2);
}

Note that if you want the button clicks just to simply change some text (as opposed to change the visible widget), you probably better use a QTextEdit instead of a QStackedWidget , and in the slots call setText("....") ;

If you have a lot of buttons, you'd better use QSignalMapper to limit the number of slots.

Also, I didn't get why you mentioned QDockWidget since they have a quite specific usage:

The QDockWidget class provides a widget that can be docked inside a QMainWindow or floated as a top-level window on the desktop.

QDockWidget provides the concept of dock widgets, also know as tool palettes or utility windows. Dock windows are secondary windows placed in the dock widget area around the central widget in a QMainWindow.

If you simply want a separate window, you're probably looking for a QDialog

How to do this with QtDesigner :

1. First you would prepare an appropriate user interface (contains 3 buttons and a single QStackedWidget on the right area to view each user control after clicking one of the added buttons).
2. Adding 3 pages for the user controls in the stack (+ one for the "empty" page if you really need that). If you want to design the Controls in separate UI Files / Only in Code (instead of all controls in your MainFrame), you would add plain QWidget s and promote them to the appropriate specific widget type
3. Inserting the content on each user control...

4. Implementing code for the 3 buttons on the frmMain.cpp/.h as the following (for this implementation we will be implementing the "Welcome" button carrying the object name as welcomeBtn, and the rest will have identical code but different user control names instead):

   void FrmMain::on_welcomeBtn_clicked() { ui->stack->setCurrentWidget(ui->welcomeWidget); }

5. Select the "empty" page at as the current page in the designer, so the program will end up initially like this when running: (your screenshot)

6. When you click on the "Welcome" button for example, the result should be expected to be like this: (your second screenshot)

Answer 2

First is, we can not force how other framework works to another one. Each framework has its flow and design.

What I am understand is you want to show another widget to the main window. If you want to use the QDockWidget , its says on the documentation like this :

void QDockWidget::setWidget(QWidget * widget)

Sets the widget for the dock widget to widget.
If the dock widget is visible when widget is added, you must show() it explicitly.
Note that you must add the layout of the widget before you call this function; if not, the widget will not be visible.

Please share here you code of myWidget , so we can try to help you to figure out what is wrong.

On my side, I can achieve it by add the QVboxLayout on your ui->dockwidget and add QLabel with emtpy string and when you want to show myWidget just call ui->dockwidget->vboxlayout->replaceWidget(label, myWidget);

Answer 3

In my opinion, Miki's answer is the only correct approach to this use case (using a QStackedWidget ).

For sake of completeness, I'll demonstrate how the same Clear and Add method as used in .NET is done in Qt:

// Assume controlPanel is a QWidget where you want to place the items
// Assume that controlPanel has set a layout (e.g. QHBoxLayout)

// Clear: Remove all Items from layout
QLayoutItem *child;
while ((child = controlPanel->layout()->takeAt(0)) != NULL) {
    delete child;
}

// Now widgets are still there, but not layouted. Delete them explicitly
foreach (QWidget * w, controlPanel->findChildren<QWidget*>()) {
    w->deleteLater();
}

// Now controlPanel is cleared

// Add new control
controlPanel->layout()->addWidget(new MyNewControlWidget);