Merge pull request #320 from NativeScript/view-borders

View borders support added

CrossPlatformModules.csproj

@@ -190,6 +190,7 @@
     <TypeScriptCompile Include="apps\tests\ui\scroll-view\scroll-view-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\style\style-properties-tests.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\view\view-tests.d.ts" />
     <TypeScriptCompile Include="apps\tests\ui\web-view\web-view-tests.ts" />
     <TypeScriptCompile Include="apps\editable-text-demo\app.ts" />
     <TypeScriptCompile Include="apps\editable-text-demo\main-page.ts">
@@ -1582,7 +1583,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/tests/testRunner.ts

@@ -23,6 +23,7 @@ function isRunningOnEmulator(): boolean {
 }
 
 export var allTests = {};
+allTests["XML-DECLARATION"] = require("./xml-declaration/xml-declaration-tests");
 allTests["APPLICATION"] = require("./application-tests");
 allTests["DOCKLAYOUT"] = require("./layouts/dock-layout-tests");
 allTests["WRAPLAYOUT"] = require("./layouts/wrap-layout-tests");
@@ -49,6 +50,7 @@ allTests["STYLE"] = require("./ui/style/style-tests");
 allTests["VISUAL-STATE"] = require("./ui/style/visual-state-tests");
 allTests["VALUE-SOURCE"] = require("./ui/style/value-source-tests");
 allTests["BUTTON"] = require("./ui/button/button-tests");
+allTests["BORDER"] = require("./ui/border/border-tests");
 allTests["LABEL"] = require("./ui/label/label-tests");
 allTests["TAB-VIEW"] = require("./ui/tab-view/tab-view-tests");
 allTests["IMAGE"] = require("./ui/image/image-tests");
@@ -63,7 +65,6 @@ allTests["TEXT-VIEW"] = require("./ui/text-view/text-view-tests");
 allTests["FORMATTEDSTRING"] = require("./text/formatted-string-tests");
 allTests["FILE-SYSTEM-ACCESS"] = require("./file-system-access-tests/file-system-access-tests");
 allTests["FILE-NAME-RESOLVER"] = require("./file-name-resolver-tests/file-name-resolver-tests");
-allTests["XML-DECLARATION"] = require("./xml-declaration/xml-declaration-tests");
 allTests["LIST-PICKER"] = require("./ui/list-picker/list-picker-tests");
 allTests["DATE-PICKER"] = require("./ui/date-picker/date-picker-tests");
 allTests["TIME-PICKER"] = require("./ui/time-picker/time-picker-tests");

apps/tests/ui/border/border-tests.ts

@@ -1,36 +1,16 @@
-import buttonModule = require("ui/button");
-import colorModule = require("color");
-
-// <snippet module="ui/border" title="Border">
+// <snippet module="ui/border" title="Border">
 // # Border
 // Using borders requires the "ui/border" module.
 // ``` JavaScript
-import borderModule = require("ui/border");
+// var borderModule = require("ui/border");
 // ```
 
 // ### Declaring a Border.
 //```XML
 //  <Page>
-//      <Border cornerRadius="10" borderWidth="1" borderColor="#FF0000">
+//      <Border borderRadius="10" borderWidth="1" borderColor="#FF0000">
 //          <Button text="OK"/>
 //      </Border>
 //  </Page>
 //```
 // </snippet>
-
-export function test_DummyTestForCodeSnippet() {
-    // <snippet module="ui/border" title="Border">
-    // ### Creating a Border programmatically
-    // ``` JavaScript
-    var button = new buttonModule.Button();
-    button.text = "OK";
-
-    var border = new borderModule.Border();
-    border.cornerRadius = 10;
-    border.borderWidth = 1;
-    border.borderColor = new colorModule.Color("#FF0000");
-
-    border.content = button;
-    // ```
-    // </snippet>
-}

apps/tests/ui/button/button-tests-native.android.ts

