<Page loaded="pageLoaded" id="mainPage">
  <GridLayout columns="*, *" rows="auto, *">

    <StackLayout orientation="vertical" backgroundColor="LightGray" paddingLeft="5" paddingRight="5">

      <Label text="{{ 'translateX (' + translateX + ')' }}" marginTop="5" />
      <Slider minValue="-300" maxValue="300" value="{{ translateX }}"/>

      <Label text="{{ 'scaleX (' + (scaleX / 100) + ')' }}" marginTop="5" />
      <Slider minValue="0" maxValue="300" value="{{ scaleX }}"/>

      <Label text="{{ 'originX (' + (originX / 100) + ')' }}" marginTop="5" />
      <Slider minValue="-100" maxValue="200" value="{{ originX }}"/>

      <Label text="{{ 'rotate (' + rotate + ')' }}" marginTop="5" />
      <Slider minValue="-360" maxValue="360" value="{{ rotate }}"/>

    </StackLayout>

    <StackLayout col="1" orientation="vertical" backgroundColor="LightGray" paddingLeft="5" paddingRight="5">

      <Label text="{{ 'translateY (' + translateY + ')' }}" marginTop="5" />
      <Slider minValue="-300" maxValue="300" value="{{ translateY }}"/>

      <Label text="{{ 'scaleY (' + (scaleY / 100) + ')' }}" marginTop="5" />
      <Slider minValue="0" maxValue="300" value="{{ scaleY }}"/>

      <Label text="{{ 'originY (' + (originY / 100) + ')' }}" marginTop="5" />
      <Slider minValue="-100" maxValue="200" value="{{ originY }}"/>

      <Button text="Reset" margin="5" tap="onReset" />
    </StackLayout>

    <AbsoluteLayout row="1" colSpan="2"
                    backgroundColor="Yellow" width="300" height="300" clipToBounds="true" marginTop="5" marginBottom="5">
      <Label text="Transform Me!" backgroundColor="Green" width="100" height="100" left="100" top="100"
              translateX="{{ translateX }}"
              translateY="{{ translateY }}"
              scaleX="{{ scaleX / 100 }}"
              scaleY="{{ scaleY / 100 }}"
              originX="{{ originX / 100 }}"
              originY="{{ originY / 100 }}"
              rotate="{{ rotate }}"
            />

      <StackLayout width="1" height="300" backgroundColor="gray" left="99" />
      <StackLayout width="1" height="300" backgroundColor="gray" left="200" />

      <StackLayout height="1" width="300" backgroundColor="gray" top="99" />
      <StackLayout height="1" width="300" backgroundColor="gray" top="200" />

      <StackLayout height="2" width="2" backgroundColor="red" marginLeft="{{ originX + 99 }}" marginTop="{{ originY + 99 }}" />

    </AbsoluteLayout>
  </GridLayout>
</Page>