diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 8185d2435..a06447a17 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -211,6 +211,21 @@
Designer
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
Designer
@@ -265,6 +280,22 @@
html-view.xml
+
+ absolute.xml
+
+
+ dock.xml
+
+
+ grid.xml
+
+
+
+ stack.xml
+
+
+ wrap.xml
+
login-page.xml
diff --git a/apps/ui-tests-app/layouts-percent/absolute.ts b/apps/ui-tests-app/layouts-percent/absolute.ts
new file mode 100644
index 000000000..a5dbb0abf
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/absolute.ts
@@ -0,0 +1,22 @@
+import pageModule = require("ui/page");
+import absoluteLayout = require("ui/layouts/absolute-layout");
+import model = require("./myview");
+
+var count = 0;
+
+export function onLoaded(args: { eventName: string, object: any }) {
+ var page = args.object;
+ page.bindingContext = new model.ViewModel();
+}
+
+export function onSetLeftSetTop(args: { eventName: string, object: any }) {
+ var layout = args.object.parent;
+ var child = layout.getViewById("setLeftSetTop");
+ if (++count % 2 === 1) {
+ absoluteLayout.AbsoluteLayout.setLeft(child, 175);
+ absoluteLayout.AbsoluteLayout.setTop(child, 375);
+ } else {
+ absoluteLayout.AbsoluteLayout.setLeft(child, 0);
+ absoluteLayout.AbsoluteLayout.setTop(child, 400);
+ }
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/absolute.xml b/apps/ui-tests-app/layouts-percent/absolute.xml
new file mode 100644
index 000000000..59adb5e72
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/absolute.xml
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/dock.ts b/apps/ui-tests-app/layouts-percent/dock.ts
new file mode 100644
index 000000000..549e7fa63
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/dock.ts
@@ -0,0 +1,16 @@
+import pageModule = require("ui/page");
+import model = require("./myview");
+
+export function onLoaded(args: { eventName: string, object: any }) {
+ var page = args.object;
+ page.bindingContext = new model.ViewModel();
+}
+
+export function onStretchLastChild(args: { eventName: string, object: any }) {
+ var layout = args.object.parent;
+ if(layout.stretchLastChild === true) {
+ layout.stretchLastChild = false;
+ } else {
+ layout.stretchLastChild = true;
+ }
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/dock.xml b/apps/ui-tests-app/layouts-percent/dock.xml
new file mode 100644
index 000000000..5f143d1c0
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/dock.xml
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/grid.ts b/apps/ui-tests-app/layouts-percent/grid.ts
new file mode 100644
index 000000000..2086589ea
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/grid.ts
@@ -0,0 +1,43 @@
+import buttonModule = require("ui/button");
+import pageModule = require("ui/page");
+import gridLayoutModule = require("ui/layouts/grid-layout");
+import model = require("./myview");
+
+export function onLoaded(args: { eventName: string, object: any }) {
+ var page = args.object;
+ page.bindingContext = new model.ViewModel();
+}
+
+export function onAddRowColumn(args: { eventName: string, object: any }) {
+ var layout = args.object.parent.parent;
+ var row = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
+ var column = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
+ layout.addRow(row);
+ layout.addColumn(column);
+
+ var btn0 = new buttonModule.Button();
+ var btn1 = new buttonModule.Button();
+ btn0.id = "b0";
+ btn1.id = "b1";
+ btn0.text = "b0";
+ btn1.text = "b1";
+ layout.addChild(btn0);
+ layout.addChild(btn1);
+ gridLayoutModule.GridLayout.setRow(btn0, 0);
+ gridLayoutModule.GridLayout.setColumn(btn0, 4);
+ gridLayoutModule.GridLayout.setRow(btn1, 4);
+ gridLayoutModule.GridLayout.setColumn(btn1, 0);
+ gridLayoutModule.GridLayout.setColumnSpan(btn1, 2);
+ gridLayoutModule.GridLayout.setRowSpan(btn0, 3);
+}
+
+export function onRemoveRowColumn(args: { eventName: string, object: any }) {
+ var layout = args.object.parent.parent;
+ var itemSpecs, count;
+ itemSpecs = layout.getRows();
+ count = itemSpecs.length;
+ layout.removeRow(itemSpecs[count - 1]);
+ itemSpecs = layout.getColumns();
+ count = itemSpecs.length;
+ layout.removeColumn(itemSpecs[count - 1]);
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/grid.xml b/apps/ui-tests-app/layouts-percent/grid.xml
new file mode 100644
index 000000000..e1a4a5ec4
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/grid.xml
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/myview.ts b/apps/ui-tests-app/layouts-percent/myview.ts
new file mode 100644
index 000000000..29cf8948e
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/myview.ts
@@ -0,0 +1,167 @@
+import observable = require("data/observable");
+import enums = require("ui/enums");
+import view = require("ui/core/view");
+import layouts = require("ui/layouts/layout-base");
+
+export class ViewModel extends observable.Observable {
+
+ // View properties
+ public onWidthHeight(args: { eventName: string, object: any }): void {
+ var view: view.View = args.object;
+ if ((view).width !== "50%") {
+ (view).width = "50%";
+ (view).height = "50%";
+ } else {
+ (view).width = "75%";
+ (view).height = "75%";
+ }
+ }
+
+ public onMinWidthMinHeight(args: { eventName: string, object: any }): void {
+ var view: view.View = args.object;
+ if (view.minWidth !== 105) {
+ view.minWidth = 105;
+ view.minHeight = 55;
+ } else {
+ view.minWidth = 0;
+ view.minHeight = 0;
+ }
+ }
+
+ public onMargins(args: { eventName: string, object: any }): void {
+ var view: view.View = args.object;
+ if ((view).marginLeft !== "10%") {
+ (view).marginLeft = "10%";
+ (view).marginTop = "10%";
+ (view).marginRight = "10%";
+ (view).marginBottom = "10%";
+ } else {
+ view.marginLeft = 0;
+ view.marginTop = 0;
+ view.marginRight = 0;
+ view.marginBottom = 0;
+ }
+ }
+
+ public onAlignments(args: { eventName: string, object: any }): void {
+ var view: view.View = args.object;
+ if (view.horizontalAlignment === enums.HorizontalAlignment.stretch) {
+ view.horizontalAlignment = enums.HorizontalAlignment.left;
+ view.verticalAlignment = enums.VerticalAlignment.top;
+ } else if (view.horizontalAlignment === enums.HorizontalAlignment.left) {
+ view.horizontalAlignment = enums.HorizontalAlignment.center;
+ view.verticalAlignment = enums.VerticalAlignment.center;
+ } else if (view.horizontalAlignment === enums.HorizontalAlignment.center) {
+ view.horizontalAlignment = enums.HorizontalAlignment.right;
+ view.verticalAlignment = enums.VerticalAlignment.bottom;
+ } else {
+ view.horizontalAlignment = enums.HorizontalAlignment.stretch;
+ view.verticalAlignment = enums.VerticalAlignment.stretch;
+ }
+ }
+
+ public onCollapse(args: { eventName: string, object: any }): void {
+ var view: view.View = args.object;
+ view.visibility = enums.Visibility.collapse;
+ }
+
+ public onVisibile(args: { eventName: string, object: any }): void {
+ var view: view.View = args.object;
+ var layout = view.parent;
+
+ var child = layout.getViewById("collapse");
+ child.visibility = enums.Visibility.visible;
+ }
+
+ // Layout properties
+ public onPaddings(args: { eventName: string, object: any }): void {
+ var layout = args.object.parent;
+ if (layout.paddingLeft !== 5) {
+ layout.paddingLeft = 5;
+ layout.paddingTop = 5;
+ layout.paddingRight = 5;
+ layout.paddingBottom = 5;
+ } else {
+ layout.paddingLeft = 0;
+ layout.paddingTop = 0;
+ layout.paddingRight = 0;
+ layout.paddingBottom = 0;
+ }
+ }
+
+ public onAllProperties(args: { eventName: string, object: any }): void {
+ var child;
+ var layout = args.object.parent;
+
+ // WidthHeight
+ child = layout.getViewById("widthHeight");
+ if ((child).width !== "50%") {
+ (child).width = "50%";
+ (child).height = "50%";
+ } else {
+ (child).width = "75%";
+ (child).height = "75%";
+ }
+
+ // MinWidthMinHeight
+ child = layout.getViewById("minWidthMinHeight");
+ if (child.minWidth !== 105) {
+ child.minWidth = 105;
+ child.minHeight = 55;
+ } else {
+ child.minWidth = 0;
+ child.minHeight = 0;
+ }
+
+ // Margins
+ child = layout.getViewById("margins");
+ if ((child).marginLeft !== "10%") {
+ (child).marginLeft = "10%";
+ (child).marginTop = "10%";
+ (child).marginRight = "10%";
+ (child).marginBottom = "10%";
+ } else {
+ child.marginLeft = 0;
+ child.marginTop = 0;
+ child.marginRight = 0;
+ child.marginBottom = 0;
+ }
+
+ // Alignments
+ child = layout.getViewById("alignments");
+ if (child.horizontalAlignment === enums.HorizontalAlignment.stretch) {
+ child.horizontalAlignment = enums.HorizontalAlignment.left;
+ child.verticalAlignment = enums.VerticalAlignment.top;
+ } else if (child.horizontalAlignment === enums.HorizontalAlignment.left) {
+ child.horizontalAlignment = enums.HorizontalAlignment.center;
+ child.verticalAlignment = enums.VerticalAlignment.center;
+ } else if (child.horizontalAlignment === enums.HorizontalAlignment.center) {
+ child.horizontalAlignment = enums.HorizontalAlignment.right;
+ child.verticalAlignment = enums.VerticalAlignment.bottom;
+ } else {
+ child.horizontalAlignment = enums.HorizontalAlignment.stretch;
+ child.verticalAlignment = enums.VerticalAlignment.stretch;
+ }
+
+ // Collapse
+ child = layout.getViewById("collapse");
+ if (child.visibility === enums.Visibility.visible) {
+ child.visibility = enums.Visibility.collapse;
+ } else {
+ child.visibility = enums.Visibility.visible;
+ }
+
+ // Paddings
+ if (layout.paddingLeft !== 5) {
+ layout.paddingLeft = 5;
+ layout.paddingTop = 5;
+ layout.paddingRight = 5;
+ layout.paddingBottom = 5;
+ } else {
+ layout.paddingLeft = 0;
+ layout.paddingTop = 0;
+ layout.paddingRight = 0;
+ layout.paddingBottom = 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/stack.ts b/apps/ui-tests-app/layouts-percent/stack.ts
new file mode 100644
index 000000000..f6c428d12
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/stack.ts
@@ -0,0 +1,17 @@
+import enums = require("ui/enums");
+import pageModule = require("ui/page");
+import model = require("./myview");
+
+export function onLoaded(args: { eventName: string, object: any }) {
+ var page = args.object;
+ page.bindingContext = new model.ViewModel();
+}
+
+export function onOrientation(args: { eventName: string, object: any }) {
+ var layout = args.object.parent;
+ if(layout.orientation === enums.Orientation.vertical) {
+ layout.orientation = enums.Orientation.horizontal;
+ } else {
+ layout.orientation = enums.Orientation.vertical;
+ }
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/stack.xml b/apps/ui-tests-app/layouts-percent/stack.xml
new file mode 100644
index 000000000..4204ad9ed
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/stack.xml
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/wrap.ts b/apps/ui-tests-app/layouts-percent/wrap.ts
new file mode 100644
index 000000000..f1a4511d9
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/wrap.ts
@@ -0,0 +1,23 @@
+import enums = require("ui/enums");
+import pageModule = require("ui/page");
+import model = require("./myview");
+
+export function onLoaded(args: { eventName: string, object: any }) {
+ var page = args.object;
+ page.bindingContext = new model.ViewModel();
+}
+
+export function onOrientation(args: { eventName: string, object: any }) {
+ var layout = args.object.parent;
+ if (layout.orientation === enums.Orientation.vertical) {
+ layout.orientation = enums.Orientation.horizontal;
+ } else {
+ layout.orientation = enums.Orientation.vertical;
+ }
+}
+
+export function onItemWidthItemHeight(args: { eventName: string, object: any }) {
+ var layout = args.object.parent;
+ layout.itemWidth = 100;
+ layout.itemHeight = 100;
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts-percent/wrap.xml b/apps/ui-tests-app/layouts-percent/wrap.xml
new file mode 100644
index 000000000..074fc5698
--- /dev/null
+++ b/apps/ui-tests-app/layouts-percent/wrap.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/layouts/wrap.ts b/apps/ui-tests-app/layouts/wrap.ts
index a6ad5a53a..562fe24e1 100644
--- a/apps/ui-tests-app/layouts/wrap.ts
+++ b/apps/ui-tests-app/layouts/wrap.ts
@@ -9,7 +9,7 @@ export function onLoaded(args: { eventName: string, object: any }) {
export function onOrientation(args: { eventName: string, object: any }) {
var layout = args.object.parent;
- if(layout.orientation === enums.Orientation.vertical) {
+ if (layout.orientation === enums.Orientation.vertical) {
layout.orientation = enums.Orientation.horizontal;
} else {
layout.orientation = enums.Orientation.vertical;
@@ -18,11 +18,6 @@ export function onOrientation(args: { eventName: string, object: any }) {
export function onItemWidthItemHeight(args: { eventName: string, object: any }) {
var layout = args.object.parent;
- if(layout.itemWidth !== 40) {
- layout.itemWidth = 40;
- layout.itemHeight = 60;
- } else {
- layout.itemWidth = Number.NaN;
- layout.itemHeight = Number.NaN;
- }
+ layout.itemWidth = 40;
+ layout.itemHeight = 60;
}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index c989fedb6..68023a49c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -350,6 +350,12 @@
"apps/ui-tests-app/font/text-field.ts",
"apps/ui-tests-app/font/text-view.ts",
"apps/ui-tests-app/html-view/html-view.ts",
+ "apps/ui-tests-app/layouts-percent/absolute.ts",
+ "apps/ui-tests-app/layouts-percent/dock.ts",
+ "apps/ui-tests-app/layouts-percent/grid.ts",
+ "apps/ui-tests-app/layouts-percent/myview.ts",
+ "apps/ui-tests-app/layouts-percent/stack.ts",
+ "apps/ui-tests-app/layouts-percent/wrap.ts",
"apps/ui-tests-app/layouts/absolute.ts",
"apps/ui-tests-app/layouts/dock.ts",
"apps/ui-tests-app/layouts/grid.ts",