I want switch from a Core Layout to a Full Screen Layout when clicking somewhere in the Core Layout.

I use

  • PageStack to get the switching with back button and stuff
  • Tabs to have something resembling the Core Layout out of the box and because I need it in the future to flick horizontally

My problem is, that PageStack introduces some dark header which is nowhere seen in the design pages. I modified Ubuntu.Components.PageStack to expose the header.visible property to fix this for my app in progress. I grepped through the example apps, for example the gallery-app, but found nothing useful. Maybe too much work around-code-there also.

So what is the canonical (schenkelklopf ) way of stacking Tabs and some full screen Page?

I guess it's just not quite ready yet etc. and inconsistencies are a temporal state right now arising from the development rush of Ubuntu?

As an example I made up this code:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: units.gu(40)
    height: units.gu(71)
    PageStack {
        id: pageStack
        anchors.fill: parent
        Component.onCompleted: push(auberginePage)
        Tabs {
            id: auberginePage
            anchors.fill: parent
            Tab {
                title: "Awesome?"
                page: Rectangle {
                    anchors.fill: parent;
                    visible: false
                    color: "#2C001E"
                    MouseArea {
                        anchors.fill: parent;
                        onClicked: pageStack.push(orangePage)
        Rectangle {
            id: orangePage
            color: "#DD4814"
            visible: false
            anchors.fill: parent
  • 1
    Since the time I asked everything has changed and the question isn't relevant anymore. – payload May 14 '15 at 15:35

Simply set the title of the page that you want to be in fullscreen mode to an empty string, like this:

Page {
    title: ""

Easy as that!

  • Can someone check this? I don't have the SDK these days, but want to mark the correct answer, if it is one. – payload Aug 14 '13 at 22:59
  • Not working for me, I get a rather buggy blank title area that covers up part of my content when I set the anchors.fill to parent. – Jonah Mar 21 '14 at 2:30

I overlooked the __showHeader property and found it while reading other core apps.

pageStack.__showHeader = false

Hack not needed.

  • I've just tried to use this and got a deprecation warning. It didn't seem to work either. What's the correct way of doing this? Seeing as it's a core design pattern in the design guidelines there must be a supported way of doing it. – danpalmer Jul 28 '13 at 1:45
  • Since March 5 this has changed, I believe. Didn't looked into it yet. – payload Jul 31 '13 at 18:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.