Merge pull request #3317 from NativeScript/cankov/modules30

Fixing type errors in tests

tns-core-modules/ui/core/bindable.ts

@@ -1,4 +1,4 @@
-import definition = require("ui/core/bindable");
+import * as definition from "ui/core/bindable";
 import { Observable, PropertyChangeData } from "data/observable";
 import { unsetValue, DependencyObservable, Property, PropertyMetadata, PropertyMetadataSettings, PropertyChangeData as DependencyPropertyChangeData } from "ui/core/dependency-observable";
 import { addWeakEventListener, removeWeakEventListener } from "ui/core/weak-event-listener";

tns-core-modules/ui/core/dependency-observable.d.ts

@@ -7,7 +7,8 @@ declare module "ui/core/dependency-observable" {
     /**
      * Value specifing that Property value should be reset. Used when bindingContext on bound property is creared/null.
      */
-    export const unsetValue: Object;
+    export const unsetValue: any;
+
     /**
      * Interface used by Propery 'defaultValueGetter' function to specify if the default value returned by the native instance can be cached or not.
      * One example is - android.widget.Button background. It is state drawable so it cannot be reused/cached.

tns-core-modules/ui/core/proxy.ts

@@ -1,6 +1,6 @@
-import bindable = require("ui/core/bindable");
-import dependencyObservable = require("ui/core/dependency-observable");
-import definition = require("ui/core/proxy");
+import * as bindable from "ui/core/bindable";
+import * as dependencyObservable from "ui/core/dependency-observable";
+import * as definition from "ui/core/proxy";
 import * as types from "utils/types";
 import * as observable from "data/observable";
 

tns-core-modules/ui/core/view-common.ts

@@ -950,30 +950,13 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     //     // Check for a valid _nativeView instance
     //     return !!this._nativeView;
     // }
-}
 
-export function getLengthEffectiveValue(param: Length): number {
-    switch (param.unit) {
-        case "px":
-            return Math.round(param.value);
-
-        default:
-        case "dip":
-            return Math.round(layout.getDisplayDensity() * param.value);
+    public _getValue(): never {
+        throw new Error("The View._setValue is obsolete. There is a new property system.")
     }
-}
 
-function getPercentLengthEffectiveValue(prentAvailableLength: number, param: PercentLength): number {
-    switch (param.unit) {
-        case "%":
-            return Math.round(prentAvailableLength * param.value);
-
-        case "px":
-            return Math.round(param.value);
-
-        default:
-        case "dip":
-            return Math.round(layout.getDisplayDensity() * param.value);
+    public _setValue(): never {
+        throw new Error("The View._setValue is obsolete. There is a new property system.")
     }
 }
 
@@ -984,25 +967,64 @@ function updateChildLayoutParams(child: ViewCommon, parent: ViewCommon, density:
     let parentWidthMeasureSize = layout.getMeasureSpecSize(parentWidthMeasureSpec);
     let parentWidthMeasureMode = layout.getMeasureSpecMode(parentWidthMeasureSpec);
     let parentAvailableWidth = parentWidthMeasureMode === layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
-    style.effectiveWidth = getPercentLengthEffectiveValue(parentAvailableWidth, style.width);
-    style.effectiveMarginLeft = getPercentLengthEffectiveValue(parentAvailableWidth, style.marginLeft);
-    style.effectiveMarginRight = getPercentLengthEffectiveValue(parentAvailableWidth, style.marginRight);
+    style.effectiveWidth = PercentLength.toDevicePixels(style.width, parentAvailableWidth)
+    style.effectiveMarginLeft = PercentLength.toDevicePixels(style.marginLeft, parentAvailableWidth);
+    style.effectiveMarginRight = PercentLength.toDevicePixels(style.marginRight, parentAvailableWidth);
 
     let parentHeightMeasureSpec = parent._currentHeightMeasureSpec;
     let parentHeightMeasureSize = layout.getMeasureSpecSize(parentHeightMeasureSpec);
     let parentHeightMeasureMode = layout.getMeasureSpecMode(parentHeightMeasureSpec);
     let parentAvailableHeight = parentHeightMeasureMode === layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
-    style.effectiveHeight = getPercentLengthEffectiveValue(parentAvailableHeight, style.height);
-    style.effectiveMarginTop = getPercentLengthEffectiveValue(parentAvailableHeight, style.marginTop);
-    style.effectiveMarginBottom = getPercentLengthEffectiveValue(parentAvailableHeight, style.marginBottom);
+    style.effectiveHeight = PercentLength.toDevicePixels(style.height, parentAvailableHeight);
+    style.effectiveMarginTop = PercentLength.toDevicePixels(style.marginTop, parentAvailableHeight);
+    style.effectiveMarginBottom = PercentLength.toDevicePixels(style.marginBottom, parentAvailableHeight);
 }
 
-interface Length {
-    readonly unit: "dip" | "px";
-    readonly value: number;
+function equalsCommon(a: Length, b: Length): boolean;
+function equalsCommon(a: PercentLength, b: PercentLength): boolean;
+function equalsCommon(a: PercentLength, b: PercentLength): boolean {
+    if (a == "auto") {
+        return b == "auto";
+    }
+    if (typeof a === "number") {
+        if (b == "auto") {
+            return false;
+        }
+        if (typeof b === "number") {
+            return a == b;
+        }
+        return b.unit == "dip" && a == b.value;
+    }
+    if (b == "auto") {
+        return false;
+    }
+    if (typeof b === "number") {
+        return a.unit == "dip" && a.value == b;
+    }
+    return a.value == b.value && a.unit == b.unit;
 }
 
-interface PercentLength {
+function toDevicePixelsCommon(length: Length, auto: number): number;
+function toDevicePixelsCommon(length: PercentLength, auto: number, parentSize: number): number;
+function toDevicePixelsCommon(length: PercentLength, auto: number, parentAvailableWidth?: number): number {
+    if (length == "auto") {
+        return auto;
+    }
+    if (typeof length === "number") {
+        return Math.round(layout.getDisplayDensity() * length);
+    }
+    switch (length.unit) {
+        case "px":
+            return Math.round(length.value);
+        default:
+        case "dip":
+            return Math.round(layout.getDisplayDensity() * length.value);
+        case "%":
+            return Math.round(parentAvailableWidth * length.value);
+    }
+}
+
+export type PercentLength = "auto" | number | {
     readonly unit: "%" | "dip" | "px";
     readonly value: number;
 }
@@ -1045,11 +1067,20 @@ export namespace PercentLength {
             return value;
         }
     }
+    export const equals: { (a: PercentLength, b: PercentLength): boolean } = equalsCommon;
+    export const toDevicePixels: { (length: PercentLength, parentAvailableWidth: number): number } = toDevicePixelsCommon;
 }
 
+export type Length = "auto" | number | {
+    readonly unit: "dip" | "px";
+    readonly value: number;
+};
+
 export namespace Length {
     export function parse(value: string | Length): Length {
-        if (typeof value === "string") {
+        if (value == "auto") {
+            return "auto";
+        } else if (typeof value === "string") {
             let type: "dip" | "px";
             let numberValue = 0;
             let stringValue = value.trim();
@@ -1074,6 +1105,18 @@ export namespace Length {
             return value;
         }
     }
+    export const equals: { (a: Length, b: Length): boolean } = equalsCommon;
+    export const toDevicePixels: { (length: Length, auto: number): number } = toDevicePixelsCommon;
+}
+
+declare module "ui/core/view" {
+    export namespace Length {
+        export function toDevicePixels(length: Length, auto: number): number;
+    }
+
+    export namespace PercentLength {
+        export function toDevicePixels(length: PercentLength, auto: number, availableParentSize: number): number;
+    }
 }
 
 export function booleanConverter(v: string): boolean {
@@ -1104,32 +1147,28 @@ isUserInteractionEnabledProperty.register(ViewCommon);
 
 export const zeroLength: Length = { value: 0, unit: "px" };
 
-export function lengthComparer(x: Length, y: Length): boolean {
-    return x.unit === y.unit && x.value === y.value;
-}
-
 export const minWidthProperty = new CssProperty<Style, Length>({
-    name: "minWidth", cssName: "min-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "minWidth", cssName: "min-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        target.effectiveMinWidth = getLengthEffectiveValue(newValue);
+        target.effectiveMinWidth = Length.toDevicePixels(newValue, 0);
     }, valueConverter: Length.parse
 });
 minWidthProperty.register(Style);
 
 export const minHeightProperty = new CssProperty<Style, Length>({
-    name: "minHeight", cssName: "min-height", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "minHeight", cssName: "min-height", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        target.effectiveMinHeight = getLengthEffectiveValue(newValue);
+        target.effectiveMinHeight = Length.toDevicePixels(newValue, 0);
     }, valueConverter: Length.parse
 });
 minHeightProperty.register(Style);
 
 const matchParent: Length = { value: -1, unit: "px" };
 
-export const widthProperty = new CssProperty<Style, PercentLength>({ name: "width", cssName: "width", defaultValue: matchParent, affectsLayout: isIOS, equalityComparer: lengthComparer, valueConverter: PercentLength.parse });
+export const widthProperty = new CssProperty<Style, PercentLength>({ name: "width", cssName: "width", defaultValue: matchParent, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 widthProperty.register(Style);
 
-export const heightProperty = new CssProperty<Style, PercentLength>({ name: "height", cssName: "height", defaultValue: matchParent, affectsLayout: isIOS, equalityComparer: lengthComparer, valueConverter: PercentLength.parse });
+export const heightProperty = new CssProperty<Style, PercentLength>({ name: "height", cssName: "height", defaultValue: matchParent, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 heightProperty.register(Style);
 
 const marginProperty = new ShorthandProperty<Style>({
@@ -1139,16 +1178,16 @@ const marginProperty = new ShorthandProperty<Style>({
 });
 marginProperty.register(Style);
 
-export const marginLeftProperty = new CssProperty<Style, PercentLength>({ name: "marginLeft", cssName: "margin-left", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer, valueConverter: PercentLength.parse });
+export const marginLeftProperty = new CssProperty<Style, PercentLength>({ name: "marginLeft", cssName: "margin-left", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 marginLeftProperty.register(Style);
 
-export const marginRightProperty = new CssProperty<Style, PercentLength>({ name: "marginRight", cssName: "margin-right", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer, valueConverter: PercentLength.parse });
+export const marginRightProperty = new CssProperty<Style, PercentLength>({ name: "marginRight", cssName: "margin-right", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 marginRightProperty.register(Style);
 
-export const marginTopProperty = new CssProperty<Style, PercentLength>({ name: "marginTop", cssName: "margin-top", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer, valueConverter: PercentLength.parse });
+export const marginTopProperty = new CssProperty<Style, PercentLength>({ name: "marginTop", cssName: "margin-top", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 marginTopProperty.register(Style);
 
-export const marginBottomProperty = new CssProperty<Style, PercentLength>({ name: "marginBottom", cssName: "margin-bottom", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer, valueConverter: PercentLength.parse });
+export const marginBottomProperty = new CssProperty<Style, PercentLength>({ name: "marginBottom", cssName: "margin-bottom", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 marginBottomProperty.register(Style);
 
 const paddingProperty = new ShorthandProperty<Style>({
@@ -1159,33 +1198,33 @@ const paddingProperty = new ShorthandProperty<Style>({
 paddingProperty.register(Style);
 
 export const paddingLeftProperty = new CssProperty<Style, Length>({
-    name: "paddingLeft", cssName: "padding-left", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "paddingLeft", cssName: "padding-left", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        target.effectivePaddingLeft = getLengthEffectiveValue(newValue);
+        target.effectivePaddingLeft = Length.toDevicePixels(newValue, 0);
     }, valueConverter: Length.parse
 });
 paddingLeftProperty.register(Style);
 
 export const paddingRightProperty = new CssProperty<Style, Length>({
-    name: "paddingRight", cssName: "padding-right", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "paddingRight", cssName: "padding-right", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        target.effectivePaddingRight = getLengthEffectiveValue(newValue);
+        target.effectivePaddingRight = Length.toDevicePixels(newValue, 0);
     }, valueConverter: Length.parse
 });
 paddingRightProperty.register(Style);
 
 export const paddingTopProperty = new CssProperty<Style, Length>({
-    name: "paddingTop", cssName: "padding-top", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "paddingTop", cssName: "padding-top", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        target.effectivePaddingTop = getLengthEffectiveValue(newValue);
+        target.effectivePaddingTop = Length.toDevicePixels(newValue, 0);
     }, valueConverter: Length.parse
 });
 paddingTopProperty.register(Style);
 
 export const paddingBottomProperty = new CssProperty<Style, Length>({
-    name: "paddingBottom", cssName: "padding-bottom", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "paddingBottom", cssName: "padding-bottom", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        target.effectivePaddingBottom = getLengthEffectiveValue(newValue);
+        target.effectivePaddingBottom = Length.toDevicePixels(newValue, 0);
     }, valueConverter: Length.parse
 });
 paddingBottomProperty.register(Style);
@@ -1634,9 +1673,9 @@ const borderWidthProperty = new ShorthandProperty<Style>({
 borderWidthProperty.register(Style);
 
 export const borderTopWidthProperty = new CssProperty<Style, Length>({
-    name: "borderTopWidth", cssName: "border-top-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "borderTopWidth", cssName: "border-top-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        let value = getLengthEffectiveValue(newValue);
+        let value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
             throw new Error(`border-top-width should be Non-Negative Finite number. Value: ${value}`);
         }
@@ -1648,9 +1687,9 @@ export const borderTopWidthProperty = new CssProperty<Style, Length>({
 borderTopWidthProperty.register(Style);
 
 export const borderRightWidthProperty = new CssProperty<Style, Length>({
-    name: "borderRightWidth", cssName: "border-right-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "borderRightWidth", cssName: "border-right-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        let value = getLengthEffectiveValue(newValue);
+        let value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
             throw new Error(`border-right-width should be Non-Negative Finite number. Value: ${value}`);
         }
@@ -1662,9 +1701,9 @@ export const borderRightWidthProperty = new CssProperty<Style, Length>({
 borderRightWidthProperty.register(Style);
 
 export const borderBottomWidthProperty = new CssProperty<Style, Length>({
-    name: "borderBottomWidth", cssName: "border-bottom-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "borderBottomWidth", cssName: "border-bottom-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        let value = getLengthEffectiveValue(newValue);
+        let value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
             throw new Error(`border-bottom-width should be Non-Negative Finite number. Value: ${value}`);
         }
@@ -1676,9 +1715,9 @@ export const borderBottomWidthProperty = new CssProperty<Style, Length>({
 borderBottomWidthProperty.register(Style);
 
 export const borderLeftWidthProperty = new CssProperty<Style, Length>({
-    name: "borderLeftWidth", cssName: "border-left-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer,
+    name: "borderLeftWidth", cssName: "border-left-width", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals,
     valueChanged: (target, newValue) => {
-        let value = getLengthEffectiveValue(newValue);
+        let value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
             throw new Error(`border-left-width should be Non-Negative Finite number. Value: ${value}`);
         }

tns-core-modules/ui/core/view.android.ts

@@ -202,7 +202,7 @@ export class View extends ViewCommon {
 
         // Widgets like buttons and such have reference to their native view in both properties.
         if (this[NATIVE_VIEW] === this[ANDROID]) {
-            this[NATIVE_VIEW] = undefined;
+            (<any>this)[NATIVE_VIEW] = undefined;
         }
 
         // Handle layout and content view
@@ -461,106 +461,6 @@ export class View extends ViewCommon {
         this.nativeView.setAlpha(value);
     }
 
-    get [minWidthProperty.native](): Length {
-        return { value: org.nativescript.widgets.ViewHelper.getMinWidth(this.nativeView), unit: "px" };
-    }
-    set [minWidthProperty.native](value: Length) {
-        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
-        org.nativescript.widgets.ViewHelper.setMinWidth(this.nativeView, value.value * density);
-    }
-
-    get [minHeightProperty.native](): Length {
-        return { value: org.nativescript.widgets.ViewHelper.getMinHeight(this.nativeView), unit: "px" };
-    }
-    set [minHeightProperty.native](value: Length) {
-        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
-        org.nativescript.widgets.ViewHelper.setMinHeight(this.nativeView, value.value * density);
-    }
-
-    get [widthProperty.native](): PercentLength {
-        return { value: org.nativescript.widgets.ViewHelper.getWidth(this.nativeView), unit: "px" };
-    }
-    set [widthProperty.native](value: PercentLength) {
-        let type = value.unit;
-        if (type === "%") {
-            org.nativescript.widgets.ViewHelper.setWidthPercent(this.nativeView, value.value);
-        } else if (type === "px") {
-            org.nativescript.widgets.ViewHelper.setWidth(this.nativeView, value.value);
-        } else {
-            org.nativescript.widgets.ViewHelper.setWidth(this.nativeView, value.value * layout.getDisplayDensity());
-        }
-    }
-
-    get [heightProperty.native](): PercentLength {
-        return { value: org.nativescript.widgets.ViewHelper.getHeight(this.nativeView), unit: "px" };
-    }
-    set [heightProperty.native](value: PercentLength) {
-        let type = value.unit;
-        if (type === "%") {
-            org.nativescript.widgets.ViewHelper.setHeightPercent(this.nativeView, value.value);
-        } else if (type === "px") {
-            org.nativescript.widgets.ViewHelper.setHeight(this.nativeView, value.value);
-        } else {
-            org.nativescript.widgets.ViewHelper.setHeight(this.nativeView, value.value * layout.getDisplayDensity());
-        }
-    }
-
-    get [marginLeftProperty.native](): PercentLength {
-        return { value: org.nativescript.widgets.ViewHelper.getMarginLeft(this.nativeView), unit: "px" };
-    }
-    set [marginLeftProperty.native](value: PercentLength) {
-        let type = value.unit;
-        if (type === "%") {
-            org.nativescript.widgets.ViewHelper.setMarginLeftPercent(this.nativeView, value.value);
-        } else if (type === "px") {
-            org.nativescript.widgets.ViewHelper.setMarginLeft(this.nativeView, value.value);
-        } else {
-            org.nativescript.widgets.ViewHelper.setMarginLeft(this.nativeView, value.value * layout.getDisplayDensity());
-        }
-    }
-
-    get [marginTopProperty.native](): PercentLength {
-        return { value: org.nativescript.widgets.ViewHelper.getMarginTop(this.nativeView), unit: "px" };
-    }
-    set [marginTopProperty.native](value: PercentLength) {
-        let type = value.unit;
-        if (type === "%") {
-            org.nativescript.widgets.ViewHelper.setMarginTopPercent(this.nativeView, value.value);
-        } else if (type === "px") {
-            org.nativescript.widgets.ViewHelper.setMarginTop(this.nativeView, value.value);
-        } else {
-            org.nativescript.widgets.ViewHelper.setMarginTop(this.nativeView, value.value * layout.getDisplayDensity());
-        }
-    }
-
-    get [marginRightProperty.native](): PercentLength {
-        return { value: org.nativescript.widgets.ViewHelper.getMarginRight(this.nativeView), unit: "px" };
-    }
-    set [marginRightProperty.native](value: PercentLength) {
-        let type = value.unit;
-        if (type === "%") {
-            org.nativescript.widgets.ViewHelper.setMarginRightPercent(this.nativeView, value.value);
-        } else if (type === "px") {
-            org.nativescript.widgets.ViewHelper.setMarginRight(this.nativeView, value.value);
-        } else {
-            org.nativescript.widgets.ViewHelper.setMarginRight(this.nativeView, value.value * layout.getDisplayDensity());
-        }
-    }
-
-    get [marginBottomProperty.native](): PercentLength {
-        return { value: org.nativescript.widgets.ViewHelper.getMarginBottom(this.nativeView), unit: "px" };
-    }
-    set [marginBottomProperty.native](value: PercentLength) {
-        let type = value.unit;
-        if (type === "%") {
-            org.nativescript.widgets.ViewHelper.setMarginBottomPercent(this.nativeView, value.value);
-        } else if (type === "px") {
-            org.nativescript.widgets.ViewHelper.setMarginBottom(this.nativeView, value.value);
-        } else {
-            org.nativescript.widgets.ViewHelper.setMarginBottom(this.nativeView, value.value * layout.getDisplayDensity());
-        }
-    }
-
     get [horizontalAlignmentProperty.native](): string {
         return org.nativescript.widgets.ViewHelper.getHorizontalAlignment(this.nativeView);
     }
@@ -575,38 +475,6 @@ export class View extends ViewCommon {
         org.nativescript.widgets.ViewHelper.setVerticalAlignment(this.nativeView, value);
     }
 
-    get [paddingLeftProperty.native](): Length {
-        return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" };
-    }
-    set [paddingLeftProperty.native](value: Length) {
-        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
-        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, value.value * density);
-    }
-
-    get [paddingTopProperty.native](): Length {
-        return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" };
-    }
-    set [paddingTopProperty.native](value: Length) {
-        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
-        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, value.value * density);
-    }
-
-    get [paddingRightProperty.native](): Length {
-        return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" };
-    }
-    set [paddingRightProperty.native](value: Length) {
-        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
-        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, value.value * density);
-    }
-
-    get [paddingBottomProperty.native](): Length {
-        return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" };
-    }
-    set [paddingBottomProperty.native](value: Length) {
-        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
-        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, value.value * density);
-    }
-
     get [rotateProperty.native](): number {
         return org.nativescript.widgets.ViewHelper.getRotate(this.nativeView);
     }
@@ -665,408 +533,122 @@ export class View extends ViewCommon {
     }
 }
 
-// export class ViewStyler implements style.Styler {
-//     // Background and borders methods
-//     private static setBackgroundAndBorder(view: View, newValue: any, defaultValue?: any) {
-//         background.ad.onBackgroundOrBorderPropertyChanged(view);
-//     }
-
-//     private static resetBackgroundAndBorder(view: View, nativeValue: any) {
-//         background.ad.onBackgroundOrBorderPropertyChanged(view);
-//     }
-
-//     // Visibility methods
-//     private static setVisibilityProperty(view: View, newValue: any) {
-//         let androidValue = (newValue === enums.Visibility.visible) ? android.view.View.VISIBLE : android.view.View.GONE;
-//         (<android.view.View>view._nativeView).setVisibility(androidValue);
-//     }
-
-//     private static resetVisibilityProperty(view: View, nativeValue: any) {
-//         (<android.view.View>view._nativeView).setVisibility(android.view.View.VISIBLE);
-//     }
-
-//     // Opacity methods
-//     private static setOpacityProperty(view: View, newValue: any) {
-//         (<android.view.View>view._nativeView).setAlpha(float(newValue));
-//     }
-
-//     private static resetOpacityProperty(view: View, nativeValue: any) {
-//         (<android.view.View>view._nativeView).setAlpha(float(1.0));
-//     }
-
-//     // minWidth methods
-//     private static setMinWidthProperty(view: View, newValue: any) {
-//         (<android.view.View>view._nativeView).setMinimumWidth(Math.round(newValue * layout.getDisplayDensity()));
-//     }
-
-//     private static resetMinWidthProperty(view: View, nativeValue: any) {
-//         (<android.view.View>view._nativeView).setMinimumWidth(0);
-//     }
-
-//     // minHeight methods
-//     private static setMinHeightProperty(view: View, newValue: any) {
-//         (<android.view.View>view._nativeView).setMinimumHeight(Math.round(newValue * layout.getDisplayDensity()));
-//     }
-
-//     private static resetMinHeightProperty(view: View, nativeValue: any) {
-//         (<android.view.View>view._nativeView).setMinimumHeight(0);
-//     }
-
-//     private static setNativeLayoutParamsProperty(view: View, params: CommonLayoutParams): void {
-//         let nativeView: android.view.View = view._nativeView;
-
-//         let width = params.width * layout.getDisplayDensity();
-//         let height = params.height * layout.getDisplayDensity();
-
-//         // If width is not specified set it as WRAP_CONTENT
-//         if (width < 0) {
-//             width = -2;
-//         }
-
-//         // If height is not specified set it as WRAP_CONTENT
-//         if (height < 0) {
-//             height = -2;
-//         }
-
-//         let gravity = 0;
-//         switch (params.horizontalAlignment) {
-//             case enums.HorizontalAlignment.left:
-//                	gravity |= android.view.Gravity.LEFT;
-//                 break;
-
-//             case enums.HorizontalAlignment.center:
-//                 gravity |= android.view.Gravity.CENTER_HORIZONTAL;
-//                 break;
-
-//             case enums.HorizontalAlignment.right:
-//                 gravity |= android.view.Gravity.RIGHT;
-//                 break;
-
-//             case enums.HorizontalAlignment.stretch:
-//                 gravity |= android.view.Gravity.FILL_HORIZONTAL;
-//                 // If width is not specified set it as MATCH_PARENT
-//                 if (width < 0) {
-//                     width = -1;
-//                 }
-//                 break;
-
-//             default:
-//                 throw new Error("Invalid horizontalAlignment value: " + params.horizontalAlignment);
-//         }
-
-//         switch (params.verticalAlignment) {
-//             case enums.VerticalAlignment.top:
-//                 gravity |= android.view.Gravity.TOP;
-//                 break;
-
-//             case enums.VerticalAlignment.center:
-//             case enums.VerticalAlignment.middle:
-//                 gravity |= android.view.Gravity.CENTER_VERTICAL;
-//                 break;
-
-//             case enums.VerticalAlignment.bottom:
-//                 gravity |= android.view.Gravity.BOTTOM;
-//                 break;
-
-//             case enums.VerticalAlignment.stretch:
-//                 gravity |= android.view.Gravity.FILL_VERTICAL;
-//                 // If height is not specified set it as MATCH_PARENT
-//                 if (height < 0) {
-//                     height = -1;
-//                 }
-//                 break;
-
-//             default:
-//                 throw new Error("Invalid verticalAlignment value: " + params.verticalAlignment);
-//         }
-
-//         let lp = nativeView.getLayoutParams();
-//         lp.width = Math.round(width);
-//         lp.height = Math.round(height);
-
-//         if (lp instanceof org.nativescript.widgets.CommonLayoutParams) {
-//             lp.widthPercent = params.widthPercent;
-//             lp.heightPercent = params.heightPercent;
-//             lp.leftMarginPercent = params.leftMarginPercent;
-//             lp.topMarginPercent = params.topMarginPercent;
-//             lp.rightMarginPercent = params.rightMarginPercent;
-//             lp.bottomMarginPercent = params.bottomMarginPercent;
-//             lp.leftMargin = Math.round(params.leftMargin * layout.getDisplayDensity());
-//             lp.topMargin = Math.round(params.topMargin * layout.getDisplayDensity());
-//             lp.rightMargin = Math.round(params.rightMargin * layout.getDisplayDensity());
-//             lp.bottomMargin = Math.round(params.bottomMargin * layout.getDisplayDensity());
-//             lp.gravity = gravity;
-//	           if (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) {
-//                if (!flexbox) {
-//                   flexbox = require("ui/layouts/flexbox-layout");
-//               }
-//               flexbox._setAndroidLayoutParams(lp, view);
-//             }
-//         }
-//         else {
-//             let layoutParams: any = lp;
-//             if (types.isDefined(layoutParams.widthPercent)) {
-//                 layoutParams.widthPercent = params.widthPercent;
-//             }
-
-//             if (types.isDefined(layoutParams.heightPercent)) {
-//                 layoutParams.heightPercent = params.heightPercent;
-//             }
-
-//             if (types.isDefined(layoutParams.leftMarginPercent)) {
-//                 layoutParams.leftMarginPercent = params.leftMarginPercent;
-//             }
-
-//             if (types.isDefined(layoutParams.topMarginPercent)) {
-//                 layoutParams.topMarginPercent = params.topMarginPercent;
-//             }
-
-//             if (types.isDefined(layoutParams.rightMarginPercent)) {
-//                 layoutParams.rightMarginPercent = params.rightMarginPercent;
-//             }
-
-//             if (types.isDefined(layoutParams.bottomMarginPercent)) {
-//                 layoutParams.bottomMarginPercent = params.bottomMarginPercent;
-//             }
-
-//             if (types.isDefined(layoutParams.leftMargin)) {
-//                 layoutParams.leftMargin = Math.round(params.leftMargin * layout.getDisplayDensity());
-//             }
-
-//             if (types.isDefined(layoutParams.topMargin)) {
-//                 layoutParams.topMargin = Math.round(params.topMargin * layout.getDisplayDensity());
-//             }
-
-//             if (types.isDefined(layoutParams.rightMargin)) {
-//                 layoutParams.rightMargin = Math.round(params.rightMargin * layout.getDisplayDensity());
-//             }
-
-//             if (types.isDefined(layoutParams.bottomMargin)) {
-//                 layoutParams.bottomMargin = Math.round(params.bottomMargin * layout.getDisplayDensity());
-//             }
-
-//             if (types.isDefined(layoutParams.gravity)) {
-//                 layoutParams.gravity = gravity;
-//             }
-//         }
-
-//         nativeView.setLayoutParams(lp);
-//     }
-
-//     private static resetNativeLayoutParamsProperty(view: View, nativeValue: any): void {
-//         ViewStyler.setNativeLayoutParamsProperty(view, style.nativeLayoutParamsProperty.defaultValue)
-//     }
-
-//     private static getNativePaddingLeft(view: View): number {
-//         let density = layout.getDisplayDensity();
-//         return view._nativeView.getPaddingLeft() / density;
-//     }
-
-//     private static getNativePaddingTop(view: View): number {
-//         let density = layout.getDisplayDensity();
-//         return view._nativeView.getPaddingTop() / density;
-//     }
-
-//     private static getNativePaddingRight(view: View): number {
-//         let density = layout.getDisplayDensity();
-//         return view._nativeView.getPaddingRight() / density;
-//     }
-
-//     private static getNativePaddingBottom(view: View): number {
-//         let density = layout.getDisplayDensity();
-//         return view._nativeView.getPaddingBottom() / density;
-//     }
-
-//     private static setNativePaddingLeft(view: View, value: number): void {
-//         let nativeView = view._nativeView;
-//         let density = layout.getDisplayDensity();
-//         let left = (value + view.borderWidth) * density;
-//         let top = nativeView.getPaddingTop();
-//         let right = nativeView.getPaddingRight();
-//         let bottom = nativeView.getPaddingBottom();
-//         nativeView.setPadding(left, top, right, bottom);
-//     }
-
-//     private static setNativePaddingTop(view: View, value: number): void {
-//         let nativeView = view._nativeView;
-//         let density = layout.getDisplayDensity();
-//         let left = nativeView.getPaddingLeft();
-//         let top = (value + view.borderWidth) * density;
-//         let right = nativeView.getPaddingRight();
-//         let bottom = nativeView.getPaddingBottom();
-//         nativeView.setPadding(left, top, right, bottom);
-//     }
-
-//     private static setNativePaddingRight(view: View, value: number): void {
-//         let nativeView = view._nativeView;
-//         let density = layout.getDisplayDensity();
-//         let left = nativeView.getPaddingLeft();
-//         let top = nativeView.getPaddingTop();
-//         let right = (value + view.borderWidth) * density;
-//         let bottom = nativeView.getPaddingBottom();
-//         nativeView.setPadding(left, top, right, bottom);
-//     }
-
-//     private static setNativePaddingBottom(view: View, value: number): void {
-//         let nativeView = view._nativeView;
-//         let density = layout.getDisplayDensity();
-//         let left = nativeView.getPaddingLeft();
-//         let top = nativeView.getPaddingTop();
-//         let right = nativeView.getPaddingRight();
-//         let bottom = (value + view.borderWidth) * density;
-//         nativeView.setPadding(left, top, right, bottom);
-//     }
-
-//     // Rotate
-//     private static setRotateProperty(view: View, newValue: any) {
-//         view._nativeView.setRotation(newValue);
-//     }
-
-//     private static resetRotateProperty(view: View, nativeValue: any) {
-//         view._nativeView.setRotation(float(0));
-//     }
-
-//     // ScaleX
-//     private static setScaleXProperty(view: View, newValue: any) {
-//         view._nativeView.setScaleX(newValue);
-//     }
-
-//     private static resetScaleXProperty(view: View, nativeValue: any) {
-//         view._nativeView.setScaleX(float(1.0));
-//     }
-
-//     // ScaleY
-//     private static setScaleYProperty(view: View, newValue: any) {
-//         view._nativeView.setScaleY(newValue);
-//     }
-
-//     private static resetScaleYProperty(view: View, nativeValue: any) {
-//         view._nativeView.setScaleY(float(1.0));
-//     }
-
-//     // TranslateX
-//     private static setTranslateXProperty(view: View, newValue: any) {
-//         view._nativeView.setTranslationX(newValue * layout.getDisplayDensity());
-//     }
-
-//     private static resetTranslateXProperty(view: View, nativeValue: any) {
-//         view._nativeView.setTranslationX(float(0));
-//     }
-
-//     // TranslateY
-//     private static setTranslateYProperty(view: View, newValue: any) {
-//         view._nativeView.setTranslationY(newValue * layout.getDisplayDensity());
-//     }
-
-//     private static resetTranslateYProperty(view: View, nativeValue: any) {
-//         view._nativeView.setTranslationY(float(0));
-//     }
-
-//     // z-index
-//     private static getZIndexProperty(view: View): any {
-//         return view.android.getZ ? view.android.getZ() : 0;
-//     }
-
-//     private static setZIndexProperty(view: View, newValue: any) {
-//         if (view.android.setZ) {
-//             view.android.setZ(newValue);
-
-//             if (view.android instanceof android.widget.Button) {
-//                 view.android.setStateListAnimator(null);
-//             }
-//         }
-//     }
-
-//     private static resetZIndexProperty(view: View, nativeValue: any) {
-//         if (view.android.setZ) {
-//             view.android.setZ(nativeValue);
-//         }
-//     }
-
-//     public static registerHandlers() {
-//         style.registerHandler(style.visibilityProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setVisibilityProperty,
-//             ViewStyler.resetVisibilityProperty));
-
-//         style.registerHandler(style.opacityProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setOpacityProperty,
-//             ViewStyler.resetOpacityProperty));
-
-//         style.registerHandler(style.minWidthProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setMinWidthProperty,
-//             ViewStyler.resetMinWidthProperty));
-
-//         style.registerHandler(style.minHeightProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setMinHeightProperty,
-//             ViewStyler.resetMinHeightProperty))
-
-//         // Use the same handler for all background/border properties
-//         // Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
-//         let backgroundAndBorderHandler = new style.StylePropertyChangedHandler(
-//             ViewStyler.setBackgroundAndBorder,
-//             ViewStyler.resetBackgroundAndBorder);
-
-//         style.registerHandler(style.backgroundInternalProperty, backgroundAndBorderHandler);
-
-//         style.registerHandler(style.nativeLayoutParamsProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setNativeLayoutParamsProperty,
-//             ViewStyler.resetNativeLayoutParamsProperty));
-
-//         style.registerHandler(style.paddingLeftProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingLeft, ViewStyler.setNativePaddingLeft, ViewStyler.getNativePaddingLeft), "TextBase");
-//         style.registerHandler(style.paddingTopProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingTop, ViewStyler.setNativePaddingTop, ViewStyler.getNativePaddingTop), "TextBase");
-//         style.registerHandler(style.paddingRightProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingRight, ViewStyler.setNativePaddingRight, ViewStyler.getNativePaddingRight), "TextBase");
-//         style.registerHandler(style.paddingBottomProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingBottom, ViewStyler.setNativePaddingBottom, ViewStyler.getNativePaddingBottom), "TextBase");
-
-//         style.registerHandler(style.paddingLeftProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingLeft, ViewStyler.setNativePaddingLeft, ViewStyler.getNativePaddingLeft), "Button");
-//         style.registerHandler(style.paddingTopProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingTop, ViewStyler.setNativePaddingTop, ViewStyler.getNativePaddingTop), "Button");
-//         style.registerHandler(style.paddingRightProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingRight, ViewStyler.setNativePaddingRight, ViewStyler.getNativePaddingRight), "Button");
-//         style.registerHandler(style.paddingBottomProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingBottom, ViewStyler.setNativePaddingBottom, ViewStyler.getNativePaddingBottom), "Button");
-
-//         style.registerHandler(style.paddingLeftProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingLeft, ViewStyler.setNativePaddingLeft, ViewStyler.getNativePaddingLeft), "LayoutBase");
-//         style.registerHandler(style.paddingTopProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingTop, ViewStyler.setNativePaddingTop, ViewStyler.getNativePaddingTop), "LayoutBase");
-//         style.registerHandler(style.paddingRightProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingRight, ViewStyler.setNativePaddingRight, ViewStyler.getNativePaddingRight), "LayoutBase");
-//         style.registerHandler(style.paddingBottomProperty,
-//             new style.StylePropertyChangedHandler(ViewStyler.setNativePaddingBottom, ViewStyler.setNativePaddingBottom, ViewStyler.getNativePaddingBottom), "LayoutBase");
-
-//         style.registerHandler(style.rotateProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setRotateProperty,
-//             ViewStyler.resetRotateProperty));
-
-//         style.registerHandler(style.scaleXProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setScaleXProperty,
-//             ViewStyler.resetScaleXProperty));
-
-//         style.registerHandler(style.scaleYProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setScaleYProperty,
-//             ViewStyler.resetScaleYProperty));
-
-//         style.registerHandler(style.translateXProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setTranslateXProperty,
-//             ViewStyler.resetTranslateXProperty));
-
-//         style.registerHandler(style.translateYProperty, new style.StylePropertyChangedHandler(
-//             ViewStyler.setTranslateYProperty,
-//             ViewStyler.resetTranslateYProperty));
-
-//         if (parseInt(device.sdkVersion, 10) >= 21) {
-//             style.registerHandler(style.zIndexProperty, new style.StylePropertyChangedHandler(
-//                 ViewStyler.setZIndexProperty,
-//                 ViewStyler.resetZIndexProperty,
-//                 ViewStyler.getZIndexProperty));
-//         }
-//     }
-// }
+type NativeSetter = { (view: android.view.View, value: number): void };
+type NativeGetter = { (view: android.view.View): number };
+const percentNotSupported = (view: android.view.View, value: number) => { throw new Error("PercentLength is not supported."); };
+interface NativePercentLengthPropertyOptions {
+    key: string | symbol;
+    auto?: number;
+    getPixels: NativeGetter;
+    setPixels: NativeSetter;
+    setPercent?: NativeSetter
+}
+function createNativePercentLengthProperty({key, auto = 0, getPixels, setPixels, setPercent = percentNotSupported}: NativePercentLengthPropertyOptions) {
+    Object.defineProperty(View, key, {
+        get: function (this: View) { return { value: getPixels(this.nativeView), unit: "px" } },
+        set: function (this: View, length: PercentLength) {
+            if (length == "auto") {
+                setPixels(this.nativeView, auto);
+            } else if (typeof length === "number") {
+                setPixels(this.nativeView, length * layout.getDisplayDensity());
+            } else if (length.unit == "dip") {
+                setPixels(this.nativeView, length.value * layout.getDisplayDensity());
+            } else if (length.unit == "px") {
+                setPixels(this.nativeView, length.value);
+            } else if (length.unit == "%") {
+                setPercent(this.nativeView, length.value);
+            } else {
+                throw new Error(`Unsupported PercentLength ${length}`);
+            }
+        }
+    });
+}
+
+const ViewHelper = org.nativescript.widgets.ViewHelper;
+
+createNativePercentLengthProperty({
+    key: marginTopProperty.native,
+    getPixels: ViewHelper.getMarginTop,
+    setPixels: ViewHelper.setMarginTop,
+    setPercent: ViewHelper.setMarginTopPercent
+});
+
+createNativePercentLengthProperty({
+    key: marginRightProperty.native,
+    getPixels: ViewHelper.getMarginRight,
+    setPixels: ViewHelper.setMarginRight,
+    setPercent: ViewHelper.setMarginRightPercent
+});
+
+createNativePercentLengthProperty({
+    key: marginBottomProperty.native,
+    getPixels: ViewHelper.getMarginBottom,
+    setPixels: ViewHelper.setMarginBottom,
+    setPercent: ViewHelper.setMarginBottomPercent
+});
+
+createNativePercentLengthProperty({
+    key: marginLeftProperty.native,
+    getPixels: ViewHelper.getMarginLeft,
+    setPixels: ViewHelper.setMarginLeft,
+    setPercent: ViewHelper.setMarginLeftPercent
+});
+
+createNativePercentLengthProperty({
+    key: paddingTopProperty.native,
+    getPixels: ViewHelper.getPaddingTop,
+    setPixels: ViewHelper.setPaddingTop
+});
+
+createNativePercentLengthProperty({
+    key: paddingRightProperty.native,
+    getPixels: ViewHelper.getPaddingRight,
+    setPixels: ViewHelper.setPaddingRight
+});
+
+createNativePercentLengthProperty({
+    key: paddingBottomProperty.native,
+    getPixels: ViewHelper.getPaddingBottom,
+    setPixels: ViewHelper.setPaddingBottom
+});
+
+createNativePercentLengthProperty({
+    key: paddingLeftProperty.native,
+    getPixels: ViewHelper.getPaddingLeft,
+    setPixels: ViewHelper.setPaddingLeft
+});
+
+createNativePercentLengthProperty({
+    key: widthProperty.native,
+    auto: android.view.ViewGroup.LayoutParams.MATCH_PARENT,
+    getPixels: ViewHelper.getWidth,
+    setPixels: ViewHelper.setWidth,
+    setPercent: ViewHelper.setWidthPercent
+});
+
+createNativePercentLengthProperty({
+    key: heightProperty.native,
+    auto: android.view.ViewGroup.LayoutParams.MATCH_PARENT,
+    getPixels: ViewHelper.getHeight,
+    setPixels: ViewHelper.setHeight,
+    setPercent: ViewHelper.setHeightPercent
+});
+
+createNativePercentLengthProperty({
+    key: widthProperty.native,
+    auto: android.view.ViewGroup.LayoutParams.MATCH_PARENT,
+    getPixels: ViewHelper.getWidth,
+    setPixels: ViewHelper.setWidth,
+    setPercent: ViewHelper.setWidthPercent
+});
+
+createNativePercentLengthProperty({
+    key: heightProperty.native,
+    auto: android.view.ViewGroup.LayoutParams.MATCH_PARENT,
+    getPixels: ViewHelper.getHeight,
+    setPixels: ViewHelper.setHeight,
+    setPercent: ViewHelper.setHeightPercent
+});
 
 export class CustomLayoutView extends View implements CustomLayoutViewDefinition {
     private _viewGroup: android.view.ViewGroup;

tns-core-modules/ui/core/view.d.ts

@@ -95,22 +95,22 @@ declare module "ui/core/view" {
         height: number;
     }
 
-    export interface Length {
+    export type Length = "auto" | number | {
         readonly unit: "dip" | "px";
         readonly value: number;
     }
+    export namespace Length {
+        export function parse(text: string): Length;
+        export function equals(a: Length, b: Length): boolean;
+    }
 
-    export interface PercentLength {
+    export type PercentLength = "auto" | number | {
         readonly unit: "%" | "dip" | "px";
         readonly value: number;
     }
-
-    export namespace Length {
-        function parse(text: string): Length;
-    }
-
     export namespace PercentLength {
-        function parse(text: string): PercentLength;
+        export function parse(text: string): PercentLength;
+        export function equals(a: PercentLength, b: PercentLength): boolean;
     }
 
     /**
@@ -555,7 +555,7 @@ declare module "ui/core/view" {
          * A property has changed on the native side directly - e.g. the user types in a TextField.
          */
         public nativePropertyChanged(property: Property<any, any>, newValue: any): void;
-        public bind(options: BindingOptions, source: any): void;
+        public bind(options: BindingOptions, source?: any): void;
         public unbind(property: string): void;
 
         isCollapsed: boolean;
@@ -603,6 +603,16 @@ declare module "ui/core/view" {
         _setNativeViewFrame(nativeView: any, frame: any): void;
         // _onStylePropertyChanged(property: dependencyObservable.Property): void;
         //@endprivate
+
+        // /**
+        //  * __Obsolete:__ There is a new property system that does not rely on _getValue.
+        //  */
+        // public _getValue(property: any): never;
+
+        // /**
+        //  * __Obsolete:__ There is a new property system that does not rely on _setValue.
+        //  */
+        // public _setValue(property: any, value: any): never;
     }
 
     /**

tns-core-modules/ui/enums/enums.d.ts

@@ -1,6 +1,6 @@
 declare module "ui/enums" {
 
-    import animationModule = require("ui/animation");
+    import * as animationModule from "ui/animation";
 
     /**
      * Represents a soft keyboard flavor.

tns-core-modules/ui/image-cache/image-cache-common.ts

@@ -1,6 +1,6 @@
-import definition = require("ui/image-cache");
-import observable = require("data/observable");
-import imageSource = require("image-source");
+import * as definition from "ui/image-cache";
+import * as observable from "data/observable";
+import * as imageSource from "image-source";
 
 export interface DownloadRequest {
     url: string;

tns-core-modules/ui/image-cache/image-cache.android.ts

@@ -1,4 +1,4 @@
-import common = require("./image-cache-common");
+import * as common from "./image-cache-common";
 
 var LruBitmapCacheClass;
 function ensureLruBitmapCacheClass() {

tns-core-modules/ui/image-cache/image-cache.d.ts

@@ -2,8 +2,8 @@
  * Contains the Cache class, which handles image download requests and caches the already downloaded images.
  */
 declare module "ui/image-cache" {
-    import observable = require("data/observable");
-    import imageSource = require("image-source");
+    import * as observable from "data/observable";
+    import * as imageSource from "image-source";
 
     /**
      * Represents a single download request.

tns-core-modules/ui/image-cache/image-cache.ios.ts

@@ -1,5 +1,5 @@
-import common = require("./image-cache-common");
-import trace = require("trace");
+import * as common from "./image-cache-common";
+import * as trace from "trace";
 import * as httpRequestModule from "http/http-request";
 
 import * as utils from "utils/utils";

tns-core-modules/ui/list-view/list-view-common.ts

@@ -16,16 +16,7 @@ export module knownMultiTemplates {
     export const itemTemplates = "itemTemplates";
 }
 
-function getLengthEffectiveValue(param: Length): number {
-    switch (param.unit) {
-        case "px":
-            return Math.round(param.value);
-
-        default:
-        case "dip":
-            return Math.round(layout.getDisplayDensity() * param.value);
-    }
-}
+const autoEffectiveRowHeight = -1;
 
 export abstract class ListViewBase extends View implements ListViewDefinition {
     public static itemLoadingEvent = "itemLoading";
@@ -34,6 +25,7 @@ export abstract class ListViewBase extends View implements ListViewDefinition {
     // TODO: get rid of such hacks.
     public static knownFunctions = ["itemTemplateSelector"]; //See component-builder.ts isKnownFunction
 
+
     private _itemTemplateSelector: (item: any, index: number, items: any) => string;
     private _itemTemplateSelectorBindable = new Bindable();
     public _defaultTemplate: KeyedTemplate = {
@@ -47,7 +39,7 @@ export abstract class ListViewBase extends View implements ListViewDefinition {
     }
 
     public _itemTemplatesInternal = new Array<KeyedTemplate>(this._defaultTemplate);
-    public _effectiveRowHeight: number = -1;
+    public _effectiveRowHeight: number = autoEffectiveRowHeight;
     public rowHeight: Length;
     public separatorColor: Color;
     public items: any[] | ItemsSource;
@@ -175,7 +167,7 @@ export const itemTemplatesProperty = new Property<ListViewBase, string | Array<K
 })
 itemTemplatesProperty.register(ListViewBase);
 
-const defaultRowHeight: Length = { value: -1, unit: "px" };
+const defaultRowHeight: Length = "auto";
 /**
  * Represents the observable property backing the rowHeight property of each ListView instance.
  */
@@ -186,7 +178,7 @@ export const rowHeightProperty = new CoercibleProperty<ListViewBase, Length>({
         return target._nativeView ? value : defaultRowHeight;
     },
     valueChanged: (target, oldValue, newValue) => {
-        target._effectiveRowHeight = getLengthEffectiveValue(newValue);
+        target._effectiveRowHeight = Length.toDevicePixels(newValue, autoEffectiveRowHeight);
         target._onRowHeightPropertyChanged(oldValue, newValue);
     }, valueConverter: Length.parse
 });

tns-core-modules/ui/page/page.d.ts

@@ -8,7 +8,7 @@ declare module "ui/page" {
     import { KeyframeAnimationInfo } from "ui/animation/keyframe-animation";
 
     //@private
-    import styleScope = require("ui/styling/style-scope");
+    import * as styleScope from "ui/styling/style-scope";
     //@endprivate
 
     export * from "ui/content-view";

tns-core-modules/ui/styling/background-common.ts

@@ -1,17 +1,9 @@
 import { Background as BackgroundDefinition, BackgroundDrawParams } from "ui/styling/background";
 import { Color, layout, BackgroundRepeat } from "ui/core/view";
 import { ImageSource } from "image-source";
-import cssValue = require("css-value");
-
+import { CSSValue, parse as cssParse } from "css-value";
 export * from "ui/core/view";
 
-interface CSSValue {
-    type: string;
-    string: string;
-    unit?: string;
-    value?: number;
-}
-
 export class Background implements BackgroundDefinition {
     public static default = new Background();
 
@@ -202,7 +194,7 @@ export class Background implements BackgroundDefinition {
 
         // size
         if (this.size) {
-            let values = cssValue(this.size);
+            let values = cssParse(this.size);
 
             if (values.length === 2) {
                 let vx = values[0];
@@ -281,7 +273,7 @@ export class Background implements BackgroundDefinition {
     }
 
     private static parsePosition(pos: string): { x: CSSValue, y: CSSValue } {
-        let values = cssValue(pos);
+        let values = cssParse(pos);
 
         if (values.length === 2) {
             return {

tns-core-modules/ui/styling/background.android.ts

@@ -1,7 +1,7 @@
 import { View } from "./background-common";
 import { isNullOrUndefined, isFunction, getClass } from "utils/types";
 import { CacheLayerType } from "utils/utils";
-import cssValue = require("css-value");
+import { parse } from "css-value";
 
 export * from "./background-common"
 
@@ -171,7 +171,7 @@ function createNativeCSSValueArray(css: string): native.Array<org.nativescript.w
         return null;
     }
 
-    let cssValues = cssValue(css);
+    let cssValues = parse(css);
     let nativeArray = Array.create(org.nativescript.widgets.CSSValue, cssValues.length);
     for (let i = 0, length = cssValues.length; i < length; i++) {
         nativeArray[i] = new org.nativescript.widgets.CSSValue(

tns-core-modules/ui/styling/font.ios.ts

@@ -1,6 +1,6 @@
 import { FontBase, parseFontFamily, genericFontFamilies, parseFont, FontStyle, FontWeight } from "./font-common";
 import { enabled as traceEnabled, write as traceWrite, categories as traceCategories, messageType as traceMessageType } from "trace";
-import fs = require("file-system");
+import * as fs from "file-system";
 import * as utils from "utils/utils";
 
 export class Font extends FontBase {

tns-core-modules/ui/styling/style-property.d.ts

@@ -1,6 +1,6 @@
 // declare module "ui/styling/style-property" {
-//     import definition = require("ui/styling");
-//     import observable = require("ui/core/dependency-observable");
+//     import * as definition from "ui/styling";
+//     import * as observable from "ui/core/dependency-observable";
 
 //     export type StyleProperty = Property;
 //     export type ResolvedStylePropertyHandler = (property: Property | string, value: any) => void;

tns-core-modules/ui/styling/style-property.ts

@@ -1,6 +1,6 @@
-// import definition = require("ui/styling/style-property");
-// import types = require("utils/types");
-// import observable = require("ui/core/dependency-observable");
+// import * as definition from "ui/styling/style-property";
+// import * as types from "utils/types";
+// import * as observable from "ui/core/dependency-observable";
 
 // var propertiesByName = {};
 // var propertiesByCssName = {};

tns-core-modules/ui/styling/style-scope.ts

@@ -7,7 +7,7 @@ import { File, knownFolders, path } from "file-system";
 import { CssAnimationParser } from "./css-animation-parser";
 import { isFileOrResourcePath } from "utils/utils";
 
-import application = require("application");
+import * as application from "application";
 
 const animationsSymbol: symbol = Symbol("animations");
 

tns-core-modules/ui/styling/styling.d.ts

@@ -1,8 +1,8 @@
 // declare module "ui/styling" {
-//     import observable = require("ui/core/dependency-observable");
+//     import * as observable from "ui/core/dependency-observable";
 //     import {Observable} from "data/observable";
-//     import color = require("color");
-//     import view = require("ui/core/view");
+//     import * as color from "color";
+//     import * as view from "ui/core/view";
 
 //     /**
 //      * Represents an observable property which can have its value set form CSS style.

tns-core-modules/ui/styling/styling.ts

@@ -1,6 +1,6 @@
-// import styleModule = require("./style");
-// import stylePropertyModule = require("./style-property");
-// import convertersModule = require("./converters");
+// import * as styleModule from "./style";
+// import * as stylePropertyModule from "./style-property";
+// import * as convertersModule from "./converters";
 
 // // Exports form style-property module.
 // export var Property = stylePropertyModule.Property;

tns-core-modules/ui/text-base/text-base-styler.android.ts

@@ -1,8 +1,8 @@
-// import view = require("ui/core/view");
-// import utils = require("utils/utils");
-// import style = require("ui/styling/style");
-// import font = require("ui/styling/font");
-// import enums = require("ui/enums");
+// import * as view from "ui/core/view";
+// import * as utils from "utils/utils";
+// import * as style from "ui/styling/style";
+// import * as font from "ui/styling/font";
+// import * as enums from "ui/enums";
 // import {device} from "platform";
 
 // export class TextBaseStyler implements style.Styler {

tns-core-modules/ui/text-base/text-base-styler.ios.ts

@@ -1,9 +1,9 @@
-// import view = require("ui/core/view");
-// import utils = require("utils/utils");
-// import style = require("ui/styling/style");
-// import font = require("ui/styling/font");
-// import enums = require("ui/enums");
-// import types = require("utils/types");
+// import * as view from "ui/core/view";
+// import * as utils from "utils/utils";
+// import * as style from "ui/styling/style";
+// import * as font from "ui/styling/font";
+// import * as enums from "ui/enums";
+// import * as types from "utils/types";
 // import { TextBase } from "ui/text-base";
 
 // export class TextBaseStyler implements style.Styler {

tns-core-modules/ui/text-view/text-view-common.ts

@@ -1,6 +1,6 @@
-// import definition = require("ui/text-view");
-// import textBase = require("ui/text-base");
-// import editableTextBase = require("ui/editable-text-base");
+// import * as definition from "ui/text-view";
+// import * as textBase from "ui/text-base";
+// import * as editableTextBase from "ui/editable-text-base";
 
 // global.moduleMerge(textBase, exports);