Fix: Border supports background

CrossPlatformModules.csproj

@@ -572,6 +572,7 @@
     <TypeScriptCompile Include="libjs.d.ts" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="apps\gallery-app\content\border.xml" />
     <Content Include="apps\pickers-demo\main-page.xml">
       <SubType>Designer</SubType>
     </Content>
@@ -722,9 +723,9 @@
       <SubType>Designer</SubType>
     </Content>
     <TypeScriptCompile Include="camera\camera.d.ts" />
-	<TypeScriptCompile Include="camera\camera-common.ts" >
-	  <DependentUpon>camera.d.ts</DependentUpon>
-	</TypeScriptCompile>
+    <TypeScriptCompile Include="camera\camera-common.ts">
+      <DependentUpon>camera.d.ts</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="camera\camera.android.ts">
       <DependentUpon>camera.d.ts</DependentUpon>
     </TypeScriptCompile>
@@ -1558,7 +1559,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/gallery-app/content/border.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page>
+  <Border cornerRadius="20" borderWidth="4" borderColor="darkgray"
+      style="background-color: lightblue; margin:20;">
+    <Label verticalAlignment="center" horizontalAlignment="center" text="Content" />
+  </Border>
+</Page>

apps/gallery-app/main-page.xml

@@ -16,6 +16,7 @@
         <Button tag="content/tab-view" text="TabView" tap="itemTap" />
         <Button tag="content/web-view" text="WebView" tap="itemTap" />
         <Button tag="content/scroll-view" text="ScrollView" tap="itemTap" />
+        <Button tag="content/border" text="Border" tap="itemTap" />
       </StackLayout>
 
       <Label cssClass="title" text="Views" />

ui/border/border-common.ts

@@ -81,4 +81,8 @@ export class Border extends contentView.ContentView implements definition.Border
         var borderSize = this.borderWidth * density;
         viewModule.View.layoutChild(this, this.content, borderSize, borderSize, right - left - borderSize, bottom - top - borderSize);
     }
+
+    public _updateAndroidBorder() {
+        // This is android specific method.
+    }
 }

ui/border/border.android.ts

@@ -1,63 +1,53 @@
 import borderCommon = require("ui/border/border-common");
 import proxy = require("ui/core/proxy");
+import view = require("ui/core/view");
 import dependencyObservable = require("ui/core/dependency-observable");
 import color = require("color");
+import utils = require("utils/utils");
 
 // merge the exports of the common file with the exports of this file
 declare var exports;
 require("utils/module-merge").merge(borderCommon, exports);
 
-function onCornerRadiusPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <Border>data.object;
-    if (!view._nativeView) {
-        return;
-    }
-
-    if (view._nativeView instanceof android.view.ViewGroup) {
-        var gd = new android.graphics.drawable.GradientDrawable();
-
-        gd.setCornerRadius(data.newValue);
-        gd.setStroke(view.borderWidth, view.borderColor.android);
-
-        (<android.view.View>view._nativeView).setBackgroundDrawable(gd);
-    }
+function onBorderPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var border = <Border>data.object;
+    border._updateAndroidBorder();
 }
-(<proxy.PropertyMetadata>borderCommon.Border.cornerRadiusProperty.metadata).onSetNativeValue = onCornerRadiusPropertyChanged;
 