@@ -17,7 +17,7 @@ export function getNativeColor(button: buttonModule.Button): colorModule.Color {
 }
 
 export function getNativeBackgroundColor(button: buttonModule.Button): colorModule.Color {
-    return new colorModule.Color((<android.graphics.drawable.ColorDrawable>button.android.getBackground()).getColor());
+    return new colorModule.Color((<any>button.android.getBackground()).backgroundColor);
 }
 
 export function getNativeTextAlignment(button: buttonModule.Button): string {

apps/tests/ui/label/label-tests.ts

@@ -223,7 +223,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
             normalColor = actualColors.getDefaultColor()
             TKUnit.assert(normalColor, "Expected: " + expColor + ", Actual: " + normalColor);
 
-            actualBackgroundColor = (<android.graphics.drawable.ColorDrawable>testLabel.android.getBackground()).getColor();
+            actualBackgroundColor = (<any>testLabel.android.getBackground()).backgroundColor;
             expBackgroundColor = android.graphics.Color.parseColor(backgroundColor);
             TKUnit.assertEqual(actualBackgroundColor, expBackgroundColor);
         }

apps/tests/ui/text-field/text-field-tests-native.android.ts

@@ -26,7 +26,7 @@ export function getNativeColor(textField: textFieldModule.TextField): colorModul
 }
 
 export function getNativeBackgroundColor(textField: textFieldModule.TextField): colorModule.Color {
-    return new colorModule.Color((<android.graphics.drawable.ColorDrawable>textField.android.getBackground()).getColor());
+    return new colorModule.Color((<any>textField.android.getBackground()).backgroundColor);
 }
 
 export function getNativeTextAlignment(textField: textFieldModule.TextField): string {

apps/tests/ui/text-view/text-view-tests-native.android.ts

@@ -30,7 +30,7 @@ export function getNativeColor(textView: textViewModule.TextView): colorModule.C
 }
 
 export function getNativeBackgroundColor(textView: textViewModule.TextView): colorModule.Color {
-    return new colorModule.Color((<android.graphics.drawable.ColorDrawable>textView.android.getBackground()).getColor());
+    return new colorModule.Color((<any>textView.android.getBackground()).backgroundColor);
 }
 
 export function getNativeTextAlignment(textView: textViewModule.TextView): string {

apps/tests/ui/view/view-tests-common.ts

@@ -3,6 +3,7 @@ import viewModule = require("ui/core/view");
 import frame = require("ui/frame");
 import page = require("ui/page");
 import button = require("ui/button");
+import label = require("ui/label");
 import types = require("utils/types");
 import helper = require("../../ui/helper");
 import color = require("color");
@@ -11,6 +12,7 @@ import proxy = require("ui/core/proxy");
 import layoutModule = require("ui/layouts/layout");
 import observable = require("data/observable");
 import bindable = require("ui/core/bindable");
+import definition = require("./view-tests");
 
 export var test_eachDescendant = function () {
     var test = function (views: Array<viewModule.View>) {
@@ -581,3 +583,56 @@ export var test_binding_style_visibility = function () {
 export var test_binding_style_opacity = function () {
     property_binding_style_test("opacity", 0.5, 0.6);
 }
+
+function _createLabelWithBorder(): viewModule.View {
+    var lbl = new label.Label();
+    lbl.borderRadius = 10;
+    lbl.borderWidth = 2;
+    lbl.borderColor = new color.Color("#FF0000");
+    lbl.backgroundColor = new color.Color("#FFFF00");
+
+    return lbl;
+}
+
+export var testBorderWidth = function () {
+    helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
+        var lbl = <label.Label>views[0];
+        var expectedValue = lbl.borderWidth;
+        var actualValue = definition.getNativeBorderWidth(lbl);
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testCornerRadius = function () {
+    helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
+        var lbl = <label.Label>views[0];
+        var expectedValue = lbl.borderRadius;
+        var actualValue = definition.getNativeCornerRadius(lbl);
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testBorderColor = function () {
+    helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
+        var lbl = <label.Label>views[0];
+        TKUnit.assert(definition.checkNativeBorderColor(lbl), "BorderColor not applied correctly!");
+    });
+}
+
+export var testBackgroundColor = function () {
+    helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
+        var lbl = <label.Label>views[0];
+        TKUnit.assert(definition.checkNativeBackgroundColor(lbl), "BackgroundColor not applied correctly!");
+    });
+}
+
+export var testBackgroundImage = function () {
+    var lbl = _createLabelWithBorder();
+    lbl.cssClass = "myClass";
+    helper.buildUIAndRunTest(lbl, function (views: Array<viewModule.View>) {
+        var page = <page.Page>views[1];
+        page.css = ".myClass { background-image: url('~/logo.png') }";
+
+        TKUnit.assert(definition.checkNativeBackgroundImage(lbl), "Style background-image not loaded correctly.");
+    });
+}

apps/tests/ui/view/view-tests.android.ts

@@ -253,4 +253,34 @@ export var test_StylePropertiesDefaultValuesCache = function () {
     };
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
+}
+
+export function getNativeBorderWidth(v: view.View): number {
+    var bkg = <any>(<android.view.View>v.android).getBackground();
+
+    return bkg ? bkg.borderWidth : -1;
+}
+
+export function getNativeCornerRadius(v: view.View): number {
+    var bkg = <any>(<android.view.View>v.android).getBackground();
+
+    return bkg ? bkg.cornerRadius : -1;
+}
+
+export function checkNativeBorderColor(v: view.View): boolean {
+    var bkg = <any>(<android.view.View>v.android).getBackground();
+
+    return v.borderColor && bkg && bkg.borderColor === v.borderColor.android;
+}
+
+export function checkNativeBackgroundColor(v: view.View): boolean {
+    var bkg = <any>(<android.view.View>v.android).getBackground();
+
+    return v.backgroundColor && bkg && bkg.backgroundColor === v.backgroundColor.android;
+}
+
+export function checkNativeBackgroundImage(v: view.View): boolean {
+    var bkg = <any>(<android.view.View>v.android).getBackground();
+
+    return bkg && bkg.bitmap !== undefined;
 }

apps/tests/ui/view/view-tests.d.ts

@@ -0,0 +1,12 @@
+//@private
+import view = require("ui/core/view");
+
+export declare function getNativeBorderWidth(v: view.View): number;
+
+export declare function getNativeCornerRadius(v: view.View): number;
+
+export declare function checkNativeBorderColor(v: view.View): boolean
+
+export declare function checkNativeBackgroundColor(v: view.View): boolean;
+
+export declare function checkNativeBackgroundImage(v: view.View): boolean

apps/tests/ui/view/view-tests.ios.ts

@@ -1,5 +1,26 @@
 import commonTests = require("./view-tests-common");
+import view = require("ui/core/view");
 
 // merge the exports of the application_common file with the exports of this file
 declare var exports;
 require("utils/module-merge").merge(commonTests, exports);
+
+export function getNativeBorderWidth(v: view.View): number {
+    return (<UIView>v.ios).layer.borderWidth;
+}
+
+export function getNativeCornerRadius(v: view.View): number {
+    return (<UIView>v.ios).layer.cornerRadius;
+}
+
+export function checkNativeBorderColor(v: view.View): boolean {
+    return v.borderColor && (<UIView>v.ios).layer.borderColor === v.borderColor.ios.CGColor;
+}
+
+export function checkNativeBackgroundColor(v: view.View): boolean {
+    return v.backgroundColor && (<UIView>v.ios).backgroundColor.isEqual(v.backgroundColor.ios);
+}
+
+export function checkNativeBackgroundImage(v: view.View): boolean {
+    return (<UIView>v.ios).backgroundColor !== undefined;
+}

ui/border/border.android.ts

@@ -48,4 +48,4 @@ export class Border extends borderCommon.Border {
             gd.setColor(android.graphics.Color.TRANSPARENT);
         }
     }
