From 3a7a944ba1fd71356fde31fd2a75dc986c59d033 Mon Sep 17 00:00:00 2001
From: Vasil Chimev <Vasil.Chimev@gmail.com>
Date: Tue, 31 Jul 2018 14:24:55 +0300
Subject: [PATCH] test(safe-area): add scroll view with grid layout examples

---
 .../action-bar/hscroll-grid-page.xml          | 10 ++
 .../action-bar/vscroll-grid-page.xml          | 10 ++
 .../fragments/hscroll-grid-fragment.xml       | 92 +++++++++++++++++++
 .../fragments/vscroll-grid-fragment.xml       | 92 +++++++++++++++++++
 .../no-action-bar/hscroll-grid-page.xml       |  7 ++
 .../no-action-bar/vscroll-grid-page.xml       |  7 ++
 .../app/scrollview/scrollview-page.xml        |  8 +-
 7 files changed, 224 insertions(+), 2 deletions(-)
 create mode 100644 e2e/safe-area/app/scrollview/action-bar/hscroll-grid-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/action-bar/vscroll-grid-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/fragments/hscroll-grid-fragment.xml
 create mode 100644 e2e/safe-area/app/scrollview/fragments/vscroll-grid-fragment.xml
 create mode 100644 e2e/safe-area/app/scrollview/no-action-bar/hscroll-grid-page.xml
 create mode 100644 e2e/safe-area/app/scrollview/no-action-bar/vscroll-grid-page.xml

diff --git a/e2e/safe-area/app/scrollview/action-bar/hscroll-grid-page.xml b/e2e/safe-area/app/scrollview/action-bar/hscroll-grid-page.xml
new file mode 100644
index 000000000..4c980c58b
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/action-bar/hscroll-grid-page.xml
@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="scrollview/fragments">
+    
+    <ActionBar>
+        <Label text="Action Bar"></Label>
+    </ActionBar>
+
+    <fragments:hscroll-grid-fragment></fragments:hscroll-grid-fragment>
+</Page>
diff --git a/e2e/safe-area/app/scrollview/action-bar/vscroll-grid-page.xml b/e2e/safe-area/app/scrollview/action-bar/vscroll-grid-page.xml
new file mode 100644
index 000000000..c53fdd38d
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/action-bar/vscroll-grid-page.xml
@@ -0,0 +1,10 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="scrollview/fragments">
+    
+    <ActionBar>
+        <Label text="Action Bar"></Label>
+    </ActionBar>
+
+    <fragments:vscroll-grid-fragment></fragments:vscroll-grid-fragment>
+</Page>
diff --git a/e2e/safe-area/app/scrollview/fragments/hscroll-grid-fragment.xml b/e2e/safe-area/app/scrollview/fragments/hscroll-grid-fragment.xml
new file mode 100644
index 000000000..e9b6c999e
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/fragments/hscroll-grid-fragment.xml
@@ -0,0 +1,92 @@
+<ScrollView orientation="horizontal" backgroundColor="LightGreen">
+    <GridLayout rows="auto, auto" columns="auto, auto" backgroundColor="LightBlue">
+        <StackLayout row="0" col="0" backgroundColor="SkyBlue">
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        </StackLayout>
+        <StackLayout row="0" col="1" backgroundColor="LightPink">
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        </StackLayout>
+        <StackLayout row="1" col="0" backgroundColor="LightYellow">
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        </StackLayout>
+        <StackLayout row="1" col="1" backgroundColor="LightGray">
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        </StackLayout>
+    </GridLayout>
+</ScrollView>
\ No newline at end of file
diff --git a/e2e/safe-area/app/scrollview/fragments/vscroll-grid-fragment.xml b/e2e/safe-area/app/scrollview/fragments/vscroll-grid-fragment.xml
new file mode 100644
index 000000000..723ab2d5a
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/fragments/vscroll-grid-fragment.xml
@@ -0,0 +1,92 @@
+<ScrollView orientation="vertical" backgroundColor="LightGreen">
+    <GridLayout rows="auto, auto" columns="auto, auto" backgroundColor="LightBlue">
+        <StackLayout row="0" col="0" backgroundColor="SkyBlue">
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        </StackLayout>
+        <StackLayout row="0" col="1" backgroundColor="LightPink">
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        </StackLayout>
+        <StackLayout row="1" col="0" backgroundColor="LightYellow">
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        </StackLayout>
+        <StackLayout row="1" col="1" backgroundColor="LightGray">
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+            <Label text="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"></Label>
+        </StackLayout>
+    </GridLayout>
+</ScrollView>
\ No newline at end of file
diff --git a/e2e/safe-area/app/scrollview/no-action-bar/hscroll-grid-page.xml b/e2e/safe-area/app/scrollview/no-action-bar/hscroll-grid-page.xml
new file mode 100644
index 000000000..a74351051
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/no-action-bar/hscroll-grid-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="scrollview/fragments"
+    actionBarHidden="true">
+
+    <fragments:hscroll-grid-fragment></fragments:hscroll-grid-fragment>
+</Page>
diff --git a/e2e/safe-area/app/scrollview/no-action-bar/vscroll-grid-page.xml b/e2e/safe-area/app/scrollview/no-action-bar/vscroll-grid-page.xml
new file mode 100644
index 000000000..7c2f6f695
--- /dev/null
+++ b/e2e/safe-area/app/scrollview/no-action-bar/vscroll-grid-page.xml
@@ -0,0 +1,7 @@
+<Page class="page"
+    xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="scrollview/fragments"
+    actionBarHidden="true">
+
+    <fragments:vscroll-grid-fragment></fragments:vscroll-grid-fragment>
+</Page>
diff --git a/e2e/safe-area/app/scrollview/scrollview-page.xml b/e2e/safe-area/app/scrollview/scrollview-page.xml
index 74ec156ab..9174d53ec 100644
--- a/e2e/safe-area/app/scrollview/scrollview-page.xml
+++ b/e2e/safe-area/app/scrollview/scrollview-page.xml
@@ -5,7 +5,7 @@
     </ActionBar>
 
     <StackLayout>
