Added View.translateX, View.translateY, View.scaleX, View.scaleY, View.rotate properties.

CrossPlatformModules.csproj

@@ -79,6 +79,9 @@
     <TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts">
       <DependentUpon>data-binding.xml</DependentUpon>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\transforms\app.ts" />
+    <TypeScriptCompile Include="apps\transforms\main-page.ts" />
+    <TypeScriptCompile Include="apps\transforms\model.ts" />
     <TypeScriptCompile Include="apps\orientation-demo\app.ts" />
     <TypeScriptCompile Include="apps\notifications-demo\app.ts" />
     <TypeScriptCompile Include="apps\notifications-demo\main-page.ts">
@@ -107,6 +110,9 @@
     <Content Include="apps\action-bar-demo\pages\center-view-segmented.xml" />
     <Content Include="apps\action-bar-demo\pages\center-view.xml" />
     <Content Include="apps\action-bar-demo\pages\data-binding.xml" />
+    <Content Include="apps\transforms\main-page.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\editable-text-demo\main-page.css">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
@@ -1858,6 +1864,7 @@
     <Content Include="apps\orientation-demo\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="apps\transforms\package.json" />
     <None Include="js-libs\esprima\LICENSE.BSD" />
     <Content Include="source-control.md" />
     <Content Include="ui\segmented-bar\package.json">
@@ -1950,7 +1957,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/tests/ui/animation/animation-tests.ts

@@ -61,7 +61,7 @@ export var test_AnimatingProperties = function (done) {
     // </snippet>
 }
 
