From 6cfbaae94760ccaf80d4e42e42eb66096eeb64cd Mon Sep 17 00:00:00 2001
From: Panayot Cankov <Panayot.Cankov@telerik.com>
Date: Mon, 19 Dec 2016 15:53:01 +0200
Subject: [PATCH] Add 'auto' and number to the PercentLength and Length types

---
 tns-core-modules/lib.core.d.ts                |   2 +-
 tns-core-modules/ui/core/view-common.ts       | 166 +++--
 tns-core-modules/ui/core/view.android.ts      | 650 ++++--------------
 tns-core-modules/ui/core/view.d.ts            |   4 +-
 .../ui/list-view/list-view-common.ts          |  18 +-
 .../ui/styling/background-common.ts           |   7 +-
 6 files changed, 222 insertions(+), 625 deletions(-)

diff --git a/tns-core-modules/lib.core.d.ts b/tns-core-modules/lib.core.d.ts
index 43918b42f..f3b1d662d 100644
--- a/tns-core-modules/lib.core.d.ts
+++ b/tns-core-modules/lib.core.d.ts
@@ -166,7 +166,7 @@ interface ObjectConstructor {
       * @param p The property name.
       * @param attributes Descriptor for the property. It can be for a data property or an accessor property.
       */
-    defineProperty(o: any, p: string, attributes: PropertyDescriptor): any;
+    defineProperty(o: any, p: string | symbol, attributes: PropertyDescriptor): any;
 
     /**
       * Adds one or more properties to an object, and/or modifies attributes of existing properties. 
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index 7e7d3cc48..ff6846ea5 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -960,31 +960,6 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     }
 }
 
-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);
-    }
-}
-
-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);
-    }
-}
-
 function updateChildLayoutParams(child: ViewCommon, parent: ViewCommon, density: number): void {
     let style = child.style;
 
@@ -992,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;
 }
@@ -1053,14 +1067,20 @@ export namespace PercentLength {
             return value;
         }
     }
-    export function equals(a: PercentLength, b: PercentLength): boolean {
-        return a.value == b.value && a.unit == b.unit;
-    }
+    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();
@@ -1085,9 +1105,17 @@ export namespace Length {
             return value;
         }
     }
+    export const equals: { (a: Length, b: Length): boolean } = equalsCommon;
+    export const toDevicePixels: { (length: Length, auto: number): number } = toDevicePixelsCommon;
+}
 
-    export function equals(a: Length, b: Length): boolean {
-        return a.value == b.value && a.unit == b.unit;
+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;
     }
 }
 
@@ -1119,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>({
@@ -1154,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>({
@@ -1174,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);
@@ -1639,9 +1663,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}`);
         }
@@ -1653,9 +1677,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}`);
         }
@@ -1667,9 +1691,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}`);
         }
@@ -1681,9 +1705,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}`);
         }
diff --git a/tns-core-modules/ui/core/view.android.ts b/tns-core-modules/ui/core/view.android.ts
index 87ae1e1c3..a9c664d98 100644
--- a/tns-core-modules/ui/core/view.android.ts
+++ b/tns-core-modules/ui/core/view.android.ts
@@ -456,106 +456,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);
     }
@@ -570,38 +470,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);
     }
@@ -660,408 +528,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;
diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts
index 33f310b1c..21c131ae6 100644
--- a/tns-core-modules/ui/core/view.d.ts
+++ b/tns-core-modules/ui/core/view.d.ts
@@ -95,7 +95,7 @@ declare module "ui/core/view" {
         height: number;
     }
 
-    export interface Length {
+    export type Length = "auto" | number | {
         readonly unit: "dip" | "px";
         readonly value: number;
     }
@@ -104,7 +104,7 @@ declare module "ui/core/view" {
         export function equals(a: Length, b: Length): boolean;
     }
 
-    export interface PercentLength {
+    export type PercentLength = "auto" | number | {
         readonly unit: "%" | "dip" | "px";
         readonly value: number;
     }
diff --git a/tns-core-modules/ui/list-view/list-view-common.ts b/tns-core-modules/ui/list-view/list-view-common.ts
index 245891d99..04ac14662 100644
--- a/tns-core-modules/ui/list-view/list-view-common.ts
+++ b/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
 });
diff --git a/tns-core-modules/ui/styling/background-common.ts b/tns-core-modules/ui/styling/background-common.ts
index 49a65e1f0..f9bf8bf37 100644
--- a/tns-core-modules/ui/styling/background-common.ts
+++ b/tns-core-modules/ui/styling/background-common.ts
@@ -1,8 +1,7 @@
 import { Background as BackgroundDefinition, BackgroundDrawParams } from "ui/styling/background";
 import { Color, layout } from "ui/core/view";
 import { ImageSource } from "image-source";
-import * as cssValue from "css-value";
-import { CSSValue } from "css-value";
+import { CSSValue, parse as cssParse } from "css-value";
 export * from "ui/core/view";
 
 export class Background implements BackgroundDefinition {
@@ -195,7 +194,7 @@ export class Background implements BackgroundDefinition {
 
         // size
         if (this.size) {
-            let values = cssValue.parse(this.size);
+            let values = cssParse(this.size);
 
             if (values.length === 2) {
                 let vx = values[0];
@@ -274,7 +273,7 @@ export class Background implements BackgroundDefinition {
     }
 
     private static parsePosition(pos: string): { x: CSSValue, y: CSSValue } {
-        let values = cssValue.parse(pos);
+        let values = cssParse(pos);
 
         if (values.length === 2) {
             return {