-        <StackLayout>
+        <StackLayout horizontalAlignment="center">
             <Label text="Pages w/ ActionBar"></Label>
             <Button text="HScroll HStack" tap="onNavigate" route="scrollview/action-bar/hscroll-hstack-page" />
             <Button text="VScroll VStack" tap="onNavigate" route="scrollview/action-bar/vscroll-vstack-page" />
@@ -13,10 +13,12 @@
             <Button text="VScroll VWrap" tap="onNavigate" route="scrollview/action-bar/vscroll-vwrap-page" />
             <Button text="HScroll VWrap" tap="onNavigate" route="scrollview/action-bar/hscroll-vwrap-page" />
             <Button text="VScroll HWrap" tap="onNavigate" route="scrollview/action-bar/vscroll-hwrap-page" />
+            <Button text="HScroll Grid" tap="onNavigate" route="scrollview/action-bar/hscroll-grid-page" />
+            <Button text="VScroll Grid" tap="onNavigate" route="scrollview/action-bar/vscroll-grid-page" />
             <Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-hscroll-hstack-page" />
             <Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/action-bar/grid-3x3-vscroll-vstack-page" />
         </StackLayout>
-        <StackLayout>
+        <StackLayout horizontalAlignment="center">
             <Label text="Pages w/o ActionBar"></Label>
             <Button text="HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/hscroll-hstack-page" />
             <Button text="VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/vscroll-vstack-page" />
@@ -24,6 +26,8 @@
             <Button text="VScroll VWrap" tap="onNavigate" route="scrollview/no-action-bar/vscroll-vwrap-page" />
             <Button text="HScroll VWrap" tap="onNavigate" route="scrollview/no-action-bar/hscroll-vwrap-page" />
             <Button text="VScroll HWrap" tap="onNavigate" route="scrollview/no-action-bar/vscroll-hwrap-page" />
+            <Button text="HScroll Grid" tap="onNavigate" route="scrollview/no-action-bar/hscroll-grid-page" />
+            <Button text="VScroll Grid" tap="onNavigate" route="scrollview/no-action-bar/vscroll-grid-page" />
             <Button text="Grid 3x3 HScroll HStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-hscroll-hstack-page" />
             <Button text="Grid 3x3 VScroll VStack" tap="onNavigate" route="scrollview/no-action-bar/grid-3x3-vscroll-vstack-page" />
         </StackLayout>