-} 
+} 

ui/core/view-common.ts

@@ -187,6 +187,26 @@ export class View extends proxy.ProxyObject implements definition.View {
     }
 
     // START Style property shortcuts
+    get borderRadius(): number {
+        return this.style.borderRadius;
+    }
+    set borderRadius(value: number) {
+        this.style.borderRadius = value;
+    }
+
+    get borderWidth(): number {
+        return this.style.borderWidth;
+    }
+    set borderWidth(value: number) {
+        this.style.borderWidth = value;
+    }
+
+    get borderColor(): color.Color {
+        return this.style.borderColor;
+    }
+    set borderColor(value: color.Color) {
+        this.style.borderColor = value;
+    }
 
     get color(): color.Color {
         return this.style.color;

ui/core/view.d.ts

@@ -95,6 +95,21 @@ 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 class View extends proxy.ProxyObject {
+        /**
+         * Gets or sets the corner radius of the view.
+         */
+        borderRadius: number;
+
+        /**
+         * Gets or sets the border width of the view.
+         */
+        borderWidth: number;
+
+        /**
+         * Gets or sets the border color of the view.
+         */
+        borderColor: color.Color;
+
         /**
          * String value used when hooking to loaded event.
          */

ui/styling/style.ts

@@ -45,6 +45,27 @@ export class Style extends observable.DependencyObservable implements styling.St
         this._setValue(backgroundImageProperty, value, observable.ValueSource.Local);
     }
 
+    get borderColor(): color.Color {
+        return this._getValue(borderColorProperty);
+    }
+    set borderColor(value: color.Color) {
+        this._setValue(borderColorProperty, value, observable.ValueSource.Local);
+    }
+
+    get borderWidth(): number {
+        return this._getValue(borderWidthProperty);
+    }
+    set borderWidth(value: number) {
+        this._setValue(borderWidthProperty, value, observable.ValueSource.Local);
+    }
+
+    get borderRadius(): number {
+        return this._getValue(borderRadiusProperty);
+    }
+    set borderRadius(value: number) {
+        this._setValue(borderRadiusProperty, value, observable.ValueSource.Local);
+    }
+
     get fontSize(): number {
         return this._getValue(fontSizeProperty);
     }
@@ -352,30 +373,49 @@ export var backgroundImageProperty = new styleProperty.Property("backgroundImage
     new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
 
 function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
+    var view: view.View = (<any>data.object)._view;
     var style = <Style>data.object;
+    var url: string = data.newValue;
+
+    style._setValue(backgroundImageSourceProperty, undefined, observable.ValueSource.Local);
 
     if (types.isString(data.newValue)) {
         var pattern: RegExp = /url\(('|")(.*?)\1\)/;
-        var match = data.newValue && (<string>data.newValue).match(pattern);
-        var url = match && match[2];
+        var match = url.match(pattern);
+        if (match && match[2]) {
+            url = match[2];
+        }
 
-        if (types.isDefined(url)) {
-            if (utils.isDataURI(url)) {
-                var base64Data = url.split(",")[1];
-                if (types.isDefined(base64Data)) {
-                    style._setValue(backgroundImageSourceProperty, imageSource.fromBase64(base64Data), observable.ValueSource.Local);
-                }
-            } else if (utils.isFileOrResourcePath(url)) {
-                style._setValue(backgroundImageSourceProperty, imageSource.fromFileOrResource(url), observable.ValueSource.Local);
-            } else {
-                imageSource.fromUrl(url).then(r=> {
-                    style._setValue(backgroundImageSourceProperty, r, observable.ValueSource.Local);
-                });
+        if (utils.isDataURI(url)) {
+            var base64Data = url.split(",")[1];
+            if (types.isDefined(base64Data)) {
+                style._setValue(backgroundImageSourceProperty, imageSource.fromBase64(base64Data), observable.ValueSource.Local);
             }
+        } else if (utils.isFileOrResourcePath(url)) {
+            style._setValue(backgroundImageSourceProperty, imageSource.fromFileOrResource(url), observable.ValueSource.Local);
+        } else if (url.indexOf("http") !== -1) {
+            if (view) {
+                view["_url"] = url;
+            }
+            imageSource.fromUrl(url).then(r=> {
+                if (view && view["_url"] === url) {
+                    style._setValue(backgroundImageSourceProperty, r, observable.ValueSource.Local);
+                }
+            });
         }
     }
 }
 
+export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
+    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, color.Color.equals),
+    converters.colorConverter);
+
+export var borderWidthProperty = new styleProperty.Property("borderWidth", "border-width",
+    new observable.PropertyMetadata(0, observable.PropertyMetadataSettings.AffectsLayout, null, isPaddingValid), converters.numberConverter);
+
+export var borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
+    new observable.PropertyMetadata(0, observable.PropertyMetadataSettings.AffectsLayout, null, isPaddingValid), converters.numberConverter);
+
 export var backgroundImageSourceProperty = new styleProperty.Property("backgroundImageSource", "background-image-source",
     new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, undefined));
 

ui/styling/stylers.android.ts

@@ -8,15 +8,127 @@ import definition = require("ui/styling");
 import stylersCommon = require("ui/styling/stylers-common");
 import enums = require("ui/enums");
 import utils = require("utils/utils");
+import styleModule = require("ui/styling/style");
+import imageSource = require("image-source");
 
 // merge the exports of the common file with the exports of this file
 declare var exports;
 require("utils/module-merge").merge(stylersCommon, exports);
 
+class BorderGradientDrawable extends android.graphics.drawable.GradientDrawable {
+    private _density = utils.layout.getDisplayDensity();
+
+    constructor() {
+        super();
+
+        return global.__native(this);
+    }
+
+    private _borderWidth: number;
+    get borderWidth(): number {
+        return this._borderWidth;
+    }
+    set borderWidth(value: number) {
+        if (this._borderWidth !== value) {
+            this._borderWidth = value;
+
+            this.setStroke(this._borderWidth * this._density, this._borderColor);
+        }
+    }
+
+    private _cornerRadius: number;
+    get cornerRadius(): number {
+        return this._cornerRadius;
+    }
+    set cornerRadius(value: number) {
+        if (this._cornerRadius !== value) {
+            this._cornerRadius = value;
+
+            this.setCornerRadius(this._cornerRadius);
+        }
+    }
+
+    private _borderColor: number;
+    get borderColor(): number {
+        return this._borderColor;
+    }
+    set borderColor(value: number) {
+        if (this._borderColor !== value) {
+            this._borderColor = value;
+
+            this.setStroke(this._borderWidth * this._density, this._borderColor);
+        }
+    }
+
+    private _backgroundColor: number;
+    get backgroundColor(): number {
+        return this._backgroundColor;
+    }
+    set backgroundColor(value: number) {
+        if (this._backgroundColor !== value) {
+            this._backgroundColor = value;
+
+            this.setColor(this._backgroundColor);
+        }
+    }
+
+    private _bitmap: android.graphics.Bitmap
+    get bitmap(): android.graphics.Bitmap {
+        return this._bitmap;
+    }
+    set bitmap(value: android.graphics.Bitmap) {
+        if (this._bitmap !== value) {
+            this._bitmap = value;
+
+            this.invalidateSelf();
+        }
+    }
+
+    public draw(canvas: android.graphics.Canvas): void {
+        if (this.bitmap) {
+            this.setColor(android.graphics.Color.TRANSPARENT);
+
+            var stroke = this._borderWidth * this._density;
+            canvas.drawBitmap(this.bitmap, stroke, stroke, undefined);
+        }
+        super.draw(canvas);
+    }
+}
+
+function onBorderPropertyChanged(v: view.View) {
+    if (!v._nativeView) {
+        return;
+    }
+
+    var value = <imageSource.ImageSource>v.style._getValue(styleModule.backgroundImageSourceProperty);
+
+    if (v.borderWidth !== 0 || v.borderRadius !== 0 || !types.isNullOrUndefined(v.backgroundColor) || !types.isNullOrUndefined(value)) {
+        var nativeView = <android.view.View>v._nativeView;
+
+        var bkg = <BorderGradientDrawable>nativeView.getBackground();
+
+        if (!(bkg instanceof BorderGradientDrawable)) {
+            bkg = new BorderGradientDrawable();
+            nativeView.setBackground(bkg);
+        }
+
+        var padding = v.borderWidth * utils.layout.getDisplayDensity();
+
+        nativeView.setPadding(padding, padding, padding, padding);
+
+        bkg.borderWidth = v.borderWidth;
+        bkg.cornerRadius = v.borderRadius;
+        bkg.borderColor = v.borderColor ? v.borderColor.android : android.graphics.Color.TRANSPARENT;
+        bkg.backgroundColor = v.backgroundColor ? v.backgroundColor.android : android.graphics.Color.TRANSPARENT;
+
+        bkg.bitmap = value ? value.android : undefined;
+    }
+}
+
 export class DefaultStyler implements definition.stylers.Styler {
     //Background methods
     private static setBackgroundProperty(view: view.View, newValue: any) {
-        (<android.view.View>view.android).setBackgroundColor(newValue);
+        onBorderPropertyChanged(view);
     }
 
     private static resetBackgroundProperty(view: view.View, nativeValue: any) {
@@ -38,12 +150,7 @@ export class DefaultStyler implements definition.stylers.Styler {
 
     //Background image methods
     private static setBackgroundImageSourceProperty(view: view.View, newValue: any) {
-        var nativeView = <android.view.View>view.android;
-        var bmp = <android.graphics.Bitmap>newValue;
-        var d = new android.graphics.drawable.BitmapDrawable(bmp);
-        d.setTileModeXY(android.graphics.Shader.TileMode.REPEAT, android.graphics.Shader.TileMode.REPEAT);
-        d.setDither(true); 
-        nativeView.setBackgroundDrawable(d);
+        onBorderPropertyChanged(view);
     }
 
     private static resetBackgroundImageSourceProperty(view: view.View, nativeValue: any) {
@@ -53,13 +160,34 @@ export class DefaultStyler implements definition.stylers.Styler {
     }
 
     private static getNativeBackgroundImageSourceValue(view: view.View): any {
-        var drawable = view.android.getBackground();
+        return view.android.getBackground();
+    }
 
-        if (drawable instanceof android.graphics.drawable.BitmapDrawable) {
-            return drawable;
-        }
+    //Border width methods
+    private static setBorderWidthProperty(view: view.View, newValue: any) {
+        onBorderPropertyChanged(view);
+    }
 
-        return undefined;
+    private static resetBorderWidthProperty(view: view.View, nativeValue: any) {
+        view.borderWidth = 0;
+    }
+
+    //Border color methods
+    private static setBorderColorProperty(view: view.View, newValue: any) {
+        onBorderPropertyChanged(view);
+    }
+
+    private static resetBorderColorProperty(view: view.View, nativeValue: any) {
+        view.borderColor = undefined;
+    }
+
+    //Corner radius methods
+    private static setBorderRadiusProperty(view: view.View, newValue: any) {
+        onBorderPropertyChanged(view);
+    }
+
+    private static resetBorderRadiusProperty(view: view.View, nativeValue: any) {
+        view.borderRadius = 0;
     }
 
     //Visibility methods
@@ -125,6 +253,18 @@ export class DefaultStyler implements definition.stylers.Styler {
         style.registerHandler(style.minHeightProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setMinHeightProperty,
             DefaultStyler.resetMinHeightProperty))
+
+        style.registerHandler(style.borderWidthProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setBorderWidthProperty,
+            DefaultStyler.resetBorderWidthProperty));
+
+        style.registerHandler(style.borderColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setBorderColorProperty,
+            DefaultStyler.resetBorderColorProperty));
+
+        style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setBorderRadiusProperty,
+            DefaultStyler.resetBorderRadiusProperty));
     }
 }
 
