n9.dy.fi

I just learned that there is an even simpler way to scale to background image. Instead of changing the Rectangle dimensions whenever the display is rotated we can simply specify the anchors.fill property in the Rectangle element:

anchors.fill: parent

The parent of the Rectangle is the MainPage element so now the Rectangle will always scale to match the dimensions of the page. No need to track the inPortrait property. Nice. Below is the updated main.qml file.

import QtQuick 1.1
import com.nokia.meego 1.0

PageStackWindow {

    property int textSize: 32

    initialPage: mainPage

    TabGroup {
        currentTab: midPage
        LeftPage {
            id: leftPage
        }
        MidPage{
            id: midPage
        }
        RightPage {
            id: rightPage
        }
    }

    MainPage{
        id: mainPage
        Rectangle {
            id: wallpaper
            gradient: Gradient {
                GradientStop {
                    position: 0.000
                    color: "gainsboro"
                }
                GradientStop {
                    position: 1.000
                    color: "slategray"
                }
            }
            anchors.fill: parent
        }
    }
}