diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 8fe407600..165dce381 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -190,6 +190,7 @@
+
@@ -1582,7 +1583,7 @@
False
-
+
\ No newline at end of file
diff --git a/apps/tests/testRunner.ts b/apps/tests/testRunner.ts
index ae62df060..b40bec212 100644
--- a/apps/tests/testRunner.ts
+++ b/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");
diff --git a/apps/tests/ui/border/border-tests.ts b/apps/tests/ui/border/border-tests.ts
index 9aeb0fc9f..0b7069e2c 100644
--- a/apps/tests/ui/border/border-tests.ts
+++ b/apps/tests/ui/border/border-tests.ts
@@ -1,36 +1,16 @@
-import buttonModule = require("ui/button");
-import colorModule = require("color");
-
-//
+//
// # Border
// Using borders requires the "ui/border" module.
// ``` JavaScript
-import borderModule = require("ui/border");
+// var borderModule = require("ui/border");
// ```
// ### Declaring a Border.
//```XML
//
-//
+//
//
//
//
//```
//
-
-export function test_DummyTestForCodeSnippet() {
- //
- // ### 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;
- // ```
- //
-}
\ No newline at end of file
diff --git a/apps/tests/ui/button/button-tests-native.android.ts b/apps/tests/ui/button/button-tests-native.android.ts
index 540a59bb6..39e0d705d 100644
--- a/apps/tests/ui/button/button-tests-native.android.ts
+++ b/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((button.android.getBackground()).getColor());
+ return new colorModule.Color((button.android.getBackground()).backgroundColor);
}
export function getNativeTextAlignment(button: buttonModule.Button): string {
diff --git a/apps/tests/ui/label/label-tests.ts b/apps/tests/ui/label/label-tests.ts
index fadbe47b2..d7d26526d 100644
--- a/apps/tests/ui/label/label-tests.ts
+++ b/apps/tests/ui/label/label-tests.ts
@@ -223,7 +223,7 @@ export class LabelTest extends testModule.UITest {
normalColor = actualColors.getDefaultColor()
TKUnit.assert(normalColor, "Expected: " + expColor + ", Actual: " + normalColor);
- actualBackgroundColor = (testLabel.android.getBackground()).getColor();
+ actualBackgroundColor = (testLabel.android.getBackground()).backgroundColor;
expBackgroundColor = android.graphics.Color.parseColor(backgroundColor);
TKUnit.assertEqual(actualBackgroundColor, expBackgroundColor);
}
diff --git a/apps/tests/ui/text-field/text-field-tests-native.android.ts b/apps/tests/ui/text-field/text-field-tests-native.android.ts
index b64141f63..d90197585 100644
--- a/apps/tests/ui/text-field/text-field-tests-native.android.ts
+++ b/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((textField.android.getBackground()).getColor());
+ return new colorModule.Color((textField.android.getBackground()).backgroundColor);
}
export function getNativeTextAlignment(textField: textFieldModule.TextField): string {
diff --git a/apps/tests/ui/text-view/text-view-tests-native.android.ts b/apps/tests/ui/text-view/text-view-tests-native.android.ts
index 8f144aa56..f0e989a52 100644
--- a/apps/tests/ui/text-view/text-view-tests-native.android.ts
+++ b/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((textView.android.getBackground()).getColor());
+ return new colorModule.Color((textView.android.getBackground()).backgroundColor);
}
export function getNativeTextAlignment(textView: textViewModule.TextView): string {
diff --git a/apps/tests/ui/view/view-tests-common.ts b/apps/tests/ui/view/view-tests-common.ts
index bed9c0501..7ac37b0cc 100644
--- a/apps/tests/ui/view/view-tests-common.ts
+++ b/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) {
@@ -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) {
+ var lbl = 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) {
+ var lbl = 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) {
+ var lbl = views[0];
+ TKUnit.assert(definition.checkNativeBorderColor(lbl), "BorderColor not applied correctly!");
+ });
+}
+
+export var testBackgroundColor = function () {
+ helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array) {
+ var lbl = 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) {
+ var page = views[1];
+ page.css = ".myClass { background-image: url('~/logo.png') }";
+
+ TKUnit.assert(definition.checkNativeBackgroundImage(lbl), "Style background-image not loaded correctly.");
+ });
+}
\ No newline at end of file
diff --git a/apps/tests/ui/view/view-tests.android.ts b/apps/tests/ui/view/view-tests.android.ts
index 1e8e8abab..c4bdbe121 100644
--- a/apps/tests/ui/view/view-tests.android.ts
+++ b/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 = (v.android).getBackground();
+
+ return bkg ? bkg.borderWidth : -1;
+}
+
+export function getNativeCornerRadius(v: view.View): number {
+ var bkg = (v.android).getBackground();
+
+ return bkg ? bkg.cornerRadius : -1;
+}
+
+export function checkNativeBorderColor(v: view.View): boolean {
+ var bkg = (v.android).getBackground();
+
+ return v.borderColor && bkg && bkg.borderColor === v.borderColor.android;
+}
+
+export function checkNativeBackgroundColor(v: view.View): boolean {
+ var bkg = (v.android).getBackground();
+
+ return v.backgroundColor && bkg && bkg.backgroundColor === v.backgroundColor.android;
+}
+
+export function checkNativeBackgroundImage(v: view.View): boolean {
+ var bkg = (v.android).getBackground();
+
+ return bkg && bkg.bitmap !== undefined;
}
\ No newline at end of file
diff --git a/apps/tests/ui/view/view-tests.d.ts b/apps/tests/ui/view/view-tests.d.ts
new file mode 100644
index 000000000..90108ddd8
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/apps/tests/ui/view/view-tests.ios.ts b/apps/tests/ui/view/view-tests.ios.ts
index 00a42dcfc..9ccff422d 100644
--- a/apps/tests/ui/view/view-tests.ios.ts
+++ b/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 (v.ios).layer.borderWidth;
+}
+
+export function getNativeCornerRadius(v: view.View): number {
+ return (v.ios).layer.cornerRadius;
+}
+
+export function checkNativeBorderColor(v: view.View): boolean {
+ return v.borderColor && (v.ios).layer.borderColor === v.borderColor.ios.CGColor;
+}
+
+export function checkNativeBackgroundColor(v: view.View): boolean {
+ return v.backgroundColor && (v.ios).backgroundColor.isEqual(v.backgroundColor.ios);
+}
+
+export function checkNativeBackgroundImage(v: view.View): boolean {
+ return (v.ios).backgroundColor !== undefined;
+}
\ No newline at end of file
diff --git a/ui/border/border.android.ts b/ui/border/border.android.ts
index 577b559ea..ab3d128ef 100644
--- a/ui/border/border.android.ts
+++ b/ui/border/border.android.ts
@@ -48,4 +48,4 @@ export class Border extends borderCommon.Border {
gd.setColor(android.graphics.Color.TRANSPARENT);
}
}
-}
\ No newline at end of file
+}
diff --git a/ui/core/view-common.ts b/ui/core/view-common.ts
index e67a36eb8..ddf9d84a8 100644
--- a/ui/core/view-common.ts
+++ b/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;
diff --git a/ui/core/view.d.ts b/ui/core/view.d.ts
index 83d059f9c..be8c9bb3a 100644
--- a/ui/core/view.d.ts
+++ b/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.
*/
diff --git a/ui/styling/style.ts b/ui/styling/style.ts
index 3982e403a..4a6682986 100644
--- a/ui/styling/style.ts
+++ b/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 = (data.object)._view;
var style =