- export var test_CancellingAnimation = function (done) {
+export var test_CancellingAnimation = function (done) {
      var mainPage: pageModule.Page;
      var label: labelModule.Label;
      var pageFactory = function (): pageModule.Page {
@@ -241,3 +241,146 @@ export var test_ChainingAnimations = function (done) {
      // ```
      // </snippet>
  }
+
+export var test_AnimateOpacity = function (done) {
+    var mainPage: pageModule.Page;
+    var label: labelModule.Label;
+    var pageFactory = function (): pageModule.Page {
+        label = new labelModule.Label();
+        label.text = "label";
+        var stackLayout = new stackLayoutModule.StackLayout();
+        stackLayout.addChild(label);
+        mainPage = new pageModule.Page();
+        mainPage.content = stackLayout;
+        return mainPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.waitUntilReady(() => { return label.isLoaded });
+
+    label.animate({opacity: 0.75})
+        .then(() => {
+            TKUnit.assert(label.opacity === 0.75);
+            helper.goBack();
+            done();
+        })
+        .catch((e) => {
+            helper.goBack();
+            done(e);
+        });
+}
+
+export var test_AnimateBackgroundColor = function (done) {
+    var mainPage: pageModule.Page;
+    var label: labelModule.Label;
+    var pageFactory = function (): pageModule.Page {
+        label = new labelModule.Label();
+        label.text = "label";
+        var stackLayout = new stackLayoutModule.StackLayout();
+        stackLayout.addChild(label);
+        mainPage = new pageModule.Page();
+        mainPage.content = stackLayout;
+        return mainPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.waitUntilReady(() => { return label.isLoaded });
+    var red = new colorModule.Color("Red");
+
+    label.animate({ backgroundColor: red })
+        .then(() => {
+        TKUnit.assert(label.backgroundColor.equals(red));
+            helper.goBack();
+            done();
+        })
+        .catch((e) => {
+            helper.goBack();
+            done(e);
+        });
+}
+
+export var test_AnimateTranslate = function (done) {
+    var mainPage: pageModule.Page;
+    var label: labelModule.Label;
+    var pageFactory = function (): pageModule.Page {
+        label = new labelModule.Label();
+        label.text = "label";
+        var stackLayout = new stackLayoutModule.StackLayout();
+        stackLayout.addChild(label);
+        mainPage = new pageModule.Page();
+        mainPage.content = stackLayout;
+        return mainPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.waitUntilReady(() => { return label.isLoaded });
+
+    label.animate({ translate: {x: 100, y: 200} })
+        .then(() => {
+            TKUnit.assert(label.translateX === 100);
+            TKUnit.assert(label.translateY === 200);
+            helper.goBack();
+            done();
+        })
+        .catch((e) => {
+            helper.goBack();
+            done(e);
+        });
+}
+
+export var test_AnimateScale = function (done) {
+    var mainPage: pageModule.Page;
+    var label: labelModule.Label;
+    var pageFactory = function (): pageModule.Page {
+        label = new labelModule.Label();
+        label.text = "label";
+        var stackLayout = new stackLayoutModule.StackLayout();
+        stackLayout.addChild(label);
+        mainPage = new pageModule.Page();
+        mainPage.content = stackLayout;
+        return mainPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.waitUntilReady(() => { return label.isLoaded });
+
+    label.animate({ scale: { x: 1, y: 2 } })
+        .then(() => {
+            TKUnit.assert(label.scaleX === 1);
+            TKUnit.assert(label.scaleY === 2);
+            helper.goBack();
+            done();
+        })
+        .catch((e) => {
+            helper.goBack();
+            done(e);
+        });
+}
+
+export var test_AnimateRotate = function (done) {
+    var mainPage: pageModule.Page;
+    var label: labelModule.Label;
+    var pageFactory = function (): pageModule.Page {
+        label = new labelModule.Label();
+        label.text = "label";
+        var stackLayout = new stackLayoutModule.StackLayout();
+        stackLayout.addChild(label);
+        mainPage = new pageModule.Page();
+        mainPage.content = stackLayout;
+        return mainPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.waitUntilReady(() => { return label.isLoaded });
+
+    label.animate({ rotate: 123 })
+        .then(() => {
+            TKUnit.assert(label.rotate === 123);
+            helper.goBack();
+            done();
+        })
+        .catch((e) => {
+            helper.goBack();
+            done(e);
+        });
+}

apps/transforms/app.ts

@@ -0,0 +1,8 @@
+import application = require("application");
+import trace = require("trace");
+
+trace.enable();
+trace.setCategories(trace.categories.concat(trace.categories.Animation));
+
+application.mainModule = "main-page";
+application.start();

apps/transforms/main-page.ts

@@ -0,0 +1,8 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+import model = require("./model");
+
+export function pageLoaded(args: observable.EventData) {
+    var page = <pages.Page>args.object;
+    page.bindingContext = new model.ViewModel();
+}

apps/transforms/main-page.xml

@@ -0,0 +1,29 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded" id="mainPage">
+  <StackLayout orientation="vertical" backgroundColor="LightGray" paddingLeft="5" paddingRight="5">
+
+    <Label text="translateX" marginTop="5" />
+    <Slider minValue="-300" maxValue="300" value="{{ translateX }}"/>
+
+    <Label text="translateY" marginTop="5" />
+    <Slider minValue="-300" maxValue="300" value="{{ translateY }}"/>
+
+    <Label text="scaleX" marginTop="5" />
+    <Slider minValue="0" maxValue="5" value="{{ scaleX }}"/>
+
+    <Label text="scaleY" marginTop="5" />
+    <Slider minValue="0" maxValue="5" value="{{ scaleY }}"/>
+
+    <Label text="rotate" marginTop="5" />
+    <Slider minValue="-360" maxValue="360" value="{{ rotate }}"/>
+
+    <AbsoluteLayout 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 }}"
+              scaleY="{{ scaleY }}"
+              rotate="{{ rotate }}"
+            />
+    </AbsoluteLayout>
+  </StackLayout>
+</Page>

apps/transforms/model.ts

@@ -0,0 +1,52 @@
+import observable = require("data/observable");
+
+export class ViewModel extends observable.Observable {
+    constructor() {
+        super();
+    }
+
+    private _translateX = 0;;
+    get translateX(): number {
+        return this._translateX;
+    }
+    set translateX(value: number) {
+        this._translateX = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "translateX", value: value });
+    }
+
+    private _translateY = 0;
+    get translateY(): number {
+        return this._translateY;
+    }
+    set translateY(value: number) {
+        this._translateY = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "translateY", value: value });
+    }
+
+    private _scaleX = 1;
+    get scaleX(): number {
+        return this._scaleX;
+    }
+    set scaleX(value: number) {
+        this._scaleX = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "scaleX", value: value });
+    }
+
+    private _scaleY = 1;
+    get scaleY(): number {
+        return this._scaleY;
+    }
+    set scaleY(value: number) {
+        this._scaleY = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "scaleY", value: value });
+    }
+
+    private _rotate = 0;
+    get rotate(): number {
+        return this._rotate;
+    }
+    set rotate(value: number) {
+        this._rotate = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "rotate", value: value });
+    }
+}

