diff --git a/tns-core-modules/ui/action-bar/action-bar-common.ts b/tns-core-modules/ui/action-bar/action-bar-common.ts
index 06ac81cdb..5fd3af7d2 100644
--- a/tns-core-modules/ui/action-bar/action-bar-common.ts
+++ b/tns-core-modules/ui/action-bar/action-bar-common.ts
@@ -7,9 +7,7 @@
 } from "ui/action-bar";
 import { Page } from "ui/page";
 import { Bindable } from "ui/core/bindable";
-import { HorizontalAlignment, VerticalAlignment, Visibility } from "ui/enums";
-import { View } from "ui/core/view";
-import { horizontalAlignmentProperty, verticalAlignmentProperty } from "ui/styling/style";
+import { View, horizontalAlignmentProperty, verticalAlignmentProperty } from "ui/core/view";
 import { Property } from "ui/core/properties";
 import { unsetValue } from "ui/core/dependency-observable";
 import { ViewBase } from "ui/core/view-base";
@@ -68,8 +66,8 @@ export class ActionBarBase extends View implements ActionBarDefinition {
             this._titleView = value;
 
             if (this._titleView) {
-                this._titleView.style[horizontalAlignmentProperty.cssName] = HorizontalAlignment.center;
-                this._titleView.style[verticalAlignmentProperty.cssName] = VerticalAlignment.center;
+                this._titleView.style[horizontalAlignmentProperty.cssName] = "center";
+                this._titleView.style[verticalAlignmentProperty.cssName] = "center";
                 this._addView(this._titleView);
             }
 
@@ -310,15 +308,15 @@ export class ActionItemBase extends ViewBase implements ActionItemDefinition {
 
     private _addActionViewToActionBar() {
         if (this._actionView && !this._actionView._isAddedToNativeVisualTree && this._actionBar) {
-            this._actionView.style[horizontalAlignmentProperty.cssName] = HorizontalAlignment.center;
-            this._actionView.style[verticalAlignmentProperty.cssName] = VerticalAlignment.center;
+            this._actionView.style[horizontalAlignmentProperty.cssName] = "center";
+            this._actionView.style[verticalAlignmentProperty.cssName] = "center";
             this._actionBar._addView(this._actionView);
         }
     }
 }
 
 export function isVisible(item: ActionItemDefinition) {
-    return item.visibility === Visibility.visible;
+    return item.visibility === "visible";
 }
 
 function onTitlePropertyChanged(actionBar: ActionBarBase, oldValue: string, newValue: string) {
@@ -341,5 +339,5 @@ textProperty.register(ActionItemBase);
 let iconProperty = new Property<ActionItemBase, string>({ name: "icon", valueChanged: onItemChanged });
 iconProperty.register(ActionItemBase);
 
-let visibilityProperty = new Property({ name: "visibility", defaultValue: Visibility.visible, valueChanged: onItemChanged });
+let visibilityProperty = new Property({ name: "visibility", defaultValue: "visible", valueChanged: onItemChanged });
 visibilityProperty.register(ActionItemBase);
\ No newline at end of file
diff --git a/tns-core-modules/ui/action-bar/action-bar.android.ts b/tns-core-modules/ui/action-bar/action-bar.android.ts
index 91312211d..cc9157ac2 100644
--- a/tns-core-modules/ui/action-bar/action-bar.android.ts
+++ b/tns-core-modules/ui/action-bar/action-bar.android.ts
@@ -1,11 +1,10 @@
 import { AndroidActionBarSettings as AndroidActionBarSettingsDefinition, AndroidActionItemSettings } from "ui/action-bar";
 import { ActionItemBase, ActionBarBase, isVisible } from "./action-bar-common";
 import { isDefined, isNullOrUndefined, isString } from "utils/types";
-import { View } from "ui/core/view";
+import { View, colorProperty } from "ui/core/view";
 import { RESOURCE_PREFIX } from "utils/utils";
 import { fromFileOrResource } from "image-source";
-import { AndroidActionItemPosition, AndroidActionBarIconVisibility } from "ui/enums";
-import { colorProperty } from "ui/styling/style";
+import { AndroidActionBarIconVisibility } from "ui/enums";
 import { Color } from "color";
 import * as application from "application";
 import * as trace from "trace";
@@ -23,7 +22,7 @@ function generateItemId(): number {
 
 export class ActionItem extends ActionItemBase {
     private _androidPosition: AndroidActionItemSettings = {
-        position: AndroidActionItemPosition.actionBar,
+        position: "actionBar",
         systemIcon: undefined
     };
 
@@ -249,7 +248,7 @@ export class ActionBar extends ActionBarBase {
 
             if (item.actionView && item.actionView.android) {
                 // With custom action view, the menuitem cannot be displayed in a popup menu. 
-                item.android.position = AndroidActionItemPosition.actionBar;
+                item.android.position = "actionBar";
                 menuItem.setActionView(item.actionView.android);
                 ActionBar._setOnClickListener(item);
             }
@@ -368,13 +367,13 @@ function getDrawableOrResourceId(icon: string, resources: android.content.res.Re
 
 function getShowAsAction(menuItem: ActionItem): number {
     switch (menuItem.android.position) {
-        case AndroidActionItemPosition.actionBarIfRoom:
+        case "actionBarIfRoom":
             return android.view.MenuItem.SHOW_AS_ACTION_IF_ROOM;
 
-        case AndroidActionItemPosition.popup:
+        case "popup":
             return android.view.MenuItem.SHOW_AS_ACTION_NEVER;
 
-        case AndroidActionItemPosition.actionBar:
+        case "actionBar":
         default:
             return android.view.MenuItem.SHOW_AS_ACTION_ALWAYS;
     }
diff --git a/tns-core-modules/ui/action-bar/action-bar.d.ts b/tns-core-modules/ui/action-bar/action-bar.d.ts
index 2dc650ac0..81a076dbb 100644
--- a/tns-core-modules/ui/action-bar/action-bar.d.ts
+++ b/tns-core-modules/ui/action-bar/action-bar.d.ts
@@ -157,7 +157,7 @@ declare module "ui/action-bar" {
          *  3. popup - item is shown in the popup menu.
          * Note: Property not applicable to NavigationButton
          */
-        position: string;
+        position: "actionBar" | "actionBarIfRoom" | "popup";
 
         /**
          * Gets or sets the name of the system drawable resource to be displayed.
@@ -178,7 +178,7 @@ declare module "ui/action-bar" {
          *  2. right - items is shown at the right part of the navigation bar.
          * Note: Property not applicable to NavigationButton
          */
-        position: string;
+        position: "left" | "right";
 
         /**
          * Gets or sets a number representing the iOS system item to be displayed.
diff --git a/tns-core-modules/ui/action-bar/action-bar.ios.ts b/tns-core-modules/ui/action-bar/action-bar.ios.ts
index a32c402a8..b892f6651 100644
--- a/tns-core-modules/ui/action-bar/action-bar.ios.ts
+++ b/tns-core-modules/ui/action-bar/action-bar.ios.ts
@@ -1,12 +1,9 @@
 import { IOSActionItemSettings, ActionItem as ActionItemDefinition } from "ui/action-bar";
 import { ActionItemBase, ActionBarBase, isVisible } from "./action-bar-common";
 import utils = require("utils/utils");
-import { isNumber } from "utils/types";
 import { Frame, topmost as topmostFrame } from "ui/frame";
-import { View } from "ui/core/view";
+import { View, colorProperty, backgroundColorProperty, backgroundInternalProperty } from "ui/core/view";
 import { ImageSource, fromFileOrResource } from "image-source";
-import { IOSActionItemPosition } from "ui/enums";
-import { colorProperty, backgroundColorProperty, backgroundInternalProperty } from "ui/styling/style";
 import { Color } from "color";
 import { Background } from "ui/styling/background";
 
@@ -35,7 +32,7 @@ class TapBarItemHandlerImpl extends NSObject {
 
 export class ActionItem extends ActionItemBase {
     private _ios: IOSActionItemSettings = {
-        position: IOSActionItemPosition.left,
+        position: "left",
         systemIcon: undefined
     };
 
@@ -142,7 +139,7 @@ export class ActionBar extends ActionBarBase {
         let rightBarItems = [];
         for (let i = 0; i < items.length; i++) {
             let barButtonItem = this.createBarButtonItem(items[i]);
-            if (items[i].ios.position === IOSActionItemPosition.left) {
+            if (items[i].ios.position === "left") {
                 leftBarItems.push(barButtonItem);
             }
             else {
@@ -168,7 +165,7 @@ export class ActionBar extends ActionBarBase {
             item.actionView.ios.addGestureRecognizer(recognizer);
             barButtonItem = UIBarButtonItem.alloc().initWithCustomView(item.actionView.ios);
         }
-        else if (isNumber(item.ios.systemIcon)) {
+        else if (typeof item.ios.systemIcon === "number") {
             barButtonItem = UIBarButtonItem.alloc().initWithBarButtonSystemItemTargetAction(item.ios.systemIcon, tapHandler, "tap");
         }
         else if (item.icon) {
@@ -294,7 +291,7 @@ export class ActionBar extends ActionBarBase {
         let page = this.page;
         // Page should be attached to frame to update the action bar.
         if (!page || !page.frame) {
-            return;
+            return undefined;
         }
 
         return (<UINavigationController>page.frame.ios.controller).navigationBar;
diff --git a/tns-core-modules/ui/activity-indicator/activity-indicator.android.ts b/tns-core-modules/ui/activity-indicator/activity-indicator.android.ts
index 6ae126baf..5d0c080b5 100644
--- a/tns-core-modules/ui/activity-indicator/activity-indicator.android.ts
+++ b/tns-core-modules/ui/activity-indicator/activity-indicator.android.ts
@@ -1,6 +1,5 @@
 import { ActivityIndicatorBase, busyProperty } from "./activity-indicator-common";
-import { Visibility } from "ui/enums";
-import { colorProperty, visibilityProperty } from "ui/styling/style";
+import { colorProperty, visibilityProperty } from "ui/core/view";
 
 export * from "./activity-indicator-common";
 
diff --git a/tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts b/tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts
index 3edd5ffd2..6dd98bdef 100644
--- a/tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts
+++ b/tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts
@@ -1,7 +1,6 @@
 import { ActivityIndicatorBase, busyProperty } from "./activity-indicator-common";
-import { Visibility } from "ui/enums";
-import { colorProperty, visibilityProperty } from "ui/styling/style";
-import * as utils from "utils/utils";
+import { colorProperty, visibilityProperty } from "ui/core/view";
+import { ios } from "utils/utils";
 
 export * from "./activity-indicator-common";
 
@@ -15,7 +14,7 @@ export class ActivityIndicator extends ActivityIndicatorBase {
     }
 
     get [busyProperty.native](): boolean {
-        if (utils.ios.MajorVersion > 9) {
+        if (ios.MajorVersion > 9) {
             return this.nativeView.animating;
         }
         else {
@@ -36,10 +35,10 @@ export class ActivityIndicator extends ActivityIndicatorBase {
     }
 
     get [visibilityProperty.native](): string {
-        return this.nativeView.hidden ? Visibility.collapse : Visibility.visible;
+        return this.nativeView.hidden ? "collapse" : "visible";
     }
     set [visibilityProperty.native](value: string) {
-        this.nativeView.hidden = value !== Visibility.visible;
+        this.nativeView.hidden = value !== "visible";
     }
 
     get [colorProperty.native](): UIColor {
diff --git a/tns-core-modules/ui/animation/animation-common.ts b/tns-core-modules/ui/animation/animation-common.ts
index 26660194c..8671b43f5 100644
--- a/tns-core-modules/ui/animation/animation-common.ts
+++ b/tns-core-modules/ui/animation/animation-common.ts
@@ -1,11 +1,13 @@
-import {CubicBezierAnimationCurve as CubicBezierAnimationCurveDefinition,
-        AnimationPromise as AnimationPromiseDefinition,
-        Animation as AnimationBaseDefinition,
-        AnimationDefinition,
-        Pair} from "ui/animation";
-import {View} from "ui/core/view";
-import {Color} from "color";
-import {isDefined, isNumber, isString} from "utils/types";
+import {
+    CubicBezierAnimationCurve as CubicBezierAnimationCurveDefinition,
+    AnimationPromise as AnimationPromiseDefinition,
+    Animation as AnimationBaseDefinition,
+    AnimationDefinition,
+    Pair
+} from "ui/animation";
+import { View } from "ui/core/view";
+import { Color } from "color";
+import { isDefined, isNumber, isString } from "utils/types";
 import * as trace from "trace";
 
 export module Properties {
@@ -64,8 +66,8 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
         if (trace.enabled) {
             trace.write("Analyzing " + animationDefinitions.length + " animation definitions...", trace.categories.Animation);
         }
-        
-        this._propertyAnimations = new Array<PropertyAnimation>();        
+
+        this._propertyAnimations = new Array<PropertyAnimation>();
         for (let i = 0, length = animationDefinitions.length; i < length; i++) {
             animationDefinitions[i].curve = this._resolveAnimationCurve(animationDefinitions[i].curve);
             this._propertyAnimations = this._propertyAnimations.concat(AnimationBase._createPropertyAnimations(animationDefinitions[i]));
@@ -108,13 +110,13 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
             _this.cancel();
         };
         var _then = promise.then;
-        promise.then = function() {
+        promise.then = function () {
             var r = _then.apply(promise, arguments);
             _this.fixupAnimationPromise(r);
             return r;
         };
         var _catch = promise.catch;
-        promise.catch = function() {
+        promise.catch = function () {
             var r = _catch.apply(promise, arguments);
             _this.fixupAnimationPromise(r);
             return r;
@@ -187,7 +189,7 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
             propertyAnimations.push({
                 target: animationDefinition.target,
                 property: Properties.backgroundColor,
-                value: isString(animationDefinition.backgroundColor) ? 
+                value: isString(animationDefinition.backgroundColor) ?
                     new Color(<any>animationDefinition.backgroundColor) : animationDefinition.backgroundColor,
                 duration: animationDefinition.duration,
                 delay: animationDefinition.delay,
diff --git a/tns-core-modules/ui/animation/animation.android.ts b/tns-core-modules/ui/animation/animation.android.ts
index cd1bd5094..42e9430ab 100644
--- a/tns-core-modules/ui/animation/animation.android.ts
+++ b/tns-core-modules/ui/animation/animation.android.ts
@@ -9,7 +9,7 @@ import {
     opacityProperty, backgroundColorProperty, rotateProperty,
     translateXProperty, translateYProperty,
     scaleXProperty, scaleYProperty
-} from "ui/styling/style";
+} from "ui/core/view";
 import * as trace from "trace";
 
 export * from "./animation-common";
diff --git a/tns-core-modules/ui/animation/animation.ios.ts b/tns-core-modules/ui/animation/animation.ios.ts
index b2201675e..3b41fc09d 100644
--- a/tns-core-modules/ui/animation/animation.ios.ts
+++ b/tns-core-modules/ui/animation/animation.ios.ts
@@ -7,7 +7,7 @@ import {
     opacityProperty, backgroundColorProperty, rotateProperty,
     translateXProperty, translateYProperty,
     scaleXProperty, scaleYProperty
-} from "ui/styling/style";
+} from "ui/core/view";
 import * as trace from "trace";
 
 export * from "./animation-common";
diff --git a/tns-core-modules/ui/border/border.ts b/tns-core-modules/ui/border/border.ts
index ae4873e67..f2f6e71a7 100644
--- a/tns-core-modules/ui/border/border.ts
+++ b/tns-core-modules/ui/border/border.ts
@@ -17,40 +17,32 @@ export class Border extends ContentView implements BorderDefinition {
     }
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
-        View.adjustChildLayoutParams(this.layoutView, widthMeasureSpec, heightMeasureSpec);
-
         let width = layout.getMeasureSpecSize(widthMeasureSpec);
         let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
 
         let height = layout.getMeasureSpecSize(heightMeasureSpec);
         let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
 
-        let density = layout.getDisplayDensity();
-        let borderWidth = 0;
-        if (isNumber(this.borderWidth)) {
-            borderWidth = <number>this.borderWidth;
-        }
-        let borderSize = (2 * borderWidth) * density;
+        let style = this.style;
+        let horizontalBorderLength = style.effectiveBorderLeftWidth + style.effectiveBorderRightWidth;
+        let verticalBorderLength = style.effectiveBorderTopWidth + style.effectiveBorderBottomWidth;
 
         let result = View.measureChild(this, this.layoutView,
-            layout.makeMeasureSpec(width - borderSize, widthMode),
-            layout.makeMeasureSpec(height - borderSize, heightMode));
+            layout.makeMeasureSpec(width - horizontalBorderLength, widthMode),
+            layout.makeMeasureSpec(height - verticalBorderLength, heightMode));
 
-        let widthAndState = View.resolveSizeAndState(result.measuredWidth + borderSize, width, widthMode, 0);
-        let heightAndState = View.resolveSizeAndState(result.measuredHeight + borderSize, height, heightMode, 0);
+        let widthAndState = View.resolveSizeAndState(result.measuredWidth + horizontalBorderLength, width, widthMode, 0);
+        let heightAndState = View.resolveSizeAndState(result.measuredHeight + verticalBorderLength, height, heightMode, 0);
 
         this.setMeasuredDimension(widthAndState, heightAndState);
     }
 
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         let density = layout.getDisplayDensity();
-        let borderWidth = 0;
-        if (isNumber(this.borderWidth)) {
-            borderWidth = <number>this.borderWidth;
-        }
-        let borderSize = borderWidth * density;
-        View.layoutChild(this, this.layoutView, borderSize, borderSize, right - left - borderSize, bottom - top - borderSize);
+        let style = this.style;
+        let horizontalBorderLength = style.effectiveBorderLeftWidth + style.effectiveBorderRightWidth;
+        let verticalBorderLength = style.effectiveBorderTopWidth + style.effectiveBorderBottomWidth;
 
-        View.restoreChildOriginalParams(this.layoutView);
+        View.layoutChild(this, this.layoutView, style.effectiveBorderLeftWidth, style.effectiveBorderTopWidth, right - left - horizontalBorderLength, bottom - top - verticalBorderLength);
     }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/builder/special-properties.ts b/tns-core-modules/ui/builder/special-properties.ts
index 68a945ff6..934d4d55c 100644
--- a/tns-core-modules/ui/builder/special-properties.ts
+++ b/tns-core-modules/ui/builder/special-properties.ts
@@ -1,4 +1,4 @@
-import {View} from "ui/core/view";
+import { View } from "ui/core/view";
 
 export type PropertySetter = (instance: View, propertyValue: any) => void;
 
diff --git a/tns-core-modules/ui/button/button-common.ts b/tns-core-modules/ui/button/button-common.ts
index 631c89226..e241a7689 100644
--- a/tns-core-modules/ui/button/button-common.ts
+++ b/tns-core-modules/ui/button/button-common.ts
@@ -1,21 +1,13 @@
 import { Button as ButtonDefinition } from "ui/button";
 import { TextBase } from "ui/text-base";
-import { WhiteSpace } from "ui/enums";
 
 export abstract class ButtonBase extends TextBase implements ButtonDefinition {
     public static tapEvent = "tap";
 
     get textWrap(): boolean {
-        return this.style.whiteSpace === WhiteSpace.normal;
+        return this.style.whiteSpace === "normal";
     }
     set textWrap(value: boolean) {
-        this.style.whiteSpace = value ? WhiteSpace.normal : WhiteSpace.nowrap;
-    }
-
-    get whiteSpace(): string {
-        return this.style.whiteSpace;
-    }
-    set whiteSpace(value: string) {
-        this.style.whiteSpace = value;
+        this.style.whiteSpace = value ? "normal" : "nowrap";
     }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/button/button.android.ts b/tns-core-modules/ui/button/button.android.ts
index 5b5590d5c..d469e270f 100644
--- a/tns-core-modules/ui/button/button.android.ts
+++ b/tns-core-modules/ui/button/button.android.ts
@@ -6,7 +6,9 @@ export * from "./button-common";
 
 @Interfaces([android.view.View.OnClickListener])
 class ClickListener implements android.view.View.OnClickListener {
-    constructor(public owner: WeakRef<Button>) { }
+    constructor(public owner: WeakRef<Button>) {
+        return global.__native(this);
+    }
 
     public onClick(v: android.view.View): void {
         let btn = this.owner.get();
@@ -18,7 +20,9 @@ class ClickListener implements android.view.View.OnClickListener {
 
 @Interfaces([android.view.View.OnTouchListener])
 class TouchListener implements android.view.View.OnTouchListener {
-    constructor(public owner: WeakRef<Button>) { }
+    constructor(public owner: WeakRef<Button>) { 
+        return global.__native(this);
+    }
 
     public onTouch(v: android.view.View, event: android.view.MotionEvent): boolean {
         let btn = this.owner.get();
diff --git a/tns-core-modules/ui/button/button.d.ts b/tns-core-modules/ui/button/button.d.ts
index 0edb04e24..2fb558525 100644
--- a/tns-core-modules/ui/button/button.d.ts
+++ b/tns-core-modules/ui/button/button.d.ts
@@ -31,12 +31,6 @@ declare module "ui/button" {
          */
         textWrap: boolean;
 
-        /**
-         * Gets or sets text whiteSpace.
-         * "normal" or "nowrap"
-         */
-        whiteSpace: string;
-
         /**
          * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
          * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change"). 
diff --git a/tns-core-modules/ui/button/button.ios.ts b/tns-core-modules/ui/button/button.ios.ts
index ececb05ae..6a03805cf 100644
--- a/tns-core-modules/ui/button/button.ios.ts
+++ b/tns-core-modules/ui/button/button.ios.ts
@@ -1,17 +1,16 @@
 import { ControlStateChangeListener } from "ui/core/control-state-change";
-import { whiteSpaceProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingProperty } from "ui/styling/style";
+import { View, PseudoClassHandler, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingProperty } from "ui/core/view";
 
-import { View, PseudoClassHandler } from "ui/core/view";
 import types = require("utils/types");
 
 import { ButtonBase } from "./button-common";
-import { textProperty, formattedTextProperty } from "../text-base/text-base-common";
-import { WhiteSpace } from "ui/enums";
+import { textProperty, formattedTextProperty, whiteSpaceProperty } from "../text-base/text-base-common";
 
 export * from "./button-common";
 
 export class Button extends ButtonBase {
     public nativeView: UIButton;
+
     private _tapHandler: NSObject;
     private _stateChangedHandler: ControlStateChangeListener;
 
@@ -44,12 +43,12 @@ export class Button extends ButtonBase {
         }
     }
 
-    get [whiteSpaceProperty.native](): string {
-        return WhiteSpace.normal;
+    get [whiteSpaceProperty.native](): "normal" | "nowrap" {
+        return "normal";
     }
-    set [whiteSpaceProperty.native](value: string) {
+    set [whiteSpaceProperty.native](value: "normal" | "nowrap") {
         let nativeView = this.nativeView.titleLabel;
-        if (value === WhiteSpace.normal) {
+        if (value === "normal") {
             nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
             nativeView.numberOfLines = 0;
         }
@@ -65,7 +64,7 @@ export class Button extends ButtonBase {
     set [borderTopWidthProperty.native](value: number) {
         let nativeView = this.nativeView;
         let insets = nativeView.contentEdgeInsets;
-        insets.top = this.style.paddingTop + value;
+        insets.top = this.style.effectivePaddingTop + value;
         nativeView.contentEdgeInsets = insets;
     }
 
@@ -75,7 +74,7 @@ export class Button extends ButtonBase {
     set [borderRightWidthProperty.native](value: number) {
         let nativeView = this.nativeView;
         let insets = nativeView.contentEdgeInsets;
-        insets.right = this.style.paddingRight + value;
+        insets.right = this.style.effectivePaddingRight + value;
         nativeView.contentEdgeInsets = insets;
     }
 
@@ -85,7 +84,7 @@ export class Button extends ButtonBase {
     set [borderBottomWidthProperty.native](value: number) {
         let nativeView = this.nativeView;
         let insets = nativeView.contentEdgeInsets;
-        insets.bottom = this.style.paddingBottom + value;
+        insets.bottom = this.style.effectivePaddingBottom + value;
         nativeView.contentEdgeInsets = insets;
     }
 
@@ -95,22 +94,22 @@ export class Button extends ButtonBase {
     set [borderLeftWidthProperty.native](value: number) {
         let nativeView = this.nativeView;
         let insets = nativeView.contentEdgeInsets;
-        insets.left = this.style.paddingLeft + value;
+        insets.left = this.style.effectivePaddingLeft + value;
         nativeView.contentEdgeInsets = insets;
     }
 
-    get [paddingProperty.native](): UIEdgeInsets {
-        return this.nativeView.contentEdgeInsets;
-    }
-    set [paddingProperty.native](value: UIEdgeInsets) {
-        let nativeView = this.nativeView;
-        let style = this.style;
-        var top = value.top + style.borderTopWidth;
-        var left = value.left + style.borderLeftWidth;
-        var bottom = value.bottom + style.borderBottomWidth;
-        var right = value.right + style.borderRightWidth;
-        this.nativeView.contentEdgeInsets = { left, top, right, bottom };
-    }
+    // get [paddingProperty.native](): UIEdgeInsets {
+    //     return this.nativeView.contentEdgeInsets;
+    // }
+    // set [paddingProperty.native](value: UIEdgeInsets) {
+    //     const nativeView = this.nativeView;
+    //     const style = this.style;
+    //     const top = value.top + style.effectiveBorderTopWidth;
+    //     const left = value.left + style.effectiveBorderLeftWidth;
+    //     const bottom = value.bottom + style.effectiveBorderBottomWidth;
+    //     const right = value.right + style.effectiveBorderRightWidth;
+    //     this.nativeView.contentEdgeInsets = { left, top, right, bottom };
+    // }
 }
 
 class TapHandlerImpl extends NSObject {
diff --git a/tns-core-modules/ui/content-view/content-view.d.ts b/tns-core-modules/ui/content-view/content-view.d.ts
index c8c08bc93..a6b5b3c74 100644
--- a/tns-core-modules/ui/content-view/content-view.d.ts
+++ b/tns-core-modules/ui/content-view/content-view.d.ts
@@ -2,13 +2,13 @@
  * View that can host another view.
  */
 declare module "ui/content-view" {
-    import {View, AddChildFromBuilder} from "ui/core/view";
+    import { View, AddChildFromBuilder } from "ui/core/view";
 
     /**
      * Represents a View that has a single child - content.
      * The View itself does not have visual representation and serves as a placeholder for its content in the logical tree.
      */
-    class ContentView extends View implements AddChildFromBuilder  {
+    class ContentView extends View implements AddChildFromBuilder {
         /**
          * Gets or sets the single child of the view.
          */
diff --git a/tns-core-modules/ui/content-view/content-view.ts b/tns-core-modules/ui/content-view/content-view.ts
index c75e569ee..d97494221 100644
--- a/tns-core-modules/ui/content-view/content-view.ts
+++ b/tns-core-modules/ui/content-view/content-view.ts
@@ -1,5 +1,5 @@
-import {ContentView as ContentViewDefinition} from "ui/content-view";
-import {View, CustomLayoutView, AddChildFromBuilder} from "ui/core/view";
+import { ContentView as ContentViewDefinition } from "ui/content-view";
+import { View, CustomLayoutView, AddChildFromBuilder } from "ui/core/view";
 import * as utils from "utils/utils";
 
 export class ContentView extends CustomLayoutView implements ContentViewDefinition, AddChildFromBuilder {
@@ -67,8 +67,6 @@ export class ContentView extends CustomLayoutView implements ContentViewDefiniti
 
     // This method won't be called in Android because we use the native android layout.
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
-        View.adjustChildLayoutParams(this.layoutView, widthMeasureSpec, heightMeasureSpec);
-
         let result = View.measureChild(this, this.layoutView, widthMeasureSpec, heightMeasureSpec);
 
         let width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
@@ -77,9 +75,9 @@ export class ContentView extends CustomLayoutView implements ContentViewDefiniti
         let height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
         let heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
 
-        let density = utils.layout.getDisplayDensity();
-        let measureWidth = Math.max(result.measuredWidth, this.minWidth * density);
-        let measureHeight = Math.max(result.measuredHeight, this.minHeight * density);
+        let style = this.style;
+        let measureWidth = Math.max(result.measuredWidth, style.effectiveMinWidth);
+        let measureHeight = Math.max(result.measuredHeight, style.effectiveMinHeight);
 
         let widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
         let heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
@@ -90,7 +88,5 @@ export class ContentView extends CustomLayoutView implements ContentViewDefiniti
     // This method won't be called in Android because we use the native android layout.
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         View.layoutChild(this, this.layoutView, 0, 0, right - left, bottom - top);
-
-        View.restoreChildOriginalParams(this.layoutView);
     }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/bindable.d.ts b/tns-core-modules/ui/core/bindable.d.ts
index fb3184182..15a3bdea0 100644
--- a/tns-core-modules/ui/core/bindable.d.ts
+++ b/tns-core-modules/ui/core/bindable.d.ts
@@ -1,6 +1,6 @@
 declare module "ui/core/bindable" {
-    import {DependencyObservable} from "ui/core/dependency-observable";
-    import {ViewBase} from "ui/core/view-base";
+    import { DependencyObservable } from "ui/core/dependency-observable";
+    import { ViewBase } from "ui/core/view-base";
 
     /**
      * The options object used in the Bindable.bind method.
diff --git a/tns-core-modules/ui/core/bindable.ts b/tns-core-modules/ui/core/bindable.ts
index f959ce05b..9ca194db7 100644
--- a/tns-core-modules/ui/core/bindable.ts
+++ b/tns-core-modules/ui/core/bindable.ts
@@ -1,11 +1,11 @@
 import definition = require("ui/core/bindable");
-import {Observable, PropertyChangeData} from "data/observable";
-import {unsetValue, DependencyObservable, Property, PropertyMetadata, PropertyMetadataSettings, PropertyChangeData as DependencyPropertyChangeData} from "ui/core/dependency-observable";
-import weakEvents = require("ui/core/weak-event-listener");
+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";
 import types = require("utils/types");
 import trace = require("trace");
 import bindingBuilder = require("../builder/binding-builder");
-import viewModule = require("ui/core/view");
+import { ViewBase, isEventOrGesture } from "ui/core/view-base";
 import * as application from "application";
 import * as polymerExpressions from "js-libs/polymer-expressions";
 import * as specialProperties from "ui/builder/special-properties";
@@ -61,7 +61,7 @@ export class Bindable extends DependencyObservable implements definition.Bindabl
         }
 
         // if (!types.isNullOrUndefined(bindingSource)) {
-            binding.bind(bindingSource);
+        binding.bind(bindingSource);
         // }
     }
 
@@ -114,7 +114,7 @@ export class Bindable extends DependencyObservable implements definition.Bindabl
     }
 
     public _onBindingContextChanged(oldValue: any, newValue: any) {
-        let bindingContextBinding = this.bindings.get("bindingContext"); 
+        let bindingContextBinding = this.bindings.get("bindingContext");
         if (bindingContextBinding) {
             if (!bindingContextBinding.updating) {
                 bindingContextBinding.bind(newValue);
@@ -186,7 +186,7 @@ export class Binding {
 
     public loadedHandlerVisualTreeBinding(args) {
         let target = args.object;
-        target.off(viewModule.View.loadedEvent, this.loadedHandlerVisualTreeBinding, this);
+        target.off(ViewBase.loadedEvent, this.loadedHandlerVisualTreeBinding, this);
         if (!types.isNullOrUndefined(target.bindingContext)) {
             this.bind(target.bindingContext);
         }
@@ -194,7 +194,7 @@ export class Binding {
 
     public clearSource(): void {
         this.propertyChangeListeners.forEach((observable, index, map) => {
-            weakEvents.removeWeakEventListener(
+            removeWeakEventListener(
                 observable,
                 Observable.propertyChangeEvent,
                 this.onSourcePropertyChanged,
@@ -267,8 +267,8 @@ export class Binding {
                     currentObject = parentView.bindingContext;
                 } else {
                     let targetInstance = this.target.get();
-                    targetInstance.off(viewModule.View.loadedEvent, this.loadedHandlerVisualTreeBinding, this);
-                    targetInstance.on(viewModule.View.loadedEvent, this.loadedHandlerVisualTreeBinding, this);
+                    targetInstance.off(ViewBase.loadedEvent, this.loadedHandlerVisualTreeBinding, this);
+                    targetInstance.on(ViewBase.loadedEvent, this.loadedHandlerVisualTreeBinding, this);
                 }
 
                 currentObjectChanged = true;
@@ -299,7 +299,7 @@ export class Binding {
             prop += "$" + objectsAndProperties[i].property;
             let currentObject = objectsAndProperties[i].instance;
             if (!this.propertyChangeListeners.has(prop) && currentObject instanceof Observable) {
-                weakEvents.addWeakEventListener(
+                addWeakEventListener(
                     currentObject,
                     Observable.propertyChangeEvent,
                     this.onSourcePropertyChanged,
@@ -452,7 +452,7 @@ export class Binding {
                 for (let i = sourcePropsLength - 1; i > changedPropertyIndex; i--) {
                     let prop = "$" + sourceProps.slice(0, i + 1).join("$");
                     if (this.propertyChangeListeners.has(prop)) {
-                        weakEvents.removeWeakEventListener(
+                        removeWeakEventListener(
                             this.propertyChangeListeners.get(prop),
                             Observable.propertyChangeEvent,
                             this.onSourcePropertyChanged,
@@ -472,7 +472,7 @@ export class Binding {
     }
 
     private prepareContextForExpression(model: Object, expression: string, newProps: Array<string>) {
-        let parentViewAndIndex: { view: viewModule.View, index: number };
+        let parentViewAndIndex: { view: ViewBase, index: number };
         let parentView;
         let addedProps = newProps || [];
         if (expression.indexOf(bc.bindingValueKey) > -1) {
@@ -552,12 +552,12 @@ export class Binding {
         this.updateOptions(this.sourceOptions, value);
     }
 
-    private getParentView(target: any, property: string): { view: viewModule.View, index: number } {
-        if (!target || !(target instanceof viewModule.View)) {
+    private getParentView(target: any, property: string): { view: ViewBase, index: number } {
+        if (!target || !(target instanceof ViewBase)) {
             return { view: null, index: null };
         }
 
-        let result: viewModule.View;
+        let result: ViewBase;
         if (property === bc.parentValueKey) {
             result = target.parent;
         }
@@ -613,7 +613,7 @@ export class Binding {
 
         try {
             if (optionsInstance instanceof Bindable &&
-                viewModule.isEventOrGesture(options.property, <any>optionsInstance) &&
+                isEventOrGesture(options.property, <any>optionsInstance) &&
                 types.isFunction(value)) {
                 // calling off method with null as handler will remove all handlers for options.property event
                 optionsInstance.off(options.property, null, optionsInstance.bindingContext);
diff --git a/tns-core-modules/ui/core/properties.ts b/tns-core-modules/ui/core/properties.ts
index 1b260bf8b..05f1cf7ad 100644
--- a/tns-core-modules/ui/core/properties.ts
+++ b/tns-core-modules/ui/core/properties.ts
@@ -3,6 +3,8 @@ import { WrappedValue } from "data/observable";
 import { ViewBase } from "./view-base";
 import { Style } from "ui/styling/style";
 
+export { unsetValue };
+
 let symbolPropertyMap = {};
 let cssSymbolPropertyMap = {};
 let inheritableProperties = new Array<InheritedProperty<any, any>>();
@@ -33,9 +35,11 @@ export interface ShorthandPropertyOptions {
 
 export interface CssPropertyOptions<T extends Style, U> extends PropertyOptions<T, U> {
     cssName: string;
+    dependentProperty?: CssProperty<T, any>;
 }
 
 export class Property<T extends ViewBase, U> implements PropertyDescriptor {
+    private registered: boolean;
     private name: string;
     public key: symbol;
     public native: symbol;
@@ -62,8 +66,7 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor {
         let valueChanged = options.valueChanged;
         let valueConverter = options.valueConverter;
 
-        this.set = function (value: any): void {
-            let that = <T>this;
+        this.set = function (this: T, value: any): void {
             if (value === unsetValue) {
                 value = defaultValue;
             }
@@ -75,31 +78,31 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor {
                 unboxedValue = valueConverter(unboxedValue);
             }
 
-            let currentValue = key in that ? that[key] : defaultValue;
+            let currentValue = key in this ? this[key] : defaultValue;
             let changed: boolean = equalityComparer ? !equalityComparer(currentValue, unboxedValue) : currentValue !== unboxedValue;
 
             if (wrapped || changed) {
-                that[key] = unboxedValue;
+                this[key] = unboxedValue;
                 if (valueChanged) {
-                    valueChanged(that, currentValue, unboxedValue);
+                    valueChanged(this, currentValue, unboxedValue);
                 }
 
-                if (that.hasListeners(eventName)) {
-                    that.notify({
+                if (this.hasListeners(eventName)) {
+                    this.notify({
                         eventName: eventName,
                         propertyName: name,
-                        object: that,
+                        object: this,
                         value: unboxedValue
                     });
                 }
 
-                let nativeObject = that.nativeView;
+                let nativeObject = this.nativeView;
                 if (nativeObject) {
-                    that[native] = unboxedValue;
+                    this[native] = unboxedValue;
                 }
 
                 if (affectsLayout) {
-                    that.requestLayout();
+                    this.requestLayout();
                 }
             }
         }
@@ -112,6 +115,10 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor {
     }
 
     public register(cls: { prototype: T }): void {
+        if (this.registered) {
+            throw new Error(`Property ${this.name} already registered.`);
+        }
+        this.registered = true;
         Object.defineProperty(cls.prototype, this.name, this);
     }
 }
@@ -190,6 +197,7 @@ export class InheritedProperty<T extends ViewBase, U> extends Property<T, U> {
 }
 
 export class CssProperty<T extends Style, U> {
+    private registered: boolean;
     private setLocalValue: (value: U) => void;
     private setCssValue: (value: U) => void;
 
@@ -226,41 +234,47 @@ export class CssProperty<T extends Style, U> {
         let valueChanged = options.valueChanged;
         let valueConverter = options.valueConverter;
 
-        function setLocalValue(value: U): void {
-            let that = <T>this;
+        let dependentProperty = options.dependentProperty;
+        let dependentPropertyKey = dependentProperty ? dependentProperty.key : undefined;
+        let dependentPropertyNativeKey = dependentProperty ? dependentProperty.native : undefined;
+
+        function setLocalValue(this: T, value: U): void {
             if (value === unsetValue) {
                 value = defaultValue;
-                that[sourceKey] = ValueSource.Default;
+                this[sourceKey] = ValueSource.Default;
             }
             else {
-                that[sourceKey] = ValueSource.Local;
+                this[sourceKey] = ValueSource.Local;
                 if (valueConverter) {
                     value = valueConverter(value);
                 }
             }
 
-            let currentValue: U = key in that ? that[key] : defaultValue;
+            let currentValue: U = key in this ? this[key] : defaultValue;
             let changed: boolean = equalityComparer ? !equalityComparer(currentValue, value) : currentValue !== value;
 
             if (changed) {
-                that[key] = value;
+                this[key] = value;
                 if (valueChanged) {
-                    valueChanged(that, currentValue, value);
+                    valueChanged(this, currentValue, value);
                 }
 
-                if (that.hasListeners(eventName)) {
-                    that.notify({
+                if (this.hasListeners(eventName)) {
+                    this.notify({
                         eventName: eventName,
                         propertyName: name,
-                        object: that,
+                        object: this,
                         value: value
                     });
                 }
 
-                let view = that.view;
-                let nativeView = view.nativeView;
-                if (nativeView) {
+                let view = this.view;
+                if (view.nativeView) {
                     view[native] = value;
+                    if (dependentPropertyNativeKey) {
+                        // Call the native setter for dependent property. 
+                        view[dependentPropertyNativeKey] = this[dependentPropertyKey];
+                    }
                 }
 
                 if (affectsLayout) {
@@ -269,11 +283,10 @@ export class CssProperty<T extends Style, U> {
             }
         }
 
-        function setCssValue(value: U): void {
-            let that = <T>this;
+        function setCssValue(this: T, value: U): void {
             let resetValue = value === unsetValue;
             let newValueSource: ValueSource;
-            let currentValueSource: number = that[sourceKey] || ValueSource.Default;
+            let currentValueSource: number = this[sourceKey] || ValueSource.Default;
 
             // We have localValueSource - NOOP.
             if (currentValueSource === ValueSource.Local) {
@@ -290,29 +303,32 @@ export class CssProperty<T extends Style, U> {
                 }
             }
 
-            let currentValue: U = key in that ? that[key] : defaultValue;
+            let currentValue: U = key in this ? this[key] : defaultValue;
             let changed: boolean = equalityComparer ? !equalityComparer(currentValue, value) : currentValue !== value;
-            that[sourceKey] = newValueSource;
+            this[sourceKey] = newValueSource;
 
             if (changed) {
-                that[key] = value;
+                this[key] = value;
                 if (valueChanged) {
-                    valueChanged(that, currentValue, value);
+                    valueChanged(this, currentValue, value);
                 }
 
-                if (that.hasListeners(eventName)) {
-                    that.notify({
+                if (this.hasListeners(eventName)) {
+                    this.notify({
                         eventName: eventName,
                         propertyName: name,
-                        object: that,
+                        object: this,
                         value: value
                     });
                 }
 
-                let view = that.view;
-                let nativeView = view.nativeView;
-                if (nativeView) {
+                let view = this.view;
+                if (view.nativeView) {
                     view[native] = value;
+                    if (dependentPropertyNativeKey) {
+                        // Call the native setter for dependent property. 
+                        view[dependentPropertyNativeKey] = this[dependentPropertyKey];
+                    }
                 }
 
                 if (affectsLayout) {
@@ -343,6 +359,10 @@ export class CssProperty<T extends Style, U> {
     }
 
     public register(cls: { prototype: T }): void {
+        if (this.registered) {
+            throw new Error(`Property ${this.name} already registered.`);
+        }
+        this.registered = true;
         Object.defineProperty(cls.prototype, this.name, this.localValueDescriptor);
         Object.defineProperty(cls.prototype, this.cssName, this.cssValueDescriptor);
     }
@@ -370,10 +390,13 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
         let valueChanged = options.valueChanged;
         let valueConverter = options.valueConverter;
 
-        let setFunc = (valueSource: ValueSource) => function (value: any): void {
-            let that = <T>this;
+        let dependentProperty = options.dependentProperty;
+        let dependentPropertyKey = dependentProperty ? dependentProperty.key : undefined;
+        let dependentPropertyNativeKey = dependentProperty ? dependentProperty.native : undefined;
+
+        let setFunc = (valueSource: ValueSource) => function (this: T, value: any): void {
             let resetValue = value === unsetValue;
-            let currentValueSource: number = that[sourceKey] || ValueSource.Default;
+            let currentValueSource: number = this[sourceKey] || ValueSource.Default;
             if (resetValue) {
                 // If we want to reset cssValue and we have localValue - return;
                 if (valueSource === ValueSource.Css && currentValueSource === ValueSource.Local) {
@@ -385,7 +408,7 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                 }
             }
 
-            let view = that.view;
+            let view = this.view;
             let newValue: U;
             if (resetValue) {
                 // If unsetValue - we want to reset this property.
@@ -394,14 +417,14 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                 // If we have parent and it has non-default value we use as our inherited value.
                 if (style && style[sourceKey] !== ValueSource.Default) {
                     newValue = style[key];
-                    that[sourceKey] = ValueSource.Inherited;
+                    this[sourceKey] = ValueSource.Inherited;
                 }
                 else {
                     newValue = defaultValue;
-                    that[sourceKey] = ValueSource.Default;
+                    this[sourceKey] = ValueSource.Default;
                 }
             } else {
-                that[sourceKey] = valueSource;
+                this[sourceKey] = valueSource;
                 if (valueConverter) {
                     newValue = valueConverter(value);
                 } else {
@@ -409,20 +432,20 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                 }
             }
 
-            let currentValue: U = key in that ? that[key] : defaultValue;
+            let currentValue: U = key in this ? this[key] : defaultValue;
             let changed: boolean = equalityComparer ? !equalityComparer(currentValue, newValue) : currentValue !== newValue;
 
             if (changed) {
-                that[key] = newValue;
+                this[key] = newValue;
                 if (valueChanged) {
-                    valueChanged(that, currentValue, newValue);
+                    valueChanged(this, currentValue, newValue);
                 }
 
-                if (that.hasListeners(eventName)) {
-                    that.notify({
+                if (this.hasListeners(eventName)) {
+                    this.notify({
                         eventName: eventName,
                         propertyName: name,
-                        object: that,
+                        object: this,
                         value: newValue
                     });
                 }
@@ -430,6 +453,10 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                 let nativeView = view.nativeView;
                 if (nativeView) {
                     view[native] = value;
+                    if (dependentPropertyNativeKey) {
+                        // Call the native setter for dependent property. 
+                        view[dependentPropertyNativeKey] = this[dependentPropertyKey];
+                    }
                 }
 
                 if (affectsLayout) {
diff --git a/tns-core-modules/ui/core/view-base.ts b/tns-core-modules/ui/core/view-base.ts
index 8ccc61402..ac9d19ed5 100644
--- a/tns-core-modules/ui/core/view-base.ts
+++ b/tns-core-modules/ui/core/view-base.ts
@@ -1,13 +1,10 @@
 import { Observable, EventData } from "data/observable";
-
-import { propagateInheritedProperties, clearInheritedProperties, applyNativeSetters, Property, InheritedProperty } from "./properties";
+import { propagateInheritedProperties, clearInheritedProperties, applyNativeSetters, Property, InheritedProperty, CssProperty } from "./properties";
 import { Binding, BindingOptions } from "ui/core/bindable";
-
+import { isIOS } from "platform";
 import { ViewBase as ViewBaseDefinition } from "ui/core/view-base";
 import { Style } from "ui/styling/style";
-
-export let bindingContextProperty = new InheritedProperty<ViewBase, any>({ name: "bindingContext" });
-bindingContextProperty.register(ViewBase);
+import { fromString as gestureFromString } from "ui/gestures";
 
 let defaultBindingSource = {};
 
@@ -28,6 +25,22 @@ export function getAncestor(view: ViewBaseDefinition, criterion: string | Functi
     return null;
 }
 
+export function getEventOrGestureName(name: string): string {
+    return name.indexOf("on") === 0 ? name.substr(2, name.length - 2) : name;
+}
+
+export function isEventOrGesture(name: string, view: ViewBaseDefinition): boolean {
+    if (typeof name === "string") {
+        let eventOrGestureName = getEventOrGestureName(name);
+        let evt = `${eventOrGestureName}Event`;
+
+        return view.constructor && evt in view.constructor ||
+            gestureFromString(eventOrGestureName.toLowerCase()) !== undefined;
+    }
+
+    return false;
+}
+
 export class ViewBase extends Observable implements ViewBaseDefinition {
     private _updatingJSPropertiesDict = {};
     private _style: Style;
@@ -35,6 +48,7 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
     public bindingContext: any;
     public nativeView: any;
     public parent: ViewBase;
+    public isCollapsed;
 
     constructor() {
         super();
@@ -110,4 +124,18 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
     public eachChild(callback: (child: ViewBase) => boolean) {
         //
     }
-}
\ No newline at end of file
+}
+
+export const visibilityProperty = new CssProperty<Style, "visible" | "hidden" | "collapse" | "collapsed">({
+    name: "visibility", cssName: "visibility", defaultValue: "visible", affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        if (newValue !== "visible" && newValue !== "collapse" && newValue !== "collapsed" && newValue !== "hidden") {
+            throw new Error(`Invalid visibility value: ${newValue}`);
+        }
+
+        target.view.isCollapsed = (newValue === "collapse" || newValue === "collapsed");
+    }
+});
+visibilityProperty.register(Style);
+
+export let bindingContextProperty = new InheritedProperty<ViewBase, any>({ name: "bindingContext" });
+bindingContextProperty.register(ViewBase);
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index 5792cc4f6..3219e8ac0 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -1,24 +1,23 @@
-import { View as ViewDefinition, Point, Size, Thickness } from "ui/core/view";
-import { Style, CommonLayoutParams } from "ui/styling/style";
+import { View as ViewDefinition, Point, Size } from "ui/core/view";
+import { Style } from "ui/styling/style";
 import { CssState, StyleScope, applyInlineSyle } from "ui/styling/style-scope";
-import { VerticalAlignment, HorizontalAlignment } from "ui/enums";
 import { Color } from "color";
 import { Animation, AnimationPromise } from "ui/animation";
 import { KeyframeAnimation } from "ui/animation/keyframe-animation";
 import { Source } from "utils/debug";
 import { Observable, EventData } from "data/observable";
-import { ViewBase } from "./view-base";
-import { propagateInheritedProperties, clearInheritedProperties, Property, InheritedProperty, CssProperty, ShorthandProperty } from "./properties";
-import { isString, isNumber } from "utils/types";
-import { observe, fromString, GesturesObserver, GestureTypes, GestureEventData } from "ui/gestures";
-import { isAndroid, isIOS } from "platform";
+import { Background } from "ui/styling/background";
+import { ViewBase, getEventOrGestureName } from "./view-base";
+import { propagateInheritedProperties, clearInheritedProperties, Property, InheritedProperty, CssProperty, ShorthandProperty, InheritedCssProperty } from "./properties";
+import { observe, fromString as gestureFromString, GesturesObserver, GestureTypes, GestureEventData } from "ui/gestures";
+import { isIOS } from "platform";
 
-import * as trace from "trace";
-import * as utils from "utils/utils";
-import bindable = require("ui/core/bindable");
+// TODO: Remove this and start using string as source (for android).
+import { fromFileOrResource, fromBase64, fromUrl } from "image-source";
 
-// on Android we explicitly set AffectsLayout to False because android will invalidate its layout when needed so we skip unnecessary native calls.
-let affectsIOSLayout = isIOS;
+import { enabled as traceEnabled, write as traceWrite, categories as traceCategories } from "trace";
+import { isDataURI, isFileOrResourcePath } from "utils/utils";
+export * from "./view-base";
 
 // registerSpecialProperty("class", (instance: ViewDefinition, propertyValue: string) => {
 //     instance.className = propertyValue;
@@ -27,22 +26,39 @@ let affectsIOSLayout = isIOS;
 //     instance.set("text", propertyValue);
 // });
 
-function getEventOrGestureName(name: string): string {
-    return name.indexOf("on") === 0 ? name.substr(2, name.length - 2) : name;
+declare module "ui/styling/style" {
+    interface Style {
+        effectiveMinWidth: number;
+        effectiveMinHeight: number;
+        effectiveWidth: number;
+        effectiveHeight: number;
+        effectiveMarginTop: number;
+        effectiveMarginRight: number;
+        effectiveMarginBottom: number;
+        effectiveMarginLeft: number;
+        effectivePaddingTop: number;
+        effectivePaddingRight: number;
+        effectivePaddingBottom: number;
+        effectivePaddingLeft: number;
+        effectiveBorderTopWidth: number;
+        effectiveBorderRightWidth: number;
+        effectiveBorderBottomWidth: number;
+        effectiveBorderLeftWidth: number;
+    }
 }
 
 export namespace layout {
-    let MODE_SHIFT = 30;
-    let MODE_MASK = 0x3 << MODE_SHIFT;
+    const MODE_SHIFT = 30;
+    const MODE_MASK = 0x3 << MODE_SHIFT;
 
-    export let UNSPECIFIED = 0 << MODE_SHIFT;
-    export let EXACTLY = 1 << MODE_SHIFT;
-    export let AT_MOST = 2 << MODE_SHIFT;
+    export const UNSPECIFIED = 0 << MODE_SHIFT;
+    export const EXACTLY = 1 << MODE_SHIFT;
+    export const AT_MOST = 2 << MODE_SHIFT;
 
-    export let MEASURED_HEIGHT_STATE_SHIFT = 0x00000010; /* 16 */
-    export let MEASURED_STATE_TOO_SMALL = 0x01000000;
-    export let MEASURED_STATE_MASK = 0xff000000;
-    export let MEASURED_SIZE_MASK = 0x00ffffff;
+    export const MEASURED_HEIGHT_STATE_SHIFT = 0x00000010; /* 16 */
+    export const MEASURED_STATE_TOO_SMALL = 0x01000000;
+    export const MEASURED_STATE_MASK = 0xff000000;
+    export const MEASURED_SIZE_MASK = 0x00ffffff;
 
     export function getMeasureSpecMode(spec: number): number {
         return (spec & MODE_MASK);
@@ -60,6 +76,14 @@ export namespace layout {
         return (Math.round(size) & ~MODE_MASK) | (mode & MODE_MASK);
     }
 
+    export function toDevicePixels(value: number): number {
+        return value * getDisplayDensity();
+    }
+
+    export function toDeviceIndependentPixels(value: number): number {
+        return value / getDisplayDensity();
+    }
+
     export function measureSpecToString(measureSpec: number): string {
         let mode = getMeasureSpecMode(measureSpec);
         let size = getMeasureSpecSize(measureSpec);
@@ -83,17 +107,6 @@ export namespace layout {
         return text;
     }
 }
-export function isEventOrGesture(name: string, view: ViewDefinition): boolean {
-    if (isString(name)) {
-        let eventOrGestureName = getEventOrGestureName(name);
-        let evt = `${eventOrGestureName}Event`;
-
-        return view.constructor && evt in view.constructor ||
-            fromString(eventOrGestureName.toLowerCase()) !== undefined;
-    }
-
-    return false;
-}
 
 export function getViewById(view: ViewDefinition, id: string): ViewDefinition {
     if (!view) {
@@ -155,54 +168,6 @@ export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator
 
 let viewIdCounter = 0;
 
-function onCssClassPropertyChanged(view: ViewDefinition, oldValue: string, newValue: string) {
-    let classes = view.cssClasses;
-    classes.clear();
-    if (isString(newValue)) {
-        newValue.split(" ").forEach(c => classes.add(c));
-    }
-}
-
-// let cssClassProperty = new Property("cssClass", "View", new PropertyMetadata(undefined, PropertyMetadataSettings.AffectsStyle, onCssClassPropertyChanged));
-export let cssClassProperty = new Property<ViewCommon, string>({ name: "cssClass", valueChanged: onCssClassPropertyChanged });
-cssClassProperty.register(ViewCommon);
-
-// let classNameProperty = new Property("className", "View", new PropertyMetadata(undefined, PropertyMetadataSettings.AffectsStyle, onCssClassPropertyChanged));
-export let classNameProperty = new Property<ViewCommon, string>({ name: "className", valueChanged: onCssClassPropertyChanged });
-classNameProperty.register(ViewCommon);
-
-function resetStyles(view: ViewCommon): void {
-    // view.style._resetCssValues();
-    // view._applyStyleFromScope();
-    view._eachChildView((child) => {
-        resetStyles(child);
-        return true;
-    });
-}
-// let idProperty = new Property("id", "View", new PropertyMetadata(undefined, PropertyMetadataSettings.AffectsStyle));
-export let idProperty = new Property<ViewCommon, string>({ name: "id", valueChanged: (view, oldValue, newValue) => resetStyles(view) });
-idProperty.register(ViewCommon);
-
-// let automationTextProperty = new Property("automationText", "View", new PropertyMetadata(undefined));
-export let automationTextProperty = new Property<ViewCommon, string>({ name: "automationText" });
-automationTextProperty.register(ViewCommon);
-
-// let originXProperty = new Property("originX", "View", new PropertyMetadata(0.5));
-export let originXProperty = new Property<ViewCommon, number>({ name: "originX", defaultValue: 0.5 });
-originXProperty.register(ViewCommon);
-
-// let originYProperty = new Property("originY", "View", new PropertyMetadata(0.5));
-export let originYProperty = new Property<ViewCommon, number>({ name: "originY", defaultValue: 0.5 });
-originYProperty.register(ViewCommon);
-
-// let isEnabledProperty = new Property("isEnabled", "View", new PropertyMetadata(true));
-export let isEnabledProperty = new Property<ViewCommon, boolean>({ name: "isEnabled", defaultValue: true });
-isEnabledProperty.register(ViewCommon);
-
-// let isUserInteractionEnabledProperty = new Property("isUserInteractionEnabled", "View", new PropertyMetadata(true));
-export let isUserInteractionEnabledProperty = new Property<ViewCommon, boolean>({ name: "isUserInteractionEnabled", defaultValue: true });
-isUserInteractionEnabledProperty.register(ViewCommon);
-
 export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     public static loadedEvent = "loaded";
     public static unloadedEvent = "unloaded";
@@ -235,36 +200,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     public cssPseudoClasses: Set<string> = new Set();
 
     public _cssState: CssState;
-    public isVisible = true;
-    public parent: this;
-
-    public layoutParams: CommonLayoutParams = {
-        width: -1,
-        widthPercent: -1,
-        height: -1,
-        heightPercent: -1,
-        leftMargin: 0,
-        leftMarginPercent: -1,
-        topMargin: 0,
-        topMarginPercent: -1,
-        rightMargin: 0,
-        rightMarginPercent: -1,
-        bottomMargin: 0,
-        bottomMarginPercent: -1,
-        horizontalAlignment: "stretch",
-        verticalAlignment: "stretch"
-    };
-
-    public getGestureObservers(type: GestureTypes): Array<GesturesObserver> {
-        return this._gestureObservers[type];
-    }
-
-
-
-
-
-
-
+    public parent: ViewCommon;
 
     constructor() {
         super();
@@ -281,11 +217,15 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this._gestureObservers[type].push(observe(this, type, callback, thisArg));
     }
 
+    public getGestureObservers(type: GestureTypes): Array<GesturesObserver> {
+        return this._gestureObservers[type];
+    }
+
     public addEventListener(arg: string | GestureTypes, callback: (data: EventData) => void, thisArg?: any) {
-        if (isString(arg)) {
+        if (typeof arg === "string") {
             arg = getEventOrGestureName(<string>arg);
 
-            let gesture = fromString(<string>arg);
+            let gesture = gestureFromString(<string>arg);
             if (gesture && !this._isEvent(<string>arg)) {
                 this.observe(gesture, callback, thisArg);
             } else {
@@ -293,7 +233,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
                 if (events.length > 0) {
                     for (let i = 0; i < events.length; i++) {
                         let evt = events[i].trim();
-                        let gst = fromString(evt);
+                        let gst = gestureFromString(evt);
                         if (gst && !this._isEvent(<string>arg)) {
                             this.observe(gst, callback, thisArg);
                         } else {
@@ -304,14 +244,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
                     super.addEventListener(<string>arg, callback, thisArg);
                 }
             }
-        } else if (isNumber(arg)) {
+        } else if (typeof arg === "number") {
             this.observe(<GestureTypes>arg, callback, thisArg);
         }
     }
 
     public removeEventListener(arg: string | GestureTypes, callback?: any, thisArg?: any) {
-        if (isString(arg)) {
-            let gesture = fromString(<string>arg);
+        if (typeof arg === "string") {
+            let gesture = gestureFromString(<string>arg);
             if (gesture && !this._isEvent(<string>arg)) {
                 this._disconnectGestureObservers(gesture);
             } else {
@@ -319,7 +259,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
                 if (events.length > 0) {
                     for (let i = 0; i < events.length; i++) {
                         let evt = events[i].trim();
-                        let gst = fromString(evt);
+                        let gst = gestureFromString(evt);
                         if (gst && !this._isEvent(<string>arg)) {
                             this._disconnectGestureObservers(gst);
                         } else {
@@ -331,7 +271,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
                 }
 
             }
-        } else if (isNumber(arg)) {
+        } else if (typeof arg === "number") {
             this._disconnectGestureObservers(<GestureTypes>arg);
         }
     }
@@ -357,8 +297,6 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return <T>getViewById(this, id);
     }
 
-    public automationText: string;
-
     // START Style property shortcuts
     get borderColor(): string | Color {
         return this.style.borderColor;
@@ -402,31 +340,31 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this.style.borderWidth = value;
     }
 
-    get borderTopWidth(): number {
+    get borderTopWidth(): Length {
         return this.style.borderTopWidth;
     }
-    set borderTopWidth(value: number) {
+    set borderTopWidth(value: Length) {
         this.style.borderTopWidth = value;
     }
 
-    get borderRightWidth(): number {
+    get borderRightWidth(): Length {
         return this.style.borderRightWidth;
     }
-    set borderRightWidth(value: number) {
+    set borderRightWidth(value: Length) {
         this.style.borderRightWidth = value;
     }
 
-    get borderBottomWidth(): number {
+    get borderBottomWidth(): Length {
         return this.style.borderBottomWidth;
     }
-    set borderBottomWidth(value: number) {
+    set borderBottomWidth(value: Length) {
         this.style.borderBottomWidth = value;
     }
 
-    get borderLeftWidth(): number {
+    get borderLeftWidth(): Length {
         return this.style.borderLeftWidth;
     }
-    set borderLeftWidth(value: number) {
+    set borderLeftWidth(value: Length) {
         this.style.borderLeftWidth = value;
     }
 
@@ -486,17 +424,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this.style.backgroundImage = value;
     }
 
-    get minWidth(): number {
+    get minWidth(): Length {
         return this.style.minWidth;
     }
-    set minWidth(value: number) {
+    set minWidth(value: Length) {
         this.style.minWidth = value;
     }
 
-    get minHeight(): number {
+    get minHeight(): Length {
         return this.style.minHeight;
     }
-    set minHeight(value: number) {
+    set minHeight(value: Length) {
         this.style.minHeight = value;
     }
 
@@ -563,10 +501,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this.style.verticalAlignment = value;
     }
 
-    get visibility(): string {
+    get visibility(): "visible" | "hidden" | "collapse" | "collapsed" {
         return this.style.visibility;
     }
-    set visibility(value: string) {
+    set visibility(value: "visible" | "hidden" | "collapse" | "collapsed") {
         this.style.visibility = value;
     }
 
@@ -623,31 +561,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return null;
     }
 
+    public id: string;
+    public automationText: string;
     public originX: number;
     public originY: number;
     public isEnabled: boolean;
     public isUserInteractionEnabled: boolean;
-    public id: string;
-    public cssClass: string;
     public className: string;
 
-    // get style(): Style {
-    //     return this._style;
-    // }
-    // set style(value) {
-    //     throw new Error("View.style property is read-only.");
-    // }
-
-    get isLayoutRequired(): boolean {
-        return true;
-    }
-
     get isLayoutValid(): boolean {
         return this._isLayoutValid;
     }
-    set isLayoutValid(value: boolean) {
-        throw new Error("isLayoutValid is read-only property.");
-    }
 
     get cssType(): string {
         if (!this._cssType) {
@@ -656,9 +580,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return this._cssType;
     }
 
-    // get parent(): ViewCommon {
-    //     return this.parent;
-    // }
+    get isLayoutRequired(): boolean {
+        return true;
+    }
 
     get isLoaded(): boolean {
         return this._isLoaded;
@@ -760,24 +684,24 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     }
 
     public getMeasuredWidth(): number {
-        return this._measuredWidth & utils.layout.MEASURED_SIZE_MASK || 0;
+        return this._measuredWidth & layout.MEASURED_SIZE_MASK || 0;
     }
 
     public getMeasuredHeight(): number {
-        return this._measuredHeight & utils.layout.MEASURED_SIZE_MASK || 0;
+        return this._measuredHeight & layout.MEASURED_SIZE_MASK || 0;
     }
 
     public getMeasuredState(): number {
-        return (this._measuredWidth & utils.layout.MEASURED_STATE_MASK)
-            | ((this._measuredHeight >> utils.layout.MEASURED_HEIGHT_STATE_SHIFT)
-                & (utils.layout.MEASURED_STATE_MASK >> utils.layout.MEASURED_HEIGHT_STATE_SHIFT));
+        return (this._measuredWidth & layout.MEASURED_STATE_MASK)
+            | ((this._measuredHeight >> layout.MEASURED_HEIGHT_STATE_SHIFT)
+                & (layout.MEASURED_STATE_MASK >> layout.MEASURED_HEIGHT_STATE_SHIFT));
     }
 
     public setMeasuredDimension(measuredWidth: number, measuredHeight: number): void {
         this._measuredWidth = measuredWidth;
         this._measuredHeight = measuredHeight;
-        if (trace.enabled) {
-            trace.write(this + " :setMeasuredDimension: " + measuredWidth + ", " + measuredHeight, trace.categories.Layout);
+        if (traceEnabled) {
+            traceWrite(this + " :setMeasuredDimension: " + measuredWidth + ", " + measuredHeight, traceCategories.Layout);
         }
     }
 
@@ -830,22 +754,22 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     public static resolveSizeAndState(size: number, specSize: number, specMode: number, childMeasuredState: number): number {
         let result = size;
         switch (specMode) {
-            case utils.layout.UNSPECIFIED:
+            case layout.UNSPECIFIED:
                 result = size;
                 break;
 
-            case utils.layout.AT_MOST:
+            case layout.AT_MOST:
                 if (specSize < size) {
-                    result = Math.round(specSize + 0.499) | utils.layout.MEASURED_STATE_TOO_SMALL;
+                    result = Math.round(specSize + 0.499) | layout.MEASURED_STATE_TOO_SMALL;
                 }
                 break;
 
-            case utils.layout.EXACTLY:
+            case layout.EXACTLY:
                 result = specSize;
                 break;
         }
 
-        return Math.round(result + 0.499) | (childMeasuredState & utils.layout.MEASURED_STATE_MASK);
+        return Math.round(result + 0.499) | (childMeasuredState & layout.MEASURED_STATE_MASK);
     }
 
     public static combineMeasuredStates(curState: number, newState): number {
@@ -853,7 +777,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     }
 
     public static layoutChild(parent: ViewDefinition, child: ViewDefinition, left: number, top: number, right: number, bottom: number): void {
-        if (!child || !child.isVisible) {
+        if (!child || child.isCollapsed) {
             return;
         }
 
@@ -865,9 +789,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         let childWidth = child.getMeasuredWidth();
         let childHeight = child.getMeasuredHeight();
 
+        let effectiveMarginTop = childStyle.effectiveMarginTop;
+        let effectiveMarginBottom = childStyle.effectiveMarginBottom;
+
         let vAlignment: string;
-        if (childStyle.height.effectiveValue >= 0 && childStyle.verticalAlignment === VerticalAlignment.stretch) {
-            vAlignment = VerticalAlignment.center;
+        if (childStyle.effectiveHeight >= 0 && childStyle.verticalAlignment === "stretch") {
+            vAlignment = "center";
         }
         else {
             vAlignment = childStyle.verticalAlignment;
@@ -879,51 +806,55 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         let marginRight = childStyle.marginRight;
 
         switch (vAlignment) {
-            case VerticalAlignment.top:
-                childTop = top + marginTop.effectiveValue;
+            case "top":
+                childTop = top + effectiveMarginTop;
                 break;
 
-            case VerticalAlignment.center:
-            case VerticalAlignment.middle:
-                childTop = top + (bottom - top - childHeight + (marginTop.effectiveValue - marginBottom.effectiveValue)) / 2;
+            case "center":
+            case "middle":
+                childTop = top + (bottom - top - childHeight + (effectiveMarginTop - effectiveMarginBottom)) / 2;
                 break;
 
-            case VerticalAlignment.bottom:
-                childTop = bottom - childHeight - marginBottom.effectiveValue;
+            case "bottom":
+                childTop = bottom - childHeight - effectiveMarginBottom;
                 break;
 
-            case VerticalAlignment.stretch:
+            case "stretch":
             default:
-                childTop = top + marginTop.effectiveValue;
-                childHeight = bottom - top - (marginTop.effectiveValue + marginBottom.effectiveValue);
+                childTop = top + effectiveMarginTop;
+                childHeight = bottom - top - (effectiveMarginTop + effectiveMarginBottom);
                 break;
         }
 
+        let effectiveMarginLeft = childStyle.effectiveMarginLeft;
+        let effectiveMarginRight = childStyle.effectiveMarginRight;
+
         let hAlignment: string;
-        if (childStyle.width.effectiveValue >= 0 && childStyle.horizontalAlignment === HorizontalAlignment.stretch) {
-            hAlignment = HorizontalAlignment.center;
+        if (childStyle.effectiveWidth >= 0 && childStyle.horizontalAlignment === "stretch") {
+            hAlignment = "center";
         }
         else {
             hAlignment = childStyle.horizontalAlignment;
         }
 
         switch (hAlignment) {
-            case HorizontalAlignment.left:
-                childLeft = left + marginLeft.effectiveValue;
+            case "left":
+                childLeft = left + effectiveMarginLeft;
                 break;
 
-            case HorizontalAlignment.center:
-                childLeft = left + (right - left - childWidth + (marginLeft.effectiveValue - marginRight.effectiveValue)) / 2;
+            case "center":
+            case "middle":
+                childLeft = left + (right - left - childWidth + (effectiveMarginLeft - effectiveMarginRight)) / 2;
                 break;
 
-            case HorizontalAlignment.right:
-                childLeft = right - childWidth - marginRight.effectiveValue;
+            case "right":
+                childLeft = right - childWidth - effectiveMarginRight;
                 break;
 
-            case HorizontalAlignment.stretch:
+            case "stretch":
             default:
-                childLeft = left + marginLeft.effectiveValue;
-                childWidth = right - left - (marginLeft.effectiveValue + marginRight.effectiveValue);
+                childLeft = left + effectiveMarginLeft;
+                childWidth = right - left - (effectiveMarginLeft + effectiveMarginRight);
                 break;
         }
 
@@ -932,8 +863,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         childLeft = Math.round(childLeft);
         childTop = Math.round(childTop);
 
-        if (trace.enabled) {
-            trace.write(child.parent + " :layoutChild: " + child + " " + childLeft + ", " + childTop + ", " + childRight + ", " + childBottom, trace.categories.Layout);
+        if (traceEnabled) {
+            traceWrite(child.parent + " :layoutChild: " + child + " " + childLeft + ", " + childTop + ", " + childRight + ", " + childBottom, traceCategories.Layout);
         }
 
         child.layout(childLeft, childTop, childRight, childBottom);
@@ -943,7 +874,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         let measureWidth = 0;
         let measureHeight = 0;
 
-        if (child && child.isVisible) {
+        if (child && !child.isCollapsed) {
             let density = layout.getDisplayDensity();
             let width = layout.getMeasureSpecSize(widthMeasureSpec);
             let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
@@ -955,14 +886,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
             updateChildLayoutParams(child, parent, density);
 
             let style = child.style;
-            let horizontalMargins = style.marginLeft.effectiveValue + style.marginRight.effectiveValue;
-            let verticalMargins = style.marginTop.effectiveValue + style.marginRight.effectiveValue;
+            let horizontalMargins = style.effectiveMarginLeft + style.effectiveMarginRight;
+            let verticalMargins = style.effectiveMarginTop + style.effectiveMarginRight;
 
-            let childWidthMeasureSpec = ViewCommon.getMeasureSpec(width, widthMode, horizontalMargins, style.width.effectiveValue, style.horizontalAlignment === HorizontalAlignment.stretch);
-            let childHeightMeasureSpec = ViewCommon.getMeasureSpec(height, heightMode, verticalMargins, style.height.effectiveValue, style.verticalAlignment === VerticalAlignment.stretch);
+            let childWidthMeasureSpec = ViewCommon.getMeasureSpec(width, widthMode, horizontalMargins, style.effectiveWidth, style.horizontalAlignment === "stretch");
+            let childHeightMeasureSpec = ViewCommon.getMeasureSpec(height, heightMode, verticalMargins, style.effectiveHeight, style.verticalAlignment === "stretch");
 
-            if (trace.enabled) {
-                trace.write(child.parent + " :measureChild: " + child + " " + layout.measureSpecToString(childWidthMeasureSpec) + ", " + layout.measureSpecToString(childHeightMeasureSpec), trace.categories.Layout);
+            if (traceEnabled) {
+                traceWrite(child.parent + " :measureChild: " + child + " " + layout.measureSpecToString(childWidthMeasureSpec) + ", " + layout.measureSpecToString(childHeightMeasureSpec), traceCategories.Layout);
             }
 
             child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
@@ -1018,33 +949,6 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return changed;
     }
 
-    // protected static restoreChildOriginalParams(view: ViewDefinition): void {
-    //     if (!view) {
-    //         return;
-    //     }
-
-    //     let lp: CommonLayoutParams = view.layoutParams;
-    //     if (lp.widthPercent > 0) {
-    //         lp.width = -1;
-    //     }
-
-    //     if (lp.heightPercent > 0) {
-    //         lp.height = -1;
-    //     }
-    //     if (lp.leftMarginPercent > 0) {
-    //         lp.leftMargin = 0;
-    //     }
-    //     if (lp.topMarginPercent > 0) {
-    //         lp.topMargin = 0;
-    //     }
-    //     if (lp.rightMarginPercent > 0) {
-    //         lp.rightMargin = 0;
-    //     }
-    //     if (lp.bottomMarginPercent > 0) {
-    //         lp.bottomMargin = 0;
-    //     }
-    // }
-
     _getCurrentLayoutBounds(): { left: number; top: number; right: number; bottom: number } {
         return { left: this._oldLeft, top: this._oldTop, right: this._oldRight, bottom: this._oldBottom }
     }
@@ -1073,7 +977,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     }
 
     private _applyInlineStyle(inlineStyle) {
-        if (isString(inlineStyle)) {
+        if (typeof inlineStyle === "string") {
             try {
                 // this.style._beginUpdate();
                 applyInlineSyle(this, <string>inlineStyle);
@@ -1140,8 +1044,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
      * // TODO: Think whether we need the base Layout routine.
      */
     public _addView(view: ViewDefinition, atIndex?: number) {
-        if (trace.enabled) {
-            trace.write(`${this}._addView(${view}, ${atIndex})`, trace.categories.ViewHierarchy);
+        if (traceEnabled) {
+            traceWrite(`${this}._addView(${view}, ${atIndex})`, traceCategories.ViewHierarchy);
         }
 
         if (!view) {
@@ -1196,8 +1100,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
      * Core logic for removing a child view from this instance. Used by the framework to handle lifecycle events more centralized. Do not outside the UI Stack implementation.
      */
     public _removeView(view: ViewDefinition) {
-        if (trace.enabled) {
-            trace.write(`${this}._removeView(${view})`, trace.categories.ViewHierarchy);
+        if (traceEnabled) {
+            traceWrite(`${this}._removeView(${view})`, traceCategories.ViewHierarchy);
         }
         if (view.parent !== this) {
             throw new Error("View not added to this instance. View: " + view + " CurrentParent: " + view.parent + " ExpectedParent: " + this);
@@ -1262,8 +1166,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     }
 
     public _goToVisualState(state: string) {
-        if (trace.enabled) {
-            trace.write(this + " going to state: " + state, trace.categories.Style);
+        if (traceEnabled) {
+            traceWrite(this + " going to state: " + state, traceCategories.Style);
         }
         if (state === this._visualState) {
             return;
@@ -1284,7 +1188,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     }
 
     public setInlineStyle(style: string): void {
-        if (!isString(style)) {
+        if (typeof style !== "string") {
             throw new Error("Parameter should be valid CSS string!");
         }
 
@@ -1327,8 +1231,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         }
 
         return {
-            width: utils.layout.toDeviceIndependentPixels(currentBounds.right - currentBounds.left),
-            height: utils.layout.toDeviceIndependentPixels(currentBounds.bottom - currentBounds.top),
+            width: layout.toDeviceIndependentPixels(currentBounds.right - currentBounds.left),
+            height: layout.toDeviceIndependentPixels(currentBounds.bottom - currentBounds.top),
         }
     }
 
@@ -1476,22 +1380,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     }
 }
 
-function updateEffectiveValues(prentAvailableLength: number, density: number, ...params: Length[]): void {
-    for (let param of params) {
-        switch (param.unit) {
-            case "%":
-                param.effectiveValue = Math.round(prentAvailableLength * param.value);
-                break;
+function getEffectiveValue(prentAvailableLength: number, density: number, param: Length): number {
+    switch (param.unit) {
+        case "%":
+            return Math.round(prentAvailableLength * param.value);
 
-            case "dip":
-                param.effectiveValue = Math.round(density * param.value);
-                break;
+        case "px":
+            return Math.round(param.value);
 
-            case "px":
-            default:
-                param.effectiveValue = Math.round(param.value);
-                break;
-        }
+        default:
+        case "dip":
+            return Math.round(density * param.value);
     }
 }
 
@@ -1501,27 +1400,30 @@ function updateChildLayoutParams(child: ViewCommon, parent: ViewCommon, density:
     let parentWidthMeasureSpec = parent._currentWidthMeasureSpec;
     let parentWidthMeasureSize = layout.getMeasureSpecSize(parentWidthMeasureSpec);
     let parentWidthMeasureMode = layout.getMeasureSpecMode(parentWidthMeasureSpec);
-    let parentAvailableWidth = parentWidthMeasureMode === utils.layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
-    updateEffectiveValues(parentAvailableWidth, density, style.width, style.marginLeft, style.marginRight);
+    let parentAvailableWidth = parentWidthMeasureMode === layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
+    style.effectiveWidth = getEffectiveValue(parentAvailableWidth, density, style.width);
+    style.effectiveMarginLeft = getEffectiveValue(parentAvailableWidth, density, style.marginLeft);
+    style.effectiveMarginRight = getEffectiveValue(parentAvailableWidth, density, style.marginRight);
 
     let parentHeightMeasureSpec = parent._currentHeightMeasureSpec;
     let parentHeightMeasureSize = layout.getMeasureSpecSize(parentHeightMeasureSpec);
     let parentHeightMeasureMode = layout.getMeasureSpecMode(parentHeightMeasureSpec);
-    let parentAvailableHeight = parentHeightMeasureMode === utils.layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
-    updateEffectiveValues(parentAvailableHeight, density, style.height, style.marginTop, style.marginBottom);
+    let parentAvailableHeight = parentHeightMeasureMode === layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
+    style.effectiveHeight = getEffectiveValue(parentAvailableHeight, density, style.height);
+    style.effectiveMarginTop = getEffectiveValue(parentAvailableHeight, density, style.marginTop);
+    style.effectiveMarginBottom = getEffectiveValue(parentAvailableHeight, density, style.marginBottom);
 }
 
 interface Length {
     readonly unit: "%" | "dip" | "px";
     readonly value: number;
-    effectiveValue: number;
 }
 
 export namespace Length {
     export function parse(value: string | Length): Length {
-        let numberValue = 0;
-        let type: "%" | "dip" | "px";
         if (typeof value === "string") {
+            let type: "%" | "dip" | "px";
+            let numberValue = 0;
             let stringValue = value.trim();
             let percentIndex = stringValue.indexOf("%");
             if (percentIndex !== -1) {
@@ -1533,7 +1435,7 @@ export namespace Length {
                     numberValue = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100;
                 }
             } else {
-                if (stringValue.indexOf("px")) {
+                if (stringValue.indexOf("px") !== -1) {
                     type = "px";
                     stringValue = stringValue.replace("px", "").trim();
                 } else {
@@ -1543,14 +1445,13 @@ export namespace Length {
                 numberValue = parseFloat(stringValue);
             }
 
-            if (isNaN(numberValue) || !isFinite(numberValue) || numberValue < 0) {
+            if (isNaN(numberValue) || !isFinite(numberValue)) {
                 throw new Error("Invalid value: " + value);
             }
 
             return {
                 value: numberValue,
-                unit: type,
-                effectiveValue: undefined
+                unit: type
             }
         } else {
             return value;
@@ -1558,132 +1459,168 @@ export namespace Length {
     }
 }
 
-function minWidthMinHeightConverter(value: string | number): number {
-    let newValue: number = typeof value === "string" ? parseFloat(value) : value;
-    if (isNaN(newValue) || value < 0.0 || !isFinite(newValue)) {
-        throw new Error(`Invalid value: ${newValue}`);
+function onCssClassPropertyChanged(view: ViewCommon, oldValue: string, newValue: string) {
+    let classes = view.cssClasses;
+    classes.clear();
+    if (typeof newValue === "string") {
+        newValue.split(" ").forEach(c => classes.add(c));
     }
-
-    return newValue;
 }
 
-// TODO: Use different converter that calls isMinWidthHeightValid.
-export let minWidthProperty = new CssProperty<Style, number>({ name: "minWidth", cssName: "min-width", defaultValue: 0, affectsLayout: affectsIOSLayout, valueConverter: minWidthMinHeightConverter });
+export const classNameProperty = new Property<ViewCommon, string>({ name: "className", valueChanged: onCssClassPropertyChanged });
+classNameProperty.register(ViewCommon);
+
+function resetStyles(view: ViewCommon): void {
+    // view.style._resetCssValues();
+    // view._applyStyleFromScope();
+    view._eachChildView((child) => {
+        // TODO.. Check old implementation....
+        resetStyles(child);
+        return true;
+    });
+}
+// let idProperty = new Property("id", "View", new PropertyMetadata(undefined, PropertyMetadataSettings.AffectsStyle));
+export const idProperty = new Property<ViewCommon, string>({ name: "id", valueChanged: (view, oldValue, newValue) => resetStyles(view) });
+idProperty.register(ViewCommon);
+
+export const automationTextProperty = new Property<ViewCommon, string>({ name: "automationText" });
+automationTextProperty.register(ViewCommon);
+
+export const originXProperty = new Property<ViewCommon, number>({ name: "originX", defaultValue: 0.5 });
+originXProperty.register(ViewCommon);
+
+export const originYProperty = new Property<ViewCommon, number>({ name: "originY", defaultValue: 0.5 });
+originYProperty.register(ViewCommon);
+
+export const isEnabledProperty = new Property<ViewCommon, boolean>({ name: "isEnabled", defaultValue: true });
+isEnabledProperty.register(ViewCommon);
+
+export const isUserInteractionEnabledProperty = new Property<ViewCommon, boolean>({ name: "isUserInteractionEnabled", defaultValue: true });
+isUserInteractionEnabledProperty.register(ViewCommon);
+
+const zeroLength: Length = { value: 0, unit: "px" };
+
+export const minWidthProperty = new CssProperty<Style, Length>({
+    name: "minWidth", cssName: "min-width", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        target.effectiveMinWidth = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+    }, valueConverter: Length.parse
+});
 minWidthProperty.register(Style);
-// export let minWidthProperty = new styleProperty.Property("minWidth", "min-width",
-//     new PropertyMetadata(0, AffectsLayout, null, isMinWidthHeightValid), numberConverter);
 
-export let minHeightProperty = new CssProperty<Style, number>({ name: "minHeight", cssName: "min-height", defaultValue: 0, affectsLayout: affectsIOSLayout, valueConverter: minWidthMinHeightConverter });
+export const minHeightProperty = new CssProperty<Style, Length>({
+    name: "minHeight", cssName: "min-height", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        target.effectiveMinHeight = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+    }, valueConverter: Length.parse
+});
 minHeightProperty.register(Style);
-// export let minHeightProperty = new styleProperty.Property("minHeight", "min-height",
-//     new PropertyMetadata(0, AffectsLayout, null, isMinWidthHeightValid), numberConverter);
 
-export let widthProperty = new CssProperty<Style, Length>({ name: "width", cssName: "width", defaultValue: Length.parse("-1"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+const matchParent: Length = { value: -1, unit: "px" };
+
+export const widthProperty = new CssProperty<Style, Length>({ name: "width", cssName: "width", defaultValue: matchParent, affectsLayout: isIOS, valueConverter: Length.parse });
 widthProperty.register(Style);
-// export let widthProperty = new styleProperty.Property("width", "width",
-//     new PropertyMetadata(Number.NaN, AffectsLayout, onLayoutParamsChanged, isWidthHeightValid), numberOrPercentConverter);
 
-export let heightProperty = new CssProperty<Style, Length>({ name: "height", cssName: "height", defaultValue: Length.parse("-1"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+export const heightProperty = new CssProperty<Style, Length>({ name: "height", cssName: "height", defaultValue: matchParent, affectsLayout: isIOS, valueConverter: Length.parse });
 heightProperty.register(Style);
-// export let heightProperty = new styleProperty.Property("height", "height",
-//     new PropertyMetadata(Number.NaN, AffectsLayout, onLayoutParamsChanged, isWidthHeightValid), numberOrPercentConverter);
 
-export let marginProperty = new ShorthandProperty<Style>({
+export const marginProperty = new ShorthandProperty<Style>({
     name: "margin", cssName: "margin",
-    getter: () => { return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`; },
+    getter: function (this: Style) { return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`; },
     converter: convertToMargins
 });
 marginProperty.register(Style);
 
-export let marginLeftProperty = new CssProperty<Style, Length>({ name: "marginLeft", cssName: "margin-left", defaultValue: Length.parse("0"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+export const marginLeftProperty = new CssProperty<Style, Length>({ name: "marginLeft", cssName: "margin-left", defaultValue: zeroLength, affectsLayout: isIOS, valueConverter: Length.parse });
 marginLeftProperty.register(Style);
-// export let marginLeftProperty = new styleProperty.Property("marginLeft", "margin-left",
-//     new PropertyMetadata(0, AffectsLayout, onLayoutParamsChanged, isMarginValid), numberOrPercentConverter);
 
-export let marginRightProperty = new CssProperty<Style, Length>({ name: "marginRight", cssName: "margin-right", defaultValue: Length.parse("0"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+export const marginRightProperty = new CssProperty<Style, Length>({ name: "marginRight", cssName: "margin-right", defaultValue: zeroLength, affectsLayout: isIOS, valueConverter: Length.parse });
 marginRightProperty.register(Style);
-// export let marginRightProperty = new styleProperty.Property("marginRight", "margin-right",
-//     new PropertyMetadata(0, AffectsLayout, onLayoutParamsChanged, isMarginValid), numberOrPercentConverter);
 
-export let marginTopProperty = new CssProperty<Style, Length>({ name: "marginTop", cssName: "margin-top", defaultValue: Length.parse("0"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+export const marginTopProperty = new CssProperty<Style, Length>({ name: "marginTop", cssName: "margin-top", defaultValue: zeroLength, affectsLayout: isIOS, valueConverter: Length.parse });
 marginTopProperty.register(Style);
-// export let marginTopProperty = new styleProperty.Property("marginTop", "margin-top",
-//     new PropertyMetadata(0, AffectsLayout, onLayoutParamsChanged, isMarginValid), numberOrPercentConverter);
 
-export let marginBottomProperty = new CssProperty<Style, Length>({ name: "marginBottom", cssName: "margin-bottom", defaultValue: Length.parse("0"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+export const marginBottomProperty = new CssProperty<Style, Length>({ name: "marginBottom", cssName: "margin-bottom", defaultValue: zeroLength, affectsLayout: isIOS, valueConverter: Length.parse });
 marginBottomProperty.register(Style);
-// export let marginBottomProperty = new styleProperty.Property("marginBottom", "margin-bottom",
-//     new PropertyMetadata(0, AffectsLayout, onLayoutParamsChanged, isMarginValid), numberOrPercentConverter);
 
-export let paddingProperty = new ShorthandProperty<Style>({
+export const paddingProperty = new ShorthandProperty<Style>({
     name: "padding", cssName: "padding",
-    getter: () => { return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`; },
+    getter: function (this: Style) { return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`; },
     converter: convertToPaddings
 });
 paddingProperty.register(Style);
 
-export let paddingLeftProperty = new CssProperty<Style, Length>({ name: "paddingLeft", cssName: "padding-left", defaultValue: Length.parse("0"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+export const paddingLeftProperty = new CssProperty<Style, Length>({
+    name: "paddingLeft", cssName: "padding-left", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        target.effectivePaddingLeft = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+    }, valueConverter: Length.parse
+});
 paddingLeftProperty.register(Style);
-// export let paddingLeftProperty = new styleProperty.Property("paddingLeft", "padding-left",
-//     new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), numberConverter);
 
-export let paddingRightProperty = new CssProperty<Style, Length>({ name: "paddingRight", cssName: "padding-right", defaultValue: Length.parse("0"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+export const paddingRightProperty = new CssProperty<Style, Length>({
+    name: "paddingRight", cssName: "padding-right", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        target.effectivePaddingRight = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+    }, valueConverter: Length.parse
+});
 paddingRightProperty.register(Style);
-// export let paddingRightProperty = new styleProperty.Property("paddingRight", "padding-right",
-//     new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), numberConverter);
 
-export let paddingTopProperty = new CssProperty<Style, Length>({ name: "paddingTop", cssName: "padding-top", defaultValue: Length.parse("0"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+export const paddingTopProperty = new CssProperty<Style, Length>({
+    name: "paddingTop", cssName: "padding-top", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        target.effectivePaddingTop = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+    }, valueConverter: Length.parse
+});
 paddingTopProperty.register(Style);
-// export let paddingTopProperty = new styleProperty.Property("paddingTop", "padding-top",
-//     new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), numberConverter);
 
-export let paddingBottomProperty = new CssProperty<Style, Length>({ name: "paddingBottom", cssName: "padding-bottom", defaultValue: Length.parse("0"), affectsLayout: affectsIOSLayout, valueConverter: Length.parse });
+export const paddingBottomProperty = new CssProperty<Style, Length>({
+    name: "paddingBottom", cssName: "padding-bottom", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        target.effectivePaddingBottom = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+    }, valueConverter: Length.parse
+});
 paddingBottomProperty.register(Style);
-// export let paddingBottomProperty = new styleProperty.Property("paddingBottom", "padding-bottom",
-//     new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), numberConverter);
 
-export let verticalAlignmentProperty = new CssProperty<Style, string>({ name: "verticalAlignment", cssName: "vertical-align", defaultValue: VerticalAlignment.stretch, affectsLayout: affectsIOSLayout });
+export const verticalAlignmentProperty = new CssProperty<Style, string>({ name: "verticalAlignment", cssName: "vertical-align", defaultValue: "stretch", affectsLayout: isIOS });
 verticalAlignmentProperty.register(Style);
-// export let verticalAlignmentProperty = new styleProperty.Property("verticalAlignment", "vertical-align",
-//     new PropertyMetadata(VerticalAlignment.stretch, AffectsLayout, onLayoutParamsChanged));
 
-export let horizontalAlignmentProperty = new CssProperty<Style, string>({ name: "horizontalAlignment", cssName: "horizontal-align", defaultValue: HorizontalAlignment.stretch, affectsLayout: affectsIOSLayout });
+export const horizontalAlignmentProperty = new CssProperty<Style, string>({ name: "horizontalAlignment", cssName: "horizontal-align", defaultValue: "stretch", affectsLayout: isIOS });
 horizontalAlignmentProperty.register(Style);
-// export let horizontalAlignmentProperty = new styleProperty.Property("horizontalAlignment", "horizontal-align",
-//     new PropertyMetadata(HorizontalAlignment.stretch, AffectsLayout, onLayoutParamsChanged));
+
+interface Thickness {
+    top: string,
+    right: string,
+    bottom: string,
+    left: string
+}
 
 function parseThickness(value: string): Thickness {
     if (typeof value === "string") {
         let arr = value.split(/[ ,]+/);
 
-        let top: Length;
-        let right: Length;
-        let bottom: Length;
-        let left: Length;
+        let top: string;
+        let right: string;
+        let bottom: string;
+        let left: string;
 
         if (arr.length === 1) {
-            top = Length.parse(arr[0]);
-            right = Length.parse(arr[0]);
-            bottom = Length.parse(arr[0]);
-            left = Length.parse(arr[0]);
+            top = arr[0];
+            right = arr[0];
+            bottom = arr[0];
+            left = arr[0];
         }
         else if (arr.length === 2) {
-            top = Length.parse(arr[0]);
-            bottom = Length.parse(arr[0]);
-            right = Length.parse(arr[1]);
-            left = Length.parse(arr[1]);
+            top = arr[0];
+            bottom = arr[0];
+            right = arr[1];
+            left = arr[1];
         }
         else if (arr.length === 3) {
-            top = Length.parse(arr[0]);
-            right = Length.parse(arr[1]);
-            left = Length.parse(arr[1]);
-            bottom = Length.parse(arr[2]);
+            top = arr[0];
+            right = arr[1];
+            left = arr[1];
+            bottom = arr[2];
         }
         else if (arr.length === 4) {
-            top = Length.parse(arr[0]);
-            right = Length.parse(arr[1]);
-            bottom = Length.parse(arr[2]);
-            left = Length.parse(arr[3]);
+            top = arr[0];
+            right = arr[1];
+            bottom = arr[2];
+            left = arr[3];
         }
         else {
             throw new Error("Expected 1, 2, 3 or 4 parameters. Actual: " + value);
@@ -1703,19 +1640,534 @@ function parseThickness(value: string): Thickness {
 function convertToMargins(this: Style, value: string): [CssProperty<any, any>, any][] {
     let thickness = parseThickness(value);
     return [
-        [marginTopProperty, thickness.top],
-        [marginRightProperty, thickness.right],
-        [marginBottomProperty, thickness.bottom],
-        [marginLeftProperty, thickness.left]
+        [marginTopProperty, Length.parse(thickness.top)],
+        [marginRightProperty, Length.parse(thickness.right)],
+        [marginBottomProperty, Length.parse(thickness.bottom)],
+        [marginLeftProperty, Length.parse(thickness.left)]
     ];
 }
 
 function convertToPaddings(this: Style, value: string): [CssProperty<any, any>, any][] {
     let thickness = parseThickness(value);
     return [
-        [paddingTopProperty, thickness.top],
-        [paddingRightProperty, thickness.right],
-        [paddingBottomProperty, thickness.bottom],
-        [paddingLeftProperty, thickness.left]
+        [paddingTopProperty, Length.parse(thickness.top)],
+        [paddingRightProperty, Length.parse(thickness.right)],
+        [paddingBottomProperty, Length.parse(thickness.bottom)],
+        [paddingLeftProperty, Length.parse(thickness.left)]
     ];
 }
+
+export const rotateProperty = new CssProperty<Style, number>({ name: "rotate", cssName: "rotate", defaultValue: 0 });
+rotateProperty.register(Style);
+
+export const scaleXProperty = new CssProperty<Style, number>({ name: "scaleX", cssName: "scaleX", defaultValue: 1 });
+scaleXProperty.register(Style);
+
+export const scaleYProperty = new CssProperty<Style, number>({ name: "scaleY", cssName: "scaleY", defaultValue: 1 });
+scaleYProperty.register(Style);
+
+export const translateXProperty = new CssProperty<Style, number>({ name: "translateX", cssName: "translateX", defaultValue: 0 });
+translateXProperty.register(Style);
+
+export const translateYProperty = new CssProperty<Style, number>({ name: "translateY", cssName: "translateY", defaultValue: 0 });
+translateYProperty.register(Style);
+
+export const transformProperty = new ShorthandProperty<Style>({
+    name: "transform", cssName: "transform",
+    getter: function (this: Style) {
+        let scaleX = this.scaleX;
+        let scaleY = this.scaleY;
+        let translateX = this.translateX;
+        let translateY = this.translateY;
+        let rotate = this.rotate;
+        let result = "";
+        if (translateX !== 0 || translateY !== 0) {
+            result += `translate(${translateX}, ${translateY}) `;
+        }
+        if (scaleX !== 1 || scaleY !== 1) {
+            result += `scale(${scaleX}, ${scaleY}) `;
+        }
+        if (rotate !== 0) {
+            result += `rotate (${rotate})`;
+        }
+
+        return result.trim();
+    },
+    converter: convertToTransform
+});
+transformProperty.register(Style);
+
+function transformConverter(value: string): Object {
+    if (value.indexOf("none") !== -1) {
+        let operations = {};
+        operations[value] = value;
+        return operations;
+    }
+
+    let operations = {};
+    let operator = "";
+    let pos = 0;
+    while (pos < value.length) {
+        if (value[pos] === " " || value[pos] === ",") {
+            pos++;
+        }
+        else if (value[pos] === "(") {
+            let start = pos + 1;
+            while (pos < value.length && value[pos] !== ")") {
+                pos++;
+            }
+            let operand = value.substring(start, pos);
+            operations[operator] = operand.trim();
+            operator = "";
+            pos++;
+        }
+        else {
+            operator += value[pos++];
+        }
+    }
+    return operations;
+}
+
+function convertToTransform(value: string): [CssProperty<any, any>, any][] {
+    let newTransform = transformConverter(value);
+    let array = [];
+    let values: Array<string>;
+    for (var transform in newTransform) {
+        switch (transform) {
+            case "scaleX":
+                array.push([scaleXProperty, parseFloat(newTransform[transform])]);
+                break;
+            case "scaleY":
+                array.push([scaleYProperty, parseFloat(newTransform[transform])]);
+                break;
+            case "scale":
+            case "scale3d":
+                values = newTransform[transform].split(",");
+                if (values.length >= 2) {
+                    array.push([scaleXProperty, parseFloat(values[0])]);
+                    array.push([scaleYProperty, parseFloat(values[1])]);
+                }
+                else if (values.length === 1) {
+                    array.push([scaleXProperty, parseFloat(values[0])]);
+                    array.push([scaleYProperty, parseFloat(values[0])]);
+                }
+                break;
+            case "translateX":
+                array.push([translateXProperty, parseFloat(newTransform[transform])]);
+                break;
+            case "translateY":
+                array.push([translateYProperty, parseFloat(newTransform[transform])]);
+                break;
+            case "translate":
+            case "translate3d":
+                values = newTransform[transform].split(",");
+                if (values.length >= 2) {
+                    array.push([translateXProperty, parseFloat(values[0])]);
+                    array.push([translateYProperty, parseFloat(values[1])]);
+                }
+                else if (values.length === 1) {
+                    array.push([translateXProperty, parseFloat(values[0])]);
+                    array.push([translateYProperty, parseFloat(values[0])]);
+                }
+                break;
+            case "rotate":
+                let text = newTransform[transform];
+                let val = parseFloat(text);
+                if (text.slice(-3) === "rad") {
+                    val = val * (180.0 / Math.PI);
+                }
+                array.push([rotateProperty, val]);
+                break;
+            case "none":
+                array.push([scaleXProperty, 1]);
+                array.push([scaleYProperty, 1]);
+                array.push([translateXProperty, 0]);
+                array.push([translateYProperty, 0]);
+                array.push([rotateProperty, 0]);
+                break;
+        }
+    }
+    return array;
+}
+
+// Background properties.
+export const backgroundInternalProperty = new CssProperty<Style, Background>({ name: "backgroundInternal", cssName: "_backgroundInternal", defaultValue: Background.default });
+
+let pattern: RegExp = /url\(('|")(.*?)\1\)/;
+export const backgroundImageProperty = new CssProperty<Style, string>({
+    name: "backgroundImage", cssName: "background-image", valueChanged: (target, oldValue, newValue) => {
+        let style = target;
+        let currentBackground = target.backgroundInternal;
+        let url: string = newValue;
+        let isValid = false;
+
+        let match = url.match(pattern);
+        if (match && match[2]) {
+            url = match[2];
+        }
+
+        if (isDataURI(url)) {
+            let base64Data = url.split(",")[1];
+            if (typeof base64Data !== "undefined") {
+                style.backgroundInternal = currentBackground.withImage(fromBase64(base64Data));
+                isValid = true;
+            } else {
+                style.backgroundInternal, currentBackground.withImage(undefined);
+            }
+        }
+        else if (isFileOrResourcePath(url)) {
+            style.backgroundInternal = currentBackground.withImage(fromFileOrResource(url));
+            isValid = true;
+        }
+        else if (url.indexOf("http") !== -1) {
+            style["_url"] = url;
+            style.backgroundInternal = currentBackground.withImage(undefined);
+            fromUrl(url).then((r) => {
+                if (style && style["_url"] === url) {
+                    // Get the current background again, as it might have changed while doing the request.
+                    currentBackground = target.backgroundInternal;
+                    target.backgroundInternal = currentBackground.withImage(r);
+                }
+            });
+            isValid = true;
+        }
+
+        if (!isValid) {
+            style.backgroundInternal = currentBackground.withImage(undefined);
+        }
+    }
+});
+backgroundImageProperty.register(Style);
+
+export const backgroundColorProperty = new CssProperty<Style, Color>({
+    name: "backgroundColor", cssName: "background-color", valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withColor(newValue);
+    }, equalityComparer: Color.equals, valueConverter: (value) => new Color(value)
+});
+backgroundColorProperty.register(Style);
+
+export const backgroundRepeatProperty = new CssProperty<Style, string>({
+    name: "backgroundRepeat", cssName: "background-repeat", valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withRepeat(newValue);
+    }
+});
+backgroundRepeatProperty.register(Style);
+
+export const backgroundSizeProperty = new CssProperty<Style, string>({
+    name: "backgroundSize", cssName: "background-size", valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withSize(newValue);
+    }
+});
+backgroundSizeProperty.register(Style);
+
+export const backgroundPositionProperty = new CssProperty<Style, string>({
+    name: "backgroundPosition", cssName: "background-position", valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withPosition(newValue);
+    }
+});
+backgroundPositionProperty.register(Style);
+
+function isNonNegativeFiniteNumberConverter(value: string): number {
+    let number = parseFloat(value);
+    if (!isNonNegativeFiniteNumber(number)) {
+        throw new Error("border-width should be Non-Negative Finite number.");
+    }
+    return number;
+}
+
+function parseBorderColor(value: string): { top: Color, right: Color, bottom: Color, left: Color } {
+    let result: { top: Color, right: Color, bottom: Color, left: Color };
+    if (value.indexOf("rgb") === 0) {
+        result.top = result.right = result.bottom = result.left = new Color(value);
+        return result;
+    }
+
+    let arr = value.split(/[ ,]+/);
+    if (arr.length === 1) {
+        let arr0 = new Color(arr[0]);
+        result.top = arr0;
+        result.right = arr0;
+        result.bottom = arr0;
+        result.left = arr0;
+    }
+    else if (arr.length === 2) {
+        let arr0 = new Color(arr[0]);
+        let arr1 = new Color(arr[1]);
+        result.top = arr0;
+        result.right = arr1;
+        result.bottom = arr0;
+        result.left = arr1;
+    }
+    else if (arr.length === 3) {
+        let arr0 = new Color(arr[0]);
+        let arr1 = new Color(arr[1]);
+        let arr2 = new Color(arr[2]);
+        result.top = arr0;
+        result.right = arr1;
+        result.bottom = arr2;
+        result.left = arr1;
+    }
+    else if (arr.length === 4) {
+        let arr0 = new Color(arr[0]);
+        let arr1 = new Color(arr[1]);
+        let arr2 = new Color(arr[2]);
+        let arr3 = new Color(arr[3]);
+        result.top = arr0;
+        result.right = arr1;
+        result.bottom = arr2;
+        result.left = arr3;
+    }
+    else {
+        throw new Error("Expected 1, 2, 3 or 4 parameters. Actual: " + value);
+    }
+}
+
+// Border Color properties.
+export const borderColorProperty = new ShorthandProperty<Style>({
+    name: "borderColor", cssName: "border-color",
+    getter: function (this: Style) {
+        if (Color.equals(this.borderTopColor, this.borderRightColor) &&
+            Color.equals(this.borderTopColor, this.borderBottomColor) &&
+            Color.equals(this.borderTopColor, this.borderLeftColor)) {
+            return this.borderTopColor ? this.borderTopColor.toString() : "";
+        } else {
+            return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
+        }
+    },
+    converter: function (value: string) {
+        let fourColors = parseBorderColor(value);
+        return [
+            [borderTopColorProperty, fourColors.top],
+            [borderRightColorProperty, fourColors.right],
+            [borderBottomColorProperty, fourColors.bottom],
+            [borderLeftColorProperty, fourColors.left]
+        ];
+    }
+})
+borderColorProperty.register(Style);
+
+export const borderTopColorProperty = new CssProperty<Style, Color>({
+    name: "borderTopColor", cssName: "border-top-color", valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderTopColor(newValue);
+    },
+    equalityComparer: Color.equals, valueConverter: (value) => new Color(value)
+});
+borderTopColorProperty.register(Style);
+
+export const borderRightColorProperty = new CssProperty<Style, Color>({
+    name: "borderRightColor", cssName: "border-right-color", valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderRightColor(newValue);
+    }, equalityComparer: Color.equals, valueConverter: (value) => new Color(value)
+});
+borderRightColorProperty.register(Style);
+
+export const borderBottomColorProperty = new CssProperty<Style, Color>({
+    name: "borderBottomColor", cssName: "border-bottom-color", valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderBottomColor(newValue);
+    }, equalityComparer: Color.equals, valueConverter: (value) => new Color(value)
+});
+borderBottomColorProperty.register(Style);
+
+export const borderLeftColorProperty = new CssProperty<Style, Color>({
+    name: "borderLeftColor", cssName: "border-left-color", valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderLeftColor(newValue);
+    }, equalityComparer: Color.equals, valueConverter: (value) => new Color(value)
+});
+borderLeftColorProperty.register(Style);
+
+// Border Width properties.
+export const borderWidthProperty = new ShorthandProperty<Style>({
+    name: "borderWidth", cssName: "border-width",
+    getter: function (this: Style) {
+        if (Color.equals(this.borderTopColor, this.borderRightColor) &&
+            Color.equals(this.borderTopColor, this.borderBottomColor) &&
+            Color.equals(this.borderTopColor, this.borderLeftColor)) {
+            return this.borderTopColor + "";
+        } else {
+            return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
+        }
+    },
+    converter: function (value: string) {
+        let borderWidths = parseThickness(value);
+        return [
+            [borderTopWidthProperty, borderWidths.top],
+            [borderRightWidthProperty, borderWidths.right],
+            [borderBottomWidthProperty, borderWidths.bottom],
+            [borderLeftWidthProperty, borderWidths.left]
+        ];
+    }
+})
+borderWidthProperty.register(Style);
+
+export const borderTopWidthProperty = new CssProperty<Style, Length>({
+    name: "borderTopWidth", cssName: "border-top-width", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        let value = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+        if (!isNonNegativeFiniteNumber(value)) {
+            throw new Error(`border-top-width should be Non-Negative Finite number. Value: ${value}`);
+        }
+        target.effectiveBorderTopWidth = value;
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderTopWidth(value);
+    }, valueConverter: Length.parse
+});
+borderTopWidthProperty.register(Style);
+
+export const borderRightWidthProperty = new CssProperty<Style, Length>({
+    name: "borderRightWidth", cssName: "border-right-width", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        let value = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+        if (!isNonNegativeFiniteNumber(value)) {
+            throw new Error(`border-right-width should be Non-Negative Finite number. Value: ${value}`);
+        }
+        target.effectiveBorderRightWidth = value;
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderRightWidth(value);
+    }, valueConverter: Length.parse
+});
+borderRightWidthProperty.register(Style);
+
+export const borderBottomWidthProperty = new CssProperty<Style, Length>({
+    name: "borderBottomWidth", cssName: "border-bottom-width", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        let value = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+        if (!isNonNegativeFiniteNumber(value)) {
+            throw new Error(`border-bottom-width should be Non-Negative Finite number. Value: ${value}`);
+        }
+        target.effectiveBorderBottomWidth = value;
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderBottomWidth(value);
+    }, valueConverter: Length.parse
+});
+borderBottomWidthProperty.register(Style);
+
+export const borderLeftWidthProperty = new CssProperty<Style, Length>({
+    name: "borderLeftWidth", cssName: "border-left-width", defaultValue: zeroLength, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        let value = getEffectiveValue(0, layout.getDisplayDensity(), newValue);
+        if (!isNonNegativeFiniteNumber(value)) {
+            throw new Error(`border-left-width should be Non-Negative Finite number. Value: ${value}`);
+        }
+        target.effectiveBorderLeftWidth = value;
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderLeftWidth(value);
+    }, valueConverter: Length.parse
+});
+borderLeftWidthProperty.register(Style);
+
+// Border Radius properties.
+export const borderRadiusProperty = new ShorthandProperty<Style>({
+    name: "borderRadius", cssName: "border-radius",
+    getter: function (this: Style) {
+        if (this.borderTopLeftRadius === this.borderTopRightRadius &&
+            this.borderTopLeftRadius === this.borderBottomRightRadius &&
+            this.borderTopLeftRadius === this.borderBottomLeftRadius) {
+            return this.borderTopLeftRadius + "";
+        } else {
+            return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`;
+        }
+    },
+    converter: function (value: string) {
+        let borderRadius = parseThickness(value);
+        return [
+            [borderTopLeftRadiusProperty, borderRadius.top],
+            [borderTopRightRadiusProperty, borderRadius.right],
+            [borderBottomRightRadiusProperty, borderRadius.bottom],
+            [borderBottomLeftRadiusProperty, borderRadius.left]
+        ];
+    }
+})
+borderRadiusProperty.register(Style);
+
+export const borderTopLeftRadiusProperty = new CssProperty<Style, number>({
+    name: "borderTopLeftRadius", cssName: "border-top-left-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderTopLeftRadius(newValue);
+    }, valueConverter: isNonNegativeFiniteNumberConverter
+});
+borderTopLeftRadiusProperty.register(Style);
+
+export const borderTopRightRadiusProperty = new CssProperty<Style, number>({
+    name: "borderTopRightRadius", cssName: "border-top-right-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderTopRightRadius(newValue);
+    }, valueConverter: isNonNegativeFiniteNumberConverter
+});
+borderTopRightRadiusProperty.register(Style);
+
+export const borderBottomRightRadiusProperty = new CssProperty<Style, number>({
+    name: "borderBottomRightRadius", cssName: "border-bottom-right-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderBottomLeftRadius(newValue);
+    }, valueConverter: isNonNegativeFiniteNumberConverter
+});
+borderBottomRightRadiusProperty.register(Style);
+
+export const borderBottomLeftRadiusProperty = new CssProperty<Style, number>({
+    name: "borderBottomLeftRadius", cssName: "border-bottom-left-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, newValue) => {
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withBorderBottomRightRadius(newValue);
+    }, valueConverter: isNonNegativeFiniteNumberConverter
+});
+borderBottomLeftRadiusProperty.register(Style);
+
+function isNonNegativeFiniteNumber(value: number): boolean {
+    return isFinite(value) && !isNaN(value) && value >= 0;
+}
+
+let supportedPaths = ["rect", "circle", "ellipse", "polygon"];
+function isClipPathValid(value: string): boolean {
+    if (!value) {
+        return true;
+    }
+    let functionName = value.substring(0, value.indexOf("(")).trim();
+    return supportedPaths.indexOf(functionName) !== -1;
+}
+
+export const clipPathProperty = new CssProperty<Style, string>({
+    name: "clipPath", cssName: "clip-path", valueChanged: (target, newValue) => {
+        if (!isClipPathValid(newValue)) {
+            throw new Error("clip-path is not valid.");
+        }
+
+        let background = target.backgroundInternal;
+        target.backgroundInternal = background.withClipPath(newValue);
+    }
+});
+clipPathProperty.register(Style);
+
+function isFloatValueConverter(value: string): number {
+    let newValue = parseFloat(value);
+    if (isNaN(newValue)) {
+        throw new Error(`Invalid value: ${newValue}`);
+    }
+
+    return newValue;
+}
+
+export const zIndexProperty = new CssProperty<Style, number>({ name: "zIndex", cssName: "z-index", defaultValue: 0, valueConverter: isFloatValueConverter });
+zIndexProperty.register(Style);
+
+function opacityConverter(value: any): number {
+    let newValue = parseFloat(value);
+    if (!isNaN(newValue) && 0 <= newValue && newValue <= 1) {
+        return newValue;
+    }
+
+    throw new Error(`Opacity should be between [0, 1]. Value: ${newValue}`);
+}
+
+function isOpacityValid(value: string): boolean {
+    let parsedValue: number = parseFloat(value);
+    return !isNaN(parsedValue) && 0 <= parsedValue && parsedValue <= 1;
+}
+
+export const opacityProperty = new CssProperty<Style, number>({ name: "opacity", cssName: "opacity", defaultValue: 1, valueConverter: opacityConverter });
+opacityProperty.register(Style);
+
+export const colorProperty = new InheritedCssProperty<Style, Color>({ name: "color", cssName: "color", equalityComparer: Color.equals, valueConverter: (v: string) => new Color(v) });
+colorProperty.register(Style);
diff --git a/tns-core-modules/ui/core/view.android.ts b/tns-core-modules/ui/core/view.android.ts
index a2e5cc958..aa41ec808 100644
--- a/tns-core-modules/ui/core/view.android.ts
+++ b/tns-core-modules/ui/core/view.android.ts
@@ -1,97 +1,76 @@
-import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty } from "./view-common";
 import { Length, Point, CustomLayoutView as CustomLayoutViewDefinition } from "ui/core/view";
-import * as trace from "trace";
-import * as utils from "utils/utils";
-import * as types from "utils/types";
+import { applyNativeSetters, Property } from "./properties";
 import { GestureTypes, GestureEventData } from "ui/gestures";
+import { Background, ad } from "ui/styling/background";
 import {
-    visibilityProperty, opacityProperty, minWidthProperty, minHeightProperty,
+    ViewCommon, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty, visibilityProperty, opacityProperty, minWidthProperty, minHeightProperty,
     widthProperty, heightProperty, marginLeftProperty, marginTopProperty,
     marginRightProperty, marginBottomProperty, horizontalAlignmentProperty, verticalAlignmentProperty,
     paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty,
     rotateProperty, scaleXProperty, scaleYProperty,
-    translateXProperty, translateYProperty, zIndexProperty
-} from "ui/styling/style";
-import { Visibility } from "ui/enums";
-import background = require("ui/styling/background");
-// import {CommonLayoutParams} from "ui/styling/style";
-import { device } from "platform";
-
-import { applyNativeSetters, Property } from "./properties";
+    translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty,
+    layout
+} from "./view-common";
+import { write as traceWrite, enabled as traceEnabled, categories as traceCategories, notifyEvent as traceNotifyEvent } from "trace";
 
 export * from "./view-common";
 let flexbox;
 
-let ANDROID = "_android";
-let NATIVE_VIEW = "_nativeView";
-let VIEW_GROUP = "_viewGroup";
+const ANDROID = "_android";
+const NATIVE_VIEW = "_nativeView";
+const VIEW_GROUP = "_viewGroup";
 let density = -1;
 
-// function onAutomationTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-//     let view = <View>data.object;
-//     view._nativeView.setContentDescription(data.newValue);
-// }
-// (<proxy.PropertyMetadata>viewCommon.View.automationTextProperty.metadata).onSetNativeValue = onAutomationTextPropertyChanged;
+// TODO: Move this class into widgets.
+@Interfaces([android.view.View.OnTouchListener])
+class DisableUserInteractionListener implements android.view.View.OnTouchListener {
+    constructor() {
+        return global.__native(this);
+    }
 
-// function onIdPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-//     let view = <View>data.object;
-//     view._nativeView.setTag(data.newValue + "");
-// }
-// (<proxy.PropertyMetadata>viewCommon.View.idProperty.metadata).onSetNativeValue = onIdPropertyChanged;
+    onTouch(view: android.view.View, event: android.view.MotionEvent): boolean {
+        return true;
+    }
+}
 
-// function onOriginXPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-//     org.nativescript.widgets.OriginPoint.setX((<View>data.object)._nativeView, data.newValue);
-// }
-// (<proxy.PropertyMetadata>viewCommon.View.originXProperty.metadata).onSetNativeValue = onOriginXPropertyChanged;
+@Interfaces([android.view.View.OnTouchListener])
+class TouchListener implements android.view.View.OnTouchListener {
+    constructor(private owner: WeakRef<View>) {
+        return global.__native(this);
+    }
 
-// function onOriginYPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-//     org.nativescript.widgets.OriginPoint.setY((<View>data.object)._nativeView, data.newValue);
-// }
-// (<proxy.PropertyMetadata>viewCommon.View.originYProperty.metadata).onSetNativeValue = onOriginYPropertyChanged;
+    onTouch(view: android.view.View, event: android.view.MotionEvent): boolean {
+        let owner = this.owner.get();
+        if (!owner) {
+            return false;
+        }
 
-// function onIsEnabledPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-//     let view = <View>data.object;
-//     view._nativeView.setEnabled(data.newValue);
-// }
-// (<proxy.PropertyMetadata>viewCommon.View.isEnabledProperty.metadata).onSetNativeValue = onIsEnabledPropertyChanged;
+        for (let type in owner._gestureObservers) {
+            let list = owner._gestureObservers[type];
+            for (let i = 0; i < list.length; i++) {
+                list[i].androidOnTouchEvent(event);
+            }
+        }
 
-// function onIsUserInteractionEnabledPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-//     let view = <View>data.object;
-//     view._updateOnTouchListener(data.newValue);
-// }
-// (<proxy.PropertyMetadata>viewCommon.View.isUserInteractionEnabledProperty.metadata).onSetNativeValue = onIsUserInteractionEnabledPropertyChanged;
+        let nativeView = owner._nativeView;
+        if (!nativeView || !nativeView.onTouchEvent) {
+            return false;
+        }
 
-// let styleHandlersInitialized: boolean;
+        return nativeView.onTouchEvent(event);
+    }
+}
+
+const disableUserInteractionListener = new DisableUserInteractionListener();
 
 export class View extends ViewCommon {
+    private touchListenerIsSet: boolean;
+    private touchListener: android.view.View.OnTouchListener;
+    private _gesturesListener: android.view.View.OnTouchListener;
+
     public nativeView: android.view.View;
 
-    // TODO: Move this into widgets as helper method.
-    private _disableUserInteractionListener: android.view.View.OnTouchListener = new android.view.View.OnTouchListener({
-        onTouch: function (view: android.view.View, event: android.view.MotionEvent) {
-            return true;
-        }
-    });
-
-    // constructor() {
-    //     super();
-    //     if (!styleHandlersInitialized) {
-    //         styleHandlersInitialized = true;
-    //         ViewStyler.registerHandlers();
-    //     }
-    // }
-
-    public _updateOnTouchListener(isUserInteractionEnabled: boolean) {
-        // User interaction is disabled -- we stop it and we do not care whether someone wants to listen for gestures.
-        this._nativeView.setOnTouchListener(!isUserInteractionEnabled ? this._disableUserInteractionListener : this._gesturesListener);
-    }
-
-    private _gesturesListener: android.view.View.OnTouchListener;
-    set gesturesListener(value: android.view.View.OnTouchListener) {
-        this._gesturesListener = value;
-        this._updateOnTouchListener(this.isUserInteractionEnabled);
-    }
-
+    // TODO: Implement unobserve that detach the touchListener.
     observe(type: GestureTypes, callback: (args: GestureEventData) => void, thisArg?: any): void {
         super.observe(type, callback, thisArg);
         if (this.isLoaded && !this.touchListenerIsSet) {
@@ -99,20 +78,16 @@ export class View extends ViewCommon {
         }
     }
 
-    private touchListenerIsSet: boolean;
-
     public onLoaded() {
         super.onLoaded();
         this.setOnTouchListener();
     }
 
     public onUnloaded() {
-        super.onUnloaded();
+        this._nativeView.setOnTouchListener(null);
+        this.touchListenerIsSet = false;
         this._unregisterAllAnimations();
-        if (this._nativeView && this._nativeView.setOnTouchListener) {
-            this._nativeView.setOnTouchListener(null);
-            this.touchListenerIsSet = false;
-        }
+        super.onUnloaded();
     }
 
     private hasGestureObservers() {
@@ -120,33 +95,14 @@ export class View extends ViewCommon {
     }
 
     private setOnTouchListener() {
-        if (this._nativeView && this._nativeView.setOnTouchListener && this.hasGestureObservers()) {
+        if (this._nativeView && this.hasGestureObservers()) {
             this.touchListenerIsSet = true;
-            let that = new WeakRef(this);
             if (this._nativeView.setClickable) {
                 this._nativeView.setClickable(true);
             }
-            this._nativeView.setOnTouchListener(new android.view.View.OnTouchListener({
-                onTouch: function (view: android.view.View, motionEvent: android.view.MotionEvent) {
-                    let owner = that.get();
-                    if (!owner) {
-                        return false;
-                    }
 
-                    for (let type in owner._gestureObservers) {
-                        let list = owner._gestureObservers[type];
-                        for (let i = 0; i < list.length; i++) {
-                            list[i].androidOnTouchEvent(motionEvent);
-                        }
-                    }
-
-                    if (!owner._nativeView || !owner._nativeView.onTouchEvent) {
-                        return false;
-                    }
-
-                    return owner._nativeView.onTouchEvent(motionEvent);
-                }
-            }));
+            let touchListener = this.touchListener || new TouchListener(new WeakRef(this));
+            this._nativeView.setOnTouchListener(touchListener);
         }
     }
 
@@ -170,8 +126,8 @@ export class View extends ViewCommon {
             throw new Error("Expected valid android.content.Context instance.");
         }
 
-        if (trace.enabled) {
-            trace.write(`${this}._onAttached(context)`, trace.categories.VisualTreeEvents);
+        if (traceEnabled) {
+            traceWrite(`${this}._onAttached(context)`, traceCategories.VisualTreeEvents);
         }
         if (this._context === context) {
             return;
@@ -184,7 +140,9 @@ export class View extends ViewCommon {
         this._context = context;
         this._onContextChanged();
 
-        trace.notifyEvent(this, "_onAttached");
+        if (traceEnabled) {
+            traceNotifyEvent(this, "_onAttached");
+        }
 
         if (this._childrenCount > 0) {
             // Notify each child for the _onAttached event
@@ -206,8 +164,8 @@ export class View extends ViewCommon {
     }
 
     public _onDetached(force?: boolean) {
-        if (trace.enabled) {
-            trace.write(`${this}._onDetached(force)`, trace.categories.VisualTreeEvents);
+        if (traceEnabled) {
+            traceWrite(`${this}._onDetached(force)`, traceCategories.VisualTreeEvents);
         }
 
         if (this._childrenCount > 0) {
@@ -227,8 +185,9 @@ export class View extends ViewCommon {
 
         this._clearAndroidReference();
         this._context = undefined;
-
-        trace.notifyEvent(this, "_onDetached");
+        if (traceEnabled) {
+            traceNotifyEvent(this, "_onDetached");
+        }
     }
 
     // TODO: revise this method
@@ -248,8 +207,8 @@ export class View extends ViewCommon {
     }
 
     public _onContextChanged() {
-        if (trace.enabled) {
-            trace.write(`${this}._onContextChanged`, trace.categories.VisualTreeEvents);
+        if (traceEnabled) {
+            traceWrite(`${this}._onContextChanged`, traceCategories.VisualTreeEvents);
         }
         this._createUI();
         // Ensure layout params
@@ -257,7 +216,9 @@ export class View extends ViewCommon {
             this._nativeView.setLayoutParams(new org.nativescript.widgets.CommonLayoutParams());
         }
 
-        trace.notifyEvent(this, "_onContextChanged");
+        if (traceEnabled) {
+            traceNotifyEvent(this, "_onContextChanged");
+        }
     }
 
     get _nativeView(): android.view.View {
@@ -359,8 +320,8 @@ export class View extends ViewCommon {
         let nativeArray = (<any>Array).create("int", 2);
         this._nativeView.getLocationInWindow(nativeArray);
         return {
-            x: utils.layout.toDeviceIndependentPixels(nativeArray[0]),
-            y: utils.layout.toDeviceIndependentPixels(nativeArray[1]),
+            x: layout.toDeviceIndependentPixels(nativeArray[0]),
+            y: layout.toDeviceIndependentPixels(nativeArray[1]),
         }
     }
 
@@ -372,8 +333,8 @@ export class View extends ViewCommon {
         let nativeArray = (<any>Array).create("int", 2);
         this._nativeView.getLocationOnScreen(nativeArray);
         return {
-            x: utils.layout.toDeviceIndependentPixels(nativeArray[0]),
-            y: utils.layout.toDeviceIndependentPixels(nativeArray[1]),
+            x: layout.toDeviceIndependentPixels(nativeArray[0]),
+            y: layout.toDeviceIndependentPixels(nativeArray[1]),
         }
     }
 
@@ -389,30 +350,30 @@ export class View extends ViewCommon {
         let otherArray = (<any>Array).create("int", 2);
         otherView._nativeView.getLocationOnScreen(otherArray);
         return {
-            x: utils.layout.toDeviceIndependentPixels(myArray[0] - otherArray[0]),
-            y: utils.layout.toDeviceIndependentPixels(myArray[1] - otherArray[1]),
+            x: layout.toDeviceIndependentPixels(myArray[0] - otherArray[0]),
+            y: layout.toDeviceIndependentPixels(myArray[1] - otherArray[1]),
         }
     }
 
     public static resolveSizeAndState(size: number, specSize: number, specMode: number, childMeasuredState: number): number {
         let result = size;
         switch (specMode) {
-            case utils.layout.UNSPECIFIED:
+            case layout.UNSPECIFIED:
                 result = size;
                 break;
 
-            case utils.layout.AT_MOST:
+            case layout.AT_MOST:
                 if (specSize < size) {
-                    result = specSize | utils.layout.MEASURED_STATE_TOO_SMALL;
+                    result = specSize | layout.MEASURED_STATE_TOO_SMALL;
                 }
                 break;
 
-            case utils.layout.EXACTLY:
+            case layout.EXACTLY:
                 result = specSize;
                 break;
         }
 
-        return result | (childMeasuredState & utils.layout.MEASURED_STATE_MASK);
+        return result | (childMeasuredState & layout.MEASURED_STATE_MASK);
     }
 
     get [isEnabledProperty.native](): boolean {
@@ -447,38 +408,35 @@ export class View extends ViewCommon {
         return true;
     }
     set [isUserInteractionEnabledProperty.native](value: boolean) {
-        this._updateOnTouchListener(value);
+        if (!value) {
+            // User interaction is disabled -- we stop it and we do not care whether someone wants to listen for gestures.
+            this._nativeView.setOnTouchListener(disableUserInteractionListener);
+        } else {
+            this.setOnTouchListener();
+        }
     }
 
-    // TODO: Do we need to use setTag??
-    // get [idProperty.native](): string {
-    //     return this.nativeView.getTag();
-    // }
-    // set [idProperty.native](value: string) {
-    //     this.nativeView.setTag(value);
-    // }
-
-    get [visibilityProperty.native](): string {
+    get [visibilityProperty.native](): "visible" | "hidden" | "collapse" {
         let visibility = this.nativeView.getVisibility();
         if (visibility === android.view.View.VISIBLE) {
-            return Visibility.visible;
+            return "visible";
         }
         else if (visibility === android.view.View.INVISIBLE) {
-            return Visibility.collapse;
+            return "hidden";
         }
         else {
-            return Visibility.collapse;
+            return "collapse";
         }
     }
     set [visibilityProperty.native](value: string) {
-        if (value === Visibility.visible) {
+        if (value === "visible") {
             this.nativeView.setVisibility(android.view.View.VISIBLE);
         }
-        else if (value === Visibility.collapse || value === Visibility.collapsed) {
-            this.nativeView.setVisibility(android.view.View.GONE);
+        else if (value === "hidden") {
+            this.nativeView.setVisibility(android.view.View.INVISIBLE);
         }
         else {
-            this.nativeView.setVisibility(android.view.View.INVISIBLE);
+            this.nativeView.setVisibility(android.view.View.GONE);
         }
     }
 
@@ -489,22 +447,24 @@ export class View extends ViewCommon {
         this.nativeView.setAlpha(value);
     }
 
-    get [minWidthProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getMinWidth(this.nativeView) / utils.layout.getDisplayDensity();
+    get [minWidthProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getMinWidth(this.nativeView), unit: "px" };
     }
-    set [minWidthProperty.native](value: number) {
-        org.nativescript.widgets.ViewHelper.setMinWidth(this.nativeView, value * utils.layout.getDisplayDensity());
+    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](): number {
-        return org.nativescript.widgets.ViewHelper.getMinHeight(this.nativeView) / utils.layout.getDisplayDensity();
+    get [minHeightProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getMinHeight(this.nativeView), unit: "px" };
     }
-    set [minHeightProperty.native](value: number) {
-        org.nativescript.widgets.ViewHelper.setMinHeight(this.nativeView, value * utils.layout.getDisplayDensity());
+    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](): number {
-        return org.nativescript.widgets.ViewHelper.getWidth(this.nativeView) / utils.layout.getDisplayDensity();
+    get [widthProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getWidth(this.nativeView), unit: "px" };
     }
     set [widthProperty.native](value: Length) {
         let type = value.unit;
@@ -513,12 +473,12 @@ export class View extends ViewCommon {
         } else if (type === "px") {
             org.nativescript.widgets.ViewHelper.setWidth(this.nativeView, value.value);
         } else {
-            org.nativescript.widgets.ViewHelper.setWidth(this.nativeView, value.value * utils.layout.getDisplayDensity());
+            org.nativescript.widgets.ViewHelper.setWidth(this.nativeView, value.value * layout.getDisplayDensity());
         }
     }
 
-    get [heightProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getHeight(this.nativeView) / utils.layout.getDisplayDensity();
+    get [heightProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getHeight(this.nativeView), unit: "px" };
     }
     set [heightProperty.native](value: Length) {
         let type = value.unit;
@@ -527,12 +487,12 @@ export class View extends ViewCommon {
         } else if (type === "px") {
             org.nativescript.widgets.ViewHelper.setHeight(this.nativeView, value.value);
         } else {
-            org.nativescript.widgets.ViewHelper.setHeight(this.nativeView, value.value * utils.layout.getDisplayDensity());
+            org.nativescript.widgets.ViewHelper.setHeight(this.nativeView, value.value * layout.getDisplayDensity());
         }
     }
 
-    get [marginLeftProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getMarginLeft(this.nativeView) / utils.layout.getDisplayDensity();
+    get [marginLeftProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getMarginLeft(this.nativeView), unit: "px" };
     }
     set [marginLeftProperty.native](value: Length) {
         let type = value.unit;
@@ -541,12 +501,12 @@ export class View extends ViewCommon {
         } else if (type === "px") {
             org.nativescript.widgets.ViewHelper.setMarginLeft(this.nativeView, value.value);
         } else {
-            org.nativescript.widgets.ViewHelper.setMarginLeft(this.nativeView, value.value * utils.layout.getDisplayDensity());
+            org.nativescript.widgets.ViewHelper.setMarginLeft(this.nativeView, value.value * layout.getDisplayDensity());
         }
     }
 
-    get [marginTopProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getMarginTop(this.nativeView) / utils.layout.getDisplayDensity();
+    get [marginTopProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getMarginTop(this.nativeView), unit: "px" };
     }
     set [marginTopProperty.native](value: Length) {
         let type = value.unit;
@@ -555,12 +515,12 @@ export class View extends ViewCommon {
         } else if (type === "px") {
             org.nativescript.widgets.ViewHelper.setMarginTop(this.nativeView, value.value);
         } else {
-            org.nativescript.widgets.ViewHelper.setMarginTop(this.nativeView, value.value * utils.layout.getDisplayDensity());
+            org.nativescript.widgets.ViewHelper.setMarginTop(this.nativeView, value.value * layout.getDisplayDensity());
         }
     }
 
-    get [marginRightProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getMarginRight(this.nativeView) / utils.layout.getDisplayDensity();
+    get [marginRightProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getMarginRight(this.nativeView), unit: "px" };
     }
     set [marginRightProperty.native](value: Length) {
         let type = value.unit;
@@ -569,12 +529,12 @@ export class View extends ViewCommon {
         } else if (type === "px") {
             org.nativescript.widgets.ViewHelper.setMarginRight(this.nativeView, value.value);
         } else {
-            org.nativescript.widgets.ViewHelper.setMarginRight(this.nativeView, value.value * utils.layout.getDisplayDensity());
+            org.nativescript.widgets.ViewHelper.setMarginRight(this.nativeView, value.value * layout.getDisplayDensity());
         }
     }
 
-    get [marginBottomProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getMarginBottom(this.nativeView) / utils.layout.getDisplayDensity();
+    get [marginBottomProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getMarginBottom(this.nativeView), unit: "px" };
     }
     set [marginBottomProperty.native](value: Length) {
         let type = value.unit;
@@ -583,7 +543,7 @@ export class View extends ViewCommon {
         } else if (type === "px") {
             org.nativescript.widgets.ViewHelper.setMarginBottom(this.nativeView, value.value);
         } else {
-            org.nativescript.widgets.ViewHelper.setMarginBottom(this.nativeView, value.value * utils.layout.getDisplayDensity());
+            org.nativescript.widgets.ViewHelper.setMarginBottom(this.nativeView, value.value * layout.getDisplayDensity());
         }
     }
 
@@ -601,52 +561,35 @@ export class View extends ViewCommon {
         org.nativescript.widgets.ViewHelper.setVerticalAlignment(this.nativeView, value);
     }
 
-    // get [paddingProperty.native](): style.Thickness {
-    //     let paddings = org.nativescript.widgets.ViewHelper.getPadding(this.nativeView);
-    //     return {
-    //         left: paddings.left / utils.layout.getDisplayDensity(),
-    //         top: paddings.top / utils.layout.getDisplayDensity(),
-    //         right: paddings.right / utils.layout.getDisplayDensity(),
-    //         bottom: paddings.bottom / utils.layout.getDisplayDensity()
-    //     };
-    // }
-    // set [style.paddingProperty.native](value: style.Thickness) {
-    //     org.nativescript.widgets.ViewHelper.setPadding(this.nativeView,
-    //         value.left * utils.layout.getDisplayDensity(),
-    //         value.top * utils.layout.getDisplayDensity(),
-    //         value.right * utils.layout.getDisplayDensity(),
-    //         value.bottom * utils.layout.getDisplayDensity());
-    // }
-
-    get [paddingLeftProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView) / utils.layout.getDisplayDensity();
+    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" ? utils.layout.getDisplayDensity() : 1;
+        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
         org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, value.value * density);
     }
 
-    get [paddingTopProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView) / utils.layout.getDisplayDensity();
+    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" ? utils.layout.getDisplayDensity() : 1;
+        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
         org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, value.value * density);
     }
 
-    get [paddingRightProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView) / utils.layout.getDisplayDensity();
+    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" ? utils.layout.getDisplayDensity() : 1;
+        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
         org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, value.value * density);
     }
 
-    get [paddingBottomProperty.native](): number {
-        return org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView) / utils.layout.getDisplayDensity();
+    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" ? utils.layout.getDisplayDensity() : 1;
+        let density = value.unit === "dip" ? layout.getDisplayDensity() : 1;
         org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, value.value * density);
     }
 
@@ -695,6 +638,18 @@ export class View extends ViewCommon {
         //     nativeView.setStateListAnimator(null);
         // }
     }
+
+    get [backgroundInternalProperty.native](): android.graphics.drawable.Drawable {
+        return this.nativeView.getBackground();
+    }
+    set [backgroundInternalProperty.native](value: android.graphics.drawable.Drawable | Background) {
+        if (value instanceof android.graphics.drawable.Drawable) {
+            this.nativeView.setBackground(value);
+        } else {
+            ad.onBackgroundOrBorderPropertyChanged(this);
+        }
+
+    }
 }
 
 // export class ViewStyler implements style.Styler {
@@ -728,7 +683,7 @@ export class View extends ViewCommon {
 
 //     // minWidth methods
 //     private static setMinWidthProperty(view: View, newValue: any) {
-//         (<android.view.View>view._nativeView).setMinimumWidth(Math.round(newValue * utils.layout.getDisplayDensity()));
+//         (<android.view.View>view._nativeView).setMinimumWidth(Math.round(newValue * layout.getDisplayDensity()));
 //     }
 
 //     private static resetMinWidthProperty(view: View, nativeValue: any) {
@@ -737,7 +692,7 @@ export class View extends ViewCommon {
 
 //     // minHeight methods
 //     private static setMinHeightProperty(view: View, newValue: any) {
-//         (<android.view.View>view._nativeView).setMinimumHeight(Math.round(newValue * utils.layout.getDisplayDensity()));
+//         (<android.view.View>view._nativeView).setMinimumHeight(Math.round(newValue * layout.getDisplayDensity()));
 //     }
 
 //     private static resetMinHeightProperty(view: View, nativeValue: any) {
@@ -747,8 +702,8 @@ export class View extends ViewCommon {
 //     private static setNativeLayoutParamsProperty(view: View, params: CommonLayoutParams): void {
 //         let nativeView: android.view.View = view._nativeView;
 
-//         let width = params.width * utils.layout.getDisplayDensity();
-//         let height = params.height * utils.layout.getDisplayDensity();
+//         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) {
@@ -823,10 +778,10 @@ export class View extends ViewCommon {
 //             lp.topMarginPercent = params.topMarginPercent;
 //             lp.rightMarginPercent = params.rightMarginPercent;
 //             lp.bottomMarginPercent = params.bottomMarginPercent;
-//             lp.leftMargin = Math.round(params.leftMargin * utils.layout.getDisplayDensity());
-//             lp.topMargin = Math.round(params.topMargin * utils.layout.getDisplayDensity());
-//             lp.rightMargin = Math.round(params.rightMargin * utils.layout.getDisplayDensity());
-//             lp.bottomMargin = Math.round(params.bottomMargin * utils.layout.getDisplayDensity());
+//             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) {
@@ -862,19 +817,19 @@ export class View extends ViewCommon {
 //             }
 
 //             if (types.isDefined(layoutParams.leftMargin)) {
-//                 layoutParams.leftMargin = Math.round(params.leftMargin * utils.layout.getDisplayDensity());
+//                 layoutParams.leftMargin = Math.round(params.leftMargin * layout.getDisplayDensity());
 //             }
 
 //             if (types.isDefined(layoutParams.topMargin)) {
-//                 layoutParams.topMargin = Math.round(params.topMargin * utils.layout.getDisplayDensity());
+//                 layoutParams.topMargin = Math.round(params.topMargin * layout.getDisplayDensity());
 //             }
 
 //             if (types.isDefined(layoutParams.rightMargin)) {
-//                 layoutParams.rightMargin = Math.round(params.rightMargin * utils.layout.getDisplayDensity());
+//                 layoutParams.rightMargin = Math.round(params.rightMargin * layout.getDisplayDensity());
 //             }
 
 //             if (types.isDefined(layoutParams.bottomMargin)) {
-//                 layoutParams.bottomMargin = Math.round(params.bottomMargin * utils.layout.getDisplayDensity());
+//                 layoutParams.bottomMargin = Math.round(params.bottomMargin * layout.getDisplayDensity());
 //             }
 
 //             if (types.isDefined(layoutParams.gravity)) {
@@ -890,28 +845,28 @@ export class View extends ViewCommon {
 //     }
 
 //     private static getNativePaddingLeft(view: View): number {
-//         let density = utils.layout.getDisplayDensity();
+//         let density = layout.getDisplayDensity();
 //         return view._nativeView.getPaddingLeft() / density;
 //     }
 
 //     private static getNativePaddingTop(view: View): number {
-//         let density = utils.layout.getDisplayDensity();
+//         let density = layout.getDisplayDensity();
 //         return view._nativeView.getPaddingTop() / density;
 //     }
 
 //     private static getNativePaddingRight(view: View): number {
-//         let density = utils.layout.getDisplayDensity();
+//         let density = layout.getDisplayDensity();
 //         return view._nativeView.getPaddingRight() / density;
 //     }
 
 //     private static getNativePaddingBottom(view: View): number {
-//         let density = utils.layout.getDisplayDensity();
+//         let density = layout.getDisplayDensity();
 //         return view._nativeView.getPaddingBottom() / density;
 //     }
 
 //     private static setNativePaddingLeft(view: View, value: number): void {
 //         let nativeView = view._nativeView;
-//         let density = utils.layout.getDisplayDensity();
+//         let density = layout.getDisplayDensity();
 //         let left = (value + view.borderWidth) * density;
 //         let top = nativeView.getPaddingTop();
 //         let right = nativeView.getPaddingRight();
@@ -921,7 +876,7 @@ export class View extends ViewCommon {
 
 //     private static setNativePaddingTop(view: View, value: number): void {
 //         let nativeView = view._nativeView;
-//         let density = utils.layout.getDisplayDensity();
+//         let density = layout.getDisplayDensity();
 //         let left = nativeView.getPaddingLeft();
 //         let top = (value + view.borderWidth) * density;
 //         let right = nativeView.getPaddingRight();
@@ -931,7 +886,7 @@ export class View extends ViewCommon {
 
 //     private static setNativePaddingRight(view: View, value: number): void {
 //         let nativeView = view._nativeView;
-//         let density = utils.layout.getDisplayDensity();
+//         let density = layout.getDisplayDensity();
 //         let left = nativeView.getPaddingLeft();
 //         let top = nativeView.getPaddingTop();
 //         let right = (value + view.borderWidth) * density;
@@ -941,7 +896,7 @@ export class View extends ViewCommon {
 
 //     private static setNativePaddingBottom(view: View, value: number): void {
 //         let nativeView = view._nativeView;
-//         let density = utils.layout.getDisplayDensity();
+//         let density = layout.getDisplayDensity();
 //         let left = nativeView.getPaddingLeft();
 //         let top = nativeView.getPaddingTop();
 //         let right = nativeView.getPaddingRight();
@@ -978,7 +933,7 @@ export class View extends ViewCommon {
 
 //     // TranslateX
 //     private static setTranslateXProperty(view: View, newValue: any) {
-//         view._nativeView.setTranslationX(newValue * utils.layout.getDisplayDensity());
+//         view._nativeView.setTranslationX(newValue * layout.getDisplayDensity());
 //     }
 
 //     private static resetTranslateXProperty(view: View, nativeValue: any) {
@@ -987,7 +942,7 @@ export class View extends ViewCommon {
 
 //     // TranslateY
 //     private static setTranslateYProperty(view: View, newValue: any) {
-//         view._nativeView.setTranslationY(newValue * utils.layout.getDisplayDensity());
+//         view._nativeView.setTranslationY(newValue * layout.getDisplayDensity());
 //     }
 
 //     private static resetTranslateYProperty(view: View, nativeValue: any) {
@@ -1115,22 +1070,14 @@ export class CustomLayoutView extends View implements CustomLayoutViewDefinition
         this._viewGroup = new org.nativescript.widgets.ContentLayout(this._context);
     }
 
-    public _addViewToNativeVisualTree(child: View, atIndex?: number): boolean {
+    public _addViewToNativeVisualTree(child: View, atIndex: number = -1): boolean {
         super._addViewToNativeVisualTree(child);
 
-        if (this._nativeView && child._nativeView) {
-            if (types.isNullOrUndefined(atIndex) || atIndex >= this._nativeView.getChildCount()) {
-                if (trace.enabled) {
-                    trace.write(`${this}._nativeView.addView(${child}._nativeView)`, trace.categories.VisualTreeEvents);
-                }
-                this._nativeView.addView(child._nativeView);
-            }
-            else {
-                if (trace.enabled) {
-                    trace.write(`${this}._nativeView.addView(${child}._nativeView, ${atIndex})`, trace.categories.VisualTreeEvents);
-                }
-                this._nativeView.addView(child._nativeView, atIndex);
+        if (this.nativeView && child.nativeView) {
+            if (traceEnabled) {
+                traceWrite(`${this}.nativeView.addView(${child}.nativeView, ${atIndex})`, traceCategories.VisualTreeEvents);
             }
+            this._nativeView.addView(child._nativeView, atIndex);
             return true;
         }
 
@@ -1141,11 +1088,11 @@ export class CustomLayoutView extends View implements CustomLayoutViewDefinition
         super._removeViewFromNativeVisualTree(child);
 
         if (this._nativeView && child._nativeView) {
-            if (trace.enabled) {
-                trace.write(`${this}._nativeView.removeView(${child}._nativeView)`, trace.categories.VisualTreeEvents);
-            }
             this._nativeView.removeView(child._nativeView);
-            trace.notifyEvent(child, "childInLayoutRemovedFromNativeVisualTree");
+            if (traceEnabled) {
+                traceWrite(`${this}._nativeView.removeView(${child}._nativeView)`, traceCategories.VisualTreeEvents);
+                traceNotifyEvent(child, "childInLayoutRemovedFromNativeVisualTree");
+            }
         }
     }
 }
diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts
index 582cbf291..575843320 100644
--- a/tns-core-modules/ui/core/view.d.ts
+++ b/tns-core-modules/ui/core/view.d.ts
@@ -5,9 +5,10 @@ declare module "ui/core/view" {
     import { Color } from "color";
     import { Animation, AnimationDefinition, AnimationPromise } from "ui/animation";
     import { KeyframeAnimation } from "ui/animation/keyframe-animation";
-    import { Property } from "ui/core/properties";
+    import { Property, CssProperty, InheritedCssProperty } from "ui/core/properties";
     import { BindingOptions } from "ui/core/bindable";
     import { ViewBase } from "ui/core/view-base";
+    import { Background } from "ui/styling/background";
 
     /**
      * Gets a child view by id.
@@ -60,25 +61,9 @@ declare module "ui/core/view" {
         height: number;
     }
 
-    interface Thickness {
-        top: Length,
-        right: Length,
-        bottom: Length,
-        left: Length
-    }
-
-    let classNameProperty: Property<View, string>;
-    let idProperty: Property<View, string>;
-    let automationTextProperty: Property<View, string>;
-    let originXProperty: Property<View, number>;
-    let originYProperty: Property<View, number>;
-    let isEnabledProperty: Property<View, boolean>;
-    let isUserInteractionEnabledProperty: Property<View, boolean>
-
-    interface Length {
+    export interface Length {
         readonly unit: "%" | "dip" | "px";
         readonly value: number;
-        effectiveValue: number;
     }
 
     export namespace Length {
@@ -90,7 +75,6 @@ declare module "ui/core/view" {
      * A View occupies a rectangular area on the screen and is responsible for drawing and layouting of all UI components within. 
      */
     export abstract class View extends ViewBase implements ApplyXmlAttributes {
-
         /**
          * Get the nativeView created for this object.
          */
@@ -111,6 +95,8 @@ declare module "ui/core/view" {
          */
         bindingContext: any;
 
+        //----------Style property shortcuts----------
+
         /**
          * Gets or sets the border color of the view.
          */
@@ -144,22 +130,22 @@ declare module "ui/core/view" {
         /**
          * Gets or sets the top border width of the view.
          */
-        borderTopWidth: number;
+        borderTopWidth: Length;
 
         /**
          * Gets or sets the right border width of the view.
          */
-        borderRightWidth: number;
+        borderRightWidth: Length;
 
         /**
          * Gets or sets the bottom border width of the view.
          */
-        borderBottomWidth: number;
+        borderBottomWidth: Length;
 
         /**
          * Gets or sets the left border width of the view.
          */
-        borderLeftWidth: number;
+        borderLeftWidth: Length;
 
         /**
          * Gets or sets the border radius of the view.
@@ -186,53 +172,6 @@ declare module "ui/core/view" {
          */
         borderBottomLeftRadius: number;
 
-        /**
-         * Gets or sets the automation text of the view.
-         */
-        automationText: string;
-
-        /**
-         * String value used when hooking to loaded event.
-         */
-        public static loadedEvent: string;
-
-        /**
-         * String value used when hooking to unloaded event.
-         */
-        public static unloadedEvent: string;
-
-        /**
-         * Represents the observable property backing the automationText property of each View.
-         */
-        // public static automationTextProperty: dependencyObservable.Property;
-
-        /**
-         * Represents the observable property backing the id property of each View.
-         */
-        // public static idProperty: dependencyObservable.Property;
-
-        /**
-         * [Deprecated. Please use className instead.] Represents the observable property backing the cssClass property of each View.
-         */
-        // public static cssClassProperty: dependencyObservable.Property;
-
-        /**
-         * Represents the observable property backing the className property of each View.
-         */
-        // public static classNameProperty: dependencyObservable.Property;
-
-        /**
-         * Represents the observable property backing the isEnabled property of each View.
-         */
-        // public static isEnabledProperty: dependencyObservable.Property;
-
-        /**
-         * Represents the observable property backing the isUserInteractionEnabled property of each View.
-         */
-        // public static isUserInteractionEnabledProperty: dependencyObservable.Property;
-
-        //----------Style property shortcuts----------
-
         /**
          * Gets or sets the color of the view.
          */
@@ -251,12 +190,12 @@ declare module "ui/core/view" {
         /**
          * Gets or sets the minimum width the view may grow to.
          */
-        minWidth: number;
+        minWidth: Length;
 
         /**
          * Gets or sets the minimum height the view may grow to.
          */
-        minHeight: number;
+        minHeight: Length;
 
         /**
          * Gets or sets the desired width of the view.
@@ -271,7 +210,7 @@ declare module "ui/core/view" {
         /**
          * Gets or sets margin style property.
          */
-        margin: string | number | Thickness;
+        margin: string;
 
         /**
          * Specifies extra space on the left side of this view.
@@ -296,24 +235,27 @@ declare module "ui/core/view" {
         /**
          * Gets or sets the alignment of this view within its parent along the Horizontal axis.
          */
-        horizontalAlignment: string;
+        horizontalAlignment: "left" | "center" | "middle" | "right" | "stretch";
 
         /**
          * Gets or sets the alignment of this view within its parent along the Vertical axis.
          */
-        verticalAlignment: string;
+        verticalAlignment: "top" | "center" | "middle" | "bottom" | "stretch";
 
         /**
          * Gets or sets the visibility of the view.
          */
-        visibility: string;
+        visibility: "visible" | "hidden" | "collapse" | "collapsed";
 
         /**
          * Gets or sets the opacity style property.
          */
         opacity: number;
 
-        //----------Style property shortcuts----------
+        /**
+         * Gets or sets the rotate affine transform of the view.
+         */
+        rotate: number;
 
         /**
          * Gets or sets the translateX affine transform of the view.
@@ -335,6 +277,13 @@ declare module "ui/core/view" {
          */
         scaleY: number;
 
+        //END Style property shortcuts
+
+        /**
+         * Gets or sets the automation text of the view.
+         */
+        automationText: string;
+
         /**
          * Gets or sets the X component of the origin point around which the view will be transformed. The deafault value is 0.5 representing the center of the view.
          */
@@ -345,11 +294,6 @@ declare module "ui/core/view" {
          */
         originY: number;
 
-        /**
-         * Gets or sets the rotate affine transform of the view.
-         */
-        rotate: number;
-
         /**
          * Gets or sets a value indicating whether the the view is enabled. This affects the appearance of the view.
          */
@@ -365,21 +309,11 @@ declare module "ui/core/view" {
          */
         id: string;
 
-        /**
-         * [Deprecated. Please use className instead.] Gets or sets the CSS class for this view.
-         */
-        cssClass: string;
-
         /**
          * Gets or sets the CSS class name for this view.
          */
         className: string;
 
-        // /**
-        //  * Gets the View instance that parents this view. This property is read-only.
-        //  */
-        // parent: View;
-
         /**
          * Gets is layout is valid. This is a read-only property.
          */
@@ -488,19 +422,6 @@ declare module "ui/core/view" {
          */
         public static layoutChild(parent: View, child: View, left: number, top: number, right: number, bottom: number): void;
 
-        /**
-         * Changes the width, height and margins of the child to one calculated from percentage values.
-         *
-         * @param widthMeasureSpec  Width MeasureSpec of the parent layout.
-         * @param heightMeasureSpec Height MeasureSpec of the parent layout.
-         */
-        protected static adjustChildLayoutParams(view: View, widthMeasureSpec: number, heightMeasureSpec: number): void;
-
-        /**
-         * Restores the original dimensions of the child that were changed for percentage values.
-         */
-        protected static restoreChildOriginalParams(view: View): void;
-
         /**
          * Utility to reconcile a desired size and state, with constraints imposed
          * by a MeasureSpec.  Will take the desired size, unless a different size
@@ -639,7 +560,7 @@ declare module "ui/core/view" {
         public bind(options: BindingOptions, source: any): void;
         public unbind(property: string): void;
 
-        isVisible: boolean;
+        isCollapsed: boolean;
         isLayoutRequired: boolean;
         _parentChanged(oldParent: View): void;
         _gestureObservers: any;
@@ -766,4 +687,89 @@ declare module "ui/core/view" {
          */
         _applyXmlAttribute(attributeName: string, attrValue: any): boolean;
     }
+
+    export namespace layout {
+        export const UNSPECIFIED: number;
+        export const EXACTLY: number;
+        export const AT_MOST: number;
+
+        export const MEASURED_HEIGHT_STATE_SHIFT: number;
+        export const MEASURED_STATE_TOO_SMALL: number;
+        export const MEASURED_STATE_MASK: number;
+        export const MEASURED_SIZE_MASK: number;
+
+        export function getMeasureSpecMode(spec: number): number;
+        export function getMeasureSpecSize(spec: number): number;
+        export function getDisplayDensity(): number;
+        export function makeMeasureSpec(size: number, mode: number): number;
+        export function toDevicePixels(value: number): number;
+        export function toDeviceIndependentPixels(value: number): number;
+        export function measureSpecToString(measureSpec: number): string;
+    }
+
+    export const classNameProperty: Property<View, string>;
+    export const idProperty: Property<View, string>;
+    export const automationTextProperty: Property<View, string>;
+    export const originXProperty: Property<View, number>;
+    export const originYProperty: Property<View, number>;
+    export const isEnabledProperty: Property<View, boolean>;
+    export const isUserInteractionEnabledProperty: Property<View, boolean>;
+
+    export const rotateProperty: CssProperty<Style, number>;
+    export const scaleXProperty: CssProperty<Style, number>;
+    export const scaleYProperty: CssProperty<Style, number>;
+    export const translateXProperty: CssProperty<Style, number>;
+    export const translateYProperty: CssProperty<Style, number>;
+
+    export const clipPathProperty: CssProperty<Style, string>;
+    export const colorProperty: InheritedCssProperty<Style, Color>;
+
+    export const backgroundColorProperty: CssProperty<Style, Color>;
+    export const backgroundImageProperty: CssProperty<Style, string>;
+    export const backgroundRepeatProperty: CssProperty<Style, string>;
+    export const backgroundSizeProperty: CssProperty<Style, string>;
+    export const backgroundPositionProperty: CssProperty<Style, string>;
+
+    export const borderColorProperty: CssProperty<Style, Color>;
+    export const borderTopColorProperty: CssProperty<Style, Color>;
+    export const borderRightColorProperty: CssProperty<Style, Color>;
+    export const borderBottomColorProperty: CssProperty<Style, Color>;
+    export const borderLeftColorProperty: CssProperty<Style, Color>;
+
+    export const borderWidthProperty: CssProperty<Style, number>;
+    export const borderTopWidthProperty: CssProperty<Style, Length>;
+    export const borderRightWidthProperty: CssProperty<Style, Length>;
+    export const borderBottomWidthProperty: CssProperty<Style, Length>;
+    export const borderLeftWidthProperty: CssProperty<Style, Length>;
+
+    export const borderRadiusProperty: CssProperty<Style, number>;
+    export const borderTopLeftRadiusProperty: CssProperty<Style, number>;
+    export const borderTopRightRadiusProperty: CssProperty<Style, number>;
+    export const borderBottomRightRadiusProperty: CssProperty<Style, number>;
+    export const borderBottomLeftRadiusProperty: CssProperty<Style, number>;
+
+    export const zIndexProperty: CssProperty<Style, number>;
+    export const visibilityProperty: CssProperty<Style, string>;
+    export const opacityProperty: CssProperty<Style, number>;
+
+    export const minWidthProperty: CssProperty<Style, Length>;
+    export const minHeightProperty: CssProperty<Style, Length>;
+    export const widthProperty: CssProperty<Style, Length>;
+    export const heightProperty: CssProperty<Style, Length>;
+    export const marginProperty: CssProperty<Style, string>;
+    export const marginLeftProperty: CssProperty<Style, Length>;
+    export const marginRightProperty: CssProperty<Style, Length>;
+    export const marginTopProperty: CssProperty<Style, Length>;
+    export const marginBottomProperty: CssProperty<Style, Length>;
+
+    export const paddingProperty: CssProperty<Style, string>;
+    export const paddingLeftProperty: CssProperty<Style, Length>;
+    export const paddingRightProperty: CssProperty<Style, Length>;
+    export const paddingTopProperty: CssProperty<Style, Length>;
+    export const paddingBottomProperty: CssProperty<Style, Length>;
+
+    export const verticalAlignmentProperty: CssProperty<Style, string>;
+    export const horizontalAlignmentProperty: CssProperty<Style, string>;
+
+    export const backgroundInternalProperty: CssProperty<Style, Background>;
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/view.ios.ts b/tns-core-modules/ui/core/view.ios.ts
index dec9af4d9..8fcb51711 100644
--- a/tns-core-modules/ui/core/view.ios.ts
+++ b/tns-core-modules/ui/core/view.ios.ts
@@ -1,68 +1,34 @@
-import types = require("utils/types");
-import viewCommon = require("./view-common");
-import viewDefinition = require("ui/core/view");
-import trace = require("trace");
-import utils = require("utils/utils");
-import dependencyObservable = require("ui/core/dependency-observable");
-import proxy = require("ui/core/proxy");
-import style = require("ui/styling/style");
-import enums = require("ui/enums");
-import * as backgroundModule from "ui/styling/background";
+import { Length, Point, CustomLayoutView as CustomLayoutViewDefinition, View as ViewDefinition } from "ui/core/view";
+import { Background, ios } from "ui/styling/background";
+import {
+    ViewCommon, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty, visibilityProperty, opacityProperty, minWidthProperty, minHeightProperty,
+    widthProperty, heightProperty, marginLeftProperty, marginTopProperty,
+    marginRightProperty, marginBottomProperty, horizontalAlignmentProperty, verticalAlignmentProperty,
+    paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty,
+    rotateProperty, scaleXProperty, scaleYProperty,
+    translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty,
+    clipPathProperty, layout
+} from "./view-common";
+import { write as traceWrite, enabled as traceEnabled, categories as traceCategories, notifyEvent as traceNotifyEvent } from "trace";
 
-global.moduleMerge(viewCommon, exports);
+export * from "./view-common";
 
-function onAutomationTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <View>data.object;
-    view._nativeView.accessibilityIdentifier = data.newValue + "";
-    view._nativeView.accessibilityLabel = data.newValue + "";
-}
-(<proxy.PropertyMetadata>viewCommon.View.automationTextProperty.metadata).onSetNativeValue = onAutomationTextPropertyChanged;
+const PFLAG_FORCE_LAYOUT = 1;
+const PFLAG_MEASURED_DIMENSION_SET = 1 << 1;
+const PFLAG_LAYOUT_REQUIRED = 1 << 2;
 
-function onOriginPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <View>data.object;
-    view._updateOriginPoint();
-}
-(<proxy.PropertyMetadata>viewCommon.View.originXProperty.metadata).onSetNativeValue = onOriginPropertyChanged;
-(<proxy.PropertyMetadata>viewCommon.View.originYProperty.metadata).onSetNativeValue = onOriginPropertyChanged;
-
-function onIsEnabledPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <View>data.object;
-    if (!view._nativeView) {
-        return;
-    }
-
-    if (view._nativeView instanceof UIControl) {
-        (<UIControl>view._nativeView).enabled = data.newValue;
-    }
-}
-(<proxy.PropertyMetadata>viewCommon.View.isEnabledProperty.metadata).onSetNativeValue = onIsEnabledPropertyChanged;
-
-function onIsUserInteractionEnabledPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <View>data.object;
-    if (!view._nativeView) {
-        return;
-    }
-
-    view._nativeView.userInteractionEnabled = data.newValue;
-}
-(<proxy.PropertyMetadata>viewCommon.View.isUserInteractionEnabledProperty.metadata).onSetNativeValue = onIsUserInteractionEnabledPropertyChanged;
-
-var PFLAG_FORCE_LAYOUT = 1;
-var PFLAG_MEASURED_DIMENSION_SET = 1 << 1;
-var PFLAG_LAYOUT_REQUIRED = 1 << 2;
-
-export class View extends viewCommon.View {
+export class View extends ViewCommon {
     private _hasTransfrom = false;
     private _privateFlags: number = PFLAG_LAYOUT_REQUIRED | PFLAG_FORCE_LAYOUT;
     private _cachedFrame: CGRect;
     private _suspendCATransaction = false;
 
-    public _addViewCore(view: viewCommon.View, atIndex?: number) {
+    public _addViewCore(view: ViewDefinition, atIndex?: number) {
         super._addViewCore(view, atIndex);
         this.requestLayout();
     }
 
-    public _removeViewCore(view: viewCommon.View) {
+    public _removeViewCore(view: ViewDefinition) {
         super._removeViewCore(view);
         // TODO: Detach from the context?
         view._onDetached();
@@ -85,15 +51,15 @@ export class View extends viewCommon.View {
         super.requestLayout();
         this._privateFlags |= PFLAG_FORCE_LAYOUT;
 
-        var parent = <View>this.parent;
+        let parent = <View>this.parent;
         if (parent && !parent.isLayoutRequested) {
             parent.requestLayout();
         }
     }
 
     public measure(widthMeasureSpec: number, heightMeasureSpec: number): void {
-        var measureSpecsChanged = this._setCurrentMeasureSpecs(widthMeasureSpec, heightMeasureSpec);
-        var forceLayout = (this._privateFlags & PFLAG_FORCE_LAYOUT) === PFLAG_FORCE_LAYOUT;
+        let measureSpecsChanged = this._setCurrentMeasureSpecs(widthMeasureSpec, heightMeasureSpec);
+        let forceLayout = (this._privateFlags & PFLAG_FORCE_LAYOUT) === PFLAG_FORCE_LAYOUT;
         if (forceLayout || measureSpecsChanged) {
 
             // first clears the measured dimension flag
@@ -112,7 +78,7 @@ export class View extends viewCommon.View {
     }
 
     public layout(left: number, top: number, right: number, bottom: number): void {
-        var { boundsChanged, sizeChanged } = this._setCurrentLayoutBounds(left, top, right, bottom);
+        let { boundsChanged, sizeChanged } = this._setCurrentLayoutBounds(left, top, right, bottom);
         this.layoutNativeView(left, top, right, bottom);
         if (boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) {
             this.onLayout(left, top, right, bottom);
@@ -132,35 +98,36 @@ export class View extends viewCommon.View {
     }
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
-        var view = this._nativeView;
+        let view = this._nativeView;
         let nativeWidth = 0;
         let nativeHeight = 0;
 
+        let width = layout.getMeasureSpecSize(widthMeasureSpec);
+        let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
+
+        let height = layout.getMeasureSpecSize(heightMeasureSpec);
+        let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
+
         if (view) {
-            var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
-            var widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
-
-            var height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
-            var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
-
-            if (widthMode === utils.layout.UNSPECIFIED) {
+            if (widthMode === layout.UNSPECIFIED) {
                 width = Number.POSITIVE_INFINITY;
             }
 
-            if (heightMode === utils.layout.UNSPECIFIED) {
+            if (heightMode === layout.UNSPECIFIED) {
                 height = Number.POSITIVE_INFINITY;
             }
 
-            var nativeSize = view.sizeThatFits(CGSizeMake(width, height));
+            let nativeSize = view.sizeThatFits(CGSizeMake(width, height));
             nativeWidth = nativeSize.width;
             nativeHeight = nativeSize.height;
         }
 
-        var measureWidth = Math.max(nativeWidth, this.minWidth);
-        var measureHeight = Math.max(nativeHeight, this.minHeight);
+        let style = this.style;
+        let measureWidth = Math.max(nativeWidth, style.effectiveMinWidth);
+        let measureHeight = Math.max(nativeHeight, style.effectiveMinHeight);
 
-        var widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
-        var heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
+        let widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
+        let heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
 
         this.setMeasuredDimension(widthAndState, heightAndState);
     }
@@ -169,10 +136,10 @@ export class View extends viewCommon.View {
         //
     }
 
-    public _setNativeViewFrame(nativeView: any, frame: any) {
+    public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
         if (!CGRectEqualToRect(nativeView.frame, frame)) {
-            if (trace.enabled) {
-                trace.write(this + ", Native setFrame: = " + NSStringFromCGRect(frame), trace.categories.Layout);
+            if (traceEnabled) {
+                traceWrite(this + ", Native setFrame: = " + NSStringFromCGRect(frame), traceCategories.Layout);
             }
             this._cachedFrame = frame;
             if (this._hasTransfrom) {
@@ -185,7 +152,7 @@ export class View extends viewCommon.View {
             else {
                 nativeView.frame = frame;
             }
-            var boundsOrigin = nativeView.bounds.origin;
+            let boundsOrigin = nativeView.bounds.origin;
             nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frame.size.width, frame.size.height);
         }
     }
@@ -196,26 +163,26 @@ export class View extends viewCommon.View {
         }
 
         // This is done because when rotated in iOS7 there is rotation applied on the first subview on the Window which is our frame.nativeView.view.
-        // If we set it it should be transformed so it is correct.
-        // When in landscape in iOS 7 there is transformation on the first subview of the window so we set frame to its subview.
-        // in iOS 8 we set frame to subview again otherwise we get clipped.
-        var nativeView: UIView;
-        if (!this.parent && this._nativeView.subviews.count > 0 && utils.ios.MajorVersion < 8) {
-            if (trace.enabled) {
-                trace.write(this + " has no parent. Setting frame to first child instead.", trace.categories.Layout);
-            }
-            nativeView = (<UIView>this._nativeView.subviews[0]);
-        }
-        else {
-            nativeView = this._nativeView;
-        }
+        // // If we set it it should be transformed so it is correct.
+        // // When in landscape in iOS 7 there is transformation on the first subview of the window so we set frame to its subview.
+        // // in iOS 8 we set frame to subview again otherwise we get clipped.
+        // let nativeView: UIView;
+        // if (!this.parent && this._nativeView.subviews.count > 0 && ios.MajorVersion < 8) {
+        //     if (traceEnabled) {
+        //         traceWrite(this + " has no parent. Setting frame to first child instead.", traceCategories.Layout);
+        //     }
+        //     nativeView = (<UIView>this._nativeView.subviews[0]);
+        // }
+        // else {
+        let nativeView = this._nativeView;
+        // }
 
-        var frame = CGRectMake(left, top, right - left, bottom - top);
+        let frame = CGRectMake(left, top, right - left, bottom - top);
         this._setNativeViewFrame(nativeView, frame);
     }
 
     public _updateLayout() {
-        var oldBounds = this._getCurrentLayoutBounds();
+        let oldBounds = this._getCurrentLayoutBounds();
         this.layoutNativeView(oldBounds.left, oldBounds.top, oldBounds.right, oldBounds.bottom);
     }
 
@@ -227,51 +194,64 @@ export class View extends viewCommon.View {
         return false;
     }
 
-    public getLocationInWindow(): viewDefinition.Point {
+    public getLocationInWindow(): Point {
         if (!this._nativeView || !this._nativeView.window) {
             return undefined;
         }
 
-        var pointInWindow = this._nativeView.convertPointToView(this._nativeView.bounds.origin, null);
+        let pointInWindow = this._nativeView.convertPointToView(this._nativeView.bounds.origin, null);
         return {
-            x: utils.layout.toDeviceIndependentPixels(pointInWindow.x),
-            y: utils.layout.toDeviceIndependentPixels(pointInWindow.y),
+            x: layout.toDeviceIndependentPixels(pointInWindow.x),
+            y: layout.toDeviceIndependentPixels(pointInWindow.y),
         };
     }
 
-    public getLocationOnScreen(): viewDefinition.Point {
+    public getLocationOnScreen(): Point {
         if (!this._nativeView || !this._nativeView.window) {
             return undefined;
         }
 
-        var pointInWindow = this._nativeView.convertPointToView(this._nativeView.bounds.origin, null);
-        var pointOnScreen = this._nativeView.window.convertPointToWindow(pointInWindow, null);
+        let pointInWindow = this._nativeView.convertPointToView(this._nativeView.bounds.origin, null);
+        let pointOnScreen = this._nativeView.window.convertPointToWindow(pointInWindow, null);
         return {
-            x: utils.layout.toDeviceIndependentPixels(pointOnScreen.x),
-            y: utils.layout.toDeviceIndependentPixels(pointOnScreen.y),
+            x: layout.toDeviceIndependentPixels(pointOnScreen.x),
+            y: layout.toDeviceIndependentPixels(pointOnScreen.y),
         };
     }
 
-    public getLocationRelativeTo(otherView: viewDefinition.View): viewDefinition.Point {
+    public getLocationRelativeTo(otherView: ViewDefinition): Point {
         if (!this._nativeView || !this._nativeView.window ||
             !otherView._nativeView || !otherView._nativeView.window ||
             this._nativeView.window !== otherView._nativeView.window) {
             return undefined;
         }
 
-        var myPointInWindow = this._nativeView.convertPointToView(this._nativeView.bounds.origin, null);
-        var otherPointInWindow = otherView._nativeView.convertPointToView(otherView._nativeView.bounds.origin, null);
+        let myPointInWindow = this._nativeView.convertPointToView(this._nativeView.bounds.origin, null);
+        let otherPointInWindow = otherView._nativeView.convertPointToView(otherView._nativeView.bounds.origin, null);
         return {
-            x: utils.layout.toDeviceIndependentPixels(myPointInWindow.x - otherPointInWindow.x),
-            y: utils.layout.toDeviceIndependentPixels(myPointInWindow.y - otherPointInWindow.y),
+            x: layout.toDeviceIndependentPixels(myPointInWindow.x - otherPointInWindow.x),
+            y: layout.toDeviceIndependentPixels(myPointInWindow.y - otherPointInWindow.y),
         };
     }
 
-    private _onSizeChanged() {
-        this.style._sizeChanged();
+    private _onSizeChanged(): void {
+        let nativeView = this.nativeView;
+        if (!nativeView) {
+            return;
+        }
+
+        let background = this.style.backgroundInternal;
+        if (!background.isEmpty()) {
+            this[backgroundInternalProperty.native] = background;
+        }
+
+        let clipPath = this.style.clipPath;
+        if (clipPath !== "") {
+            this[clipPathProperty.native] = clipPath;
+        }
     }
 
-    public _updateNativeTransform() {
+    public updateNativeTransform() {
         let translateX = this.translateX || 0;
         let translateY = this.translateY || 0;
         let scaleX = this.scaleX || 1;
@@ -287,17 +267,17 @@ export class View extends viewCommon.View {
         }
     }
 
-    public _updateOriginPoint() {
-        let newPoint = CGPointMake(this.originX, this.originY);
+    public updateOriginPoint(originX: number, originY: number) {
+        let newPoint = CGPointMake(originX, originY);
         this._nativeView.layer.anchorPoint = newPoint;
         if (this._cachedFrame) {
             this._setNativeViewFrame(this._nativeView, this._cachedFrame);
         }
     }
 
-    public _addToSuperview(superview: any, atIndex?: number): boolean {
+    public _addToSuperview(superview: any, atIndex: number = Number.POSITIVE_INFINITY): boolean {
         if (superview && this._nativeView) {
-            if (types.isNullOrUndefined(atIndex) || atIndex >= superview.subviews.count) {
+            if (atIndex >= superview.subviews.count) {
                 superview.addSubview(this._nativeView);
             } else {
                 superview.insertSubviewAtIndex(this._nativeView, atIndex);
@@ -329,6 +309,128 @@ export class View extends viewCommon.View {
     public _isPresentationLayerUpdateSuspeneded() {
         return this._suspendCATransaction;
     }
+
+    get [isEnabledProperty.native](): boolean {
+        let nativeView = this._nativeView;
+        return nativeView instanceof UIControl ? nativeView.enabled : true;
+    }
+    set [isEnabledProperty.native](value: boolean) {
+        let nativeView = this._nativeView;
+        if (nativeView instanceof UIControl) {
+            nativeView.enabled = value;
+        }
+    }
+
+    get [originXProperty.native](): number {
+        return this._nativeView.layer.anchorPoint.x;
+    }
+    set [originXProperty.native](value: number) {
+        this.updateOriginPoint(value, this.originY);
+    }
+
+    get [originYProperty.native](): number {
+        return this._nativeView.layer.anchorPoint.y;
+    }
+    set [originYProperty.native](value: number) {
+        this.updateOriginPoint(this.originX, value);
+    }
+
+    get [automationTextProperty.native](): string {
+        return this._nativeView.accessibilityLabel;
+    }
+    set [automationTextProperty.native](value: string) {
+        this._nativeView.accessibilityIdentifier = value;
+        this._nativeView.accessibilityLabel = value;
+    }
+
+    get [isUserInteractionEnabledProperty.native](): boolean {
+        return this._nativeView.userInteractionEnabled;
+    }
+    set [isUserInteractionEnabledProperty.native](value: boolean) {
+        this._nativeView.userInteractionEnabled = value;
+    }
+
+    get [visibilityProperty.native](): "visible" | "hidden" | "collapse" | "collapsed"{
+        return "visible"
+    }
+    set [visibilityProperty.native](value: "visible" | "hidden" | "collapse" | "collapsed") {
+        this._nativeView.hidden = (value !== "visible");
+    }
+
+    get [opacityProperty.native](): number {
+        return this._nativeView.alpha;
+    }
+    set [opacityProperty.native](value: number) {
+        let nativeView = this._nativeView;
+        let updateSuspended = this._isPresentationLayerUpdateSuspeneded();
+        if (!updateSuspended) {
+            CATransaction.begin();
+        }
+        nativeView.alpha = value;
+        if (!updateSuspended) {
+            CATransaction.commit();
+        }
+    }
+
+    get [rotateProperty.native](): number {
+        return 0;
+    }
+    set [rotateProperty.native](value: number) {
+        this.updateNativeTransform();
+    }
+
+    get [scaleXProperty.native](): number {
+        return 1;
+    }
+    set [scaleXProperty.native](value: number) {
+        this.updateNativeTransform();
+    }
+
+    get [scaleYProperty.native](): number {
+        return 1;
+    }
+    set [scaleYProperty.native](value: number) {
+        this.updateNativeTransform();
+    }
+
+    get [translateXProperty.native](): number {
+        return 0;
+    }
+    set [translateXProperty.native](value: number) {
+        this.updateNativeTransform();
+    }
+
+    get [translateYProperty.native](): number {
+        return 0;
+    }
+    set [translateYProperty.native](value: number) {
+        this.updateNativeTransform();
+    }
+
+    get [zIndexProperty.native](): number {
+        return 0;
+    }
+    set [zIndexProperty.native](value: number) {
+        this._nativeView.layer.zPosition = value;
+    }
+
+    get [backgroundInternalProperty.native](): UIColor {
+        return this._nativeView.backgroundColor;
+    }
+    set [backgroundInternalProperty.native](value: UIColor | Background) {
+        let updateSuspended = this._isPresentationLayerUpdateSuspeneded();
+        if (!updateSuspended) {
+            CATransaction.begin();
+        }
+        if (value instanceof UIColor) {
+            this._nativeView.backgroundColor = value;
+        } else {
+            this._nativeView.backgroundColor = ios.createBackgroundUIColor(this);
+        }
+        if (!updateSuspended) {
+            CATransaction.commit();
+        }
+    }
 }
 
 export class CustomLayoutView extends View {
@@ -364,218 +466,3 @@ export class CustomLayoutView extends View {
         child._removeFromSuperview();
     }
 }
-
-export class ViewStyler implements style.Styler {
-    // Background methods
-    private static setBackgroundInternalProperty(view: View, newValue: any) {
-        var nativeView: UIView = <UIView>view._nativeView;
-        if (nativeView) {
-            var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
-            if (!updateSuspended) {
-                CATransaction.begin();
-            }
-            nativeView.backgroundColor = backgroundModule.ios.createBackgroundUIColor(view);
-            
-            if (!updateSuspended) {
-                CATransaction.commit();
-            }
-        }
-    }
-
-    private static resetBackgroundInternalProperty(view: View, nativeValue: any) {
-        var nativeView: UIView = <UIView>view._nativeView;
-        if (nativeView) {
-            nativeView.backgroundColor = nativeValue;
-        }
-    }
-
-    private static getNativeBackgroundInternalValue(view: View): any {
-        var nativeView: UIView = <UIView>view._nativeView;
-        if (nativeView) {
-            return nativeView.backgroundColor;
-        }
-        return undefined;
-    }
-
-    // Visibility methods
-    private static setVisibilityProperty(view: View, newValue: any) {
-        var nativeView: UIView = <UIView>view._nativeView;
-        if (nativeView) {
-            return nativeView.hidden = (newValue !== enums.Visibility.visible);
-        }
-    }
-
-    private static resetVisibilityProperty(view: View, nativeValue: any) {
-        var nativeView: UIView = <UIView>view._nativeView;
-        if (nativeView) {
-            return nativeView.hidden = false;
-        }
-    }
-
-    // Opacity methods
-    private static setOpacityProperty(view: View, newValue: any) {
-        var nativeView: UIView = <UIView>view._nativeView;
-        if (nativeView) {
-            var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
-            if (!updateSuspended) {
-                CATransaction.begin();
-            }
-            var alpha = nativeView.alpha = newValue;
-            if (!updateSuspended) {
-                CATransaction.commit();
-            }
-            return alpha;
-        }
-    }
-
-    private static resetOpacityProperty(view: View, nativeValue: any) {
-        var nativeView: UIView = <UIView>view._nativeView;
-        if (nativeView) {
-            return nativeView.alpha = 1.0;
-        }
-    }
-    
-    // Rotate
-    private static setRotateProperty(view: View, newValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static resetRotateProperty(view: View, nativeValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static getRotateProperty(view: View): any {
-        if (view._nativeView instanceof UIView) {
-            let t: CGAffineTransform = (<UIView>view._nativeView).transform;
-            return Math.atan2(t.b, t.a);
-        }
-        return 0;
-    }
-
-    // ScaleX
-    private static setScaleXProperty(view: View, newValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static resetScaleXProperty(view: View, nativeValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static getScaleXProperty(view: View): any {
-        if (view._nativeView instanceof UIView) {
-            let t: CGAffineTransform = (<UIView>view._nativeView).transform;
-            return Math.sqrt(t.a * t.a + t.c * t.c);
-        }
-        return 0;
-    }
-
-    // ScaleY
-    private static setScaleYProperty(view: View, newValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static resetScaleYProperty(view: View, nativeValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static getScaleYProperty(view: View): any {
-        if (view._nativeView instanceof UIView) {
-            let t: CGAffineTransform = (<UIView>view._nativeView).transform;
-            return Math.sqrt(t.b * t.b + t.d * t.d);
-        }
-        return 0;
-    }
-
-    // TranslateX
-    private static setTranslateXProperty(view: View, newValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static resetTranslateXProperty(view: View, nativeValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static getTranslateXProperty(view: View): any {
-        if (view._nativeView instanceof UIView) {
-            let t: CGAffineTransform = (<UIView>view._nativeView).transform;
-            return t.tx;
-        }
-        return 0;
-    }
-
-    // TranslateY
-    private static setTranslateYProperty(view: View, newValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static resetTranslateYProperty(view: View, nativeValue: any) {
-        view._updateNativeTransform();
-    }
-
-    private static getTranslateYProperty(view: View): any {
-        if (view._nativeView instanceof UIView) {
-            let t: CGAffineTransform = (<UIView>view._nativeView).transform;
-            return t.ty;
-        }
-        return 0;
-    }
-
-    // z-index
-    private static setZIndexProperty(view: View, newValue: any) {
-        view.ios.layer.zPosition = newValue;
-    }
-
-    private static resetZIndexProperty(view: View, nativeValue: any) {
-        view.ios.layer.zPosition = nativeValue;
-    }
-
-    private static getZIndexProperty(view: View): any {
-        return view.ios.layer.zPosition;
-    }
-
-    public static registerHandlers() {
-        style.registerHandler(style.backgroundInternalProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setBackgroundInternalProperty,
-            ViewStyler.resetBackgroundInternalProperty,
-            ViewStyler.getNativeBackgroundInternalValue));
-
-        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.rotateProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setRotateProperty,
-            ViewStyler.resetRotateProperty,
-            ViewStyler.getRotateProperty));
-
-        style.registerHandler(style.scaleXProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setScaleXProperty,
-            ViewStyler.resetScaleXProperty,
-            ViewStyler.getScaleXProperty));
-
-        style.registerHandler(style.scaleYProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setScaleYProperty,
-            ViewStyler.resetScaleYProperty,
-            ViewStyler.getScaleYProperty));
-
-        style.registerHandler(style.translateXProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setTranslateXProperty,
-            ViewStyler.resetTranslateXProperty,
-            ViewStyler.getTranslateXProperty));
-
-        style.registerHandler(style.translateYProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setTranslateYProperty,
-            ViewStyler.resetTranslateYProperty,
-            ViewStyler.getTranslateYProperty));
-
-        style.registerHandler(style.zIndexProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setZIndexProperty,
-            ViewStyler.resetZIndexProperty,
-            ViewStyler.getZIndexProperty));
-    }
-}
-
-ViewStyler.registerHandlers();
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/weak-event-listener.d.ts b/tns-core-modules/ui/core/weak-event-listener.d.ts
index e1b843081..c155eff65 100644
--- a/tns-core-modules/ui/core/weak-event-listener.d.ts
+++ b/tns-core-modules/ui/core/weak-event-listener.d.ts
@@ -1,5 +1,5 @@
 declare module "ui/core/weak-event-listener" {
-    import observable = require("data/observable");
+    import { Observable, EventData } from "data/observable";
 
     /**
      * Attaches a WeakEventListener.
@@ -8,7 +8,7 @@ declare module "ui/core/weak-event-listener" {
      * @param handler The function which should be called when event occurs.
      * @param target Subscriber (target) of the event listener. It will be used as a thisArg in the handler function.
      */
-    export function addWeakEventListener(source: observable.Observable, eventName: string, handler: (eventData: observable.EventData) => void, target: any) : void;
+    export function addWeakEventListener(source: Observable, eventName: string, handler: (eventData: EventData) => void, target: any): void;
 
     /**
      * Removes a WeakEventListener.
@@ -17,5 +17,5 @@ declare module "ui/core/weak-event-listener" {
      * @param handler The function which should be called when event occurs.
      * @param target Subscriber (target) of the event listener. It will be used as a thisArg in the handler function.
      */
-    export function removeWeakEventListener(source: observable.Observable, eventName: string, handler: (eventData: observable.EventData) => void, target: any): void;
+    export function removeWeakEventListener(source: Observable, eventName: string, handler: (eventData: EventData) => void, target: any): void;
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/weak-event-listener.ts b/tns-core-modules/ui/core/weak-event-listener.ts
index 78321d224..3e3bb901d 100644
--- a/tns-core-modules/ui/core/weak-event-listener.ts
+++ b/tns-core-modules/ui/core/weak-event-listener.ts
@@ -1,23 +1,22 @@
-import observable = require("data/observable");
-import * as types from "utils/types";
+import { Observable, EventData } from "data/observable";
 
-var handlersForEventName = new Map<string,(eventData: observable.EventData) => void>();
-var sourcesMap = new WeakMap<observable.Observable, Map<string, Array<TargetHandlerPair>>>();
+const handlersForEventName = new Map<string, (eventData: EventData) => void>();
+const sourcesMap = new WeakMap<Observable, Map<string, Array<TargetHandlerPair>>>();
 
 class TargetHandlerPair {
     tagetRef: WeakRef<Object>;
-    handler: (eventData: observable.EventData) => void;
+    handler: (eventData: EventData) => void;
 
-    constructor(target: Object, handler: (eventData: observable.EventData) => void) {
+    constructor(target: Object, handler: (eventData: EventData) => void) {
         this.tagetRef = new WeakRef(target);
         this.handler = handler;
     }
 }
 
-function getHandlerForEventName(eventName: string): (eventData: observable.EventData) => void {
+function getHandlerForEventName(eventName: string): (eventData: EventData) => void {
     var handler = handlersForEventName.get(eventName);
     if (!handler) {
-        handler = function (eventData: observable.EventData) {
+        handler = function (eventData: EventData) {
             var source = eventData.object;
             var sourceEventMap = sourcesMap.get(source);
             if (!sourceEventMap) {
@@ -61,25 +60,25 @@ function getHandlerForEventName(eventName: string): (eventData: observable.Event
     return handler;
 }
 
-function validateArgs(source: observable.Observable, eventName: string, handler: (eventData: observable.EventData) => void, target: any) {
-    if (types.isNullOrUndefined(source)) {
+function validateArgs(source: Observable, eventName: string, handler: (eventData: EventData) => void, target: any) {
+    if (!source) {
         throw new Error("source is null or undefined");
     }
 
-    if (types.isNullOrUndefined(target)) {
+    if (!target) {
         throw new Error("target is null or undefined");
     }
 
-    if (!types.isString(eventName)) {
+    if (typeof eventName !== "string") {
         throw new Error("eventName is not a string");
     }
 
-    if (!types.isFunction(handler)) {
+    if (typeof handler !== "function") {
         throw new Error("handler is not a function");
     }
 }
 
-export function addWeakEventListener(source: observable.Observable, eventName: string, handler: (eventData: observable.EventData) => void, target: any) {
+export function addWeakEventListener(source: Observable, eventName: string, handler: (eventData: EventData) => void, target: any) {
     validateArgs(source, eventName, handler, target);
 
     var shouldAttach: boolean = false;
@@ -105,7 +104,7 @@ export function addWeakEventListener(source: observable.Observable, eventName: s
     }
 }
 
-export function removeWeakEventListener(source: observable.Observable, eventName: string, handler: (eventData: observable.EventData) => void, target: any) {
+export function removeWeakEventListener(source: Observable, eventName: string, handler: (eventData: EventData) => void, target: any) {
     validateArgs(source, eventName, handler, target);
 
     var handlerForEventWithName = handlersForEventName.get(eventName);
diff --git a/tns-core-modules/ui/date-picker/date-picker-common.ts b/tns-core-modules/ui/date-picker/date-picker-common.ts
index 2b4802763..455e6d7ee 100644
--- a/tns-core-modules/ui/date-picker/date-picker-common.ts
+++ b/tns-core-modules/ui/date-picker/date-picker-common.ts
@@ -2,6 +2,8 @@
 import { View } from "ui/core/view";
 import { Property } from "ui/core/properties";
 
+export * from "ui/core/view";
+
 export class DatePickerBase extends View implements DatePickerDefinition {
     public year: number;
     public month: number;
diff --git a/tns-core-modules/ui/date-picker/date-picker.android.ts b/tns-core-modules/ui/date-picker/date-picker.android.ts
index d1bb0b574..0c185bb32 100644
--- a/tns-core-modules/ui/date-picker/date-picker.android.ts
+++ b/tns-core-modules/ui/date-picker/date-picker.android.ts
@@ -1,12 +1,14 @@
-import { DatePickerBase, yearProperty, monthProperty, dayProperty, 
-    dateProperty, maxDateProperty, minDateProperty } from "./date-picker-common";
+import {
+    DatePickerBase, yearProperty, monthProperty, dayProperty,
+    dateProperty, maxDateProperty, minDateProperty
+} from "./date-picker-common";
 
 export * from "./date-picker-common";
 
 @Interfaces([android.widget.DatePicker.OnDateChangedListener])
 class DateChangedListener implements android.widget.DatePicker.OnDateChangedListener {
     constructor(public owner: WeakRef<DatePicker>) {
-        //
+        return global.__native(this);
     }
 
     onDateChanged(picker: android.widget.DatePicker, year: number, month: number, day: number) {
diff --git a/tns-core-modules/ui/date-picker/date-picker.ios.ts b/tns-core-modules/ui/date-picker/date-picker.ios.ts
index c0be06dd2..c8b11b183 100644
--- a/tns-core-modules/ui/date-picker/date-picker.ios.ts
+++ b/tns-core-modules/ui/date-picker/date-picker.ios.ts
@@ -1,9 +1,9 @@
 import {
     DatePickerBase, yearProperty, monthProperty, dayProperty,
-    dateProperty, maxDateProperty, minDateProperty
+    dateProperty, maxDateProperty, minDateProperty, colorProperty
 } from "./date-picker-common";
-import { colorProperty } from "ui/styling/style"
-import * as utils from "utils/utils";
+
+import { ios } from "utils/utils";
 
 export * from "./date-picker-common";
 
@@ -26,7 +26,7 @@ export class DatePicker extends DatePickerBase {
     }
     set [yearProperty.native](value: number) {
         let picker = this.nativeView;
-        let comps = utils.ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, picker.date);
+        let comps = ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, picker.date);
         comps.year = value;
         this.date = new Date(comps.year, comps.month - 1, comps.day);
     }
@@ -36,7 +36,7 @@ export class DatePicker extends DatePickerBase {
     }
     set [monthProperty.native](value: number) {
         let picker = this.nativeView;
-        let comps = utils.ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, picker.date);
+        let comps = ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, picker.date);
         comps.month = value;
         this.date = new Date(comps.year, comps.month - 1, comps.day);
     }
@@ -46,7 +46,7 @@ export class DatePicker extends DatePickerBase {
     }
     set [dayProperty.native](value: number) {
         let picker = this.nativeView;
-        let comps = utils.ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, picker.date);
+        let comps = ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, picker.date);
         comps.day = value;
         this.date = new Date(comps.year, comps.month - 1, comps.day);
     }
@@ -56,11 +56,11 @@ export class DatePicker extends DatePickerBase {
     }
     set [dateProperty.native](value: Date) {
         let picker = this.nativeView;
-        let comps = utils.ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, picker.date);
+        let comps = ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, picker.date);
         comps.year = value.getFullYear();
         comps.month = value.getMonth() + 1;
         comps.day = value.getDate();
-        picker.setDateAnimated(utils.ios.getter(NSCalendar, NSCalendar.currentCalendar).dateFromComponents(comps), false);
+        picker.setDateAnimated(ios.getter(NSCalendar, NSCalendar.currentCalendar).dateFromComponents(comps), false);
     }
 
     get [maxDateProperty.native](): Date {
@@ -100,7 +100,7 @@ class UIDatePickerChangeHandlerImpl extends NSObject {
     }
 
     public valueChanged(sender: UIDatePicker) {
-        let comps = utils.ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, sender.date);
+        let comps = ios.getter(NSCalendar, NSCalendar.currentCalendar).componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, sender.date);
 
         let owner = this._owner.get();
         if (!owner) {
diff --git a/tns-core-modules/ui/definitions.d.ts b/tns-core-modules/ui/definitions.d.ts
index c37714e57..2caa4057f 100644
--- a/tns-core-modules/ui/definitions.d.ts
+++ b/tns-core-modules/ui/definitions.d.ts
@@ -10,8 +10,19 @@ declare module "ui/core/view-base" {
      * Returns an instance of a view (if found), otherwise undefined.
      */
     export function getAncestor(view: ViewBase, criterion: string | Function): ViewBase;
+    export function isEventOrGesture(name: string, view: ViewBase): boolean;
 
     export class ViewBase extends Observable {
+        /**
+         * String value used when hooking to loaded event.
+         */
+        public static loadedEvent: string;
+
+        /**
+         * String value used when hooking to unloaded event.
+         */
+        public static unloadedEvent: string;
+
         public ios: any;
         public android: any;
         public nativeView: any;
@@ -25,6 +36,11 @@ declare module "ui/core/view-base" {
          */
         public readonly style: Style;
 
+        /**
+         * Returns true if visibility is set to 'collapse'.
+         */
+        public isCollapsed: boolean;
+
         public bind(options: BindingOptions, source: Object): void;
         public unbind(property: string): void;
 
@@ -38,12 +54,12 @@ declare module "ui/core/properties" {
     import { Style } from "ui/styling/style";
 
     interface PropertyOptions<T, U> {
-        name: string,
-        defaultValue?: U,
-        affectsLayout?: boolean,
-        equalityComparer?: (x: U, y: U) => boolean,
-        valueChanged?: (target: T, oldValue: U, newValue: U) => void,
-        valueConverter?: (value: any) => U
+        readonly name: string,
+        readonly defaultValue?: U,
+        readonly affectsLayout?: boolean,
+        readonly equalityComparer?: (x: U, y: U) => boolean,
+        readonly valueChanged?: (target: T, oldValue: U, newValue: U) => void,
+        readonly valueConverter?: (value: any) => U
     }
 
     interface CssPropertyOptions<T extends Style, U> extends PropertyOptions<T, U> {
@@ -73,4 +89,20 @@ declare module "ui/core/properties" {
     class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U> {
         constructor(options: CssPropertyOptions<T, U>);
     }
+
+    export interface ShorthandPropertyOptions {
+        readonly name: string,
+        readonly cssName: string;
+        readonly converter: (value: string) => [CssProperty<any, any>, any][],
+        readonly getter: (this: Style) => string
+    }
+
+    export class ShorthandProperty<T extends Style> {
+        constructor(options: ShorthandPropertyOptions);
+
+        public readonly native: symbol;
+        public readonly name: string;
+        public readonly cssName: string;
+        public register(cls: { prototype: T }): void;
+    }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/editable-text-base/editable-text-base-common.ts b/tns-core-modules/ui/editable-text-base/editable-text-base-common.ts
index c39fe418a..7879e7c34 100644
--- a/tns-core-modules/ui/editable-text-base/editable-text-base-common.ts
+++ b/tns-core-modules/ui/editable-text-base/editable-text-base-common.ts
@@ -1,81 +1,44 @@
 import { EditableTextBase as EditableTextBaseDefinition } from "ui/editable-text-base";
-import { Property } from "ui/core/properties";
+import { Property, CssProperty } from "ui/core/properties";
 import { TextBase } from "ui/text-base";
+import { Style } from "ui/styling/style";
+import { Color } from "color";
 
-import { UpdateTextTrigger, AutocapitalizationType } from "ui/enums";
+export * from "ui/text-base";
 
-export let keyboardTypeProperty = new Property<EditableTextBase, string>({ name: "keyboardType" });
+export abstract class EditableTextBase extends TextBase implements EditableTextBaseDefinition {
+
+    public keyboardType: "datetime" | "phone" | "number" | "url" | "email";
+    public returnKeyType: "done" | "next" | "go" | "search" | "send";
+    public updateTextTrigger: "focusLost" | "textChanged";
+    public autocapitalizationType: "none" | "words" | "sentences" | "allCharacters";
+    public editable: boolean;
+    public autocorrect: boolean;
+    public hint: string;
+
+    public abstract dismissSoftInput();
+}
+
+export let placeholderColorProperty = new CssProperty<Style, Color>({ name: "placeholderColor", cssName: "placeholder-color", equalityComparer: Color.equals, valueConverter: (v: string) => new Color(v) });
+placeholderColorProperty.register(Style);
+
+export let keyboardTypeProperty = new Property<EditableTextBase, "datetime" | "phone" | "number" | "url" | "email">({ name: "keyboardType" });
 keyboardTypeProperty.register(EditableTextBase);
 
-export let returnKeyTypeProperty = new Property<EditableTextBase, string>({ name: "returnKeyType" });
+export let returnKeyTypeProperty = new Property<EditableTextBase, "done" | "next" |  "go" | "search" | "send">({ name: "returnKeyType" });
 returnKeyTypeProperty.register(EditableTextBase);
 
 export let editableProperty = new Property<EditableTextBase, boolean>({ name: "editable", defaultValue: true });
 editableProperty.register(EditableTextBase);
 
-export let updateTextTriggerProperty = new Property<EditableTextBase, string>({ name: "updateTextTrigger", defaultValue: UpdateTextTrigger.textChanged });
+export let updateTextTriggerProperty = new Property<EditableTextBase, "focusLost" | "textChanged">({ name: "updateTextTrigger", defaultValue: "textChanged" });
 updateTextTriggerProperty.register(EditableTextBase);
 
-export let autocapitalizationTypeProperty = new Property<EditableTextBase, string>({ name: "autocapitalizationType", defaultValue: AutocapitalizationType.sentences });
+export let autocapitalizationTypeProperty = new Property<EditableTextBase, "none" | "words" | "sentences" | "allCharacters">({ name: "autocapitalizationType", defaultValue: "sentences" });
 autocapitalizationTypeProperty.register(EditableTextBase);
 
 export let autocorrectProperty = new Property<EditableTextBase, boolean>({ name: "autocorrect" });
 autocorrectProperty.register(EditableTextBase);
 
 export let hintProperty = new Property<EditableTextBase, string>({ name: "hint", defaultValue: "" });
-hintProperty.register(EditableTextBase);
-
-function onKeyboardTypePropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var editableTextBase = <EditableTextBase>data.object;
-    editableTextBase._onKeyboardTypePropertyChanged(data);
-}
-
-(<proxy.PropertyMetadata>keyboardTypeProperty.metadata).onSetNativeValue = onKeyboardTypePropertyChanged;
-
-function onReturnKeyTypePropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var editableTextBase = <EditableTextBase>data.object;
-    editableTextBase._onReturnKeyTypePropertyChanged(data);
-}
-
-(<proxy.PropertyMetadata>returnKeyTypeProperty.metadata).onSetNativeValue = onReturnKeyTypePropertyChanged;
-
-function onEditablePropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var editableTextBase = <EditableTextBase>data.object;
-    editableTextBase._onEditablePropertyChanged(data);
-}
-
-(<proxy.PropertyMetadata>editableProperty.metadata).onSetNativeValue = onEditablePropertyChanged;
-
-function onAutocapitalizationTypePropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var editableTextBase = <EditableTextBase>data.object;
-    editableTextBase._onAutocapitalizationTypePropertyChanged(data);
-}
-
-(<proxy.PropertyMetadata>autocapitalizationTypeProperty.metadata).onSetNativeValue = onAutocapitalizationTypePropertyChanged;
-
-function onAutocorrectPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var editableTextBase = <EditableTextBase>data.object;
-    editableTextBase._onAutocorrectPropertyChanged(data);
-}
-
-(<proxy.PropertyMetadata>autocorrectProperty.metadata).onSetNativeValue = onAutocorrectPropertyChanged;
-
-function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var editableTextBase = <EditableTextBase>data.object;
-    editableTextBase._onHintPropertyChanged(data);
-}
-
-(<proxy.PropertyMetadata>hintProperty.metadata).onSetNativeValue = onHintPropertyChanged;
-
-export abstract class EditableTextBase extends TextBase implements EditableTextBaseDefinition {
-
-    public keyboardType: string;
-    public returnKeyType: string;
-    public editable: boolean;
-    public updateTextTrigger: string;
-    public autocapitalizationType: string;
-    public autocorrect: boolean;
-    public hint: string;
-
-    public abstract dismissSoftInput();
-} 
\ No newline at end of file
+hintProperty.register(EditableTextBase);
\ No newline at end of file
diff --git a/tns-core-modules/ui/editable-text-base/editable-text-base.android.ts b/tns-core-modules/ui/editable-text-base/editable-text-base.android.ts
index 7bdde6924..4fe7967c1 100644
--- a/tns-core-modules/ui/editable-text-base/editable-text-base.android.ts
+++ b/tns-core-modules/ui/editable-text-base/editable-text-base.android.ts
@@ -4,6 +4,7 @@
     autocapitalizationTypeProperty, autocorrectProperty, hintProperty
 } from "./editable-text-base-common";
 import { textProperty } from "ui/text-base";
+import { ad } from "utils/utils";
 
 export class EditableTextBase extends common.EditableTextBase {
     private _android: android.widget.EditText;
@@ -13,13 +14,11 @@ export class EditableTextBase extends common.EditableTextBase {
     private _dirtyTextAccumulator: string;
     /* tslint:enable */
 
-import { UpdateTextTrigger, KeyboardType, ReturnKeyType, AutocapitalizationType } from "ui/enums";
-import * as utils from "utils/utils";
 
 @Interfaces([android.text.TextWatcher])
 class TextWatcher implements android.text.TextWatcher {
     constructor(private owner: WeakRef<EditableTextBase>) {
-        //        
+        return global.__native(this);
     }
 
     public beforeTextChanged(text: string, start: number, count: number, after: number) {
@@ -49,10 +48,10 @@ class TextWatcher implements android.text.TextWatcher {
         }
 
         switch (owner.updateTextTrigger) {
-            case UpdateTextTrigger.focusLost:
+            case "focusLost":
                 owner._dirtyTextAccumulator = editable.toString();
                 break;
-            case UpdateTextTrigger.textChanged:
+            case "textChanged":
                 owner.nativePropertyChanged(textProperty, editable.toString());
                 break;
             default:
@@ -64,7 +63,7 @@ class TextWatcher implements android.text.TextWatcher {
 @Interfaces([android.view.View.OnFocusChangeListener])
 class FocusChangeListener implements android.view.View.OnFocusChangeListener {
     constructor(private owner: WeakRef<EditableTextBase>) {
-        //        
+        return global.__native(this);
     }
 
     public onFocusChange(view: android.view.View, hasFocus: boolean) {
@@ -100,7 +99,7 @@ class FocusChangeListener implements android.view.View.OnFocusChangeListener {
 @Interfaces([android.widget.TextView.OnEditorActionListener])
 class EditorActionListener implements android.widget.TextView.OnEditorActionListener {
     constructor(private owner: WeakRef<EditableTextBase>) {
-        //        
+        return global.__native(this);
     }
 
     public onEditorAction(textView: android.widget.TextView, actionId: number, event: android.view.KeyEvent): boolean {
@@ -146,7 +145,7 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
     public abstract _configureEditText(): void;
 
     public abstract _onReturnPress(): void;
-    
+
     public _createUI() {
         this._android = new android.widget.EditText(this._context);
         this._configureEditText();
@@ -184,14 +183,14 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
     }
 
     public dismissSoftInput() {
-        utils.ad.dismissSoftInput(this._nativeView);
+        ad.dismissSoftInput(this._nativeView);
     }
 
     public focus(): boolean {
         let result = super.focus();
 
         if (result) {
-            utils.ad.showSoftInput(this._nativeView);
+            ad.showSoftInput(this._nativeView);
         }
 
         return result;
@@ -221,46 +220,51 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
         this.nativeView.setText(newValue, android.widget.TextView.BufferType.EDITABLE);
     }
 
-    get [keyboardTypeProperty.native](): string {
+    get [keyboardTypeProperty.native](): "datetime" | "phone" | "number" | "url" | "email" | string {
         let inputType = this.nativeView.getInputType();
         switch (inputType) {
             case android.text.InputType.TYPE_CLASS_DATETIME | android.text.InputType.TYPE_DATETIME_VARIATION_NORMAL:
-                return KeyboardType.datetime;
+                return "datetime";
 
             case android.text.InputType.TYPE_CLASS_PHONE:
-                return KeyboardType.phone;
+                return "phone";
 
             case android.text.InputType.TYPE_CLASS_NUMBER | android.text.InputType.TYPE_NUMBER_VARIATION_NORMAL | android.text.InputType.TYPE_NUMBER_FLAG_SIGNED | android.text.InputType.TYPE_NUMBER_FLAG_DECIMAL:
-                return KeyboardType.number;
+                return "number";
 
             case android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_URI:
-                return KeyboardType.url;
+                return "url";
 
             case android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS:
-                return KeyboardType.email;
+                return "email";
 
             default:
                 return inputType.toString();
         }
     }
-    set [keyboardTypeProperty.native](value: string) {
+    set [keyboardTypeProperty.native](value: "datetime" | "phone" | "number" | "url" | "email" | string) {
         let newInputType;
         switch (value) {
-            case KeyboardType.datetime:
+            case "datetime":
                 newInputType = android.text.InputType.TYPE_CLASS_DATETIME | android.text.InputType.TYPE_DATETIME_VARIATION_NORMAL;
                 break;
-            case KeyboardType.phone:
+
+            case "phone":
                 newInputType = android.text.InputType.TYPE_CLASS_PHONE;
                 break;
-            case KeyboardType.number:
+
+            case "number":
                 newInputType = android.text.InputType.TYPE_CLASS_NUMBER | android.text.InputType.TYPE_NUMBER_VARIATION_NORMAL | android.text.InputType.TYPE_NUMBER_FLAG_SIGNED | android.text.InputType.TYPE_NUMBER_FLAG_DECIMAL;
                 break;
-            case KeyboardType.url:
+
+            case "url":
                 newInputType = android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_URI;
                 break;
-            case KeyboardType.email:
+
+            case "email":
                 newInputType = android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS;
                 break;
+
             default:
                 let inputType = +value;
                 if (!isNaN(inputType)) {
@@ -274,44 +278,44 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
         this._setInputType(newInputType);
     }
 
-    get [returnKeyTypeProperty.native](): string {
+    get [returnKeyTypeProperty.native](): "done" | "next" | "go" | "search" | "send" | string {
         let ime = this.nativeView.getImeOptions();
         switch (ime) {
             case android.view.inputmethod.EditorInfo.IME_ACTION_DONE:
-                return ReturnKeyType.done;
+                return "done";
 
             case android.view.inputmethod.EditorInfo.IME_ACTION_GO:
-                return ReturnKeyType.go;
+                return "go";
 
             case android.view.inputmethod.EditorInfo.IME_ACTION_NEXT:
-                return ReturnKeyType.next;
+                return "next";
 
             case android.view.inputmethod.EditorInfo.IME_ACTION_SEARCH:
-                return ReturnKeyType.search;
+                return "search";
 
             case android.view.inputmethod.EditorInfo.IME_ACTION_SEND:
-                return ReturnKeyType.send;
+                return "send";
 
             default:
                 return ime.toString();
         }
     }
-    set [returnKeyTypeProperty.native](value: string) {
+    set [returnKeyTypeProperty.native](value: "done" | "next" | "go" | "search" | "send" | string) {
         let newImeOptions;
         switch (value) {
-            case ReturnKeyType.done:
+            case "done":
                 newImeOptions = android.view.inputmethod.EditorInfo.IME_ACTION_DONE;
                 break;
-            case ReturnKeyType.go:
+            case "go":
                 newImeOptions = android.view.inputmethod.EditorInfo.IME_ACTION_GO;
                 break;
-            case ReturnKeyType.next:
+            case "next":
                 newImeOptions = android.view.inputmethod.EditorInfo.IME_ACTION_NEXT;
                 break;
-            case ReturnKeyType.search:
+            case "search":
                 newImeOptions = android.view.inputmethod.EditorInfo.IME_ACTION_SEARCH;
                 break;
-            case ReturnKeyType.send:
+            case "send":
                 newImeOptions = android.view.inputmethod.EditorInfo.IME_ACTION_SEND;
                 break;
             default:
@@ -339,14 +343,14 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
         }
     }
 
-    get [autocapitalizationTypeProperty.native](): string {
+    get [autocapitalizationTypeProperty.native](): "none" | "words" | "sentences" | "allCharacters" | string {
         let inputType = this.nativeView.getInputType();
         if ((inputType & android.text.InputType.TYPE_TEXT_FLAG_CAP_WORDS) === android.text.InputType.TYPE_TEXT_FLAG_CAP_WORDS) {
-            return AutocapitalizationType.words;
+            return "words";
         } else if ((inputType & android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES) === android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES) {
-            return AutocapitalizationType.sentences;
+            return "sentences";
         } else if ((inputType & android.text.InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS) === android.text.InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS) {
-            return AutocapitalizationType.allCharacters;
+            return "allCharacters";
         } else {
             return inputType.toString();
         }
@@ -356,16 +360,16 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
         inputType = inputType & ~28672; //28672 (0x00070000) 13,14,15bits (111 0000 0000 0000)
 
         switch (value) {
-            case AutocapitalizationType.none:
+            case "none":
                 //Do nothing, we have lowered the three bits above.
                 break;
-            case AutocapitalizationType.words:
+            case "words":
                 inputType = inputType | android.text.InputType.TYPE_TEXT_FLAG_CAP_WORDS; //8192 (0x00020000) 14th bit
                 break;
-            case AutocapitalizationType.sentences:
+            case "sentences":
                 inputType = inputType | android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES; //16384(0x00040000) 15th bit
                 break;
-            case AutocapitalizationType.allCharacters:
+            case "allCharacters":
                 inputType = inputType | android.text.InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS; //4096 (0x00010000) 13th bit
                 break;
             default:
diff --git a/tns-core-modules/ui/editable-text-base/editable-text-base.ios.ts b/tns-core-modules/ui/editable-text-base/editable-text-base.ios.ts
index 6adb77d29..c125d32f5 100644
--- a/tns-core-modules/ui/editable-text-base/editable-text-base.ios.ts
+++ b/tns-core-modules/ui/editable-text-base/editable-text-base.ios.ts
@@ -7,51 +7,54 @@ import { textProperty } from "ui/text-base";
 
 export * from "./editable-text-base-common";
 
-import { UpdateTextTrigger, KeyboardType, ReturnKeyType, AutocapitalizationType } from "ui/enums";
-
 export abstract class EditableTextBase extends EditableTextBaseCommon {
     public nativeView: UITextField | UITextView;
     public dismissSoftInput() {
         this.nativeView.resignFirstResponder();
     }
 
-    get [keyboardTypeProperty.native](): string {
+    get [keyboardTypeProperty.native](): "datetime"| "phone" | "number" | "url" | "email" | string {
         let keyboardType = this.nativeView.keyboardType;
         switch (keyboardType) {
             case UIKeyboardType.NumbersAndPunctuation:
-                return KeyboardType.number;
+                return "number";
 
             case UIKeyboardType.PhonePad:
-                return KeyboardType.phone;
+                return "phone";
 
             case UIKeyboardType.URL:
-                return KeyboardType.url;
+                return "url";
 
             case UIKeyboardType.EmailAddress:
-                return KeyboardType.email;
+                return "email";
 
             default:
                 return keyboardType.toString();
         }
     }
-    set [keyboardTypeProperty.native](value: string) {
+    set [keyboardTypeProperty.native](value: "datetime"| "phone" | "number" | "url" | "email" | string) {
         let newKeyboardType: UIKeyboardType;
         switch (value) {
-            case KeyboardType.datetime:
+            case "datetime":
                 newKeyboardType = UIKeyboardType.NumbersAndPunctuation;
                 break;
-            case KeyboardType.phone:
+
+            case "phone":
                 newKeyboardType = UIKeyboardType.PhonePad;
                 break;
-            case KeyboardType.number:
+
+            case "number":
                 newKeyboardType = UIKeyboardType.NumbersAndPunctuation;
                 break;
-            case KeyboardType.url:
+
+            case "url":
                 newKeyboardType = UIKeyboardType.URL;
-                break;
-            case KeyboardType.email:
+                break
+                ;
+            case "email":
                 newKeyboardType = UIKeyboardType.EmailAddress;
                 break;
+
             default:
                 let kt = +value;
                 if (!isNaN(kt)) {
@@ -65,44 +68,44 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
         this.nativeView.keyboardType = newKeyboardType;
     }
 
-    get [returnKeyTypeProperty.native](): string {
+    get [returnKeyTypeProperty.native](): "done" | "next" | "go" | "search" | "send" | string {
         let returnKeyType = this.nativeView.returnKeyType;
         switch (returnKeyType) {
             case UIReturnKeyType.Done:
-                return ReturnKeyType.done;
+                return "done";
 
             case UIReturnKeyType.Go:
-                return ReturnKeyType.go;
+                return "go";
 
             case UIReturnKeyType.Next:
-                return ReturnKeyType.next;
+                return "next";
 
             case UIReturnKeyType.Search:
-                return ReturnKeyType.search;
+                return "search";
 
             case UIReturnKeyType.Send:
-                return ReturnKeyType.send;
+                return "send";
 
             default:
                 return returnKeyType.toString();
         }
     }
-    set [returnKeyTypeProperty.native](value: string) {
+    set [returnKeyTypeProperty.native](value: "done" | "next" | "go" | "search" | "send" | string) {
         let newValue;
         switch (value) {
-            case ReturnKeyType.done:
+            case "done":
                 newValue = UIReturnKeyType.Done;
                 break;
-            case ReturnKeyType.go:
+            case "go":
                 newValue = UIReturnKeyType.Go;
                 break;
-            case ReturnKeyType.next:
+            case "next":
                 newValue = UIReturnKeyType.Next;
                 break;
-            case ReturnKeyType.search:
+            case "search":
                 newValue = UIReturnKeyType.Search;
                 break;
-            case ReturnKeyType.send:
+            case "send":
                 newValue = UIReturnKeyType.Send;
                 break;
             default:
@@ -118,38 +121,38 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
         this.nativeView.returnKeyType = newValue;
     }
 
-    get [autocapitalizationTypeProperty.native](): string {
+    get [autocapitalizationTypeProperty.native](): "none" | "words" | "sentences" | "allCharacters" {
         let autocapitalizationType = this.nativeView.autocapitalizationType;
         switch (autocapitalizationType) {
             case UITextAutocapitalizationType.None:
-                return AutocapitalizationType.none;
+                return "none";
 
             case UITextAutocapitalizationType.Words:
-                return AutocapitalizationType.words;
+                return "words";
 
             case UITextAutocapitalizationType.Sentences:
-                return AutocapitalizationType.sentences;
+                return "sentences";
 
             case UITextAutocapitalizationType.AllCharacters:
-                return AutocapitalizationType.allCharacters;
+                return "allCharacters";
 
             default:
                 throw new Error("Invalid autocapitalizationType value:" + autocapitalizationType);
         }
     }
-    set [autocapitalizationTypeProperty.native](value: string) {
+    set [autocapitalizationTypeProperty.native](value: "none" | "words" | "sentences" | "allCharacters") {
         let newValue: UITextAutocapitalizationType;
         switch (value) {
-            case AutocapitalizationType.none:
+            case "none":
                 newValue = UITextAutocapitalizationType.None;
                 break;
-            case AutocapitalizationType.words:
+            case "words":
                 newValue = UITextAutocapitalizationType.Words;
                 break;
-            case AutocapitalizationType.sentences:
+            case "sentences":
                 newValue = UITextAutocapitalizationType.Sentences;
                 break;
-            case AutocapitalizationType.allCharacters:
+            case "allCharacters":
                 newValue = UITextAutocapitalizationType.AllCharacters;
                 break;
             default:
diff --git a/tns-core-modules/ui/enums/enums.d.ts b/tns-core-modules/ui/enums/enums.d.ts
index b52784f46..beed7d8f3 100644
--- a/tns-core-modules/ui/enums/enums.d.ts
+++ b/tns-core-modules/ui/enums/enums.d.ts
@@ -224,6 +224,11 @@
          * The view is not visible and won't take place in the layout.
          */
         export var collapse: string;
+
+        /**
+         * The view is not visible but will take place in the layout.
+         */
+        export var hidden: string;
     }
 
     /**
diff --git a/tns-core-modules/ui/frame/frame.ios.ts b/tns-core-modules/ui/frame/frame.ios.ts
index 663f670c0..334b21134 100644
--- a/tns-core-modules/ui/frame/frame.ios.ts
+++ b/tns-core-modules/ui/frame/frame.ios.ts
@@ -259,8 +259,6 @@ export class Frame extends FrameBase {
     }
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
-        View.adjustChildLayoutParams(this.currentPage, widthMeasureSpec, heightMeasureSpec);
-
         let width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
         let widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
 
@@ -304,8 +302,6 @@ export class Frame extends FrameBase {
         if (this._navigateToEntry && this.currentPage) {
             this.layoutPage(this._navigateToEntry.resolvedPage);
         }
-
-        View.restoreChildOriginalParams(this.currentPage);
     }
 
     public layoutPage(page: Page): void {
diff --git a/tns-core-modules/ui/gestures/gestures.ios.ts b/tns-core-modules/ui/gestures/gestures.ios.ts
index 176ce2042..2cafb5562 100644
--- a/tns-core-modules/ui/gestures/gestures.ios.ts
+++ b/tns-core-modules/ui/gestures/gestures.ios.ts
@@ -88,6 +88,10 @@ export class GesturesObserver extends GesturesObserverBase {
         this._recognizers = {};
     }
 
+    public androidOnTouchEvent(motionEvent: android.view.MotionEvent): void {
+        //
+    }
+    
     public observe(type: GestureTypes) {
         if (this.target) {
             this.type = type;
diff --git a/tns-core-modules/ui/html-view/html-view-common.ts b/tns-core-modules/ui/html-view/html-view-common.ts
index 44253daba..5f282702b 100644
--- a/tns-core-modules/ui/html-view/html-view-common.ts
+++ b/tns-core-modules/ui/html-view/html-view-common.ts
@@ -1,19 +1 @@
-import definition = require("ui/html-view");
-import dependencyObservable = require("ui/core/dependency-observable");
-import proxy = require("ui/core/proxy");
-import view = require("ui/core/view");
-
-export class HtmlView extends view.View implements definition.HtmlView {
-    public static htmlProperty = new dependencyObservable.Property(
-        "html",
-        "HtmlView",
-        new proxy.PropertyMetadata(false, dependencyObservable.PropertyMetadataSettings.AffectsLayout)
-        );
-
-    get html(): string {
-        return this._getValue(HtmlView.htmlProperty);
-    }
-    set html(value: string) {
-        this._setValue(HtmlView.htmlProperty, value);
-    }
-}
\ No newline at end of file
+
\ No newline at end of file
diff --git a/tns-core-modules/ui/html-view/html-view.android.ts b/tns-core-modules/ui/html-view/html-view.android.ts
index a7d2fbb4a..25fa884e6 100644
--- a/tns-core-modules/ui/html-view/html-view.android.ts
+++ b/tns-core-modules/ui/html-view/html-view.android.ts
@@ -1,46 +1,41 @@
-import common = require("./html-view-common");
-import dependencyObservable = require("ui/core/dependency-observable");
-import proxy = require("ui/core/proxy");
-import * as typesModule from "utils/types";
+import { HtmlView as HtmlViewDefinition } from "ui/html-view";
+import { Property } from "ui/core/properties";
+import { View } from "ui/core/view";
 
-function onHtmlPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <HtmlView>data.object;
-    if (!view.android) {
-        return;
-    }
+export * from "ui/core/view";
 
-    var types: typeof typesModule = require("utils/types");
-    if (types.isString(data.newValue)) {
-        // If the data.newValue actually has a <a...> in it; we need to disable autolink mask
-        // it internally disables the coloring, but then the <a> links won't work..  So to support both
-        // styles of links (html and just text based) we have to manually enable/disable the autolink mask
-        var mask = 15;
-        if (data.newValue.search(/<a\s/i) >= 0) {
-            mask = 0;
-        }
-        view.android.setAutoLinkMask(mask);
-        view.android.setText(<any>android.text.Html.fromHtml(data.newValue));
-    } else {
-        view.android.setText("");
-    }
-}
-
-// register the setNativeValue callback
-(<proxy.PropertyMetadata>common.HtmlView.htmlProperty.metadata).onSetNativeValue = onHtmlPropertyChanged;
-
-global.moduleMerge(common, exports);
-
-export class HtmlView extends common.HtmlView {
+export class HtmlView extends View implements HtmlViewDefinition {
     private _android: android.widget.TextView;
 
     get android(): android.widget.TextView {
         return this._android;
     }
 
+    public html: string;
+
     public _createUI() {
         this._android = new android.widget.TextView(this._context);
-        // This makes the html <a href...> vwork
+        // This makes the html <a href...> work
         this._android.setLinksClickable(true);
         this._android.setMovementMethod(android.text.method.LinkMovementMethod.getInstance());
     }
+
+    get [htmlProperty.native](): string {
+        return "";
+    }
+    set [htmlProperty.native](value: string) {
+        // If the data.newValue actually has a <a...> in it; we need to disable autolink mask
+        // it internally disables the coloring, but then the <a> links won't work..  So to support both
+        // styles of links (html and just text based) we have to manually enable/disable the autolink mask
+        let mask = 15;
+        if (value.search(/<a\s/i) >= 0) {
+            mask = 0;
+        }
+        this._android.setAutoLinkMask(mask);
+        this._android.setText(<any>android.text.Html.fromHtml(value));
+    }
 }
+
+// TODO: Can we use Label.ios optimization for affectsLayout???
+export const htmlProperty = new Property<HtmlView, string>({ name: "html", defaultValue: "", affectsLayout: true });
+htmlProperty.register(HtmlView);
\ No newline at end of file
diff --git a/tns-core-modules/ui/html-view/html-view.d.ts b/tns-core-modules/ui/html-view/html-view.d.ts
index a132b0b2f..092835b15 100644
--- a/tns-core-modules/ui/html-view/html-view.d.ts
+++ b/tns-core-modules/ui/html-view/html-view.d.ts
@@ -2,21 +2,15 @@
  * Contains the HtmlView class, which represents a standard html view widget.
  */
 declare module "ui/html-view" {
-    import view = require("ui/core/view");
-    import dependencyObservable = require("ui/core/dependency-observable");
+    import { View } from "ui/core/view";
+    import { Property } from "ui/core/properties";
 
     /**
      * Represents a view with html content. Use this component instead WebView when you want to show just static HTML content.
      * [iOS support](https://developer.apple.com/library/ios/documentation/UIKit/Reference/NSAttributedString_UIKit_Additions/#//apple_ref/occ/instm/NSAttributedString/initWithData:options:documentAttributes:error:)
      * [android support](http://developer.android.com/reference/android/text/Html.html)
      */
-    export class HtmlView extends view.View {
-
-        /**
-         * Dependency property used to support binding operations for the html of the current HtmlView instance.
-         */
-        public static htmlProperty: dependencyObservable.Property;
-
+    export class HtmlView extends View {
         /**
          * Gets the native [android widget](http://developer.android.com/reference/android/widget/TextView.html) that represents the user interface for this component. Valid only when running on Android OS.
          */
@@ -32,4 +26,6 @@ declare module "ui/html-view" {
          */
         html: string;
     }
+
+    export const htmlProperty: Property<HtmlView, string>;
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/html-view/html-view.ios.ts b/tns-core-modules/ui/html-view/html-view.ios.ts
index 30c19ef86..99bd5667c 100644
--- a/tns-core-modules/ui/html-view/html-view.ios.ts
+++ b/tns-core-modules/ui/html-view/html-view.ios.ts
@@ -1,32 +1,10 @@
-import common = require("./html-view-common");
-import dependencyObservable = require("ui/core/dependency-observable");
-import proxy = require("ui/core/proxy");
-import * as utils from "utils/utils";
-import * as view from "ui/core/view";
+import { HtmlView as HtmlViewDefinition } from "ui/html-view";
+import { Property } from "ui/core/properties";
+import { View, layout } from "ui/core/view";
 
-function onHtmlPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <HtmlView>data.object;
-    if (!view.ios) {
-        return;
-    }
+export * from "ui/core/view";
 
-    var types = require("utils/types");
-
-    if (types.isString(data.newValue)) {
-        var htmlString = NSString.stringWithString(data.newValue);
-        var nsData = htmlString.dataUsingEncoding(NSUnicodeStringEncoding);
-        view.ios.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(nsData, <any>{ [NSDocumentTypeDocumentAttribute]: NSHTMLTextDocumentType }, null);
-    } else {
-        view.ios.attributedText = NSAttributedString.new();
-    }
-}
-
-// register the setNativeValue callback
-(<proxy.PropertyMetadata>common.HtmlView.htmlProperty.metadata).onSetNativeValue = onHtmlPropertyChanged;
-
-global.moduleMerge(common, exports);
-
-export class HtmlView extends common.HtmlView {
+export class HtmlView extends View implements HtmlViewDefinition {
     private _ios: UITextView;
 
     constructor() {
@@ -40,6 +18,8 @@ export class HtmlView extends common.HtmlView {
         this._ios.dataDetectorTypes = UIDataDetectorTypes.All;
     }
 
+    public html: string;
+
     get ios(): UITextView {
         return this._ios;
     }
@@ -52,32 +32,45 @@ export class HtmlView extends common.HtmlView {
         var nativeView = this._nativeView;
         if (nativeView) {
 
-            var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
-            var widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
+            let width = layout.getMeasureSpecSize(widthMeasureSpec);
+            let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
 
-            var height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
-            var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
+            let height = layout.getMeasureSpecSize(heightMeasureSpec);
+            let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
 
-            if (widthMode === utils.layout.UNSPECIFIED) {
+            if (widthMode === layout.UNSPECIFIED) {
                 width = Number.POSITIVE_INFINITY;
             }
 
-            if (heightMode === utils.layout.UNSPECIFIED) {
+            if (heightMode === layout.UNSPECIFIED) {
                 height = Number.POSITIVE_INFINITY;
             }
 
-            var nativeSize = nativeView.sizeThatFits(CGSizeMake(width, height));
-            var labelWidth = nativeSize.width;
+            let nativeSize = nativeView.sizeThatFits(CGSizeMake(width, height));
+            let labelWidth = nativeSize.width;
 
             labelWidth = Math.min(labelWidth, width);
+            let style = this.style;
+            let measureWidth = Math.max(labelWidth, style.effectiveMinWidth);
+            let measureHeight = Math.max(nativeSize.height, style.effectiveMinHeight);
 
-            var measureWidth = Math.max(labelWidth, this.minWidth);
-            var measureHeight = Math.max(nativeSize.height, this.minHeight);
-
-            var widthAndState = view.View.resolveSizeAndState(measureWidth, width, widthMode, 0);
-            var heightAndState = view.View.resolveSizeAndState(measureHeight, height, heightMode, 0);
+            let widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
+            let heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
 
             this.setMeasuredDimension(widthAndState, heightAndState);
         }
     }
-} 
+
+    get [htmlProperty.native](): string {
+        return "";
+    }
+    set [htmlProperty.native](value: string) {
+        const htmlString = NSString.stringWithString(value + "");
+        const nsData = htmlString.dataUsingEncoding(NSUnicodeStringEncoding);
+        this._ios.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(nsData, <any>{ [NSDocumentTypeDocumentAttribute]: NSHTMLTextDocumentType }, null);
+    }
+}
+
+// TODO: Can we use Label.ios optimization for affectsLayout???
+export const htmlProperty = new Property<HtmlView, string>({ name: "html", defaultValue: "", affectsLayout: true });
+htmlProperty.register(HtmlView);
\ No newline at end of file
diff --git a/tns-core-modules/ui/image/image-common.ts b/tns-core-modules/ui/image/image-common.ts
index 4961091db..5d7ce0efa 100644
--- a/tns-core-modules/ui/image/image-common.ts
+++ b/tns-core-modules/ui/image/image-common.ts
@@ -1,173 +1,127 @@
-import dependencyObservable = require("ui/core/dependency-observable");
-import view = require("ui/core/view");
-import proxy = require("ui/core/proxy");
-import imageSource = require("image-source");
-import imageAssetModule = require("image-asset");
-import definition = require("ui/image");
-import enums = require("ui/enums");
-import platform = require("platform");
-import utils = require("utils/utils");
-import color = require("color");
+import { Image as ImageDefinition } from "ui/image";
+import { View } from "ui/core/view";
+import { ImageSource, fromAsset, fromNativeSource, fromUrl } from "image-source";
+import { ImageAsset } from "image-asset";
+import { isIOS } from "platform";
+import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX } from "utils/utils";
+import { Color } from "color";
+import { Property, CssProperty } from "../core/properties";
+import { Style } from "ui/styling/style";
 
-import * as types from "utils/types";
+export * from "ui/core/view";
 
-var SRC = "src";
-var IMAGE_SOURCE = "imageSource";
-var LOAD_MODE = "loadMode";
+export abstract class ImageBase extends View implements ImageDefinition {
+    public imageSource: ImageSource;
+    public src: string | ImageSource;
+    public isLoading: boolean;
+    public stretch: "none" | "aspectFill" | "aspectFit" | "fill";
+    public loadMode: "sync" | "async";
 
-var SYNC = "sync";
-var ASYNC = "async";
-
-var IMAGE = "Image";
-var ISLOADING = "isLoading";
-var STRETCH = "stretch";
-
-// on Android we explicitly set propertySettings to None because android will invalidate its layout (skip unnecessary native call).
-var AffectsLayout = platform.device.os === platform.platformNames.android ? dependencyObservable.PropertyMetadataSettings.None : dependencyObservable.PropertyMetadataSettings.AffectsLayout;
-
-function onSrcPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var image = <Image>data.object;
-    // Check for delay...
-    image._createImageSourceFromSrc();
-}
-
-export class Image extends view.View implements definition.Image {
-
-    public static srcProperty = new dependencyObservable.Property(SRC, IMAGE,
-        new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onSrcPropertyChanged));
-
-    // None on purpose. for iOS we trigger it manually if needed. Android layout handles it.
-    public static imageSourceProperty = new dependencyObservable.Property(IMAGE_SOURCE, IMAGE,
-        new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None));
-
-    public static isLoadingProperty = new dependencyObservable.Property(ISLOADING, IMAGE,
-        new proxy.PropertyMetadata(false, dependencyObservable.PropertyMetadataSettings.None));
-
-    public static stretchProperty = new dependencyObservable.Property(STRETCH, IMAGE,
-        new proxy.PropertyMetadata(enums.Stretch.aspectFit, AffectsLayout));
-        
-    public static loadModeProperty = new dependencyObservable.Property(LOAD_MODE, IMAGE,
-        new proxy.PropertyMetadata(SYNC, 0, null, (value) => value === SYNC || value === ASYNC, null));
-
-    get imageSource(): imageSource.ImageSource {
-        return this._getValue(Image.imageSourceProperty);
-    }
-    set imageSource(value: imageSource.ImageSource) {
-        this._setValue(Image.imageSourceProperty, value);
-    }
-
-    get src(): any {
-        return this._getValue(Image.srcProperty);
-    }
-    set src(value: any) {
-        this._setValue(Image.srcProperty, value);
-    }
-
-    get isLoading(): boolean {
-        return this._getValue(Image.isLoadingProperty);
-    }
-
-    get stretch(): string {
-        return this._getValue(Image.stretchProperty);
-    }
-    set stretch(value: string) {
-        this._setValue(Image.stretchProperty, value);
-    }
-
-    get loadMode(): "sync" | "async" {
-        return this._getValue(Image.loadModeProperty);
-    }
-    set loadMode(value: "sync" | "async") {
-        this._setValue(Image.loadModeProperty, value);
-    }
-
-    get tintColor(): color.Color {
+    get tintColor(): Color {
         return this.style.tintColor;
     }
-
-    set tintColor(value: color.Color) {
+    set tintColor(value: Color) {
         this.style.tintColor = value;
-    } 
+    }
 
     public _setNativeImage(nativeImage: any) {
         //
     }
-    
+
     /**
      * @internal
      */
     public _createImageSourceFromSrc(): void {
-        var value = this.src;
-        if (types.isString(value)) {
+        let value = this.src;
+        let originalValue = value;
+        let sync = this.loadMode === "sync";
+        if (typeof value === "string") {
             value = value.trim();
             this.imageSource = null;
             this["_url"] = value;
 
-            this._setValue(Image.isLoadingProperty, true);
+            this.isLoading = true;
 
-            var source = new imageSource.ImageSource();
-            var imageLoaded = () => {
+            let source = new ImageSource();
+            let imageLoaded = () => {
                 let currentValue = this.src;
-                if (!types.isString(this.src) || value !== currentValue.trim()) {
+                if (currentValue !== originalValue) {
                     return;
                 }
                 this.imageSource = source;
-                this._setValue(Image.isLoadingProperty, false);
+                this.isLoading = false;
             }
-            if (utils.isDataURI(value)) {
-                var base64Data = value.split(",")[1];
-                if (types.isDefined(base64Data)) {
-                    if (this.loadMode === SYNC) {
+            if (isDataURI(value)) {
+                let base64Data = value.split(",")[1];
+                if (base64Data !== undefined) {
+                    if (sync) {
                         source.loadFromBase64(base64Data);
                         imageLoaded();
-                    } else if (this.loadMode === ASYNC) {
+                    } else {
                         source.fromBase64(base64Data).then(imageLoaded);
                     }
                 }
             }
-            else if (imageSource.isFileOrResourcePath(value)) {
-                if (value.indexOf(utils.RESOURCE_PREFIX) === 0) {
-                    let resPath = value.substr(utils.RESOURCE_PREFIX.length);
-                    if (this.loadMode === SYNC) {
+            else if (isFileOrResourcePath(value)) {
+                if (value.indexOf(RESOURCE_PREFIX) === 0) {
+                    let resPath = value.substr(RESOURCE_PREFIX.length);
+                    if (sync) {
                         source.loadFromResource(resPath);
                         imageLoaded();
-                    } else if (this.loadMode === ASYNC) {
+                    } else {
                         this.imageSource = null;
                         source.fromResource(resPath).then(imageLoaded);
                     }
                 } else {
-                    if (this.loadMode === SYNC) {
+                    if (sync) {
                         source.loadFromFile(value);
                         imageLoaded();
-                    } else if (this.loadMode === ASYNC) {
+                    } else {
                         this.imageSource = null;
                         source.fromFile(value).then(imageLoaded);
                     }
                 }
             } else {
                 this.imageSource = null;
-                imageSource.fromUrl(value).then((r) => {
+                fromUrl(value).then((r) => {
                     if (this["_url"] === value) {
                         this.imageSource = r;
-                        this._setValue(Image.isLoadingProperty, false);
+                        this.isLoading = false;
                     }
                 });
             }
         }
-        else if (value instanceof imageSource.ImageSource) {
+        else if (value instanceof ImageSource) {
             // Support binding the imageSource trough the src property
             this.imageSource = value;
-            this._setValue(Image.isLoadingProperty, false);
+            this.isLoading = false;
         }
-        else if (value instanceof imageAssetModule.ImageAsset) {
-            imageSource.fromAsset(value).then((result) => {
+        else if (value instanceof ImageAsset) {
+            fromAsset(value).then((result) => {
                 this.imageSource = result;
-                this._setValue(Image.isLoadingProperty, false);
+                this.isLoading = false;
             });
         }
         else {
-            this.imageSource = imageSource.fromNativeSource(value);
-            this._setValue(Image.isLoadingProperty, false);
+            this.imageSource = fromNativeSource(value);
+            this.isLoading = false;
         }
     }
-}
\ No newline at end of file
+}
+
+export const imageSourceProperty = new Property<ImageBase, ImageSource>({ name: "imageSource" });
+
+export const srcProperty = new Property<ImageBase, any>({ name: "src" });
+srcProperty.register(ImageBase);
+
+export const loadModeProperty = new Property<ImageBase, "sync" | "async">({ name: "loadMode", defaultValue: "async" });
+loadModeProperty.register(ImageBase);
+
+export const isLoadingProperty = new Property<ImageBase, boolean>({ name: "isLoading", defaultValue: false });
+isLoadingProperty.register(ImageBase);
+
+export const stretchProperty = new Property<ImageBase, "none" | "aspectFill" | "aspectFit" | "fill">({ name: "stretch", defaultValue: "aspectFit", affectsLayout: isIOS })
+stretchProperty.register(ImageBase);
+
+export const tintColorProperty = new CssProperty<Style, Color>({ name: "tintColor", cssName: "tint-color", equalityComparer: Color.equals, valueConverter: (value) => new Color(value) });
+tintColorProperty.register(Style);
\ No newline at end of file
diff --git a/tns-core-modules/ui/image/image.android.ts b/tns-core-modules/ui/image/image.android.ts
index c0061a1e2..f45353471 100644
--- a/tns-core-modules/ui/image/image.android.ts
+++ b/tns-core-modules/ui/image/image.android.ts
@@ -1,18 +1,15 @@
-import imageCommon = require("./image-common");
-import dependencyObservable = require("ui/core/dependency-observable");
-import proxy = require("ui/core/proxy");
-import style = require("ui/styling/style");
-import view = require("ui/core/view");
-import enums = require("ui/enums");
-import types = require("utils/types");
-import imageSource = require("image-source");
-import utils = require("utils/utils");
-import * as fs from "file-system";
+import { ImageBase, stretchProperty, imageSourceProperty, tintColorProperty } from "./image-common";
+import { unsetValue } from "ui/core/dependency-observable";
+import { Color } from "color";
+import { ImageSource } from "image-source";
+import { path, knownFolders } from "file-system";
+import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX } from "utils/utils";
 
-global.moduleMerge(imageCommon, exports);
+export * from "./image-common";
 
 const FILE_PREFIX = "file:///";
-let ASYNC = "async";
+const ASYNC = "async";
+
 let imageFetcher: org.nativescript.widgets.image.Fetcher;
 let imageCache: org.nativescript.widgets.image.Cache;
 
@@ -24,38 +21,6 @@ export enum CacheMode {
 
 export let currentCacheMode: CacheMode;
 
-function onStretchPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    let image = <Image>data.object;
-    if (!image.android) {
-        return;
-    }
-
-    switch (data.newValue) {
-        case enums.Stretch.aspectFit:
-            image.android.setScaleType(android.widget.ImageView.ScaleType.FIT_CENTER);
-            break;
-        case enums.Stretch.aspectFill:
-            image.android.setScaleType(android.widget.ImageView.ScaleType.CENTER_CROP);
-            break;
-        case enums.Stretch.fill:
-            image.android.setScaleType(android.widget.ImageView.ScaleType.FIT_XY);
-            break;
-        case enums.Stretch.none:
-        default:
-            image.android.setScaleType(android.widget.ImageView.ScaleType.MATRIX);
-            break;
-    }
-}
-
-function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var image = <Image>data.object;
-    if (!image.android) {
-        return;
-    }
-
-    image._setNativeImage(data.newValue);
-}
-
 export function initImageCache(context: android.content.Context, mode = CacheMode.diskAndMemory, memoryCacheSize: number = 0.25, diskCacheSize: number = 10 * 1024 * 1024): void {
     if (currentCacheMode === mode) {
         return;
@@ -83,12 +48,9 @@ export function initImageCache(context: android.content.Context, mode = CacheMod
     imageFetcher.initCache();
 }
 
-// register the setNativeValue callback
-(<proxy.PropertyMetadata>imageCommon.Image.imageSourceProperty.metadata).onSetNativeValue = onImageSourcePropertyChanged;
-(<proxy.PropertyMetadata>imageCommon.Image.stretchProperty.metadata).onSetNativeValue = onStretchPropertyChanged;
-
-export class Image extends imageCommon.Image {
+export class Image extends ImageBase {
     private _android: org.nativescript.widgets.ImageView;
+    private _imageLoadedListener: org.nativescript.widgets.image.Worker.OnImageLoadedListener;
 
     public decodeWidth = 0;
     public decodeHeight = 0;
@@ -126,64 +88,89 @@ export class Image extends imageCommon.Image {
         let value = this.src;
         let async = this.loadMode === ASYNC;
         let owner = new WeakRef<Image>(this);
-        let listener = new org.nativescript.widgets.image.Worker.OnImageLoadedListener({
-            onImageLoaded: function (success) {
-                let that = owner.get();
-                if (that) {
-                    that._setValue(Image.isLoadingProperty, false);
-                }
-            }
-        });
-
-        this._resetValue(Image.imageSourceProperty);
-        if (types.isString(value)) {
+        this._imageLoadedListener = this._imageLoadedListener || new ImageLoadedListener(new WeakRef(this));
+        
+        this.imageSource = unsetValue;
+        if (typeof value === "string") {
             value = value.trim();
-            this._setValue(Image.isLoadingProperty, true);
+            this.isLoading = true;
 
-            if (utils.isDataURI(value)) {
+            if (isDataURI(value)) {
                 // TODO: Check with runtime what should we do in case of base64 string.
                 super._createImageSourceFromSrc();
             }
             else if (imageSource.isFileOrResourcePath(value)) {
                 if (value.indexOf(utils.RESOURCE_PREFIX) === 0) {
-                    imageView.setUri(value, this.decodeWidth, this.decodeHeight, this.useCache, async, listener);
+                    imageView.setUri(value, this.decodeWidth, this.decodeHeight, this.useCache, async, this._imageLoadedListener);
                 }
                 else {
                     let fileName = value;
                     if (fileName.indexOf("~/") === 0) {
-                        fileName = fs.path.join(fs.knownFolders.currentApp().path, fileName.replace("~/", ""));
+                        fileName = path.join(knownFolders.currentApp().path, fileName.replace("~/", ""));
                     }
 
-                    imageView.setUri(FILE_PREFIX + fileName, this.decodeWidth, this.decodeHeight, this.useCache, async, listener);
+                    imageView.setUri(FILE_PREFIX + fileName, this.decodeWidth, this.decodeHeight, this.useCache, async, this._imageLoadedListener);
                 }
             }
             else {
                 // For backwards compatibility http always use async loading.
-                imageView.setUri(value, this.decodeWidth, this.decodeHeight, this.useCache, true, listener);
+                imageView.setUri(value, this.decodeWidth, this.decodeHeight, this.useCache, true, this._imageLoadedListener);
             }
         } else {
             super._createImageSourceFromSrc();
         }
     }
-}
 
-export class ImageStyler implements style.Styler {
-    // tint color
-    private static setTintColorProperty(view: view.View, newValue: any) {
-        var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
-        imageView.setColorFilter(newValue);
+    get [stretchProperty.native](): "aspectFit" {
+        return "aspectFit";
+    }
+    set [stretchProperty.native](value: "none" | "aspectFill" | "aspectFit" | "fill") {
+        switch (value) {
+            case "aspectFit":
+                this.android.setScaleType(android.widget.ImageView.ScaleType.FIT_CENTER);
+                break;
+            case "aspectFill":
+                this.android.setScaleType(android.widget.ImageView.ScaleType.CENTER_CROP);
+                break;
+            case "fill":
+                this.android.setScaleType(android.widget.ImageView.ScaleType.FIT_XY);
+                break;
+            case "none":
+            default:
+                this.android.setScaleType(android.widget.ImageView.ScaleType.MATRIX);
+                break;
+        }
     }
 
-    private static resetTintColorProperty(view: view.View, nativeValue: number) {
-        var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
-        imageView.clearColorFilter();
+    get [tintColorProperty.native](): Color {
+        return undefined;
+    }
+    set [tintColorProperty.native](value: Color) {
+        if (value === undefined) {
+            this._android.clearColorFilter();
+        } else {
+            this._android.setColorFilter(value.android);
+        }
     }
 
-    public static registerHandlers() {
-        style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler(
-            ImageStyler.setTintColorProperty,
-            ImageStyler.resetTintColorProperty), "Image");
+    get [imageSourceProperty.native](): ImageSource {
+        return undefined;
+    }
+    set [imageSourceProperty.native](value: ImageSource) {
+        this._setNativeImage(value ? value.android : null);
     }
 }
 
-ImageStyler.registerHandlers();
\ No newline at end of file
+@Interfaces([org.nativescript.widgets.image.Worker.OnImageLoadedListener])
+class ImageLoadedListener implements org.nativescript.widgets.image.Worker.OnImageLoadedListener {
+    constructor(private owner: WeakRef<Image>) {
+        return global.__native(this);
+    }
+
+    onImageLoaded(success: boolean): void {
+        let owner = this.owner.get();
+        if (owner) {
+            owner.isLoading = false;
+        }
+    }
+}
diff --git a/tns-core-modules/ui/image/image.d.ts b/tns-core-modules/ui/image/image.d.ts
index 8d588c1ba..8be28e0aa 100644
--- a/tns-core-modules/ui/image/image.d.ts
+++ b/tns-core-modules/ui/image/image.d.ts
@@ -2,20 +2,16 @@
  * Contains the Image class, which represents an image widget.
  */
 declare module "ui/image" {
-    import dependencyObservable = require("ui/core/dependency-observable");
-    import imageSource = require("image-source");
-    import view = require("ui/core/view");
-    import color = require("color");
+    import { View } from "ui/core/view";
+    import { Property, CssProperty } from "ui/core/properties";
+    import { Color } from "color";
+    import { ImageSource } from "image-source";
+    import { Style } from "ui/styling/style";
 
     /**
      * Represents a class that provides functionality for loading and streching image(s).
      */
-    export class Image extends view.View {
-        public static srcProperty: dependencyObservable.Property;
-        public static imageSourceProperty: dependencyObservable.Property;
-        public static isLoadingProperty: dependencyObservable.Property;
-        public static stretchProperty: dependencyObservable.Property;
-
+    export class Image extends View {
         /**
          * Gets the native [android widget](http://developer.android.com/reference/android/widget/ImageView.html) that represents the user interface for this component. Valid only when running on Android OS.
          */
@@ -29,7 +25,7 @@ declare module "ui/image" {
         /**
          * Gets or sets the image source of the image.
          */
-        imageSource: imageSource.ImageSource;
+        imageSource: ImageSource;
 
         /**
          * Gets or sets the source of the Image. This can be either an URL string or a native image instance.
@@ -39,23 +35,31 @@ declare module "ui/image" {
         /**
          * Gets a value indicating if the image is currently loading
          */
-        isLoading: boolean;
+        readonly isLoading: boolean;
 
         /**
          * Gets or sets the image stretch mode.
          */
-        stretch: string;
-        
+        stretch: "none" | "aspectFill" | "aspectFit" | "fill";
+
         /**
          * Gets or sets the loading strategy for images on the local file system:
-         * - **sync** *(default)* - blocks the UI if necessary to display immediately, good for small icons.
-         * - **async** - will try to load in the background, may appear with short delay, good for large images.
+         * - **sync** - blocks the UI if necessary to display immediately, good for small icons.
+         * - **async** *(default)* - will load in the background, may appear with short delay, good for large images.
+         * When loading images from web they are always loaded **async** no matter of loadMode value.
          */
-        loadMode: string; // "sync" | "async";
+        loadMode: "sync" | "async";
 
         /**
          * A color used to tint template images.
          */
-        tintColor: color.Color;
+        tintColor: Color;
     }
+
+    export const imageSourceProperty: Property<Image, ImageSource>;
+    export const srcProperty: Property<Image, any>;
+    export const isLoadingProperty: Property<Image, string>;
+    export const loadMode: Property<Image, "sync" | "async">;
+    export const stretchProperty: Property<Image, "none" | "aspectFill" | "aspectFit" | "fill">;
+    export const tintColorProperty: CssProperty<Style, Color>;
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/image/image.ios.ts b/tns-core-modules/ui/image/image.ios.ts
index 1dedd26cd..fc62e1589 100644
--- a/tns-core-modules/ui/image/image.ios.ts
+++ b/tns-core-modules/ui/image/image.ios.ts
@@ -1,44 +1,11 @@
-import imageCommon = require("./image-common");
-import dependencyObservable = require("ui/core/dependency-observable");
-import proxy = require("ui/core/proxy");
-import enums = require("ui/enums");
-import style = require("ui/styling/style");
-import view = require("ui/core/view");
-import * as trace from "trace";
-import * as utils from "utils/utils";
+import { ImageBase, stretchProperty, imageSourceProperty, tintColorProperty, layout } from "./image-common";
+import { Color } from "color";
+import { ImageSource } from "image-source";
+import { enable as traceEnabled, write as traceWrite, categories as traceCategories} from "trace";
 
-global.moduleMerge(imageCommon, exports);
+export * from "./image-common";;
 
-function onStretchPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var image = <Image>data.object;
-
-    switch (data.newValue) {
-        case enums.Stretch.aspectFit:
-            image.ios.contentMode = UIViewContentMode.ScaleAspectFit;
-            break;
-        case enums.Stretch.aspectFill:
-            image.ios.contentMode = UIViewContentMode.ScaleAspectFill;
-            break;
-        case enums.Stretch.fill:
-            image.ios.contentMode = UIViewContentMode.ScaleToFill;
-            break;
-        case enums.Stretch.none:
-        default:
-            image.ios.contentMode = UIViewContentMode.TopLeft;
-            break;
-    }
-}
-
-function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var image = <Image>data.object;
-    image._setNativeImage(data.newValue ? data.newValue.ios : null);
-}
-
-// register the setNativeValue callback
-(<proxy.PropertyMetadata>imageCommon.Image.imageSourceProperty.metadata).onSetNativeValue = onImageSourcePropertyChanged;
-(<proxy.PropertyMetadata>imageCommon.Image.stretchProperty.metadata).onSetNativeValue = onStretchPropertyChanged;
-
-export class Image extends imageCommon.Image {
+export class Image extends ImageBase {
     private _ios: UIImageView;
     private _imageSourceAffectsLayout: boolean = true;
     private _templateImageWasCreated: boolean = false;
@@ -57,22 +24,18 @@ export class Image extends imageCommon.Image {
         return this._ios;
     }
 
-    public _setTintColor(value: any) {
+    private setTintColor(value: Color) {
         if (value !== null && this._ios.image && !this._templateImageWasCreated) {
             this._ios.image = this._ios.image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
             this._templateImageWasCreated = true;
         }
-        this._ios.tintColor = value;
+        this._ios.tintColor = value ? value.ios : null;
     }
 
-    public _setNativeImage(nativeImage: any) {
-        if (this.style.tintColor && nativeImage) {
-            nativeImage = nativeImage.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
-            this._templateImageWasCreated = true;
-        } else {
-            this._templateImageWasCreated = false;
-        }
+    public _setNativeImage(nativeImage: UIImage) {
         this.ios.image = nativeImage;
+        this._templateImageWasCreated = false;
+        this.setTintColor(this.style.tintColor);
 
         if (this._imageSourceAffectsLayout) {
             this.requestLayout();
@@ -81,49 +44,50 @@ export class Image extends imageCommon.Image {
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
         // We don't call super because we measure native view with specific size.     
-        var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
-        var widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
+        let width = layout.getMeasureSpecSize(widthMeasureSpec);
+        let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
 
-        var height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
-        var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
+        let height = layout.getMeasureSpecSize(heightMeasureSpec);
+        let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
 
-        var nativeWidth = this.imageSource ? this.imageSource.width : 0;
-        var nativeHeight = this.imageSource ? this.imageSource.height : 0;
+        let nativeWidth = this.imageSource ? this.imageSource.width : 0;
+        let nativeHeight = this.imageSource ? this.imageSource.height : 0;
 
-        var measureWidth = Math.max(nativeWidth, this.minWidth);
-        var measureHeight = Math.max(nativeHeight, this.minHeight);
+        let style = this.style;
+        let measureWidth = Math.max(nativeWidth, style.effectiveMinWidth);
+        let measureHeight = Math.max(nativeHeight, style.effectiveMinHeight);
+
+        let finiteWidth: boolean = widthMode !== layout.UNSPECIFIED;
+        let finiteHeight: boolean = heightMode !== layout.UNSPECIFIED;
+
+        this._imageSourceAffectsLayout = widthMode !== layout.EXACTLY || heightMode !== layout.EXACTLY;
 
-        var finiteWidth: boolean = widthMode !== utils.layout.UNSPECIFIED;
-        var finiteHeight: boolean = heightMode !== utils.layout.UNSPECIFIED;
-        
-        this._imageSourceAffectsLayout = widthMode !== utils.layout.EXACTLY || heightMode !== utils.layout.EXACTLY;
-        
         if (nativeWidth !== 0 && nativeHeight !== 0 && (finiteWidth || finiteHeight)) {
-            var scale = Image.computeScaleFactor(width, height, finiteWidth, finiteHeight, nativeWidth, nativeHeight, this.stretch);
-            var resultW = Math.round(nativeWidth * scale.width);
-            var resultH = Math.round(nativeHeight * scale.height);
+            let scale = Image.computeScaleFactor(width, height, finiteWidth, finiteHeight, nativeWidth, nativeHeight, this.stretch);
+            let resultW = Math.round(nativeWidth * scale.width);
+            let resultH = Math.round(nativeHeight * scale.height);
 
             measureWidth = finiteWidth ? Math.min(resultW, width) : resultW;
             measureHeight = finiteHeight ? Math.min(resultH, height) : resultH;
 
-            if (trace.enabled) {
-                trace.write("Image stretch: " + this.stretch +
+            if (traceEnabled) {
+                traceWrite("Image stretch: " + this.stretch +
                     ", nativeWidth: " + nativeWidth +
-                    ", nativeHeight: " + nativeHeight, trace.categories.Layout);
+                    ", nativeHeight: " + nativeHeight, traceCategories.Layout);
             }
         }
 
-        var widthAndState = Image.resolveSizeAndState(measureWidth, width, widthMode, 0);
-        var heightAndState = Image.resolveSizeAndState(measureHeight, height, heightMode, 0);
+        let widthAndState = Image.resolveSizeAndState(measureWidth, width, widthMode, 0);
+        let heightAndState = Image.resolveSizeAndState(measureHeight, height, heightMode, 0);
 
         this.setMeasuredDimension(widthAndState, heightAndState);
     }
 
     private static computeScaleFactor(measureWidth: number, measureHeight: number, widthIsFinite: boolean, heightIsFinite: boolean, nativeWidth: number, nativeHeight: number, imageStretch: string): { width: number; height: number } {
-        var scaleW = 1;
-        var scaleH = 1;
+        let scaleW = 1;
+        let scaleH = 1;
 
-        if ((imageStretch === enums.Stretch.aspectFill || imageStretch === enums.Stretch.aspectFit || imageStretch === enums.Stretch.fill) &&
+        if ((imageStretch === "aspectFill" || imageStretch === "aspectFit" || imageStretch === "fill") &&
             (widthIsFinite || heightIsFinite)) {
 
             scaleW = (nativeWidth > 0) ? measureWidth / nativeWidth : 0;
@@ -138,11 +102,11 @@ export class Image extends imageCommon.Image {
             else {
                 // No infinite dimensions.
                 switch (imageStretch) {
-                    case enums.Stretch.aspectFit:
+                    case "aspectFit":
                         scaleH = scaleW < scaleH ? scaleW : scaleH;
                         scaleW = scaleH;
                         break;
-                    case enums.Stretch.aspectFill:
+                    case "aspectFill":
                         scaleH = scaleW > scaleH ? scaleW : scaleH;
                         scaleW = scaleH;
                         break;
@@ -151,24 +115,39 @@ export class Image extends imageCommon.Image {
         }
         return { width: scaleW, height: scaleH };
     }
-} 
 
-export class ImageStyler implements style.Styler {
-    //Text color methods
-    private static setTintColorProperty(view: view.View, newValue: any) {
-        let image = <Image>view;
-        image._setTintColor(newValue);
-    } 
-
-    private static resetTintColorProperty(view: view.View, nativeValue: any) {
-        view.ios.tintColor = null; 
+    get [stretchProperty.native](): "aspectFit" {
+        return "aspectFit";
+    }
+    set [stretchProperty.native](value: "none" | "aspectFill" | "aspectFit" | "fill") {
+        switch (value) {
+            case "aspectFit":
+                this._ios.contentMode = UIViewContentMode.ScaleAspectFit;
+                break;
+            case "aspectFill":
+                this._ios.contentMode = UIViewContentMode.ScaleAspectFill;
+                break;
+            case "fill":
+                this._ios.contentMode = UIViewContentMode.ScaleToFill;
+                break;
+            case "none":
+            default:
+                this._ios.contentMode = UIViewContentMode.TopLeft;
+                break;
+        }
     }
 
-    public static registerHandlers() {
-        style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler(
-            ImageStyler.setTintColorProperty,
-            ImageStyler.resetTintColorProperty), "Image");
+    get [tintColorProperty.native](): Color {
+        return undefined;
+    }
+    set [tintColorProperty.native](value: Color) {
+        this.setTintColor(value);
     }
-}
 
-ImageStyler.registerHandlers();
+    get [imageSourceProperty.native](): ImageSource {
+        return undefined;
+    }
+    set [imageSourceProperty.native](value: ImageSource) {
+        this._setNativeImage(value ? value.ios : null);
+    }
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/label/label-common.ts b/tns-core-modules/ui/label/label-common.ts
index 84b87b430..5f282702b 100644
--- a/tns-core-modules/ui/label/label-common.ts
+++ b/tns-core-modules/ui/label/label-common.ts
@@ -1,12 +1 @@
-import definition = require("ui/label");
-import textBase = require("ui/text-base");
-import {WhiteSpace} from "ui/enums";
-
-export class Label extends textBase.TextBase implements definition.Label {
-    get textWrap(): boolean {
-        return this.style.whiteSpace === WhiteSpace.normal;
-    }
-    set textWrap(value: boolean) {
-        this.style.whiteSpace = value ? WhiteSpace.normal : WhiteSpace.nowrap;
-    }
-}
\ No newline at end of file
+
\ No newline at end of file
diff --git a/tns-core-modules/ui/label/label.android.ts b/tns-core-modules/ui/label/label.android.ts
index 1684abd64..ffc7a1319 100644
--- a/tns-core-modules/ui/label/label.android.ts
+++ b/tns-core-modules/ui/label/label.android.ts
@@ -1,12 +1,18 @@
-import common = require("./label-common");
-import {textProperty, formattedTextProperty} from "../text-base/text-base-common";
-import {FormattedString} from "text/formatted-string";
+import { Label as LabelDefinition } from "ui/label";
+import { TextBase } from "ui/text-base";
 
-global.moduleMerge(common, exports);
+export * from "ui/text-base";
 
-export class Label extends common.Label {
+export class LabelBase extends TextBase implements LabelDefinition {
     private _android: android.widget.TextView;
 
+    get textWrap(): boolean {
+        return this.style.whiteSpace === "normal";
+    }
+    set textWrap(value: boolean) {
+        this.style.whiteSpace = value ? "normal" : "nowrap";
+    }
+
     get android(): android.widget.TextView {
         return this._android;
     }
diff --git a/tns-core-modules/ui/label/label.d.ts b/tns-core-modules/ui/label/label.d.ts
index 2d3b20d5b..7ffc53deb 100644
--- a/tns-core-modules/ui/label/label.d.ts
+++ b/tns-core-modules/ui/label/label.d.ts
@@ -2,19 +2,12 @@
  * Contains the Label class, which represents a standard label widget.
  */
 declare module "ui/label" {
-    import dependencyObservable = require("ui/core/dependency-observable");
-    import textBase = require("ui/text-base");
+    import { TextBase } from "ui/text-base";
 
     /**
      * Represents a text label.
      */
-    export class Label extends textBase.TextBase {
-
-        /**
-         * Dependency property used to support binding operations for the text wrapping of the current label instance.
-         */
-        public static textWrapProperty: dependencyObservable.Property;
-
+    export class Label extends TextBase {
         /**
          * Gets the native [android widget](http://developer.android.com/reference/android/widget/TextView.html) that represents the user interface for this component. Valid only when running on Android OS.
          */
diff --git a/tns-core-modules/ui/label/label.ios.ts b/tns-core-modules/ui/label/label.ios.ts
index 08e43b094..fa1f7d072 100644
--- a/tns-core-modules/ui/label/label.ios.ts
+++ b/tns-core-modules/ui/label/label.ios.ts
@@ -1,21 +1,8 @@
-import common = require("./label-common");
-import * as enums from "ui/enums";
-import * as utils from "utils/utils";
-import * as backgroundModule from "ui/styling/background";
-import { View } from "ui/core/view";
-import style = require("ui/styling/style");
+import { Label as LabelDefinition } from "ui/label";
+import { TextBase, View, whiteSpaceProperty, layout } from "ui/text-base";
+import { Background } from "ui/styling/background";
 
-import { whiteSpaceProperty } from "ui/styling/style";
-import { WhiteSpace } from "ui/enums";
-
-global.moduleMerge(common, exports);
-
-var background: typeof backgroundModule;
-function ensureBackground() {
-    if (!background) {
-        background = require("ui/styling/background");
-    }
-}
+export * from "ui/text-base";
 
 enum FixedSize {
     NONE = 0,
@@ -24,7 +11,7 @@ enum FixedSize {
     BOTH = 3
 }
 
-export class Label extends common.Label {
+export class LabelBase extends TextBase implements LabelDefinition {
     private _ios: UILabel;
     private _fixedSize: FixedSize;
 
@@ -43,6 +30,13 @@ export class Label extends common.Label {
         return this._ios;
     }
 
+    get textWrap(): boolean {
+        return this.style.whiteSpace === "normal";
+    }
+    set textWrap(value: boolean) {
+        this.style.whiteSpace = value ? "normal" : "nowrap";
+    }
+
     public onLoaded() {
         super.onLoaded();
     }
@@ -61,32 +55,33 @@ export class Label extends common.Label {
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
         var nativeView = this._nativeView;
         if (nativeView) {
-            var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
-            var widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
+            var width = layout.getMeasureSpecSize(widthMeasureSpec);
+            var widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
 
-            var height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
-            var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
+            var height = layout.getMeasureSpecSize(heightMeasureSpec);
+            var heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
 
-            if (widthMode === utils.layout.UNSPECIFIED) {
+            if (widthMode === layout.UNSPECIFIED) {
                 width = Number.POSITIVE_INFINITY;
             }
 
-            if (heightMode === utils.layout.UNSPECIFIED) {
+            if (heightMode === layout.UNSPECIFIED) {
                 height = Number.POSITIVE_INFINITY;
             }
 
-            this._fixedSize = (widthMode === utils.layout.EXACTLY ? FixedSize.WIDTH : FixedSize.NONE)
-                | (heightMode === utils.layout.EXACTLY ? FixedSize.HEIGHT : FixedSize.NONE);
+            this._fixedSize = (widthMode === layout.EXACTLY ? FixedSize.WIDTH : FixedSize.NONE)
+                | (heightMode === layout.EXACTLY ? FixedSize.HEIGHT : FixedSize.NONE);
 
             var nativeSize = nativeView.sizeThatFits(CGSizeMake(width, height));
             var labelWidth = nativeSize.width;
 
-            if (!this.textWrap && this.style.whiteSpace !== enums.WhiteSpace.nowrap) {
+            if (!this.textWrap && this.style.whiteSpace !== "nowrap") {
                 labelWidth = Math.min(labelWidth, width);
             }
 
-            var measureWidth = Math.max(labelWidth, this.minWidth);
-            var measureHeight = Math.max(nativeSize.height, this.minHeight);
+            let style = this.sltye;
+            var measureWidth = Math.max(labelWidth, style.effectiveMinWidth);
+            var measureHeight = Math.max(nativeSize.height, style.effectiveMinHeight);
 
             var widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
             var heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
diff --git a/tns-core-modules/ui/layouts/layout-base-common.ts b/tns-core-modules/ui/layouts/layout-base-common.ts
index 338d77afd..8599a166f 100644
--- a/tns-core-modules/ui/layouts/layout-base-common.ts
+++ b/tns-core-modules/ui/layouts/layout-base-common.ts
@@ -161,7 +161,7 @@ export class LayoutBase extends view.CustomLayoutView implements definition.Layo
         
         this._eachChildView((cv) => {
             cv._eachLayoutView((lv) => {
-                if (lastChild && lastChild.isVisible) {
+                if (lastChild && !lastChild.isCollapsed) {
                     callback(lastChild, false);
                 }
 
@@ -171,7 +171,7 @@ export class LayoutBase extends view.CustomLayoutView implements definition.Layo
             return true;
         });
         
-        if (lastChild && lastChild.isVisible) {
+        if (lastChild && !lastChild.isCollapsed) {
             callback(lastChild, true);
         }
 
diff --git a/tns-core-modules/ui/styling/background-common.ts b/tns-core-modules/ui/styling/background-common.ts
index e090b93b5..5d68f23ef 100644
--- a/tns-core-modules/ui/styling/background-common.ts
+++ b/tns-core-modules/ui/styling/background-common.ts
@@ -22,10 +22,10 @@ interface CSSValue {
 
 export class Background implements definition.Background {
     public static default = new Background();
-    
+
     public color: colorModule.Color;
     public image: imageSource.ImageSource;
-    public repeat: string;
+    public repeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
     public position: string;
     public size: string;
     public borderTopColor: colorModule.Color;
@@ -42,9 +42,9 @@ export class Background implements definition.Background {
     public borderBottomRightRadius: number = 0;
     public clipPath: string;
 
-    private clone(): Background{
+    private clone(): Background {
         let clone = new Background();
-        
+
         clone.color = this.color;
         clone.image = this.image;
         clone.repeat = this.repeat;
@@ -63,8 +63,8 @@ export class Background implements definition.Background {
         clone.borderBottomRightRadius = this.borderBottomRightRadius;
         clone.borderBottomLeftRadius = this.borderBottomLeftRadius;
         clone.clipPath = this.clipPath;
-        
-        return clone;        
+
+        return clone;
     }
 
     public withColor(value: colorModule.Color): Background {
@@ -96,25 +96,25 @@ export class Background implements definition.Background {
         clone.size = value;
         return clone;
     }
-    
+
     public withBorderTopColor(value: colorModule.Color): Background {
         let clone = this.clone();
         clone.borderTopColor = value;
         return clone;
     }
-    
+
     public withBorderRightColor(value: colorModule.Color): Background {
         let clone = this.clone();
         clone.borderRightColor = value;
         return clone;
     }
-    
+
     public withBorderBottomColor(value: colorModule.Color): Background {
         let clone = this.clone();
         clone.borderBottomColor = value;
         return clone;
     }
-    
+
     public withBorderLeftColor(value: colorModule.Color): Background {
         let clone = this.clone();
         clone.borderLeftColor = value;
@@ -304,7 +304,7 @@ export class Background implements definition.Background {
                 type: "ident",
                 string: "center"
             };
-            
+
             // If you only one keyword is specified, the other value is "center"
             if (val === "left" || val === "right") {
                 return {
@@ -335,7 +335,7 @@ export class Background implements definition.Background {
         ensureTypes();
 
         return types.isNullOrUndefined(this.color)
-            && types.isNullOrUndefined(this.image) 
+            && types.isNullOrUndefined(this.image)
             && !this.hasBorderWidth()
             && !this.hasBorderRadius()
             && !this.clipPath;
@@ -353,14 +353,14 @@ export class Background implements definition.Background {
         }
 
         return colorModule.Color.equals(value1.color, value2.color)
-            && value1.image === value2.image 
-            && value1.position === value2.position 
-            && value1.repeat === value2.repeat 
-            && value1.size === value2.size 
-            && colorModule.Color.equals(value1.borderTopColor, value2.borderTopColor) 
-            && colorModule.Color.equals(value1.borderRightColor, value2.borderRightColor) 
-            && colorModule.Color.equals(value1.borderBottomColor, value2.borderBottomColor) 
-            && colorModule.Color.equals(value1.borderLeftColor, value2.borderLeftColor) 
+            && value1.image === value2.image
+            && value1.position === value2.position
+            && value1.repeat === value2.repeat
+            && value1.size === value2.size
+            && colorModule.Color.equals(value1.borderTopColor, value2.borderTopColor)
+            && colorModule.Color.equals(value1.borderRightColor, value2.borderRightColor)
+            && colorModule.Color.equals(value1.borderBottomColor, value2.borderBottomColor)
+            && colorModule.Color.equals(value1.borderLeftColor, value2.borderLeftColor)
             && value1.borderTopWidth === value2.borderTopWidth
             && value1.borderRightWidth === value2.borderRightWidth
             && value1.borderBottomWidth === value2.borderBottomWidth
@@ -373,66 +373,66 @@ export class Background implements definition.Background {
     }
 
     public hasBorderColor(): boolean {
-        return !types.isNullOrUndefined(this.borderTopColor) 
-            || !types.isNullOrUndefined(this.borderRightColor) 
-            || !types.isNullOrUndefined(this.borderBottomColor) 
+        return !types.isNullOrUndefined(this.borderTopColor)
+            || !types.isNullOrUndefined(this.borderRightColor)
+            || !types.isNullOrUndefined(this.borderBottomColor)
             || !types.isNullOrUndefined(this.borderLeftColor);
     }
 
     public hasBorderWidth(): boolean {
-        return this.borderTopWidth > 0 
-            || this.borderRightWidth > 0 
-            || this.borderBottomWidth > 0 
+        return this.borderTopWidth > 0
+            || this.borderRightWidth > 0
+            || this.borderBottomWidth > 0
             || this.borderLeftWidth > 0
     }
-    
+
     public hasBorderRadius(): boolean {
-        return this.borderTopLeftRadius > 0 
-            || this.borderTopRightRadius > 0 
-            || this.borderBottomRightRadius > 0 
+        return this.borderTopLeftRadius > 0
+            || this.borderTopRightRadius > 0
+            || this.borderBottomRightRadius > 0
             || this.borderBottomLeftRadius > 0
     }
 
     public hasUniformBorderColor(): boolean {
-        return colorModule.Color.equals(this.borderTopColor, this.borderRightColor) 
+        return colorModule.Color.equals(this.borderTopColor, this.borderRightColor)
             && colorModule.Color.equals(this.borderTopColor, this.borderBottomColor)
-            && colorModule.Color.equals(this.borderTopColor, this.borderLeftColor); 
+            && colorModule.Color.equals(this.borderTopColor, this.borderLeftColor);
     }
-    
+
     public hasUniformBorderWidth(): boolean {
-        return this.borderTopWidth === this.borderRightWidth 
+        return this.borderTopWidth === this.borderRightWidth
             && this.borderTopWidth === this.borderBottomWidth
             && this.borderTopWidth === this.borderLeftWidth;
     }
-    
+
     public hasUniformBorderRadius(): boolean {
-        return this.borderTopLeftRadius === this.borderTopRightRadius 
+        return this.borderTopLeftRadius === this.borderTopRightRadius
             && this.borderTopLeftRadius === this.borderBottomRightRadius
             && this.borderTopLeftRadius === this.borderBottomLeftRadius;
     }
-    
+
     public hasUniformBorder(): boolean {
-        return this.hasUniformBorderColor() 
-            && this.hasUniformBorderWidth() 
+        return this.hasUniformBorderColor()
+            && this.hasUniformBorderWidth()
             && this.hasUniformBorderRadius();
     }
-    
+
     public getUniformBorderColor(): colorModule.Color {
-        if (this.hasUniformBorderColor()){
+        if (this.hasUniformBorderColor()) {
             return this.borderTopColor;
         }
         return undefined;
     };
 
     public getUniformBorderWidth(): number {
-        if (this.hasUniformBorderWidth()){
+        if (this.hasUniformBorderWidth()) {
             return this.borderTopWidth;
         }
         return 0;
     };
 
     public getUniformBorderRadius(): number {
-        if (this.hasUniformBorderRadius()){
+        if (this.hasUniformBorderRadius()) {
             return this.borderTopLeftRadius;
         }
         return 0;
diff --git a/tns-core-modules/ui/styling/background.android.ts b/tns-core-modules/ui/styling/background.android.ts
index 1148c0441..2b6647d2b 100644
--- a/tns-core-modules/ui/styling/background.android.ts
+++ b/tns-core-modules/ui/styling/background.android.ts
@@ -1,27 +1,10 @@
-import utils = require("utils/utils");
-import common = require("./background-common");
-import view = require("ui/core/view");
-import types = require("utils/types");
-import * as styleModule from "./style";
-import * as buttonModule from "ui/button";
+import { View, layout } from "ui/core/view";
+import { isNullOrUndefined, isFunction, getClass } from "utils/types";
 import { CacheLayerType } from "utils/utils";
+import { Button } from "ui/button";
 import cssValue = require("css-value");
-import background = require("ui/styling/background");
 
-let button: typeof buttonModule;
-let style: typeof styleModule;
-
-function ensureLazyRequires() {
-    if (!button) {
-        button = require("ui/button");
-    }
-
-    if (!style) {
-        style = require("./style");
-    }
-}
-
-global.moduleMerge(common, exports);
+export * from "./background-common"
 
 // We are using "ad" here to avoid namespace collision with the global android object
 export module ad {
@@ -45,17 +28,16 @@ export module ad {
         ); 
     }
     
-    export function onBackgroundOrBorderPropertyChanged(v: view.View) {
+    export function onBackgroundOrBorderPropertyChanged(v: View) {
         let nativeView = <android.view.View>v._nativeView;
         if (!nativeView) {
             return;
         }
-        
-        ensureLazyRequires();
+        let style = v.style;
 
-        let background = <common.Background>v.style._getValue(style.backgroundInternalProperty);
+        let background = style.backgroundInternal;
         let backgroundDrawable = nativeView.getBackground();
-        let density = utils.layout.getDisplayDensity();
+        let density = layout.getDisplayDensity();
         let cache = <CacheLayerType>v._nativeView;
 
         if (isSetColorFilterOnlyWidget(nativeView) 
@@ -69,7 +51,7 @@ export module ad {
             let backgroundColor = (<any>backgroundDrawable).backgroundColor = background.color.android;
             backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
             (<any>backgroundDrawable).backgroundColor = backgroundColor;
-        } 
+        }
         else if (!background.isEmpty()) {
             if (!(backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable)) {
                 let viewClass = types.getClass(v);
@@ -77,7 +59,7 @@ export module ad {
                     _defaultBackgrounds.set(viewClass, nativeView.getBackground());
                 }
                 
-                backgroundDrawable = new org.nativescript.widgets.BorderDrawable(density, v.toString());
+                backgroundDrawable = new org.nativescript.widgets.BorderDrawable(1, v.toString());
                 refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
 
                 if (getSDK() >= 16) {
@@ -89,7 +71,7 @@ export module ad {
             else {
                 refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
             }
-            
+
             if ((background.hasBorderWidth() || background.hasBorderRadius() || background.clipPath) && getSDK() < 18) {
                 // Switch to software because of unsupported canvas methods if hardware acceleration is on:
                 // http://developer.android.com/guide/topics/graphics/hardware-accel.html
@@ -99,7 +81,7 @@ export module ad {
         }
         else {
             // reset the value with the default native value
-            if (v instanceof button.Button) {
+            if (v instanceof Button) {
                 let nativeButton = new android.widget.Button(nativeView.getContext());
 
                 if (getSDK() >= 16) {
@@ -109,7 +91,7 @@ export module ad {
                 }
             }
             else {
-                let viewClass = types.getClass(v);
+                let viewClass = getClass(v);
                 if (_defaultBackgrounds.has(viewClass)) {
                     if (getSDK() >= 16) {
                         nativeView.setBackground(_defaultBackgrounds.get(viewClass));
@@ -125,10 +107,12 @@ export module ad {
             }
         }
 
-        let leftPadding = Math.round(((background.borderLeftWidth || 0) + (v.style.paddingLeft || 0)) * density); 
-        let topPadding = Math.round(((background.borderTopWidth || 0) + (v.style.paddingTop || 0)) * density); 
-        let rightPadding = Math.round(((background.borderRightWidth || 0) + (v.style.paddingRight || 0)) * density);         
-        let bottomPadding = Math.round(((background.borderBottomWidth || 0) + (v.style.paddingBottom || 0)) * density); 
+        // TODO: Can we move BorderWidths as separate native setter?
+        // This way we could skip setPadding if borderWidth is not changed.
+        let leftPadding = Math.round(style.effectiveBorderLeftWidth + style.effectivePaddingLeft);
+        let topPadding = Math.round(style.effectiveBorderTopWidth + style.effectivePaddingTop);
+        let rightPadding = Math.round(style.effectiveBorderRightWidth + style.effectivePaddingRight);
+        let bottomPadding = Math.round(style.effectiveBorderBottomWidth + style.effectivePaddingBottom);
 
         nativeView.setPadding(
             leftPadding,
@@ -139,29 +123,29 @@ export module ad {
     }
 }
 
-function refreshBorderDrawable(view: view.View, borderDrawable: org.nativescript.widgets.BorderDrawable){
-    //console.log(`>>> refreshBorderDrawable(${view})...`);
-    let background = <background.Background>view.style._getValue(style.backgroundInternalProperty);
-    if (background){
+function refreshBorderDrawable(view: View, borderDrawable: org.nativescript.widgets.BorderDrawable) {
+    let background = view.style.backgroundInternal;
+    if (background) {
         let backgroundPositionParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
         let backgroundSizeParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
-        if (background.position){
-            backgroundPositionParsedCSSValues = createNativeCSSValueArray(background.position); 
+        if (background.position) {
+            backgroundPositionParsedCSSValues = createNativeCSSValueArray(background.position);
         }
-        if (background.size){
-            backgroundSizeParsedCSSValues = createNativeCSSValueArray(background.size); 
+        if (background.size) {
+            backgroundSizeParsedCSSValues = createNativeCSSValueArray(background.size);
         }
-        
+
+	let blackColor = android.graphics.Color.BLACK;
         borderDrawable.refresh(
             
-            (!types.isNullOrUndefined(background.borderTopColor) && !types.isNullOrUndefined(background.borderTopColor.android)) ? background.borderTopColor.android : android.graphics.Color.BLACK,
-            (!types.isNullOrUndefined(background.borderRightColor) && !types.isNullOrUndefined(background.borderRightColor.android)) ? background.borderRightColor.android : android.graphics.Color.BLACK,
-            (!types.isNullOrUndefined(background.borderBottomColor) && !types.isNullOrUndefined(background.borderBottomColor.android)) ? background.borderBottomColor.android : android.graphics.Color.BLACK,
-            (!types.isNullOrUndefined(background.borderLeftColor) && !types.isNullOrUndefined(background.borderLeftColor.android)) ? background.borderLeftColor.android : android.graphics.Color.BLACK,
+            (background.borderTopColor && background.borderTopColor.android !== undefined) ? background.borderTopColor.android : blackColor,
+            (background.borderRightColor && background.borderRightColor.android !== undefined) ? background.borderRightColor.android : blackColor,
+            (background.borderBottomColor && background.borderBottomColor.android !== undefined) ? background.borderBottomColor.android : blackColor,
+            (background.borderLeftColor && background.borderLeftColor.android !== undefined) ? background.borderLeftColor.android : blackColor,
 
-            background.borderTopWidth, 
-            background.borderRightWidth, 
-            background.borderBottomWidth, 
+            background.borderTopWidth,
+            background.borderRightWidth,
+            background.borderBottomWidth,
             background.borderLeftWidth,
 
             background.borderTopLeftRadius,
@@ -183,13 +167,14 @@ function refreshBorderDrawable(view: view.View, borderDrawable: org.nativescript
     }
 }
 
-function createNativeCSSValueArray(css: string): native.Array<org.nativescript.widgets.CSSValue>{
-    if (!css){
+function createNativeCSSValueArray(css: string): native.Array<org.nativescript.widgets.CSSValue> {
+    if (!css) {
         return null;
     }
+
     let cssValues = cssValue(css);
-    let nativeArray = (<any>Array).create(org.nativescript.widgets.CSSValue, cssValues.length);
-    for (let i = 0, length = cssValues.length; i < length; i++){
+    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(
             cssValues[i].type,
             cssValues[i].string,
@@ -197,5 +182,6 @@ function createNativeCSSValueArray(css: string): native.Array<org.nativescript.w
             cssValues[i].value
         );
     }
+
     return nativeArray;
-}
\ No newline at end of file
+}
diff --git a/tns-core-modules/ui/styling/background.d.ts b/tns-core-modules/ui/styling/background.d.ts
index cd72344bd..1f8ea8cd0 100644
--- a/tns-core-modules/ui/styling/background.d.ts
+++ b/tns-core-modules/ui/styling/background.d.ts
@@ -1,7 +1,7 @@
 declare module "ui/styling/background" {
-    import imageSource = require("image-source");
-    import colorModule = require("color");
-    import viewModule = require("ui/core/view");
+    import { ImageSource } from "image-source";
+    import { Color } from "color";
+    import { View } from "ui/core/view";
 
     export interface BackgroundDrawParams {
         repeatX: boolean;
@@ -14,15 +14,15 @@ declare module "ui/styling/background" {
 
     export class Background {
         public static default: Background;
-        public color: colorModule.Color;
-        public image: imageSource.ImageSource;
-        public repeat: string;
+        public color: Color;
+        public image: ImageSource;
+        public repeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
         public position: string;
         public size: string;
-        public borderTopColor: colorModule.Color;
-        public borderRightColor: colorModule.Color;
-        public borderBottomColor: colorModule.Color;
-        public borderLeftColor: colorModule.Color;
+        public borderTopColor: Color;
+        public borderRightColor: Color;
+        public borderBottomColor: Color;
+        public borderLeftColor: Color;
         public borderTopWidth: number;
         public borderRightWidth: number;
         public borderBottomWidth: number;
@@ -33,15 +33,15 @@ declare module "ui/styling/background" {
         public borderBottomLeftRadius: number;
         public clipPath: string;
 
-        public withColor(value: colorModule.Color): Background;
-        public withImage(value: imageSource.ImageSource): Background;
+        public withColor(value: Color): Background;
+        public withImage(value: ImageSource): Background;
         public withRepeat(value: string): Background;
         public withPosition(value: string): Background;
         public withSize(value: string): Background;
-        public withBorderTopColor(value: colorModule.Color): Background;
-        public withBorderRightColor(value: colorModule.Color): Background;
-        public withBorderBottomColor(value: colorModule.Color): Background;
-        public withBorderLeftColor(value: colorModule.Color): Background;
+        public withBorderTopColor(value: Color): Background;
+        public withBorderRightColor(value: Color): Background;
+        public withBorderBottomColor(value: Color): Background;
+        public withBorderLeftColor(value: Color): Background;
         public withBorderTopWidth(value: number): Background;
         public withBorderRightWidth(value: number): Background;
         public withBorderBottomWidth(value: number): Background;
@@ -65,16 +65,16 @@ declare module "ui/styling/background" {
         public hasUniformBorderWidth(): boolean;
         public hasUniformBorderRadius(): boolean;
         public hasUniformBorder(): boolean;
-        public getUniformBorderColor(): colorModule.Color;
+        public getUniformBorderColor(): Color;
         public getUniformBorderWidth(): number;
         public getUniformBorderRadius(): number;
     }
 
     export module ios {
-        export function createBackgroundUIColor(view: viewModule.View, flip?: boolean): any /* UIColor */;
+        export function createBackgroundUIColor(view: View, flip?: boolean): any /* UIColor */;
     }
 
     export module ad {
-        export function onBackgroundOrBorderPropertyChanged(v: viewModule.View);
+        export function onBackgroundOrBorderPropertyChanged(v: View);
     }
-}
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/background.ios.ts b/tns-core-modules/ui/styling/background.ios.ts
index b83c0b876..08222373f 100644
--- a/tns-core-modules/ui/styling/background.ios.ts
+++ b/tns-core-modules/ui/styling/background.ios.ts
@@ -1,26 +1,23 @@
-import viewModule = require("ui/core/view");
-import common = require("./background-common");
-import * as styleModule from "./style";
+import { Background as BackgroundDefinition } from "ui/styling/background";
+import { View, Point } from "ui/core/view";
+import { cssValueToDevicePixels } from "./background-common";
 import { Color } from "color";
+import { ios as utilsIos } from "utils/utils";
 
-import * as utils from "utils/utils";
-
-global.moduleMerge(common, exports);
-
-var style: typeof styleModule;
-function ensureStyle() {
-    if (!style) {
-        style = require("./style");
-    }
-}
+export * from "./background-common"
 
 export module ios {
-    export function createBackgroundUIColor(view: viewModule.View, flip?: boolean): UIColor {
-        let nativeView = <UIView>view._nativeView; 
-        if (!nativeView) {
+    export function createBackgroundUIColor(view: View, flip?: boolean): UIColor {
+        let background = view.style.backgroundInternal;
+        if (background.isEmpty()) {
             return undefined;
         }
-        ensureStyle();
+
+        let nativeView = view._nativeView;
+        // Clip-path
+        if (background.clipPath) {
+            drawClipPath(nativeView, background);
+        }
 
         // Borders
 
@@ -80,17 +77,17 @@ export module ios {
             let bottom = background.borderBottomWidth;
             let left = background.borderLeftWidth;
             
-            let lto: viewModule.Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.top};// left-top-outside
-            let lti: viewModule.Point = {x: nativeViewLayerBounds.left + left, y: nativeViewLayerBounds.top + top}; // left-top-inside
+            let lto: Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.top};// left-top-outside
+            let lti: Point = {x: nativeViewLayerBounds.left + left, y: nativeViewLayerBounds.top + top}; // left-top-inside
 
-            let rto: viewModule.Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.top}; // right-top-outside
-            let rti: viewModule.Point = {x: nativeViewLayerBounds.right - right, y: nativeViewLayerBounds.top + top}; // right-top-inside
+            let rto: Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.top}; // right-top-outside
+            let rti: Point = {x: nativeViewLayerBounds.right - right, y: nativeViewLayerBounds.top + top}; // right-top-inside
             
-            let rbo: viewModule.Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.bottom}; // right-bottom-outside
-            let rbi: viewModule.Point = {x: nativeViewLayerBounds.right - right, y: nativeViewLayerBounds.bottom - bottom}; // right-bottom-inside
+            let rbo: Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.bottom}; // right-bottom-outside
+            let rbi: Point = {x: nativeViewLayerBounds.right - right, y: nativeViewLayerBounds.bottom - bottom}; // right-bottom-inside
 
-            let lbo: viewModule.Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.bottom}; // left-bottom-outside
-            let lbi: viewModule.Point = {x: nativeViewLayerBounds.left + left, y: nativeViewLayerBounds.bottom - bottom}; // left-bottom-inside
+            let lbo: Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.bottom}; // left-bottom-outside
+            let lbi: Point = {x: nativeViewLayerBounds.left + left, y: nativeViewLayerBounds.bottom - bottom}; // left-bottom-inside
             
             if (top > 0 && background.borderTopColor && background.borderTopColor.ios){
                 let topBorderPath = CGPathCreateMutable();
@@ -169,11 +166,11 @@ export module ios {
         }
 
         // We have an image for a background
-        var img = <UIImage>background.image.ios;
-        var params = background.getDrawParams(boundsWidth, boundsHeight);
+        let img = <UIImage>background.image.ios;
+        let params = background.getDrawParams(boundsWidth, boundsHeight);
 
         if (params.sizeX > 0 && params.sizeY > 0) {
-            var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
+            let resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
             UIGraphicsBeginImageContext(resizeRect.size);
             img.drawInRect(resizeRect);
             img = UIGraphicsGetImageFromCurrentImageContext();
@@ -181,7 +178,7 @@ export module ios {
         }
 
         UIGraphicsBeginImageContextWithOptions(CGSizeFromString(`{${boundsWidth},${boundsHeight}}`), false, 0.0);
-        var context = UIGraphicsGetCurrentContext();
+        let context = UIGraphicsGetCurrentContext();
 
         if (background.color && background.color.ios) {
             CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
@@ -192,24 +189,24 @@ export module ios {
             img.drawAtPoint(CGPointMake(params.posX, params.posY));
         }
         else {
-            var w = params.repeatX ? boundsWidth : img.size.width;
-            var h = params.repeatY ? boundsHeight : img.size.height;
+            let w = params.repeatX ? boundsWidth : img.size.width;
+            let h = params.repeatY ? boundsHeight : img.size.height;
 
             CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
 
             params.posX = params.repeatX ? 0 : params.posX;
             params.posY = params.repeatY ? 0 : params.posY;
 
-            var patternRect = CGRectMake(params.posX, params.posY, w, h);
+            let patternRect = CGRectMake(params.posX, params.posY, w, h);
 
             img.drawAsPatternInRect(patternRect);
         }
 
-        var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
+        let bkgImage = UIGraphicsGetImageFromCurrentImageContext();
         UIGraphicsEndImageContext();
 
         if (flip) {
-            var flippedImage = _flipImage(bkgImage);
+            let flippedImage = _flipImage(bkgImage);
             return UIColor.alloc().initWithPatternImage(flippedImage);
         }
 
@@ -220,22 +217,22 @@ export module ios {
     // https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html
     function _flipImage(originalImage: UIImage): UIImage {
         UIGraphicsBeginImageContextWithOptions(originalImage.size, false, 0.0);
-        var context = UIGraphicsGetCurrentContext();
+        let context = UIGraphicsGetCurrentContext();
         CGContextSaveGState(context);
         CGContextTranslateCTM(context, 0.0, originalImage.size.height);
         CGContextScaleCTM(context, 1.0, -1.0);
         originalImage.drawInRect(CGRectMake(0, 0, originalImage.size.width, originalImage.size.height))
         CGContextRestoreGState(context);
-        var flippedImage = UIGraphicsGetImageFromCurrentImageContext();
+        let flippedImage = UIGraphicsGetImageFromCurrentImageContext();
         UIGraphicsEndImageContext();
         return flippedImage;
     }
 }
 
-function drawClipPath(nativeView: UIView, background: common.Background) {
-    var path: any;
+function drawClipPath(nativeView: UIView, background: BackgroundDefinition) {
+    let path: any;
 
-    var bounds = {
+    let bounds = {
         left: nativeView.bounds.origin.x,
         top: nativeView.bounds.origin.y,
         bottom: nativeView.bounds.size.height,
@@ -246,23 +243,23 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
         return;
     }
 
-    var clipPath = background.clipPath;
+    let clipPath = background.clipPath;
 
-    var functionName = clipPath.substring(0, clipPath.indexOf("("));
-    var value = clipPath.replace(`${functionName}(`, "").replace(")", "");
+    let functionName = clipPath.substring(0, clipPath.indexOf("("));
+    let value = clipPath.replace(`${functionName}(`, "").replace(")", "");
 
     if (functionName === "rect") {
-        var arr = value.split(/[\s]+/);
+        let arr = value.split(/[\s]+/);
 
-        var top = common.cssValueToDevicePixels(arr[0], bounds.top);
-        var right = common.cssValueToDevicePixels(arr[1], bounds.right);
-        var bottom = common.cssValueToDevicePixels(arr[2], bounds.bottom);
-        var left = common.cssValueToDevicePixels(arr[3], bounds.left);
+        let top = cssValueToDevicePixels(arr[0], bounds.top);
+        let left = cssValueToDevicePixels(arr[1], bounds.left);
+        let bottom = cssValueToDevicePixels(arr[2], bounds.bottom);
+        let right = cssValueToDevicePixels(arr[3], bounds.right);
 
         path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
     } 
     else if (functionName === "inset") {
-        var arr = value.split(/[\s]+/);
+        let arr = value.split(/[\s]+/);
         
         let topString: string;
         let rightString: string;
@@ -287,35 +284,34 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
             leftString = arr[3];
         }
 
-        var top = common.cssValueToDevicePixels(topString, bounds.bottom);
-        var right = common.cssValueToDevicePixels("100%", bounds.right) - common.cssValueToDevicePixels(rightString, bounds.right);
-        var bottom = common.cssValueToDevicePixels("100%", bounds.bottom) - common.cssValueToDevicePixels(bottomString, bounds.bottom);
-        var left = common.cssValueToDevicePixels(leftString, bounds.right);
+        let top = cssValueToDevicePixels(topString, bounds.bottom);
+        let right = cssValueToDevicePixels("100%", bounds.right) - common.cssValueToDevicePixels(rightString, bounds.right);
+        let bottom = cssValueToDevicePixels("100%", bounds.bottom) - common.cssValueToDevicePixels(bottomString, bounds.bottom);
+        let left = cssValueToDevicePixels(leftString, bounds.right);
 
         path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
     } 
     else if (functionName === "circle") {
-        var arr = value.split(/[\s]+/);
+        let arr = value.split(/[\s]+/);
 
-        var radius = common.cssValueToDevicePixels(arr[0], (bounds.right > bounds.bottom ? bounds.bottom : bounds.right) / 2);
-        var y = common.cssValueToDevicePixels(arr[2], bounds.bottom);
-        var x = common.cssValueToDevicePixels(arr[3], bounds.right);
+        let radius = cssValueToDevicePixels(arr[0], (bounds.right > bounds.bottom ? bounds.bottom : bounds.right) / 2);
+        let y = cssValueToDevicePixels(arr[2], bounds.bottom);
+        let x = cssValueToDevicePixels(arr[3], bounds.right);
 
         path = UIBezierPath.bezierPathWithArcCenterRadiusStartAngleEndAngleClockwise(CGPointMake(x, y), radius, 0, 360, true).CGPath;
 
-    } 
-    else if (functionName === "ellipse") {
-        var arr = value.split(/[\s]+/);
+    } else if (functionName === "ellipse") {
+        let arr = value.split(/[\s]+/);
 
-        var rX = common.cssValueToDevicePixels(arr[0], bounds.right);
-        var rY = common.cssValueToDevicePixels(arr[1], bounds.bottom);
-        var cX = common.cssValueToDevicePixels(arr[3], bounds.right);
-        var cY = common.cssValueToDevicePixels(arr[4], bounds.bottom);
+        let rX = cssValueToDevicePixels(arr[0], bounds.right);
+        let rY = cssValueToDevicePixels(arr[1], bounds.bottom);
+        let cX = cssValueToDevicePixels(arr[3], bounds.right);
+        let cY = cssValueToDevicePixels(arr[4], bounds.bottom);
         
-        var left = cX - rX;
-        var top = cY - rY;
-        var width = rX * 2;
-        var height = rY * 2;
+        let left = cX - rX;
+        let top = cY - rY;
+        let width = rX * 2;
+        let height = rY * 2;
 
         path = UIBezierPath.bezierPathWithOvalInRect(CGRectMake(left, top, width, height)).CGPath;
 
@@ -324,13 +320,13 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
 
         path = CGPathCreateMutable()
 
-        var firstPoint: viewModule.Point;
-        var arr = value.split(/[,]+/);
+        let firstPoint: Point;
+        let arr = value.split(/[,]+/);
         for (let i = 0; i < arr.length; i++) {
             let xy = arr[i].trim().split(/[\s]+/);
-            let point: viewModule.Point = {
-                x: common.cssValueToDevicePixels(xy[0], bounds.right),
-                y: common.cssValueToDevicePixels(xy[1], bounds.bottom)
+            let point: Point = {
+                x: cssValueToDevicePixels(xy[0], bounds.right),
+                y: cssValueToDevicePixels(xy[1], bounds.bottom)
             };
 
             if (!firstPoint) {
@@ -345,7 +341,7 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
     }
 
     if (path) {
-        var shape = CAShapeLayer.layer();
+        let shape = CAShapeLayer.layer();
         shape.path = path;
         nativeView.layer.mask = shape;
         nativeView.clipsToBounds = true;
@@ -354,11 +350,11 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
         let borderColor = background.getUniformBorderColor();
 
         if (borderWidth > 0 && borderColor instanceof Color){
-            var borderLayer = CAShapeLayer.layer();
+            let borderLayer = CAShapeLayer.layer();
             borderLayer.path = path;
             borderLayer.lineWidth = borderWidth * 2;
             borderLayer.strokeColor = borderColor.ios.CGColor;
-            borderLayer.fillColor = utils.ios.getter(UIColor, UIColor.clearColor).CGColor;
+            borderLayer.fillColor = utilsIos.getter(UIColor, UIColor.clearColor).CGColor;
             borderLayer.frame = nativeView.bounds;
 
             nativeView.layer.borderColor = undefined;
@@ -366,4 +362,4 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
             nativeView.layer.addSublayer(borderLayer);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/tns-core-modules/ui/styling/font.d.ts b/tns-core-modules/ui/styling/font.d.ts
index 22132eb35..299f79984 100644
--- a/tns-core-modules/ui/styling/font.d.ts
+++ b/tns-core-modules/ui/styling/font.d.ts
@@ -3,7 +3,7 @@
         public static default: Font;
 
         public fontFamily: string;
-        public fontStyle: string;
+        public fontStyle: "normal" | "italic";
         public fontWeight: string;
         public fontSize: number;
 
diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts
index 5a633a5e2..4e5bd2ee3 100644
--- a/tns-core-modules/ui/styling/style.d.ts
+++ b/tns-core-modules/ui/styling/style.d.ts
@@ -44,6 +44,9 @@ declare module "ui/styling/style" {
 
     export class Style extends Observable {
 
+        public fontInternal: Font;
+        public backgroundInternal: Background;
+
         public rotate: number;
         public scaleX: number;
         public scaleY: number;
@@ -57,7 +60,7 @@ declare module "ui/styling/style" {
 
         public backgroundColor: Color;
         public backgroundImage: string;
-        public backgroundRepeat: string;
+        public backgroundRepeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat";;
         public backgroundSize: string;
         public backgroundPosition: string;
 
@@ -67,10 +70,10 @@ declare module "ui/styling/style" {
         public borderBottomColor: Color;
         public borderLeftColor: Color;
         public borderWidth: string | number;
-        public borderTopWidth: number;
-        public borderRightWidth: number;
-        public borderBottomWidth: number;
-        public borderLeftWidth: number;
+        public borderTopWidth: Length;
+        public borderRightWidth: Length;
+        public borderBottomWidth: Length;
+        public borderLeftWidth: Length;
         public borderRadius: string | number;
         public borderTopLeftRadius: number;
         public borderTopRightRadius: number;
@@ -79,23 +82,22 @@ declare module "ui/styling/style" {
 
         public fontSize: number;
         public fontFamily: string;
-        public fontStyle: string;
+        public fontStyle: "normal" | "italic";
         public fontWeight: string;
         public font: string;
 
         public zIndex: number;
         public opacity: number;
-        public visibility: string;
+        public visibility: "visible" | "hidden" | "collapse" | "collapsed";
 
-        public textAlignment: string;
-        public textDecoration: string;
-        public textTransform: string;
         public letterSpacing: number;
-        public whiteSpace: string;
+        public textAlignment:  "left" | "center" | "right";
+        public textDecoration: "none" | "underline" | "lineThrough";
+        public textTransform: "none" | "capitalize" | "uppercase" | "lowercase";
+        public whiteSpace: "normal" | "nowrap";
 
-        // TODO: Change minWidth/Height to Length to support 'px'
-        public minWidth: number;
-        public minHeight: number;
+        public minWidth: Length;
+        public minHeight: Length;
         public width: Length;
         public height: Length;
         public margin: string;
@@ -132,62 +134,21 @@ declare module "ui/styling/style" {
         // public _boundsChanged(): void;
         // public _updateTextDecoration(): void;
         // public _updateTextTransform(): void;
+        // public _sizeChanged(): void;
     }
 
     // export function registerNoStylingClass(className);
     // export function getHandler(property: Property, view: View): StylePropertyChangedHandler;
     // Property registration
 
-    export let rotateProperty: CssProperty<Style, number>;
-    export let scaleXProperty: CssProperty<Style, number>;
-    export let scaleYProperty: CssProperty<Style, number>;
-    export let translateXProperty: CssProperty<Style, number>;
-    export let translateYProperty: CssProperty<Style, number>;
-
-    export let clipPathProperty: CssProperty<Style, string>;
-    export let colorProperty: InheritedCssProperty<Style, Color>;
     export let tintColorProperty: InheritedCssProperty<Style, Color>;
     export let placeholderColorProperty: InheritedCssProperty<Style, Color>;
 
-    export let backgroundColorProperty: CssProperty<Style, Color>;
-    export let backgroundImageProperty: CssProperty<Style, string>;
-    export let backgroundRepeatProperty: CssProperty<Style, string>;
-    export let backgroundSizeProperty: CssProperty<Style, string>;
-    export let backgroundPositionProperty: CssProperty<Style, string>;
-
-    export let borderColorProperty: CssProperty<Style, Color>;
-    export let borderTopColorProperty: CssProperty<Style, Color>;
-    export let borderRightColorProperty: CssProperty<Style, Color>;
-    export let borderBottomColorProperty: CssProperty<Style, Color>;
-    export let borderLeftColorProperty: CssProperty<Style, Color>;
-    
-    export let borderWidthProperty: CssProperty<Style, number>;
-    export let borderTopWidthProperty: CssProperty<Style, number>;
-    export let borderRightWidthProperty: CssProperty<Style, number>;
-    export let borderBottomWidthProperty: CssProperty<Style, number>;
-    export let borderLeftWidthProperty: CssProperty<Style, number>;
-
-    export let borderRadiusProperty: CssProperty<Style, number>;
-    export let borderTopLeftRadiusProperty: CssProperty<Style, number>;
-    export let borderTopRightRadiusProperty: CssProperty<Style, number>;
-    export let borderBottomRightRadiusProperty: CssProperty<Style, number>;
-    export let borderBottomLeftRadiusProperty: CssProperty<Style, number>; 
-
-    // Helper property holding most layout related properties available in CSS.
-    // When layout related properties are set in CSS we chache them and send them to the native view in a single call.
-    export var nativeLayoutParamsProperty: styleProperty.Property;
-    export var widthProperty: styleProperty.Property;
-    export var heightProperty: styleProperty.Property;
-    export var verticalAlignmentProperty: styleProperty.Property;
-    export var horizontalAlignmentProperty: styleProperty.Property;
-    export var marginLeftProperty: styleProperty.Property;
-    export var marginRightProperty: styleProperty.Property;
-    export var marginTopProperty: styleProperty.Property;
-    export var marginBottomProperty: styleProperty.Property;
-
-    export let zIndexProperty: CssProperty<Style, number>;
-    export let visibilityProperty: CssProperty<Style, string>;
-    export let opacityProperty: CssProperty<Style, number>;
+    export let fontSizeProperty: InheritedCssProperty<Style, number>;
+    export let fontFamilyProperty: InheritedCssProperty<Style, string>;
+    export let fontStyleProperty: InheritedCssProperty<Style, string>;
+    export let fontWeightProperty: InheritedCssProperty<Style, string>;
+    export let fontProperty: InheritedCssProperty<Style, Font>;
 
     export let textAlignmentProperty: InheritedCssProperty<Style, string>;
     export let textDecorationProperty: CssProperty<Style, string>;
@@ -195,25 +156,6 @@ declare module "ui/styling/style" {
     export let letterSpacingProperty: CssProperty<Style, number>;
     export let whiteSpaceProperty: CssProperty<Style, string>;
 
-    export let minWidthProperty: CssProperty<Style, number>;
-    export let minHeightProperty: CssProperty<Style, number>;
-    export let widthProperty: CssProperty<Style, number>;
-    export let heightProperty: CssProperty<Style, Length>;
-    export let marginProperty: CssProperty<Style, string>;
-    export let marginLeftProperty: CssProperty<Style, Length>;
-    export let marginRightProperty: CssProperty<Style, Length>;
-    export let marginTopProperty: CssProperty<Style, Length>;
-    export let marginBottomProperty: CssProperty<Style, Length>;
-
-    export let paddingProperty: CssProperty<Style, string>;
-    export let paddingLeftProperty: CssProperty<Style, Length>;
-    export let paddingRightProperty: CssProperty<Style, Length>;
-    export let paddingTopProperty: CssProperty<Style, Length>;
-    export let paddingBottomProperty: CssProperty<Style, Length>;
-
-    export let verticalAlignmentProperty: CssProperty<Style, string>;
-    export let horizontalAlignmentProperty: CssProperty<Style, string>;
-
     // /**
     //  * Represents an object that defines how style property should be applied on a native view/widget.
     //  */
diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts
index 3df3aeb9f..72ba222d3 100644
--- a/tns-core-modules/ui/styling/style.ts
+++ b/tns-core-modules/ui/styling/style.ts
@@ -1,369 +1,24 @@
-import definition = require("ui/styling/style");
+import { Style as StyleDefinition } from "ui/styling/style";
 import { Observable } from "data/observable";
-import { View } from "ui/core/view";
+import { ViewBase } from "ui/core/view-base";
 import { Color } from "color";
 import { Font } from "ui/styling/font";
 import { Background } from "ui/styling/background";
-import { isAndroid, isIOS } from "platform";
-import { CssProperty, InheritedCssProperty } from "ui/core/properties";
-import { fromBase64, fromFileOrResource, fromUrl } from "image-source";
-import { isDataURI, isFileOrResourcePath } from "utils/utils";
+import { isIOS } from "platform";
+import { Property, CssProperty, InheritedCssProperty, ShorthandProperty } from "ui/core/properties";
 import { Length } from "ui/core/view";
 
-import {
-    HorizontalAlignment, VerticalAlignment, Visibility,
-    TextDecoration, TextTransform, TextAlignment,
-    WhiteSpace, FontWeight, FontStyle
-} from "ui/enums";
+import { FontWeight, FontStyle } from "ui/enums";
 
-import {
-    numberConverter, colorConverter, fontSizeConverter,
-    textAlignConverter, textDecorationConverter, textTransformConverter,
-    whiteSpaceConverter, transformConverter
-} from "./converters";
-
-// on Android we explicitly set AffectsLayout to False because android will invalidate its layout when needed so we skip unnecessary native calls.
-let affectsIOSLayout = isIOS;
-
-interface Thickness {
-    left: Object;
-    top: Object;
-    right: Object;
-    bottom: Object;
-}
-
-
-
-
-
-// function layoutParamsComparer(x: definition.CommonLayoutParams, y: definition.CommonLayoutParams): boolean {
-//     return x.width === y.width
-//         && x.height === y.height
-//         && x.leftMargin === y.leftMargin
-//         && x.topMargin === y.topMargin
-//         && x.rightMargin === y.rightMargin
-//         && x.bottomMargin === y.bottomMargin
-//         && x.horizontalAlignment === y.horizontalAlignment
-//         && x.verticalAlignment === y.verticalAlignment
-//         && x.widthPercent === y.widthPercent
-//         && x.heightPercent === y.heightPercent
-//         && x.leftMarginPercent === y.leftMarginPercent
-//         && x.topMarginPercent === y.topMarginPercent
-//         && x.rightMarginPercent === y.rightMarginPercent
-//         && x.bottomMarginPercent === y.bottomMarginPercent
-// }
-
-// function onLayoutParamsChanged(data: PropertyChangeData) {
-//     let style = <Style>data.object;
-
-
-//     let heightValue = convertToPercentHelper(style.height);
-//     let height: number;
-//     let heightPercent: number;
-//     if (heightValue.isPercent) {
-//         height = style.verticalAlignment === VerticalAlignment.stretch ? -1 : -2;
-//         heightPercent = heightValue.value / 100;
-//     }
-//     else {
-//         height = isNaN(heightValue.value) ? -1 : heightValue.value;
-//         heightPercent = -1;
-//     }
-
-//     let marginLeftValue = convertToPercentHelper(style.marginLeft);
-//     let marginTopValue = convertToPercentHelper(style.marginTop);
-//     let marginRightValue = convertToPercentHelper(style.marginRight);
-//     let marginBottomValue = convertToPercentHelper(style.marginBottom);
-
-//     // Negative marginPercent means no marginPercent so native layout won't override margin with this % value.
-//     let layoutParams: definition.CommonLayoutParams =
-//         {
-//             width: width,
-//             height: height,
-//             widthPercent: widthPercent,
-//             heightPercent: heightPercent,
-//             leftMargin: marginLeftValue.isPercent ? 0 : marginLeftValue.value,
-//             leftMarginPercent: marginLeftValue.isPercent ? marginLeftValue.value / 100 : -1,
-//             topMargin: marginTopValue.isPercent ? 0 : marginTopValue.value,
-//             topMarginPercent: marginTopValue.isPercent ? marginTopValue.value / 100 : -1,
-//             rightMargin: marginRightValue.isPercent ? 0 : marginRightValue.value,
-//             rightMarginPercent: marginRightValue.isPercent ? marginRightValue.value / 100 : -1,
-//             bottomMargin: marginBottomValue.isPercent ? 0 : marginBottomValue.value,
-//             bottomMarginPercent: marginBottomValue.isPercent ? marginBottomValue.value / 100 : -1,
-//             horizontalAlignment: style.horizontalAlignment,
-//             verticalAlignment: style.verticalAlignment
-//         };
-
-//     style.nativeLayoutParamsProperty = layoutParams;
-// }
-
-// function onPaddingValueChanged(data: PropertyChangeData) {
-//     let style = <Style>data.object;
-//     let thickness: definition.Thickness = {
-//         top: style.paddingTop,
-//         right: style.paddingRight,
-//         bottom: style.paddingBottom,
-//         left: style.paddingLeft
-//     };
-
-//     style.nativePaddingsProperty = thickness;
-// }
-
-// function thicknessComparer(x: definition.Thickness, y: definition.Thickness): boolean {
-//     if (x && y) {
-//         return x.left === y.left && x.top === y.top && x.right === y.right && x.bottom === y.bottom;
-//     }
-//     return !x === !y;
-// }
-
-function onBackgroundColorPropertyChanged(style: Style, oldValue: Color, newValue: Color) {
-    let currentBackground = style.backgroundInternal;
-    if (!Color.equals(currentBackground.color, newValue)) {
-        style.backgroundInternal = currentBackground.withColor(newValue);
-    }
-}
-
-let pattern: RegExp = /url\(('|")(.*?)\1\)/;
-function onBackgroundImagePropertyChanged(style: Style, oldValue: string, newValue: string) {
-    let url: string = newValue;
-    let currentBackground = style.backgroundInternal;
-    let isValid = false;
-    let typeofValue = typeof newValue;
-    if (typeofValue === "string") {
-        let match = url.match(pattern);
-        if (match && match[2]) {
-            url = match[2];
-        }
-
-        if (isDataURI(url)) {
-            let base64Data = url.split(",")[1];
-            if (base64Data !== "undefined") {
-                style.backgroundInternal = currentBackground.withImage(fromBase64(base64Data));
-                isValid = true;
-            }
-        }
-        else if (isFileOrResourcePath(url)) {
-            style.backgroundInternal = currentBackground.withImage(fromFileOrResource(url));
-            isValid = true;
-        }
-        else if (url.indexOf("http") !== -1) {
-            style["_url"] = url;
-            style.backgroundInternal = currentBackground.withImage(undefined);
-            fromUrl(url).then((r) => {
-                if (style && style["_url"] === url) {
-                    // Get the current background again, as it might have changed while doing the request.
-                    currentBackground = style.backgroundInternal;
-                    style.backgroundInternal = currentBackground.withImage(r);
-                }
-            });
-            isValid = true;
-        }
-    }
-
-    if (!isValid) {
-        style.backgroundInternal = currentBackground.withImage(undefined);
-    }
-}
-
-function onBackgroundRepeatPropertyChanged(style: Style, oldValue: string, newValue: string) {
-    let currentBackground = style.backgroundInternal;
-    if (newValue !== currentBackground.repeat) {
-        style.backgroundInternal = currentBackground.withRepeat(newValue);
-    }
-}
-
-function onBackgroundPositionPropertyChanged(style: Style, oldValue: string, newValue: string) {
-    let currentBackground = style.backgroundInternal;
-    if (newValue !== currentBackground.position) {
-        style.backgroundInternal = currentBackground.withPosition(newValue);
-    }
-}
-
-function onBackgroundSizePropertyChanged(style: Style, oldValue: string, newValue: string) {
-    let currentBackground = style.backgroundInternal;
-    if (newValue !== currentBackground.size) {
-        style.backgroundInternal = currentBackground.withSize(newValue);
-    }
-}
-
-function isNonNegativeFiniteNumberConverter(value: string): number {
-    let number = numberConverter(value);
-    if (!isNonNegativeFiniteNumber(number)) {
-        throw new Error("border-width should be NonNegative Finite number.");
-    }
-    return number;
-}
-
-function onBorderWidthPropertyChanged(style: Style, oldValue: number, newValue: number) {
-    if (isAndroid) {
-        let currentBackground = style.backgroundInternal;
-        if (newValue !== currentBackground.borderWidth) {
-            style.backgroundInternal = currentBackground.withBorderWidth(newValue);
-        }
-    }
-}
-
-function onBorderColorPropertyChanged(style: Style, oldValue: Color, newValue: Color) {
-    if (isAndroid) {
-        let currentBackground = style.backgroundInternal;
-        if (newValue !== currentBackground.borderColor) {
-            style.backgroundInternal = currentBackground.withBorderColor(newValue);
-        }
-    }
-}
-
-function borderRadiusConverter(value: string): number {
-    let number = numberConverter(value);
-    if (!isNonNegativeFiniteNumber(number)) {
-        throw new Error("border-radius should be NonNegative Finite number.");
-    }
-    return number;
-}
-
-function onBorderRadiusPropertyChanged(style: Style, oldValue: number, newValue: number) {
-    if (isAndroid) {
-        let currentBackground = style.backgroundInternal;
-        if (newValue !== currentBackground.borderRadius) {
-            style.backgroundInternal = currentBackground.withBorderRadius(newValue);
-        }
-    }
-}
-
-let supportedPaths = ["rect", "circle", "ellipse", "polygon"];
-function isClipPathValid(value: string): boolean {
-    if (!value) {
-        return true;
-    }
-    let functionName = value.substring(0, value.indexOf("(")).trim();
-    return supportedPaths.indexOf(functionName) !== -1;
-}
-
-function onClipPathPropertyChanged(style: Style, oldValue: string, newValue: string) {
-    // TODO: isClipPathValid
-    if (!isClipPathValid(newValue)) {
-        throw new Error("clip-path is not valid.");
-    }
-
-    if (isAndroid) {
-        let currentBackground = style.backgroundInternal;
-        if (newValue !== currentBackground.clipPath) {
-            style.backgroundInternal = currentBackground.withClipPath(newValue);
-        }
-    }
-}
-
-function isTextDecorationValid(value: string): boolean {
-    let values = (value + "").split(" ");
-    return values.indexOf(TextDecoration.none) !== -1 || values.indexOf(TextDecoration.underline) !== -1 || values.indexOf(TextDecoration.lineThrough) !== -1;
-}
-
-function isTextTransformValid(value: string): boolean {
-    return value === TextTransform.none || value === TextTransform.uppercase || value === TextTransform.lowercase || value === TextTransform.capitalize;
-}
-
-function isWhiteSpaceValid(value: string): boolean {
-    return value === WhiteSpace.nowrap || value === WhiteSpace.normal;
-}
-
-function isNonNegativeFiniteNumber(value: number): boolean {
-    return isFinite(value) && !isNaN(value) && value >= 0;
-}
-
-
-
-function isMarginValid(value: number): boolean {
-    let result = convertToPercentHelper(value);
-    if (result.isError) {
-        return false;
-    }
-
-    return isFinite(result.value) && !isNaN(result.value);
-}
-
-function opacityConverter(value: any): number {
-    let newValue = parseFloat(value);
-    if (!isNaN(newValue) && 0 <= newValue && newValue <= 1) {
-        return newValue;
-    }
-
-    throw new Error(`Opacity should be between [0, 1]. Value: ${newValue}`);
-}
-function isOpacityValid(value: string): boolean {
-    let parsedValue: number = parseFloat(value);
-    return !isNaN(parsedValue) && 0 <= parsedValue && parsedValue <= 1;
-}
-
-function isFloatValueConverter(value: any): number {
-    let newValue = parseFloat(value);
-    if (isNaN(newValue)) {
-        throw new Error(`Invalid value: ${newValue}`);
-    }
-
-    return newValue;
-}
-
-function onVisibilityChanged(style: Style, oldValue: string, newValue: string) {
-    if (!(newValue === Visibility.visible || newValue === Visibility.collapse || newValue === Visibility.collapsed)) {
-        throw new Error(`Invalid visibility value: ${newValue}`);
-    }
-    style.view.isVisible = newValue === Visibility.visible;
-}
-
-function onFontFamilyChanged(style: Style, oldValue: string, newValue: string) {
-    let currentFont = style.fontInternal;
-    if (currentFont.fontFamily !== newValue) {
-        style.fontInternal = currentFont.withFontFamily(newValue);
-    }
-}
-
-function onFontStyleChanged(style: Style, oldValue: string, newValue: string) {
-    if (newValue !== FontStyle.normal && newValue !== FontStyle.italic) {
-        throw new Error(`font-style should be 'normal' or 'italic'. value:${newValue}`)
-    }
-
-    let currentFont = style.fontInternal;
-    if (currentFont.fontStyle !== newValue) {
-        style.fontInternal = currentFont.withFontStyle(newValue);
-    }
-}
-
-function onFontWeightChanged(style: Style, oldValue: string, newValue: string) {
-    if (!newValue) {
-        console.trace();
-    }
-
-    if (!(newValue === FontWeight.thin
-        || newValue === FontWeight.extraLight
-        || newValue === FontWeight.light
-        || newValue === FontWeight.normal || newValue === "400"
-        || newValue === FontWeight.medium
-        || newValue === FontWeight.semiBold
-        || newValue === FontWeight.bold || newValue === "700"
-        || newValue === FontWeight.extraBold
-        || newValue === FontWeight.black)) {
-        throw new Error(`Invalid font-weight value: ${newValue}`);
-    }
-
-    let currentFont = style.fontInternal;
-    if (currentFont.fontWeight !== newValue) {
-        style.fontInternal = currentFont.withFontWeight(newValue);
-    }
-}
-
-function onFontSizeChanged(style: Style, oldValue: number, newValue: number) {
-    let currentFont = style.fontInternal;
-    if (currentFont.fontSize !== newValue) {
-        style.fontInternal = currentFont.withFontSize(newValue);
-    }
-}
-
-export class Style extends Observable implements definition.Style {
-    constructor(public view: View) {
+export class Style extends Observable implements StyleDefinition {
+    constructor(public view: ViewBase) {
         super();
     }
 
     private _updateCounter = 0;
     // private _nativeSetters = new Map<Property, any>();
 
+    public fontInternal: Font;
     public backgroundInternal: Background;
 
     public rotate: number;
@@ -379,7 +34,7 @@ export class Style extends Observable implements definition.Style {
 
     public backgroundColor: Color;
     public backgroundImage: string;
-    public backgroundRepeat: string;
+    public backgroundRepeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat";;
     public backgroundSize: string;
     public backgroundPosition: string;
 
@@ -389,10 +44,10 @@ export class Style extends Observable implements definition.Style {
     public borderBottomColor: Color;
     public borderLeftColor: Color;
     public borderWidth: string | number;
-    public borderTopWidth: number;
-    public borderRightWidth: number;
-    public borderBottomWidth: number;
-    public borderLeftWidth: number;
+    public borderTopWidth: Length;
+    public borderRightWidth: Length;
+    public borderBottomWidth: Length;
+    public borderLeftWidth: Length;
     public borderRadius: string | number;
     public borderTopLeftRadius: number;
     public borderTopRightRadius: number;
@@ -401,23 +56,23 @@ export class Style extends Observable implements definition.Style {
 
     public fontSize: number;
     public fontFamily: string;
-    public fontStyle: string;
+    public fontStyle: "normal" | "italic";
     public fontWeight: string;
     public font: string;
 
     public zIndex: number;
     public opacity: number;
-    public visibility: string;
+    public visibility: "visible" | "hidden" | "collapse" | "collapsed";
 
-    public textAlignment: string;
-    public textDecoration: string;
-    public textTransform: string;
     public letterSpacing: number;
-    public whiteSpace: string;
+    public textAlignment: "left" | "center" | "right";
+    public textDecoration: "none" | "underline" | "lineThrough";
+    public textTransform: "none" | "capitalize" | "uppercase" | "lowercase";
+    public whiteSpace: "normal" | "nowrap";
 
     // TODO: Change minWidth/Height to Length to support 'px'
-    public minWidth: number;
-    public minHeight: number;
+    public minWidth: Length;
+    public minHeight: Length;
     public width: Length;
     public height: Length;
     public margin: string;
@@ -442,8 +97,22 @@ export class Style extends Observable implements definition.Style {
     //SegmentedBar-specific props
     public selectedBackgroundColor: Color;
 
-    _transform: string;
-    _cssTransform: string;
+    effectiveMinWidth: number;
+    effectiveMinHeight: number;
+    effectiveWidth: number;
+    effectiveHeight: number;
+    effectiveMarginTop: number;
+    effectiveMarginRight: number;
+    effectiveMarginBottom: number;
+    effectiveMarginLeft: number;
+    effectivePaddingTop: number;
+    effectivePaddingRight: number;
+    effectivePaddingBottom: number;
+    effectivePaddingLeft: number;
+    effectiveBorderTopWidth: number;
+    effectiveBorderRightWidth: number;
+    effectiveBorderBottomWidth: number;
+    effectiveBorderLeftWidth: number;
 
     // public _updateTextDecoration() {
     //     if (this.textDecoration !== TextDecoration.none) {
@@ -597,183 +266,86 @@ export class Style extends Observable implements definition.Style {
     // }
 }
 
+Style.prototype.effectiveMinWidth = 0;
+Style.prototype.effectiveMinHeight = 0;
+Style.prototype.effectiveWidth = 0;
+Style.prototype.effectiveHeight = 0;
+Style.prototype.effectiveMarginTop = 0;
+Style.prototype.effectiveMarginRight = 0;
+Style.prototype.effectiveMarginBottom = 0;
+Style.prototype.effectiveMarginLeft = 0;
+Style.prototype.effectivePaddingTop = 0;
+Style.prototype.effectivePaddingRight = 0;
+Style.prototype.effectivePaddingBottom = 0;
+Style.prototype.effectivePaddingLeft = 0;
+Style.prototype.effectiveBorderTopWidth = 0;
+Style.prototype.effectiveBorderRightWidth = 0;
+Style.prototype.effectiveBorderBottomWidth = 0;
+Style.prototype.effectiveBorderLeftWidth = 0;
 // Property registration
 
-export let rotateProperty = new CssProperty<Style, number>({ name: "rotate", cssName: "rotate", defaultValue: 0 });
-rotateProperty.register(Style);
-// export let rotateProperty = new styleProperty.Property("rotate", "rotate", new PropertyMetadata(undefined, PropertyMetadataSettings.None, null));
+export let fontInternalProperty = new CssProperty<Style, Font>({ name: "fontInternal", cssName: "_fontInternal", defaultValue: Font.default });
 
-export let scaleXProperty = new CssProperty<Style, number>({ name: "scaleX", cssName: "scaleX", defaultValue: 1 });
-scaleXProperty.register(Style);
-// export let scaleXProperty = new styleProperty.Property("scaleX", "scaleX", new PropertyMetadata(undefined, PropertyMetadataSettings.None, null));
-
-export let scaleYProperty = new CssProperty<Style, number>({ name: "scaleY", cssName: "scaleY", defaultValue: 1 });
-scaleYProperty.register(Style);
-// export let scaleYProperty = new styleProperty.Property("scaleY", "scaleY", new PropertyMetadata(undefined, PropertyMetadataSettings.None, null));
-
-export let translateXProperty = new CssProperty<Style, number>({ name: "translateX", cssName: "translateX", defaultValue: 0 });
-translateXProperty.register(Style);
-// export let translateXProperty = new styleProperty.Property("translateX", "translateX", new PropertyMetadata(undefined, PropertyMetadataSettings.None, null));
-
-export let translateYProperty = new CssProperty<Style, number>({ name: "translateY", cssName: "translateY", defaultValue: 0 });
-translateYProperty.register(Style);
-// export let translateYProperty = new styleProperty.Property("translateY", "translateY", new PropertyMetadata(undefined, PropertyMetadataSettings.None, null));
-
-// NOTE: clip-path should not affects layout.
-export let clipPathProperty = new CssProperty<Style, string>({ name: "clipPath", cssName: "clip-path", valueChanged: onClipPathPropertyChanged });
-clipPathProperty.register(Style);
-// export let clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
-//     new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));
-
-export let color = new InheritedCssProperty<Style, Color>({ name: "color", cssName: "color", equalityComparer: Color.equals, valueConverter: colorConverter });
-color.register(Style);
-// export let colorProperty = new styleProperty.Property("color", "color", new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, undefined, Color.isValid, Color.equals), colorConverter);
-
-export let tintColorProperty = new CssProperty<Style, Color>({ name: "tintColor", cssName: "tint-color", equalityComparer: Color.equals, valueConverter: colorConverter });
-tintColorProperty.register(Style);
-
-export let placeholderColorProperty = new CssProperty<Style, Color>({ name: "placeholderColor", cssName: "placeholder-color", equalityComparer: Color.equals, valueConverter: colorConverter });
-placeholderColorProperty.register(Style);
-
-export let backgroundColorProperty = new CssProperty<Style, Color>({ name: "backgroundColor", cssName: "background-color", valueChanged: onBackgroundColorPropertyChanged, equalityComparer: Color.equals, valueConverter: colorConverter });
-backgroundColorProperty.register(Style);
-// export let backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
-//     new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, Color.isValid, Color.equals), colorConverter);
-
-export let backgroundImageProperty = new CssProperty<Style, string>({ name: "backgroundImage", cssName: "background-image", valueChanged: onBackgroundImagePropertyChanged });
-backgroundImageProperty.register(Style);
-// export let backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image", new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
-
-export let backgroundRepeatProperty = new CssProperty<Style, string>({ name: "backgroundRepeat", cssName: "background-repeat", valueChanged: onBackgroundRepeatPropertyChanged });
-backgroundRepeatProperty.register(Style);
-// export let backgroundRepeatProperty = new styleProperty.Property("backgroundRepeat", "background-repeat",
-//     new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundRepeatPropertyChanged));
-
-export let backgroundSizeProperty = new CssProperty<Style, string>({ name: "backgroundSize", cssName: "background-size", valueChanged: onBackgroundSizePropertyChanged });
-backgroundSizeProperty.register(Style);
-// export let backgroundSizeProperty = new styleProperty.Property("backgroundSize", "background-size",
-//     new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundSizePropertyChanged));
-
-export let backgroundPositionProperty = new CssProperty<Style, string>({ name: "backgroundPosition", cssName: "background-position", valueChanged: onBackgroundPositionPropertyChanged });
-backgroundPositionProperty.register(Style);
-// export let backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
-//     new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
-
-export let borderColorProperty = new CssProperty<Style, Color>({ name: "borderColor", cssName: "border-color", valueChanged: onBorderColorPropertyChanged, equalityComparer: Color.equals, valueConverter: colorConverter });
-borderColorProperty.register(Style);
-// export let borderColorProperty = new styleProperty.Property("borderColor", "border-color",
-//     new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderColorPropertyChanged, Color.isValid, Color.equals), colorConverter);
-
-export let borderTopColorProperty = new CssProperty<Style, Color>({ name: "borderTopColor", cssName: "border-top-color", valueChanged: NOTIMPLEMENTED, equalityComparer: Color.equals, valueConverter: colorConverter });
-borderTopColorProperty.register(Style);
-export let borderRightColorProperty = new CssProperty<Style, Color>({ name: "borderRightColor", cssName: "border-right-color", valueChanged: NOTIMPLEMENTED, equalityComparer: Color.equals, valueConverter: colorConverter });
-borderRightColorProperty.register(Style);
-export let borderBottomColorProperty = new CssProperty<Style, Color>({ name: "borderBottomColor", cssName: "border-bottom-color", valueChanged: NOTIMPLEMENTED, equalityComparer: Color.equals, valueConverter: colorConverter });
-borderBottomColorProperty.register(Style);
-export let borderLeftColorProperty = new CssProperty<Style, Color>({ name: "borderLeftColor", cssName: "border-left-color", valueChanged: NOTIMPLEMENTED, equalityComparer: Color.equals, valueConverter: colorConverter });
-borderLeftColorProperty.register(Style);
-
-export let borderWidthProperty = new CssProperty<Style, number>({ name: "borderWidth", cssName: "border-width", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: onBorderWidthPropertyChanged, valueConverter: isNonNegativeFiniteNumberConverter });
-borderWidthProperty.register(Style);
-// export let borderWidthProperty = new styleProperty.Property("borderWidth", "border-width",
-//     new PropertyMetadata(0, AffectsLayout, onBorderWidthPropertyChanged, isNonNegativeFiniteNumber), numberConverter);
-
-export let borderTopWidthProperty = new CssProperty<Style, number>({ name: "borderTopWidth", cssName: "border-top-width", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: NOTIMPLEMENTED, valueConverter: isNonNegativeFiniteNumberConverter });
-borderTopWidthProperty.register(Style);
-export let borderRightWidthProperty = new CssProperty<Style, number>({ name: "borderRightWidth", cssName: "border-right-width", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: NOTIMPLEMENTED, valueConverter: isNonNegativeFiniteNumberConverter });
-borderRightWidthProperty.register(Style);
-export let borderBottomWidthProperty = new CssProperty<Style, number>({ name: "borderBottomWidth", cssName: "border-bottom-width", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: NOTIMPLEMENTED, valueConverter: isNonNegativeFiniteNumberConverter });
-borderBottomWidthProperty.register(Style);
-export let borderLeftWidthProperty = new CssProperty<Style, number>({ name: "borderLeftWidth", cssName: "border-left-width", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: NOTIMPLEMENTED, valueConverter: isNonNegativeFiniteNumberConverter });
-borderLeftWidthProperty.register(Style);
-
-
-export let borderRadiusProperty = new CssProperty<Style, number>({ name: "borderRadius", cssName: "border-radius", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: onBorderRadiusPropertyChanged, valueConverter: isNonNegativeFiniteNumberConverter });
-borderRadiusProperty.register(Style);
-// export let borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
-//     new PropertyMetadata(0, AffectsLayout, onBorderRadiusPropertyChanged, isNonNegativeFiniteNumber), numberConverter);
-
-export let borderTopLeftRadiusProperty = new CssProperty<Style, number>({ name: "borderTopLeftRadius", cssName: "border-top-left-radius", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: NOTIMPLEMENTED, valueConverter: isNonNegativeFiniteNumberConverter });
-borderTopLeftRadiusProperty.register(Style);
-export let borderTopRightRadiusProperty = new CssProperty<Style, number>({ name: "borderTopRightRadius", cssName: "border-top-right-radius", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: NOTIMPLEMENTED, valueConverter: isNonNegativeFiniteNumberConverter });
-borderTopRightRadiusProperty.register(Style);
-export let borderBottomRightRadiusProperty = new CssProperty<Style, number>({ name: "borderBottomRightRadius", cssName: "border-bottom-right-radius", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: NOTIMPLEMENTED, valueConverter: isNonNegativeFiniteNumberConverter });
-borderBottomRightRadiusProperty.register(Style);
-export let borderBottomLeftRadiusProperty = new CssProperty<Style, number>({ name: "borderBottomLeftRadius", cssName: "border-bottom-left-radius", defaultValue: 0, affectsLayout: affectsIOSLayout, valueChanged: NOTIMPLEMENTED, valueConverter: isNonNegativeFiniteNumberConverter });
-borderBottomLeftRadiusProperty.register(Style);
-
-
-export let backgroundInternalProperty = new CssProperty<Style, Background>({ name: "backgroundInternal", cssName: "backgroundInternal", defaultValue: Background.default, equalityComparer: Background.equals });
-backgroundInternalProperty.register(Style);
-// export let backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
-//     new PropertyMetadata(Background.default, PropertyMetadataSettings.None, undefined, undefined, Background.equals));
-
-export let fontSizeProperty = new InheritedCssProperty<Style, number>({ name: "fontSize", cssName: "font-size", valueChanged: onFontSizeChanged, valueConverter: fontSizeConverter });
-fontSizeProperty.register(Style);
-// export let fontSizeProperty = new styleProperty.Property("fontSize", "font-size",
-//     new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, onFontSizeChanged), fontSizeConverter);
-
-export let fontFamilyProperty = new InheritedCssProperty<Style, string>({ name: "fontFamily", cssName: "font-family", valueChanged: onFontFamilyChanged });
+export let fontFamilyProperty = new InheritedCssProperty<Style, string>({
+    name: "fontFamily", cssName: "font-family", valueChanged: (target, newValue) => {
+        let currentFont = target.fontInternal;
+        if (currentFont.fontFamily !== newValue) {
+            target.fontInternal = currentFont.withFontFamily(newValue);
+        }
+    }
+});
 fontFamilyProperty.register(Style);
-// export let fontFamilyProperty = new styleProperty.Property("fontFamily", "font-family",
-// new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, onFontFamilyChanged));
 
-export let fontStyleProperty = new InheritedCssProperty<Style, string>({ name: "fontStyle", cssName: "font-style", defaultValue: FontStyle.normal, valueChanged: onFontStyleChanged });
+export let fontSizeProperty = new InheritedCssProperty<Style, number>({
+    name: "fontSize", cssName: "font-size", valueChanged: (target, newValue) => {
+        let currentFont = target.fontInternal;
+        if (currentFont.fontSize !== newValue) {
+            target.fontInternal = currentFont.withFontSize(newValue);
+        }
+    },
+    valueConverter: (v) => parseFloat(v)
+});
+fontSizeProperty.register(Style);
+
+export let fontStyleProperty = new InheritedCssProperty<Style, string>({
+    name: "fontStyle", cssName: "font-style", defaultValue: FontStyle.normal, valueChanged: (target, newValue) => {
+        if (newValue !== FontStyle.normal && newValue !== FontStyle.italic) {
+            throw new Error(`font-style should be 'normal' or 'italic'. value: ${newValue}`)
+        }
+
+        let currentFont = target.fontInternal;
+        if (currentFont.fontStyle !== newValue) {
+            target.fontInternal = currentFont.withFontStyle(newValue);
+        }
+    }
+});
 fontStyleProperty.register(Style);
-// export let fontStyleProperty = new styleProperty.Property("fontStyle", "font-style",
-//     new PropertyMetadata(FontStyle.normal, PropertyMetadataSettings.Inheritable, onFontStyleChanged, isFontStyleValid));
 
-export let fontWeightProperty = new InheritedCssProperty<Style, string>({ name: "fontWeight", cssName: "font-weight", defaultValue: FontWeight.normal, valueChanged: onFontWeightChanged });
+export let fontWeightProperty = new InheritedCssProperty<Style, string>({
+    name: "fontWeight", cssName: "font-weight", defaultValue: FontWeight.normal, valueChanged: (target, newValue) => {
+        if (!newValue) {
+            console.trace();
+        }
+
+        if (!(newValue === FontWeight.thin
+            || newValue === FontWeight.extraLight
+            || newValue === FontWeight.light
+            || newValue === FontWeight.normal || newValue === "400"
+            || newValue === FontWeight.medium
+            || newValue === FontWeight.semiBold
+            || newValue === FontWeight.bold || newValue === "700"
+            || newValue === FontWeight.extraBold
+            || newValue === FontWeight.black)) {
+            throw new Error(`Invalid font-weight value: ${newValue}`);
+        }
+
+        let currentFont = target.fontInternal;
+        if (currentFont.fontWeight !== newValue) {
+            target.fontInternal = currentFont.withFontWeight(newValue);
+        }
+    }
+});
 fontWeightProperty.register(Style);
-// export let fontWeightProperty = new styleProperty.Property("fontWeight", "font-weight",
-//     new PropertyMetadata(FontWeight.normal, PropertyMetadataSettings.Inheritable, onFontWeightChanged, isFontWeightValid));
-
-export let fontProperty = new InheritedCssProperty<Style, Font>({ name: "font", cssName: "font", defaultValue: Font.default, valueChanged: onFontChanged, equalityComparer: Font.equals, valueConverter: Font.parse });
-fontProperty.register(Style);
-// export let fontInternal = new styleProperty.Property("_fontInternal", "_fontInternal",
-//     new PropertyMetadata(Font.default, AffectsLayout, null, null, Font.equals), Font.parse);
-
-export let zIndexProperty = new CssProperty<Style, number>({ name: "zIndex", cssName: "z-index", defaultValue: 0, valueConverter: isFloatValueConverter });
-zIndexProperty.register(Style);
-// export let zIndexProperty = new styleProperty.Property("zIndex", "z-index",
-//     new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isFloatValueValid), floatConverter);
-
-export let visibilityProperty = new CssProperty<Style, string>({ name: "visibility", cssName: "visibility", defaultValue: Visibility.visible, affectsLayout: affectsIOSLayout, valueChanged: onVisibilityChanged });
-visibilityProperty.register(Style);
-// export let visibilityProperty = new styleProperty.Property("visibility", "visibility",
-//     new PropertyMetadata(Visibility.visible, AffectsLayout, onVisibilityChanged, isVisibilityValid), visibilityConverter);
-
-export let opacityProperty = new CssProperty<Style, number>({ name: "opacity", cssName: "opacity", defaultValue: 1, valueConverter: opacityConverter });
-opacityProperty.register(Style);
-// export let opacityProperty = new styleProperty.Property("opacity", "opacity",
-//     new PropertyMetadata(1.0, PropertyMetadataSettings.None, undefined, isOpacityValid), opacityConverter);
-
-// NOTE: text-align should not affects layout.
-export let textAlignmentProperty = new InheritedCssProperty<Style, string>({ name: "textAlignment", cssName: "text-align", valueConverter: textAlignConverter });
-textAlignmentProperty.register(Style);
-// export let textAlignmentProperty = new styleProperty.Property("textAlignment", "text-align",
-//     new PropertyMetadata(undefined, AffectsLayout | PropertyMetadataSettings.Inheritable), textAlignConverter);
-
-// NOTE: textDecorationConverter throws if value it fails.
-export let textDecorationProperty = new CssProperty<Style, string>({ name: "textDecoration", cssName: "text-decoration", defaultValue: TextDecoration.none, valueConverter: textDecorationConverter });
-textDecorationProperty.register(Style);
-// export let textDecorationProperty = new styleProperty.Property("textDecoration", "text-decoration",
-//     new PropertyMetadata(TextDecoration.none, PropertyMetadataSettings.None, undefined, isTextDecorationValid), textDecorationConverter);
-
-export let textTransformProperty = new CssProperty<Style, string>({ name: "textTransform", cssName: "text-transform", defaultValue: TextTransform.none, valueConverter: textTransformConverter });
-textTransformProperty.register(Style);
-// export let textTransformProperty = new styleProperty.Property("textTransform", "text-transform",
-//     new PropertyMetadata(TextTransform.none, PropertyMetadataSettings.None, undefined, isTextTransformValid), textTransformConverter);
-
-export let letterSpacingProperty = new CssProperty<Style, number>({ name: "letterSpacing", cssName: "letter-spacing", defaultValue: Number.NaN, affectsLayout: affectsIOSLayout, valueConverter: isFloatValueConverter });
-letterSpacingProperty.register(Style);
-// export let letterSpacingProperty = new styleProperty.Property("letterSpacing", "letter-spacing",
-//     new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isFloatValueValid), floatConverter);
-
-export let whiteSpaceProperty = new CssProperty<Style, string>({ name: "whiteSpace", cssName: "white-space", valueConverter: whiteSpaceConverter });
-whiteSpaceProperty.register(Style);
-// export let whiteSpaceProperty = new styleProperty.Property("whiteSpace", "white-space",
-//     new PropertyMetadata(undefined, AffectsLayout, undefined, isWhiteSpaceValid), whiteSpaceConverter);
 
 function onFontChanged(style: Style, oldValue: Font, newValue: Font): void {
     // TODO: Do we need these here?
@@ -783,215 +355,77 @@ function onFontChanged(style: Style, oldValue: Font, newValue: Font): void {
     style.fontSize = newValue.fontSize;
 }
 
-function shorthand(name: string, parser: (value: string) => {}) {
-    Object.defineProperty(Style, "css-" + name, {
-        set(value: string) {
-            const kvps = parser(value);
-            for (const key in kvps) {
-                const value = kvps[key];
-                Style["css-" + key] = value;
-            }
-        }
-    });
-    Object.defineProperty(Style, name, {
-        set(value: string) {
-            const kvps = parser(value);
-            for (const key in kvps) {
-                const value = kvps[key];
-                Style["css-" + key] = value;
-            }
-        }
-    })
-}
-
-
-class ShorthandProperty<T> {
-    constructor(name: string, private convert: (value: string) => T, private convertback) {
-    }
-}
-
-const margin1 = new ShorthandProperty("margin", (value: string) => {
-    {
-        [this.style.paddingTop]: 
-}, () => {
-    return `${this.style.paddingTop} ${this.style.paddingRight} ${this.style.paddingBottom} ${this.style.paddingLeft}`;
-});
-
-shorthand("transform", {
-    get() {
+export let fontProperty = new ShorthandProperty<Style>({
+    name: "font", cssName: "font",
+    getter: function (this: Style) {
+        return `${this.fontStyle} ${this.fontWeight} ${this.fontSize} ${this.fontFamily}`;
     },
-    set(value: string) {
-        const parsed = //...
-        this["css-translateX"] = parsed.translateX;
-    }
-});
-
-Object.defineProperty(Style, "css-transform", {
-    enumerable: true,
-    configurable: true,
-    get: function (this: Style): string {
-        return this._cssTransform;
-    },
-    set: function (this: Style, value: string) {
-        let oldValue = this._cssTransform;
-        this._cssTransform = value;
-        if (oldValue !== value) {
-            if (oldValue.indexOf("none") !== -1) {
-                onCssTransformChanged(this, "none");
-            }
-
-            // We reset it from above so no need to 
-            if (value.indexOf("none") !== -1)
-                onCssTransformChanged(this, transformConverter(value));
-        }
+    converter: function (value: string) {
+        return parseFont(value);
     }
 })
+fontProperty.register(Style);
 
-Object.defineProperty(Style, "transform", {
-    enumerable: true,
-    configurable: true,
-    get: function (this: Style): string {
-        return this._transform;
-    },
-    set: function (this: Style, value: string) {
-        let oldValue = this._transform;
-        this._transform = value;
-        if (oldValue !== value) {
-            if (oldValue.indexOf("none") !== -1) {
-                onTransformChanged(this, "none");
-            }
+function parseFont(font: string): [CssProperty<any, any>, any][] {
+    let fontSize: number;
+    let fontFamily: string;
+    let fontStyle: "normal" | "italic" = "normal";
+    let fontWeight = "normal";
 
-            // We reset it from above so no need to 
-            if (value.indexOf("none") !== -1)
-                onTransformChanged(this, transformConverter(value));
+    let elements = font.split(/\s+/);
+    let element: string;
+    while (element = elements.shift()) {
+        switch (element) {
+            case "normal":
+                break;
+
+            // TODO: add support for oblique font style.
+            case "italic":
+                // case "oblique":
+                fontStyle = "italic";
+                break;
+
+            case FontWeight.thin:
+            case FontWeight.extraLight:
+            case FontWeight.light:
+            case FontWeight.normal:
+            case "400":
+            case FontWeight.medium:
+            case FontWeight.semiBold:
+            case FontWeight.bold:
+            case "700":
+            case FontWeight.extraBold:
+            case FontWeight.black:
+                fontWeight = element;
+                break;
+
+            default:
+                if (!fontSize) {
+                    let parts = element.split("/");
+                    // TODO: add support for px support.
+                    fontSize = parseFloat(parts[0]);
+                    // TODO: add support for lineHeight.
+                    // if (parts.length > 1) {
+                    //     lineHeight = parts[1];
+                    // }
+                    break;
+                }
+
+                fontFamily = element;
+            // if (elements.length) {
+            //     fontFamily += " " + elements.join(" ");
+            // }
         }
     }
-})
 
-export let transformProperty = new CssProperty<Style, Object>({ name: "transform", cssName: "transform", defaultValue: "none", valueChanged: onTransformChanged, valueConverter: transformConverter });
-transformProperty.register(Style);
-
-function onTransformChanged(stlyle: Style, value: Object): void {
-    for (let transform in value) {
-        switch (transform) {
-            case "scaleX":
-                stlyle.scaleX = parseFloat(value[transform]);
-                break;
-
-            case "scaleY":
-                stlyle.scaleY = parseFloat(value[transform]);
-                break;
-
-            case "scale":
-            case "scale3d":
-                let scaleValues = value[transform].split(",");
-                if (scaleValues.length === 2 || scaleValues.length === 3) {
-                    stlyle.scaleX = parseFloat(scaleValues[0]);
-                    stlyle.scaleY = parseFloat(scaleValues[1]);
-                }
-                break;
-
-            case "translateX":
-                stlyle.translateX = parseFloat(value[transform]);
-                break;
-
-            case "translateY":
-                stlyle.translateY = parseFloat(value[transform]);
-                break;
-
-            case "translate":
-            case "translate3d":
-                let values = value[transform].split(",");
-                if (values.length === 2 || values.length === 3) {
-                    stlyle.translateX = parseFloat(values[0]);
-                    stlyle.translateY = parseFloat(values[1]);
-                }
-                break;
-
-            case "rotate":
-                let text = value[transform];
-                let val = parseFloat(text);
-                if (text.slice(-3) === "rad") {
-                    val = val * (180.0 / Math.PI);
-                }
-                stlyle.rotate = val;
-                break;
-
-            case "none":
-                stlyle.scaleX = 1;
-                stlyle.scaleY = 1;
-                stlyle.translateX = 0;
-                stlyle.translateY = 0;
-                stlyle.rotate = 0;
-                break;
-        }
-    }
+    return [
+        [fontStyleProperty, fontStyle],
+        [fontWeightProperty, fontWeight],
+        [fontSizeProperty, fontSize],
+        [fontFamilyProperty, fontFamily]
+    ]
 }
 
-let margin = new ShorthandProperty("margin", [top, right, bottom, left], convert, convertBack);
-
-function onCssTransformChanged(style: Style, value: Object): void {
-    for (let transform in value) {
-        switch (transform) {
-            case "scaleX":
-                style[scaleXProperty.cssName] = parseFloat(value[transform]);
-                break;
-
-            case "scaleY":
-                style[scaleYProperty.cssName] = parseFloat(value[transform]);
-                break;
-
-            case "scale":
-            case "scale3d":
-                let scaleValues = value[transform].split(",");
-                if (scaleValues.length >= 2) {
-                    style[scaleXProperty.cssName] = parseFloat(scaleValues[0]);
-                    style[scaleYProperty.cssName] = parseFloat(scaleValues[1]);
-                } else if (scaleValues.length === 1) {
-		    style[scaleXProperty.cssName] = parseFloat(scaleValues[0]);
-                    style[scaleYProperty.cssName] = parseFloat(scaleValues[0]);
-		}
-                break;
-
-            case "translateX":
-                style[translateXProperty.cssName] = parseFloat(value[transform]);
-                break;
-
-            case "translateY":
-                style[translateYProperty.cssName] = parseFloat(value[transform]);
-                break;
-
-            case "translate":
-            case "translate3d":
-                let values = value[transform].split(",");
-                if (values.length >= 2) {
-                    style[translateXProperty.cssName] = parseFloat(values[0]);
-                    style[translateYProperty.cssName] = parseFloat(values[1]);
-                } else if (values.length === 1) {
-		    style[translateXProperty.cssName] = parseFloat(values[0]);
-                    style[translateYProperty.cssName] = parseFloat(values[0]);
-		}
-                break;
-
-            case "rotate":
-                let text = value[transform];
-                let val = parseFloat(text);
-                if (text.slice(-3) === "rad") {
-                    val = val * (180.0 / Math.PI);
-                }
-                style[rotateProperty.cssName] = val;
-                break;
-
-            case "none":
-                style[scaleXProperty.cssName] = 1;
-                style[scaleYProperty.cssName] = 1;
-                style[translateXProperty.cssName] = 0;
-                style[translateYProperty.cssName] = 0;
-                style[rotateProperty.cssName] = 0;
-                break;
-        }
-    }
-}
 
 // register default shorthand callbacks.
 // styleProperty.registerShorthandCallback("font", onFontChanged);
diff --git a/tns-core-modules/ui/text-base/text-base-common.ts b/tns-core-modules/ui/text-base/text-base-common.ts
index a51c2ae62..32fcdabe6 100644
--- a/tns-core-modules/ui/text-base/text-base-common.ts
+++ b/tns-core-modules/ui/text-base/text-base-common.ts
@@ -3,18 +3,21 @@ import { View } from "ui/core/view";
 import { Observable, PropertyChangeData } from "data/observable";
 import { FormattedString, FormattedStringView } from "text/formatted-string";
 import { isIOS } from "platform";
-import { Property } from "ui/core/properties";
-import * as weakEvents from "ui/core/weak-event-listener";
+import { Property, CssProperty, InheritedCssProperty } from "ui/core/properties";
+import { Style } from "ui/styling/style";
+import { addWeakEventListener, removeWeakEventListener } from "ui/core/weak-event-listener";
+
+export * from "ui/core/view";
 
 function onFormattedTextPropertyChanged(textBase: TextBaseCommon, oldValue: FormattedString, newValue: FormattedString) {
     if (oldValue) {
         oldValue.parent = null;
-        weakEvents.removeWeakEventListener(oldValue, Observable.propertyChangeEvent, textBase.onFormattedTextChanged, textBase);
+        removeWeakEventListener(oldValue, Observable.propertyChangeEvent, textBase.onFormattedTextChanged, textBase);
     }
 
     if (newValue) {
         newValue.parent = textBase;
-        weakEvents.addWeakEventListener(newValue, Observable.propertyChangeEvent, textBase.onFormattedTextChanged, textBase);
+        addWeakEventListener(newValue, Observable.propertyChangeEvent, textBase.onFormattedTextChanged, textBase);
     }
 
     // textBase._onFormattedTextPropertyChanged(newValue);
@@ -55,6 +58,7 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition,
     public text: string;
     public formattedText: FormattedString;
 
+    // TODO: Do we need to export these properties here??
     get fontSize(): number {
         return this.style.fontSize;
     }
@@ -62,13 +66,41 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition,
         this.style.fontSize = value;
     }
 
-    get textAlignment(): string {
+    get letterSpacing(): number {
+        return this.style.letterSpacing;
+    }
+    set letterSpacing(value: number) {
+        this.style.letterSpacing = value;
+    }
+
+    get textAlignment(): "left" | "center" | "right" {
         return this.style.textAlignment;
     }
-    set textAlignment(value: string) {
+    set textAlignment(value: "left" | "center" | "right") {
         this.style.textAlignment = value;
     }
 
+    get textDecoration(): "none" | "underline" | "lineThrough" {
+        return this.style.textDecoration;
+    }
+    set textDecoration(value: "none" | "underline" | "lineThrough") {
+        this.style.textDecoration = value;
+    }
+
+    get textTransform(): "none" | "capitalize" | "uppercase" | "lowercase" {
+        return this.style.textTransform;
+    }
+    set textTransform(value: "none" | "capitalize" | "uppercase" | "lowercase") {
+        this.style.textTransform = value;
+    }
+
+    get whiteSpace(): "normal" | "nowrap" {
+        return this.style.whiteSpace;
+    }
+    set whiteSpace(value: "normal" | "nowrap") {
+        this.style.whiteSpace = value;
+    }
+
     public onFormattedTextChanged(data: PropertyChangeData) {
         let value = data.value;
         this._setFormattedTextPropertyToNative(value);
@@ -88,4 +120,64 @@ export let textProperty = new Property<TextBaseCommon, string>({ name: "text", d
 textProperty.register(TextBaseCommon);
 
 export let formattedTextProperty = new Property<TextBaseCommon, FormattedString>({ name: "formattedText", affectsLayout: isIOS, valueChanged: onFormattedTextPropertyChanged });
-formattedTextProperty.register(TextBaseCommon);
\ No newline at end of file
+formattedTextProperty.register(TextBaseCommon);
+
+export let textAlignmentProperty = new InheritedCssProperty<Style, string>({
+    name: "textAlignment", cssName: "text-align", valueConverter: (value: string) => {
+        switch (value) {
+            case "left":
+            case "center":
+            case "right":
+                return value;
+
+            default:
+                throw new Error("CSS text-align \"" + value + "\" is not supported.");
+        }
+    }
+});
+textAlignmentProperty.register(Style);
+
+export let textDecorationProperty = new CssProperty<Style, string>({
+    name: "textDecoration", cssName: "text-decoration", defaultValue: "none", valueConverter: (value: string) => {
+        let values = (value + "").split(" ");
+
+        if (values.indexOf("none") !== -1 || values.indexOf("underline") !== -1 || values.indexOf("lineThrough") !== -1) {
+            return value;
+        } else {
+            throw new Error("CSS text-decoration \"" + value + "\" is not supported.");
+        }
+    }
+});
+textDecorationProperty.register(Style);
+
+export let textTransformProperty = new CssProperty<Style, string>({
+    name: "textTransform", cssName: "text-transform", defaultValue: "none", valueConverter: (value: string) => {
+        switch (value) {
+            case "none":
+            case "uppercase":
+            case "lowercase":
+            case "capitalize":
+                return value;
+
+            default:
+                throw new Error("CSS text-transform \"" + value + "\" is not supported.");
+        }
+    }
+});
+textTransformProperty.register(Style);
+
+export let whiteSpaceProperty = new CssProperty<Style, "normal" | "nowrap">({
+    name: "whiteSpace", cssName: "white-space", valueConverter: (value: "normal" | "nowrap") => {
+        switch (value) {
+            case "normal":
+            case "nowrap":
+                return value;
+            default:
+                throw new Error("CSS white-space \"" + value + "\" is not supported.");
+        }
+    }
+});
+whiteSpaceProperty.register(Style);
+
+export let letterSpacingProperty = new CssProperty<Style, number>({ name: "letterSpacing", cssName: "letter-spacing", defaultValue: 0, affectsLayout: isIOS, valueConverter: (v: string) => parseFloat(v) });
+letterSpacingProperty.register(Style);
\ No newline at end of file
diff --git a/tns-core-modules/ui/text-base/text-base.android.ts b/tns-core-modules/ui/text-base/text-base.android.ts
index 2fb2a6f8d..c22855e12 100644
--- a/tns-core-modules/ui/text-base/text-base.android.ts
+++ b/tns-core-modules/ui/text-base/text-base.android.ts
@@ -40,6 +40,7 @@ function formatString(text: string, textTransform: string): string {
 class TextTransformation extends android.text.method.ReplacementTransformationMethod {
     constructor(public originalText: string, public formattedText: FormattedString, public textTransform: string) {
         super();
+        return global.__native(this);
     }
 
     protected getOriginal(): native.Array<string> {
diff --git a/tns-core-modules/ui/text-base/text-base.d.ts b/tns-core-modules/ui/text-base/text-base.d.ts
index 660b6f8f8..50fbcd37b 100644
--- a/tns-core-modules/ui/text-base/text-base.d.ts
+++ b/tns-core-modules/ui/text-base/text-base.d.ts
@@ -1,7 +1,8 @@
 declare module "ui/text-base" {
     import { View, AddChildFromBuilder } from "ui/core/view";
     import { FormattedString, FormattedStringView } from "text/formatted-string";
-    import { Property } from "ui/core/properties";
+    import { Property, CssProperty, InheritedCssProperty } from "ui/core/properties";
+    import { Style } from "ui/styling/style";
 
     /**
      * Represents the base class for all text views.
@@ -13,9 +14,9 @@
         text: string;
 
         /**
-         * Gets or sets text-alignment style property.
+         * Gets or sets a formatted string.
          */
-        textAlignment: string;
+        formattedText: FormattedString;
 
         /**
          * Gets or sets font-size style property.
@@ -23,9 +24,29 @@
         fontSize: number;
 
         /**
-         * Gets or sets a formatted string.
+         * Gets or sets letterSpace style property.
          */
-        formattedText: FormattedString;
+        letterSpacing: number;
+
+        /**
+         * Gets or sets text-alignment style property.
+         */
+        textAlignment: "left" | "center" | "right";
+
+        /**
+         * Gets or sets text decorations style property.
+         */
+        textDecoration: "none" | "underline" | "lineThrough";
+
+        /**
+         * Gets or sets text transform style property.
+         */
+        textTransform: "none" | "capitalize" | "uppercase" | "lowercase";
+
+        /**
+         * Gets or sets white space style property.
+         */
+        whiteSpace: "normal" | "nowrap";
 
         /**
          * Called for every child element declared in xml.
@@ -48,4 +69,10 @@
 
     export let textProperty: Property<TextBase, string>;
     export let formattedTextProperty: Property<TextBase, FormattedString>;
+
+    export let textAlignmentProperty: InheritedCssProperty<Style, string>;
+    export let textDecorationProperty: CssProperty<Style, string>;
+    export let textTransformProperty: CssProperty<Style, string>;
+    export let whiteSpaceProperty: CssProperty<Style, string>;
+    export let letterSpacingProperty: CssProperty<Style, number>;
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/time-picker/time-picker.android.ts b/tns-core-modules/ui/time-picker/time-picker.android.ts
index 75125640d..75ec319a8 100644
--- a/tns-core-modules/ui/time-picker/time-picker.android.ts
+++ b/tns-core-modules/ui/time-picker/time-picker.android.ts
@@ -3,9 +3,11 @@ export * from "./time-picker-common";
 
 @Interfaces([android.widget.TimePicker.OnTimeChangedListener])
 class TimeChangedListener implements android.widget.TimePicker.OnTimeChangedListener {
-    constructor(public owner: WeakRef<TimePicker>) { }
+    constructor(public owner: WeakRef<TimePicker>) {
+        return global.__native(this);
+    }
 
-    onTimeChanged(picker: android.widget.TimePicker, hour: number, minute: number) {
+    onTimeChanged(picker: android.widget.TimePicker, hour: number, minute: number): void {
         let timePicker = this.owner.get();
         if (timePicker) {
             let validTime = getValidTime(timePicker, hour, minute);
diff --git a/tns-platform-declarations/android/org.nativescript.widgets.d.ts b/tns-platform-declarations/android/org.nativescript.widgets.d.ts
index e9d8c67e8..9f02f3f60 100644
--- a/tns-platform-declarations/android/org.nativescript.widgets.d.ts
+++ b/tns-platform-declarations/android/org.nativescript.widgets.d.ts
@@ -46,8 +46,8 @@
             }
 
             export class BorderDrawable extends android.graphics.drawable.ColorDrawable {
-                constructor(density: number);
-                constructor(density: number, id: string);
+                constructor(id: string);
+
                 public refresh(
                     borderTopColor: number,
                     borderRightColor: number,