A simple QML-layouting in metro style

TopWindow.qml

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.0

ApplicationWindow {
  visibility: Qt.WindowFullScreen
  visible: true
  flags:Qt.FramelessWindowHint
  color: "#23a"

  ScrollView {
    id: main
    x:25
    y:50
    width: parent.width - 50
    height: parent.height - 100
    Grid {
      rows: 4
      spacing: 5
      flow: Grid.TopToBottom
      Rectangle {width: 125;height:125;color:"#FFF"}
      Rectangle {width: 125;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
      Rectangle { width: 255;height:125;color:"#FFF"}
      Rectangle { width: 125;height:125;color:"#FFF"}
    }
  }
}

It will be pretty hard to make them in an array of tiles... just imagine.

Qt.WindowFullScreen is from the wrong enum, it is from Qt::WindowStates

Should be using enum QWindow::Visibility.

Qt.WindowFullScreen has a value of 4, which is actually equal to QWindow::Maximized. This explains why it is necessary to also set Qt.FramelessWindowHint flags to get rid of the border.

Instead use QWindow::FullScreen, which has a value of 5. This will take care of full screen and borderless in one go. It can be accessed from QML as:
visibility: Window.FullScreen
after including:
import QtQuick.Window 2.0