@@ -199,23 +339,6 @@ export class TextViewStyler implements definition.stylers.Styler {
     }
 }
 
-export class ButtonStyler implements definition.stylers.Styler {
-    //Background methods
-    private static setButtonBackgroundProperty(view: view.View, newValue: any) {
-        (<android.view.View>view.android).setBackgroundColor(newValue);
-    }
-
-    private static resetButtonBackgroundProperty(view: view.View, nativeValue: any) {
-        (<android.view.View>view.android).setBackgroundResource(constants.btn_default);
-    }
-
-    public static registerHandlers() {
-        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
-            ButtonStyler.setButtonBackgroundProperty,
-            ButtonStyler.resetButtonBackgroundProperty), "Button");
-    }
-}
-
 export class ActivityIndicatorStyler implements definition.stylers.Styler {
     //Visibility methods
     public static setActivityIndicatorVisibilityProperty(view: view.View, newValue: any) {
@@ -356,7 +479,7 @@ export class BorderStyler implements definition.stylers.Styler {
         border._updateAndroidBorder();
     }
 
-   public static registerHandlers() {
+    public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             BorderStyler.setBackgroundProperty,
             BorderStyler.resetBackgroundProperty), "Border");
@@ -366,7 +489,6 @@ export class BorderStyler implements definition.stylers.Styler {
 export function _registerDefaultStylers() {
     style.registerNoStylingClass("Frame");
     DefaultStyler.registerHandlers();
-    ButtonStyler.registerHandlers();
     TextViewStyler.registerHandlers();
     ActivityIndicatorStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();

ui/styling/stylers.ios.ts

@@ -85,6 +85,45 @@ export class DefaultStyler implements definition.stylers.Styler {
         }
     }
 
+    //Border width methods
+    private static setBorderWidthProperty(view: view.View, newValue: any) {
+        if (view._nativeView instanceof UIView) {
+            (<UIView>view._nativeView).layer.borderWidth = newValue;
+        }
+    }
+
+    private static resetBorderWidthProperty(view: view.View, nativeValue: any) {
+        if (view._nativeView instanceof UIView) {
+            (<UIView>view._nativeView).layer.borderWidth = nativeValue;
+        }
+    }
+
+    //Border color methods
+    private static setBorderColorProperty(view: view.View, newValue: any) {
+        if (view._nativeView instanceof UIView && newValue instanceof UIColor) {
+            (<UIView>view._nativeView).layer.borderColor = (<UIColor>newValue).CGColor;
+        }
+    }
+
+    private static resetBorderColorProperty(view: view.View, nativeValue: any) {
+        if (view._nativeView instanceof UIView && nativeValue instanceof UIColor) {
+            (<UIView>view._nativeView).layer.borderColor = (<UIColor>nativeValue).CGColor;
+        }
+    }
+
+    //Border radius methods
+    private static setBorderRadiusProperty(view: view.View, newValue: any) {
+        if (view._nativeView instanceof UIView) {
+            (<UIView>view._nativeView).layer.cornerRadius = newValue;
+        }
+    }
+
+    private static resetBorderRadiusProperty(view: view.View, nativeValue: any) {
+        if (view._nativeView instanceof UIView) {
+            (<UIView>view._nativeView).layer.cornerRadius = nativeValue;
+        }
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setBackgroundProperty,
@@ -103,6 +142,18 @@ export class DefaultStyler implements definition.stylers.Styler {
         style.registerHandler(style.opacityProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setOpacityProperty,
             DefaultStyler.resetOpacityProperty));
+
+        style.registerHandler(style.borderWidthProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setBorderWidthProperty,
+            DefaultStyler.resetBorderWidthProperty));
+
+        style.registerHandler(style.borderColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setBorderColorProperty,
+            DefaultStyler.resetBorderColorProperty));
+
+        style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setBorderRadiusProperty,
+            DefaultStyler.resetBorderRadiusProperty));
     }
 }