-function onBorderWidthPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <Border>data.object;
-    if (!view._nativeView) {
-        return;
-    }
-
-    if (view._nativeView instanceof android.view.ViewGroup) {
-        var gd = new android.graphics.drawable.GradientDrawable();
-
-        gd.setCornerRadius(view.cornerRadius);
-        gd.setStroke(data.newValue, view.borderColor.android);
-
-        (<android.view.View>view._nativeView).setBackgroundDrawable(gd);
-    }
-}
-(<proxy.PropertyMetadata>borderCommon.Border.borderWidthProperty.metadata).onSetNativeValue = onBorderWidthPropertyChanged;
-
-function onBorderColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <Border>data.object;
-    if (!view._nativeView) {
-        return;
-    }
-
-    if (view._nativeView instanceof android.view.ViewGroup && data.newValue instanceof color.Color) {
-        var gd = new android.graphics.drawable.GradientDrawable();
-
-        gd.setCornerRadius(view.cornerRadius);
-        gd.setStroke(view.borderWidth, data.newValue.android);
-
-        (<android.view.View>view._nativeView).setBackgroundDrawable(gd);
-    }
-}
-(<proxy.PropertyMetadata>borderCommon.Border.borderColorProperty.metadata).onSetNativeValue = onBorderColorPropertyChanged;
+(<proxy.PropertyMetadata>borderCommon.Border.cornerRadiusProperty.metadata).onSetNativeValue = onBorderPropertyChanged;
+(<proxy.PropertyMetadata>borderCommon.Border.borderWidthProperty.metadata).onSetNativeValue = onBorderPropertyChanged;
+(<proxy.PropertyMetadata>borderCommon.Border.borderColorProperty.metadata).onSetNativeValue = onBorderPropertyChanged;
 
 export class Border extends borderCommon.Border {
-    //
+    public _updateAndroidBorder() {
+        if (!this._nativeView) {
+            return;
+        }
+
+        var nativeView = <android.view.ViewGroup>this._nativeView;
+
+        var backgroundDrawable = nativeView.getBackground();
+        if (!(backgroundDrawable instanceof android.graphics.drawable.GradientDrawable)) {
+            backgroundDrawable = new android.graphics.drawable.GradientDrawable();
+            nativeView.setBackgroundDrawable(backgroundDrawable);
+        }
+
+        var gd = <android.graphics.drawable.GradientDrawable>backgroundDrawable;
+        var density = utils.layout.getDisplayDensity();
+        gd.setCornerRadius(this.cornerRadius * density);
+
+        if (this.borderColor) {
+            gd.setStroke(this.borderWidth * density, this.borderColor.android);
+        }
+        else {
+            gd.setStroke(this.borderWidth * density, android.graphics.Color.TRANSPARENT);
+        }
+
+        if (this.backgroundColor) {
+            gd.setColor(this.backgroundColor.android);
+        }
+        else {
+            gd.setColor(android.graphics.Color.TRANSPARENT);
+        }
+    }
 } 

ui/border/border.d.ts

@@ -28,5 +28,9 @@ declare module "ui/border" {
          * Gets or sets the border color of the border component.
          */
         borderColor: color.Color;
+
+        //@private
+        _updateAndroidBorder();
+        //@endprivate
     }
 }

ui/styling/stylers.android.ts

@@ -1,6 +1,7 @@
 import types = require("utils/types");
 import trace = require("trace");
 import view = require("ui/core/view");
+import border = require("ui/border");
 import constants = require("utils/android_constants");
 import style = require("ui/styling/style");
 import definition = require("ui/styling");
@@ -343,6 +344,25 @@ export class SearchBarStyler implements definition.stylers.Styler {
     }
 }
 
+export class BorderStyler implements definition.stylers.Styler {
+    //Background methods
+    private static setBackgroundProperty(view: view.View, newValue: any) {
+        var border = <border.Border>view;
+        border._updateAndroidBorder();
+    }
+
+    private static resetBackgroundProperty(view: view.View, nativeValue: any) {
+        var border = <border.Border>view;
+        border._updateAndroidBorder();
+    }
+
+   public static registerHandlers() {
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            BorderStyler.setBackgroundProperty,
+            BorderStyler.resetBackgroundProperty), "Border");
+    }
+}
+
 export function _registerDefaultStylers() {
     style.registerNoStylingClass("Frame");
     DefaultStyler.registerHandlers();
@@ -351,4 +371,5 @@ export function _registerDefaultStylers() {
     ActivityIndicatorStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();
     SearchBarStyler.registerHandlers();
+    BorderStyler.registerHandlers();
 }