apps/transforms/package.json

@@ -0,0 +1,2 @@
+{ "name" : "transforms",
+  "main" : "app.js" }

ui/animation/animation.android.ts

@@ -183,6 +183,7 @@ export class Animation extends common.Animation implements definition.Animation
                     nativeArray = java.lang.reflect.Array.newInstance(floatType, 1);
                     nativeArray[0] = propertyAnimation.value.x * density;
                     animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "translationX", nativeArray));
+                    propertyUpdateCallbacks.push(() => { propertyAnimation.target.translateX = propertyAnimation.value.x; });
                     propertyResetCallbacks.push(() => { nativeView.setTranslationX(originalValue); });
                 }
 
@@ -191,6 +192,7 @@ export class Animation extends common.Animation implements definition.Animation
                     nativeArray = java.lang.reflect.Array.newInstance(floatType, 1);
                     nativeArray[0] = propertyAnimation.value.y * density;
                     animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "translationY", nativeArray));
+                    propertyUpdateCallbacks.push(() => { propertyAnimation.target.translateY = propertyAnimation.value.y; });
                     propertyResetCallbacks.push(() => { nativeView.setTranslationY(originalValue); });
                 }
                 break;
@@ -201,6 +203,7 @@ export class Animation extends common.Animation implements definition.Animation
                     nativeArray = java.lang.reflect.Array.newInstance(floatType, 1);
                     nativeArray[0] = propertyAnimation.value;
                     animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "rotation", nativeArray));
+                    propertyUpdateCallbacks.push(() => { propertyAnimation.target.rotate = propertyAnimation.value; });
                     propertyResetCallbacks.push(() => { nativeView.setRotation(originalValue); });
                 }
                 break;
@@ -211,6 +214,7 @@ export class Animation extends common.Animation implements definition.Animation
                     nativeArray = java.lang.reflect.Array.newInstance(floatType, 1);
                     nativeArray[0] = propertyAnimation.value.x;
                     animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "scaleX", nativeArray));
+                    propertyUpdateCallbacks.push(() => { propertyAnimation.target.scaleX = propertyAnimation.value.x; });
                     propertyResetCallbacks.push(() => { nativeView.setScaleX(originalValue); });
                 }
 
@@ -219,6 +223,7 @@ export class Animation extends common.Animation implements definition.Animation
                     nativeArray = java.lang.reflect.Array.newInstance(floatType, 1);
                     nativeArray[0] = propertyAnimation.value.y;
                     animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "scaleY", nativeArray));
+                    propertyUpdateCallbacks.push(() => { propertyAnimation.target.scaleY = propertyAnimation.value.y; });
                     propertyResetCallbacks.push(() => { nativeView.setScaleY(originalValue); });
                 }
                 break;

ui/animation/animation.ios.ts

@@ -102,6 +102,28 @@ export class Animation extends common.Animation implements definition.Animation
                 }
                 else if (that._finishedAnimations === that._mergedPropertyAnimations.length) {
                     trace.write(that._finishedAnimations + " animations finished.", trace.categories.Animation);
+
+                    // Update our properties on the view.
+                    var i = 0;
+                    var len = that._propertyAnimations.length;
+                    var a: common.PropertyAnimation;
+                    for (; i < len; i++) {
+                        a = that._propertyAnimations[i];
+                        switch (a.property) {
+                            case common.Properties.translate:
+                                a.target.translateX = a.value.x;
+                                a.target.translateY = a.value.y;
+                                break;
+                            case common.Properties.rotate:
+                                a.target.rotate = a.value;
+                                break;
+                            case common.Properties.scale:
+                                a.target.scaleX = a.value.x;
+                                a.target.scaleY = a.value.y;
+                                break;
+                        }
+                    }
+
                     that._resolveAnimationFinishedPromise();
                 }
             }

ui/core/view-common.ts

@@ -98,6 +98,36 @@ var cssClassProperty = new dependencyObservable.Property(
     new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsStyle, onCssClassPropertyChanged)
     );
 
