Rectangle {
  id: quitButton
  [...]
}

Rectangle {
  id: mainArea
  [...]
  anchors.bottom: quitButton.top

  Rectangle {
    id: commandView
    [...]
    MouseArea {
      [...]
      onClicked: {
        console.log("Capturing a photo with ISO " + cameraObject.iso )
        cameraObject.captureImage()
      }
    }
  }


  Rectangle {
    id: imageView
    [...]
    Image {
      [...]
      source: cameraObject.capturedImagePath
    }
    MouseArea {
      anchors.fill: parent
      hoverEnabled: true
      acceptedButtons: Qt.LeftButton
      onClicked: {
         pageMode = pageModeCommandView;
      }
    }
  }
}

states: [
  State {
     name: "StateCommandView";
     when: timePicMain.pageMode == pageModeCommandView;
     PropertyChanges { target: commandView; opacity:1 }
     PropertyChanges { target: imageView; opacity:0 }
  },
  State {
     name: "StateImageView"
     when: timePicMain.pageMode == pageModeImageView;
     PropertyChanges { target: commandView; opacity:0 }
     PropertyChanges { target: imageView; opacity:1 }
  }
]

transitions:   [
  Transition {
     from: "StateCommandView"
     to: "StateImageView"
     reversible: false
     SequentialAnimation {
         NumberAnimation {
           duration: 100
           properties: "detailsOpacity,height"
       }
     [...]
     }
  },
  Transition {
     from: "StateImageView"
     to: "StateCommandView"
     reversible: false
     [...]
  }
]