Qml Popup not coming on top of child window - qt

Question

I have a Qml App that has a Win32 window as a child window. Now, I simply want to show a popup on the click of a button(or Image in my case) on top of Win32 window but Popup is not coming on top.
Working code is as below:-
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QWindow>
#include "qt_windows.h"
#include "Windows.h"
#pragma comment(lib, "user32.lib")
/*
* Input Window proc
*/
LRESULT CALLBACK uiInputWindowProc(
HWND hwnd,
UINT uMsg,
WPARAM wParam,
LPARAM lParam)
{
return DefWindowProc(hwnd, uMsg, wParam, lParam);
}
/*
* Create window that receives and forwards input
*/
void uiCreateInputWindow(
HWND parentWindow,
int x,
int y,
int width,
int height)
{
#define UI_INPUT_WINDOW_CLASS L"uiNativeInputWindowClass"
/*
* Register Window Class
*/
WNDCLASSEX wcex;
wcex.cbSize = sizeof wcex;
wcex.style = CS_OWNDC | CS_HREDRAW | CS_VREDRAW;
wcex.lpfnWndProc = (WNDPROC)uiInputWindowProc;
wcex.cbClsExtra = 0;
wcex.cbWndExtra = sizeof(void*);
wcex.hInstance = NULL;
wcex.hIcon = NULL;
wcex.hCursor = LoadCursor(NULL, IDC_ARROW);
wcex.hbrBackground = (HBRUSH)(COLOR_BACKGROUND+1);
wcex.lpszMenuName = NULL;
wcex.lpszClassName = UI_INPUT_WINDOW_CLASS;
wcex.hIconSm = NULL;
if (RegisterClassEx(&wcex) == 0 && GetLastError() != ERROR_CLASS_ALREADY_EXISTS)
{
return;
}
DWORD style = WS_CHILD;
DWORD exstyle = 0;
/*
* Create Window
*/
HWND hwnd = CreateWindowEx(
exstyle, // dwExStyle
UI_INPUT_WINDOW_CLASS, // lpClassName
L"uiNativeInputWindow", // lpWindowName
style, // dwStyle
x, // x
y, // y
width, // nWidth
height, // nHeight
parentWindow, // hWndParent
NULL, // hMenu
0, // hInstance
0); // lpParam
if (hwnd != NULL)
{
ShowWindow(hwnd, SW_SHOW);
SetFocus(hwnd);
}
}
/*
* Initialize ui
*/
int main(int argc, char* argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine* engine = new QQmlApplicationEngine;
engine->load(QUrl(QStringLiteral("qrc:/main.qml")));
QObject* qmlRoot = engine->rootObjects().first();
QWindow* mainWindow = qobject_cast<QWindow*>(qmlRoot);
int fbWidth = 1920, fbHeight = 1080;
uiCreateInputWindow((HWND)mainWindow->winId(), 0, 70, fbWidth, fbHeight);
app.exec();
}
main.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.12
ApplicationWindow {
id: root
x: 10
y: 10
width: 1920
height: 1150
visible: true
flags: Qt.Window | Qt.FramelessWindowHint
RowLayout {
anchors.fill: parent
spacing: 0
ColumnLayout {
spacing: 0
Rectangle {
id: topbar
color: "#232642"
Layout.fillWidth: true
Layout.preferredHeight: 70
MouseArea {
anchors.fill: parent
property point lastMouse
onPressed: {
lastMouse = mapToGlobal(mouseX, mouseY)
}
onPositionChanged: {
var newMouse = mapToGlobal(mouseX, mouseY)
root.x += newMouse.x - lastMouse.x
root.y += newMouse.y - lastMouse.y
lastMouse = newMouse
}
onDoubleClicked: {
root.visibility == ApplicationWindow.Windowed ?
root.showMaximized() :
root.showNormal()
}
}
RowLayout {
anchors.fill: parent
spacing: 0
Text {
text: "Test Window"
color: "#F8F8EE"
font.family: "Segoe UI"
font.pointSize: 11
font.weight: Font.DemiBold
Layout.fillHeight: true
Layout.topMargin: 10
Layout.leftMargin: 10
}
Item {
Layout.fillWidth: true
}
/*
Show Popup on click of this image
*/
Image {
id: cfgBtn
source: "Assets/cfgmenu.png"
Layout.fillHeight: true
Layout.preferredWidth: height
MouseArea {
anchors.fill: parent
onClicked: optionsPopup.open()
}
}
Image {
source: "Assets/closewindow.png"
Layout.fillHeight: true
Layout.preferredWidth: height
MouseArea {
anchors.fill: parent
onClicked: root.close()
}
}
}
}
Rectangle {
id: containerLv1
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Rectangle {
id: containerLv2
width: Math.round(Math.min(containerLv1.width,
containerLv1.height * 16 / 9))
height: Math.round(Math.min(containerLv1.height,
containerLv1.width * 9 / 16))
anchors.centerIn: parent
visible: true
color: "grey"
}
}
}
}
/*
Desired popup to show
*/
Popup {
id: optionsPopup
x: cfgBtn.x - 160
y: topbar.y + topbar.height + 5
width: 200
height: 120
focus: true
dim: false
modal: true
padding: 0
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
contentItem: Rectangle {
id: rect
anchors.centerIn: parent
color: "#FF232642"
ColumnLayout {
spacing: 0
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Rectangle {
Layout.preferredWidth: 200
Layout.preferredHeight: 40
color: "transparent"
Text {
anchors.fill: parent
text: "Option1"
color: "white"
font.pointSize: 14
}
}
Rectangle {
Layout.preferredWidth: 200
Layout.preferredHeight: 40
color: "transparent"
Text {
anchors.fill: parent
text: "Option2"
color: "white"
font.pointSize: 14
}
}
Rectangle {
Layout.preferredWidth: 200
Layout.preferredHeight: 40
color: "transparent"
Text {
anchors.fill: parent
text: "Option3"
color: "white"
font.pointSize: 14
}
}
}
}
}
}
The native window is part of our application and is used for receiving mouse and keyboard inputs. Any suggestion is most welcomed.

Answer 1

I did a hack to solve this. Basically, the problem is everything that is drawn as part of Qml window gets hidden below the native window and there is no good way(that I can find online) to do this except by adding another layer of a modal window.
So, before opening the popup, just create a transparent modal window over which your popup can be shown and close this window when the popup closes.
I am still looking for a better way to do this.