+var translateXProperty = new dependencyObservable.Property(
+    "translateX",
+    "View",
+    new proxy.PropertyMetadata(0)
+    );
+
+var translateYProperty = new dependencyObservable.Property(
+    "translateY",
+    "View",
+    new proxy.PropertyMetadata(0)
+    );
+
+var scaleXProperty = new dependencyObservable.Property(
+    "scaleX",
+    "View",
+    new proxy.PropertyMetadata(1)
+    );
+
+var scaleYProperty = new dependencyObservable.Property(
+    "scaleY",
+    "View",
+    new proxy.PropertyMetadata(1)
+    );
+
+var rotateProperty = new dependencyObservable.Property(
+    "rotate",
+    "View",
+    new proxy.PropertyMetadata(0)
+    );
+
 var isEnabledProperty = new dependencyObservable.Property(
     "isEnabled",
     "View",
@@ -116,6 +146,11 @@ export class View extends proxy.ProxyObject implements definition.View {
 
     public static idProperty = idProperty;
     public static cssClassProperty = cssClassProperty;
+    public static translateXProperty = translateXProperty;
+    public static translateYProperty = translateYProperty;
+    public static scaleXProperty = scaleXProperty;
+    public static scaleYProperty = scaleYProperty;
+    public static rotateProperty = rotateProperty;
     public static isEnabledProperty = isEnabledProperty;
     public static isUserInteractionEnabledProperty = isUserInteractionEnabledProperty;
 
@@ -374,6 +409,41 @@ export class View extends proxy.ProxyObject implements definition.View {
             
     //END Style property shortcuts
 
+    get translateX(): number {
+        return this._getValue(View.translateXProperty);
+    }
+    set translateX(value: number) {
+        this._setValue(View.translateXProperty, value);
+    }
+
+    get translateY(): number {
+        return this._getValue(View.translateYProperty);
+    }
+    set translateY(value: number) {
+        this._setValue(View.translateYProperty, value);
+    }
+
+    get scaleX(): number {
+        return this._getValue(View.scaleXProperty);
+    }
+    set scaleX(value: number) {
+        this._setValue(View.scaleXProperty, value);
+    }
+
+    get scaleY(): number {
+        return this._getValue(View.scaleYProperty);
+    }
+    set scaleY(value: number) {
+        this._setValue(View.scaleYProperty, value);
+    }
+
+    get rotate(): number {
+        return this._getValue(View.rotateProperty);
+    }
+    set rotate(value: number) {
+        this._setValue(View.rotateProperty, value);
+    }
+
     get isEnabled(): boolean {
         return this._getValue(View.isEnabledProperty);
     }

ui/core/view.android.ts

@@ -20,6 +20,36 @@ function onIdPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 }
 (<proxy.PropertyMetadata>viewCommon.View.idProperty.metadata).onSetNativeValue = onIdPropertyChanged;
 
+function onTranslateXPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    view._nativeView.setTranslationX(data.newValue * utils.layout.getDisplayDensity());
+}
+(<proxy.PropertyMetadata>viewCommon.View.translateXProperty.metadata).onSetNativeValue = onTranslateXPropertyChanged;
+
+function onTranslateYPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    view._nativeView.setTranslationY(data.newValue * utils.layout.getDisplayDensity());
+}
+(<proxy.PropertyMetadata>viewCommon.View.translateYProperty.metadata).onSetNativeValue = onTranslateYPropertyChanged;
+
+function onScaleXPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    view._nativeView.setScaleX(data.newValue);
+}
+(<proxy.PropertyMetadata>viewCommon.View.scaleXProperty.metadata).onSetNativeValue = onScaleXPropertyChanged;
+
+function onScaleYPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    view._nativeView.setScaleY(data.newValue);
+}
+(<proxy.PropertyMetadata>viewCommon.View.scaleYProperty.metadata).onSetNativeValue = onScaleYPropertyChanged;
+
+function onRotatePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    view._nativeView.setRotation(data.newValue);
+}
+(<proxy.PropertyMetadata>viewCommon.View.rotateProperty.metadata).onSetNativeValue = onRotatePropertyChanged;
+
 function onIsEnabledPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var view = <View>data.object;
     view._nativeView.setEnabled(data.newValue);

ui/core/view.d.ts

