diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index c6db0b1f4..eba42a20f 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -1461,4 +1461,4 @@
-
\ No newline at end of file
+
diff --git a/apps/template-settings/app.css b/apps/template-settings/app.css
index f0742c740..5eaf8df78 100644
--- a/apps/template-settings/app.css
+++ b/apps/template-settings/app.css
@@ -1,5 +1,5 @@
.content {
- margin: 10;
+ padding: 10;
background-color: white;
}
diff --git a/apps/template-settings/main-page.xml b/apps/template-settings/main-page.xml
index 3f09696ba..2ba1a5284 100644
--- a/apps/template-settings/main-page.xml
+++ b/apps/template-settings/main-page.xml
@@ -2,7 +2,7 @@
-
+
@@ -21,7 +21,7 @@
-
+
diff --git a/apps/tests/layouts/absolute-layout-tests.ts b/apps/tests/layouts/absolute-layout-tests.ts
index 4031a1118..829ffa617 100644
--- a/apps/tests/layouts/absolute-layout-tests.ts
+++ b/apps/tests/layouts/absolute-layout-tests.ts
@@ -73,6 +73,7 @@ export function test_padding() {
return absoluteLayout.isLayoutValid;
}, 1);
+ layoutHelper.assertMeasure(btn, 100, 100);
layoutHelper.assertLayout(btn, 25, 35, 100, 100);
});
}
diff --git a/apps/tests/layouts/dock-layout-tests.ts b/apps/tests/layouts/dock-layout-tests.ts
index 9bb0f3d86..01ead78c4 100644
--- a/apps/tests/layouts/dock-layout-tests.ts
+++ b/apps/tests/layouts/dock-layout-tests.ts
@@ -191,6 +191,7 @@ export function test_padding() {
TKUnit.waitUntilReady(() => { return rootLayout.isLayoutValid; });
+ helper.assertMeasure(testBtn, 260, 240);
helper.assertLayout(testBtn, 10, 20, 260, 240);
}
diff --git a/apps/tests/layouts/grid-layout-tests.ts b/apps/tests/layouts/grid-layout-tests.ts
index 2bd9e018c..c356ed370 100644
--- a/apps/tests/layouts/grid-layout-tests.ts
+++ b/apps/tests/layouts/grid-layout-tests.ts
@@ -492,6 +492,7 @@ export function test_GridLayout_padding() {
TKUnit.waitUntilReady(() => { return btn.isLayoutValid });
+ helper.assertMeasure(btn, 260, 240);
helper.assertLayout(btn, 10, 20, 260, 240);
}
diff --git a/apps/tests/layouts/layout-helper.ts b/apps/tests/layouts/layout-helper.ts
index 35441c0b2..06dcac9ab 100644
--- a/apps/tests/layouts/layout-helper.ts
+++ b/apps/tests/layouts/layout-helper.ts
@@ -66,6 +66,15 @@ export class MyButton extends button.Button {
}
}
+export function assertMeasure(btn: MyButton, width: number, height: number, name?: string) {
+ var density = utils.layout.getDisplayDensity();
+
+ name = name ? "[" + name + "]" : "";
+
+ TKUnit.assertAreClose(btn.measureWidth / density, width, DELTA, name + "width");
+ TKUnit.assertAreClose(btn.measureHeight / density, height, DELTA, name + "height");
+}
+
export function assertLayout(btn: MyButton, left: number, top: number, width: number, height: number, name?: string): void {
var density = utils.layout.getDisplayDensity();
diff --git a/apps/tests/layouts/stack-layout-tests.ts b/apps/tests/layouts/stack-layout-tests.ts
index acf1cbc40..88289d61a 100644
--- a/apps/tests/layouts/stack-layout-tests.ts
+++ b/apps/tests/layouts/stack-layout-tests.ts
@@ -175,6 +175,9 @@ export function test_StackLayout_Padding_Vertical() {
return btn2.arranged;
}, ASYNC);
+ helper.assertMeasure(btn1, 260, 50);
+ helper.assertMeasure(btn1, 260, 50);
+
helper.assertLayout(btn1, 10, 20, 260, 50, "btn1");
helper.assertLayout(btn2, 10, 70, 260, 50, "btn2");
}
@@ -196,6 +199,9 @@ export function test_StackLayout_Padding_Horizontal() {
return btn2.arranged;
}, ASYNC);
+ helper.assertMeasure(btn1, 50, 240);
+ helper.assertMeasure(btn1, 50, 240);
+
helper.assertLayout(btn1, 10, 20, 50, 240, "btn1");
helper.assertLayout(btn2, 60, 20, 50, 240, "btn2");
}
diff --git a/apps/tests/layouts/wrap-layout-tests.ts b/apps/tests/layouts/wrap-layout-tests.ts
index c135b8037..35878f3c1 100644
--- a/apps/tests/layouts/wrap-layout-tests.ts
+++ b/apps/tests/layouts/wrap-layout-tests.ts
@@ -230,6 +230,9 @@ export function testPaddingRight() {
return wrapLayout.isLayoutValid;
});
+ layoutHelper.assertMeasure(btn1, 100, 50);
+ layoutHelper.assertMeasure(btn2, 80, 50);
+
// There should be no space left for the button on the first row,
// because fo the padding (200 - 100 - 30) = 70 button wants 80
layoutHelper.assertLayout(btn1, 0, 0, 100, 50, "button1");
@@ -258,6 +261,9 @@ export function testPaddingBottom() {
return wrapLayout.isLayoutValid;
});
+ layoutHelper.assertMeasure(btn1, 50, 100);
+ layoutHelper.assertMeasure(btn2, 50, 80);
+
// There should be no space left for the button on the first row,
// because fo the padding (200 - 100 - 30) = 70 button wants 80
layoutHelper.assertLayout(btn1, 0, 0, 50, 100, "button1");
diff --git a/ui/layouts/stack-layout/stack-layout.ts b/ui/layouts/stack-layout/stack-layout.ts
index 7932bc31d..0da139aa0 100644
--- a/ui/layouts/stack-layout/stack-layout.ts
+++ b/ui/layouts/stack-layout/stack-layout.ts
@@ -12,7 +12,7 @@ function validateOrientation(value: any): boolean {
export var orientationProperty = new dependencyObservable.Property(
"orientation",
- "LinearLayout",
+ "StackLayout",
new proxy.PropertyMetadata(enums.Orientation.vertical,
dependencyObservable.PropertyMetadataSettings.AffectsLayout,
undefined,
@@ -32,6 +32,7 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+ var density = utils.layout.getDisplayDensity();
var measureWidth = 0;
var measureHeight = 0;
@@ -43,6 +44,9 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
var isVertical = this.orientation === enums.Orientation.vertical;
+ var verticalPadding = (this.paddingTop + this.paddingBottom) * density;
+ var horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
+
var count = this.getChildrenCount();
var measureSpec: number;
@@ -56,7 +60,19 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
}
else {
measureSpec = utils.layout.AT_MOST;
- remainingLength = isVertical ? height : width;
+ remainingLength = isVertical ? height - verticalPadding : width - horizontalPadding;
+ }
+
+ var childMeasureSpec: number;
+ if (isVertical) {
+ var childWidth = (widthMode === utils.layout.UNSPECIFIED) ? 0 : width - horizontalPadding;
+ childWidth = Math.max(0, childWidth);
+ childMeasureSpec = utils.layout.makeMeasureSpec(childWidth, widthMode)
+ }
+ else {
+ var childHeight = (heightMode === utils.layout.UNSPECIFIED) ? 0 : height - verticalPadding;
+ childHeight = Math.max(0, childHeight);
+ childMeasureSpec = utils.layout.makeMeasureSpec(childHeight, heightMode)
}
var childSize: { measuredWidth: number; measuredHeight: number };
@@ -67,14 +83,14 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
}
if (isVertical) {
- childSize = view.View.measureChild(this, child, widthMeasureSpec, utils.layout.makeMeasureSpec(remainingLength, measureSpec));
+ childSize = view.View.measureChild(this, child, childMeasureSpec, utils.layout.makeMeasureSpec(remainingLength, measureSpec));
measureWidth = Math.max(measureWidth, childSize.measuredWidth);
var viewHeight = childSize.measuredHeight;
measureHeight += viewHeight;
remainingLength = Math.max(0, remainingLength - viewHeight);
}
else {
- childSize = view.View.measureChild(this, child, utils.layout.makeMeasureSpec(remainingLength, measureSpec), heightMeasureSpec);
+ childSize = view.View.measureChild(this, child, utils.layout.makeMeasureSpec(remainingLength, measureSpec), childMeasureSpec);
measureHeight = Math.max(measureHeight, childSize.measuredHeight);
var viewWidth = childSize.measuredWidth;
measureWidth += viewWidth;
@@ -82,9 +98,8 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
}
}
- var density = utils.layout.getDisplayDensity();
- measureWidth += (this.paddingLeft + this.paddingRight) * density;
- measureHeight += (this.paddingTop + this.paddingBottom) * density;
+ measureWidth += horizontalPadding;
+ measureHeight += verticalPadding;
measureWidth = Math.max(measureWidth, this.minWidth * density);
measureHeight = Math.max(measureHeight, this.minHeight * density);