QML How to open new page onClick with a Loader - qt

Question

I have an app that consists of multiple plages. And user will be able to switch between these pages by button clicks. When I put a Window {} in Kontrolpage.qml, it gives me EGLFS: OpenGL windows cannot be mixed with others error. So I put an Item in Kontrolpage.qml. In that way when I press the button, item gets opened. However, it looks small. Eventhough I set the size constraints in Kontrolpage.qml to 640-480 which is same as the size of the main.qml. So main qml still visible in the background and on top of it newly opened qml is visible but it's not fullscreen. How can I fix that thing and what I am doing wrong?
Window {
id:main
width:640
height:480
Image
{
objectName: "background"
width: parent.width
height: parent.height
source:"Imgs/Images/bckgnd.png"
LeftButtons
{
id:buttonKontrol
x: -20
y:110
buttonName: "kontrol"
Loader { id: kontrolPageLoader}
MultiPointTouchArea
{
id:touchArea_kontrol
anchors.fill:parent
onPressed:
{
kontrolPageLoader.source ="KontrolPage.qml"
}
}
}
}
And here is the Kontrolpage.qml:
Item{
visible:true
width:640
height:480
Image {
objectName:"background"
width:parent.width
height:parent.height
source:"Imgs/Images/bckgnd"
}
}
Edit: When I put Loader outside of the LeftButtons and into window {} as :
Window {
id:main
width:640
height:480
Loader { id: kontrolPageLoader}
Image
{
objectName: "background"
width: parent.width
height: parent.height
source:"Imgs/Images/bckgnd.png"
LeftButtons
{
id:buttonKontrol
x: -20
y:110
buttonName: "kontrol"
MultiPointTouchArea
{
id:touchArea_kontrol
anchors.fill:parent
onPressed:
{
kontrolPageLoader.source ="KontrolPage.qml"
}
}
}
}
It does not open the new page. And keeping the loader inside the LeftButtons, when I use anchors.fill:parent, it resize it according to parent LeftButtons. However, I want to have the size of my Window in the new Page. The main problem in here looks like, why I cannot put Loader out of Leftbuttons and in Window?
Complete code for main.qml:
import QtQuick 2.11
import QtQuick.Window 2.11
Window {
id:main
visible: true
width: 640
height: 480
//Constant Definitions
readonly property string textColorBlue: "#8ccae5"
readonly property string textColorRed: "#dc0000"
Item {
id: backgroundItem
width:main.width
height:main.height
Loader
{
id:pageLoader
anchors.fill:parent
}
Image
{
id:backgroundImage
objectName: "background"
width:parent.width
height:parent.height
source: "Imgs/Images/NMS_NEW_4_TR_03.png"
LeftButtons
{
id: buttonKontrol
x: -20
y: 110
buttonName:"Kontrol"
MultiPointTouchArea
{
id:touchArea_kontrol
anchors.fill: parent
onPressed:
{
buttonKontrol.buttonImageColor="Imgs/Images/button_left_red.png"
buttonKontrol.buttonTextColor=textColorRed
pageLoader.source="KontrolPage.qml"
}
onReleased:
{
buttonKontrol.buttonImageColor="Imgs/Images/button_left_blue.png"
buttonKontrol.buttonTextColor=textColorBlue
}
}
}
LeftButtons
{
id:buttonKullaniciKitabi
x:-20
y:310
buttonName:"Kullanıcı Kitabı"
MultiPointTouchArea
{
id:touchArea_kullaniciKitabi
anchors.fill: parent
onPressed:
{
buttonKullaniciKitabi.buttonImageColor="Imgs/Images/button_left_red.png"
buttonKullaniciKitabi.buttonTextColor=textColorRed
}
onReleased:
{
buttonKullaniciKitabi.buttonImageColor="Imgs/Images/button_left_blue.png"
buttonKullaniciKitabi.buttonTextColor=textColorBlue
}
}
}
LeftButtons
{
id: buttonAyarlar
x:-20
y:510
buttonName: "Ayarlar"
MultiPointTouchArea
{
id:touchArea_ayarlar
anchors.fill: parent
onPressed:
{
buttonAyarlar.buttonImageColor="Imgs/Images/button_left_red.png"
buttonAyarlar.buttonTextColor=textColorRed
}
onReleased:
{
buttonAyarlar.buttonImageColor="Imgs/Images/button_left_blue.png"
buttonAyarlar.buttonTextColor=textColorBlue
}
}
}
RightButtons
{
id:buttonCCTV
x:1050
y:110
buttonName: "CCTV"
MultiPointTouchArea
{
id:touchArea_CCTV
anchors.fill: parent
onPressed:
{
buttonCCTV.buttonImageColor="Imgs/Images/button_right_red.png"
buttonCCTV.buttonTextColor=textColorRed
}
onReleased:
{
buttonCCTV.buttonImageColor="Imgs/Images/button_right_blue.png"
buttonCCTV.buttonTextColor=textColorBlue
}
}
}
RightButtons
{
id:buttonCTIS
x:1050
y:310
buttonName: "CTIS"
MultiPointTouchArea
{
id:touchArea_CTIS
anchors.fill: parent
onPressed:
{
buttonCTIS.buttonImageColor="Imgs/Images/button_right_red.png"
buttonCTIS.buttonTextColor=textColorRed
}
onReleased:
{
buttonCTIS.buttonImageColor="Imgs/Images/button_right_blue.png"
buttonCTIS.buttonTextColor=textColorBlue
}
}
}
RightButtons
{
id:buttonSisHavani
x:1050
y:510
buttonName: "Sis Havanı"
MultiPointTouchArea
{
id:touchArea_sisHavani
anchors.fill: parent
onPressed:
{
buttonSisHavani.buttonImageColor="Imgs/Images/button_right_red.png"
buttonSisHavani.buttonTextColor=textColorRed
}
onReleased:
{
buttonSisHavani.buttonImageColor="Imgs/Images/button_right_blue.png"
buttonSisHavani.buttonTextColor=textColorBlue
}
}
}
}
}
}