title: QML How to open new page onClick with a Loader
body: <p>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?</p>
  <pre><code>Window {
  id:main
  width:640
  height:480
  
  Image
  {
     objectName: &quot;background&quot;
     width: parent.width
    height: parent.height
    source:&quot;Imgs/Images/bckgnd.png&quot;
  
  LeftButtons
  {
     id:buttonKontrol
     x: -20
     y:110 
     buttonName: &quot;kontrol&quot;
  
  Loader { id: kontrolPageLoader}
  
  MultiPointTouchArea
  {
     id:touchArea_kontrol
     anchors.fill:parent
     onPressed:
     {
        kontrolPageLoader.source =&quot;KontrolPage.qml&quot;
  }
  }
  }
  }
  </code></pre>
  <p>And here is the Kontrolpage.qml:</p>
  <pre><code>Item{
  visible:true
  width:640
  height:480
  
  Image {
  objectName:&quot;background&quot;
  width:parent.width
  height:parent.height
  source:&quot;Imgs/Images/bckgnd&quot;
  }
  }
  </code></pre>
  <p>Edit: When I put Loader outside of the LeftButtons and into window {} as :</p>
  <pre><code> Window {
      id:main
      width:640
      height:480
      
      Loader { id: kontrolPageLoader}
  
      Image
      {
         objectName: &quot;background&quot;
         width: parent.width
        height: parent.height
        source:&quot;Imgs/Images/bckgnd.png&quot;
      
      LeftButtons
      {
         id:buttonKontrol
         x: -20
         y:110 
         buttonName: &quot;kontrol&quot;
      
      
      
      MultiPointTouchArea
      {
         id:touchArea_kontrol
         anchors.fill:parent
         onPressed:
         {
            kontrolPageLoader.source =&quot;KontrolPage.qml&quot;
      }
      }
      }
      }
  </code></pre>
  <p>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?</p>
  <p>Complete code for main.qml:</p>
  <pre><code>import QtQuick 2.11
  import QtQuick.Window 2.11
  
  
  
  Window {
      id:main
      visible: true
      width: 640
      height: 480
      //Constant Definitions
  
      readonly property string textColorBlue: &quot;#8ccae5&quot;
      readonly property string textColorRed: &quot;#dc0000&quot;
  
  
      Item {
          id: backgroundItem
          width:main.width
          height:main.height
  
          Loader
          {
              id:pageLoader
              anchors.fill:parent
  
          }
  
      Image
      {
          id:backgroundImage
          objectName: &quot;background&quot;
          width:parent.width
          height:parent.height
          source: &quot;Imgs/Images/NMS_NEW_4_TR_03.png&quot;
  
  
  
  
  
  
          LeftButtons
          {
              id: buttonKontrol
              x: -20
              y: 110
              buttonName:&quot;Kontrol&quot;
  
  
  
  
              MultiPointTouchArea
              {
                  id:touchArea_kontrol
                  anchors.fill: parent
                  onPressed:
                  {
                      buttonKontrol.buttonImageColor=&quot;Imgs/Images/button_left_red.png&quot;
                      buttonKontrol.buttonTextColor=textColorRed
                      pageLoader.source=&quot;KontrolPage.qml&quot;
  
                  }
                  onReleased:
                  {
                      buttonKontrol.buttonImageColor=&quot;Imgs/Images/button_left_blue.png&quot;
                      buttonKontrol.buttonTextColor=textColorBlue
  
  
                  }
          }
          }
  
          LeftButtons
          {
              id:buttonKullaniciKitabi
              x:-20
              y:310
              buttonName:&quot;Kullanıcı Kitabı&quot;
  
              MultiPointTouchArea
              {
                  id:touchArea_kullaniciKitabi
                  anchors.fill: parent
                  onPressed:
                  {
                      buttonKullaniciKitabi.buttonImageColor=&quot;Imgs/Images/button_left_red.png&quot;
                      buttonKullaniciKitabi.buttonTextColor=textColorRed
                  }
                  onReleased:
                  {
                      buttonKullaniciKitabi.buttonImageColor=&quot;Imgs/Images/button_left_blue.png&quot;
                      buttonKullaniciKitabi.buttonTextColor=textColorBlue
                  }
          }
          }
  
          LeftButtons
          {
              id: buttonAyarlar
              x:-20
              y:510
              buttonName: &quot;Ayarlar&quot;
  
              MultiPointTouchArea
              {
                  id:touchArea_ayarlar
                  anchors.fill: parent
                  onPressed:
                  {
                      buttonAyarlar.buttonImageColor=&quot;Imgs/Images/button_left_red.png&quot;
                      buttonAyarlar.buttonTextColor=textColorRed
                  }
                  onReleased:
                  {
                      buttonAyarlar.buttonImageColor=&quot;Imgs/Images/button_left_blue.png&quot;
                      buttonAyarlar.buttonTextColor=textColorBlue
                  }
          }
          }
  
          RightButtons
          {
              id:buttonCCTV
              x:1050
              y:110
              buttonName: &quot;CCTV&quot;
  
              MultiPointTouchArea
              {
                  id:touchArea_CCTV
                  anchors.fill: parent
                  onPressed:
                  {
                      buttonCCTV.buttonImageColor=&quot;Imgs/Images/button_right_red.png&quot;
                      buttonCCTV.buttonTextColor=textColorRed
                  }
                  onReleased:
                  {
                      buttonCCTV.buttonImageColor=&quot;Imgs/Images/button_right_blue.png&quot;
                      buttonCCTV.buttonTextColor=textColorBlue
                  }
              }
          }
  
          RightButtons
          {
              id:buttonCTIS
              x:1050
              y:310
              buttonName: &quot;CTIS&quot;
  
              MultiPointTouchArea
              {
                  id:touchArea_CTIS
                  anchors.fill: parent
                  onPressed:
                  {
                      buttonCTIS.buttonImageColor=&quot;Imgs/Images/button_right_red.png&quot;
                      buttonCTIS.buttonTextColor=textColorRed
                  }
                  onReleased:
                  {
                      buttonCTIS.buttonImageColor=&quot;Imgs/Images/button_right_blue.png&quot;
                      buttonCTIS.buttonTextColor=textColorBlue
                  }
              }
          }
  
          RightButtons
          {
              id:buttonSisHavani
              x:1050
              y:510
              buttonName: &quot;Sis Havanı&quot;
  
              MultiPointTouchArea
              {
                  id:touchArea_sisHavani
                  anchors.fill: parent
                  onPressed:
                  {
                      buttonSisHavani.buttonImageColor=&quot;Imgs/Images/button_right_red.png&quot;
                      buttonSisHavani.buttonTextColor=textColorRed
                  }
                  onReleased:
                  {
                      buttonSisHavani.buttonImageColor=&quot;Imgs/Images/button_right_blue.png&quot;
                      buttonSisHavani.buttonTextColor=textColorBlue
                  }
              }
          }
  
      }
  
  }
  }
  </code></pre>