@@ -227,6 +227,31 @@ declare module "ui/core/view" {
         
         //----------Style property shortcuts----------
 
+        /**
+         * Gets or sets the translateX affine transform of the view.
+         */
+        translateX: number;
+
+        /**
+         * Gets or sets the translateY affine transform of the view.
+         */
+        translateY: number;
+
+        /**
+         * Gets or sets the scaleX affine transform of the view.
+         */
+        scaleX: number;
+
+        /**
+         * Gets or sets the scaleY affine transform of the view.
+         */
+        scaleY: number;
+
+        /**
+         * Gets or sets the rotate affine transform of the view.
+         */
+        rotate: number;
+
         /**
          * Gets or sets a value indicating whether the the view is enabled. This affects the appearance of the view.
          */

ui/core/view.ios.ts

@@ -18,6 +18,66 @@ function onIdPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 }
 (<proxy.PropertyMetadata>viewCommon.View.idProperty.metadata).onSetNativeValue = onIdPropertyChanged;
 
+function onTranslateXPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    var newTransform = CGAffineTransformIdentity;
+    newTransform = CGAffineTransformTranslate(newTransform, data.newValue, view.translateY);
+    newTransform = CGAffineTransformRotate(newTransform, view.rotate * Math.PI / 180);
+    newTransform = CGAffineTransformScale(newTransform, view.scaleX, view.scaleY);
+    if (!CGAffineTransformEqualToTransform(view._nativeView.transform, newTransform)) {
+        view._nativeView.transform = newTransform;
+    }
+}
+(<proxy.PropertyMetadata>viewCommon.View.translateXProperty.metadata).onSetNativeValue = onTranslateXPropertyChanged;
+
+function onTranslateYPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    var newTransform = CGAffineTransformIdentity;
+    newTransform = CGAffineTransformTranslate(newTransform, view.translateX, data.newValue);
+    newTransform = CGAffineTransformRotate(newTransform, view.rotate * Math.PI / 180);
+    newTransform = CGAffineTransformScale(newTransform, view.scaleX, view.scaleY);
+    if (!CGAffineTransformEqualToTransform(view._nativeView.transform, newTransform)) {
+        view._nativeView.transform = newTransform;
+    }
+}
+(<proxy.PropertyMetadata>viewCommon.View.translateYProperty.metadata).onSetNativeValue = onTranslateYPropertyChanged;
+
+function onScaleXPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    var newTransform = CGAffineTransformIdentity;
+    newTransform = CGAffineTransformTranslate(newTransform, view.translateX, view.translateY);
+    newTransform = CGAffineTransformRotate(newTransform, view.rotate * Math.PI / 180);
+    newTransform = CGAffineTransformScale(newTransform, data.newValue, view.scaleY);
+    if (!CGAffineTransformEqualToTransform(view._nativeView.transform, newTransform)) {
+        view._nativeView.transform = newTransform;
+    }
+}
+(<proxy.PropertyMetadata>viewCommon.View.scaleXProperty.metadata).onSetNativeValue = onScaleXPropertyChanged;
+
+function onScaleYPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    var newTransform = CGAffineTransformIdentity;
+    newTransform = CGAffineTransformTranslate(newTransform, view.translateX, view.translateY);
+    newTransform = CGAffineTransformRotate(newTransform, view.rotate * Math.PI / 180);
+    newTransform = CGAffineTransformScale(newTransform, view.scaleX, data.newValue);
+    if (!CGAffineTransformEqualToTransform(view._nativeView.transform, newTransform)) {
+        view._nativeView.transform = newTransform;
+    }
+}
+(<proxy.PropertyMetadata>viewCommon.View.scaleYProperty.metadata).onSetNativeValue = onScaleYPropertyChanged;
+
+function onRotatePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <View>data.object;
+    var newTransform = CGAffineTransformIdentity;
+    newTransform = CGAffineTransformTranslate(newTransform, view.translateX, view.translateY);
+    newTransform = CGAffineTransformRotate(newTransform, data.newValue * Math.PI / 180);
+    newTransform = CGAffineTransformScale(newTransform, view.scaleX, view.scaleY);
+    if (!CGAffineTransformEqualToTransform(view._nativeView.transform, newTransform)) {
+        view._nativeView.transform = newTransform;
+    }
+}
+(<proxy.PropertyMetadata>viewCommon.View.rotateProperty.metadata).onSetNativeValue = onRotatePropertyChanged;
+
 function onIsEnabledPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var view = <View>data.object;
     if (!view._nativeView) {