make oobe layout partially scalable 70/237470/4
authorLukasz Stanislawski <lukasz.stanislawski@gmail.com>
Tue, 30 Jun 2020 11:41:57 +0000 (13:41 +0200)
committerLukasz Stanislawski <lukasz.stanislawski@gmail.com>
Wed, 1 Jul 2020 11:15:46 +0000 (13:15 +0200)
This is 1st stage of making OOBE Layout scalable
across various resolutions. This patch makes ui
scale well across 1280x720 and 1280x800 resolutions.

Supporting other resolutions will require some more work
and will be added later, after deciding which elements
should scale with resolution increase and which not.

This patch also removes some duplicated code and make
future changes easier.

Change-Id: I412af147d66825e2558f81e8b11803267942b0c7

Oobe/Oobe.Common/Layouts/BasePageLayout.cs [new file with mode: 0644]
Oobe/Oobe.Common/Layouts/OneButtonLayout.cs [new file with mode: 0644]
Oobe/Oobe.Common/Layouts/TwoButtonLayout.cs [new file with mode: 0644]
Oobe/Oobe.Language/LanguageStep.cs
Oobe/Oobe.Region/RegionStep.cs
Oobe/Oobe.Terms/Views/TermsView.cs
Oobe/Oobe.Welcome/WelcomeStep.cs
Oobe/Oobe.Wifi/WifiStep.cs
Oobe/Oobe/Views/MainView.cs

diff --git a/Oobe/Oobe.Common/Layouts/BasePageLayout.cs b/Oobe/Oobe.Common/Layouts/BasePageLayout.cs
new file mode 100644 (file)
index 0000000..0b151fb
--- /dev/null
@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2020 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+using Tizen.NUI;
+using Tizen.NUI.Components;
+using Tizen.NUI.BaseComponents;
+using Oobe.Common.Styles;
+
+namespace Oobe.Common.Layouts
+{
+    /// <summary>
+    /// Basic OOBE Layout
+    /// </summary>
+    public class BasePageLayout : View
+    {
+        private View content;
+
+        /// <summary>
+        /// Constructs new BasePageLayout object
+        /// </summary>
+        public BasePageLayout() : base()
+        {
+            Layout = new AbsoluteLayout();
+            Title = new TextLabel
+            {
+                PositionUsesPivotPoint = true,
+                PivotPoint = new Position(0.5f, 0.0f),
+                ParentOrigin = new Position(0.5f, 0.167f),
+                Size2D = new Size2D(0, 48),
+                WidthResizePolicy = ResizePolicyType.FillToParent,
+                TextColor = new Color(0, 20.0f / 255.0f, 71.0f / 255.0f, 1.0f),
+                HorizontalAlignment = HorizontalAlignment.Center,
+                Ellipsis = false,
+                PixelSize = 40.0f,
+                FontFamily = "BreezeSans",
+                FontStyle = new PropertyMap().AddLightFontStyle(),
+            };
+            Add(Title);
+        }
+
+        /// <summary>
+        /// TextLabel placed top of layout
+        /// </summary>
+        public TextLabel Title { get; private set; }
+
+        /// <summary>
+        /// Content View, which will be placed int the center of layout.
+        /// When new content is set, the old one will be Disposed.
+        /// </summary>
+        public View Content
+        {
+            get => content;
+            set
+            {
+                if (value != content)
+                {
+                    if (content != null)
+                        Remove(content);
+                    // dispose?
+                    content?.Dispose();
+                    content = value;
+                    if (content == null)
+                        return;
+                    content.PositionUsesPivotPoint = true;
+                    content.PivotPoint = new Position(0.5f, 0.5f);
+                    content.ParentOrigin = new Position(0.5f, 0.5f);
+                    Add(content);
+                }
+            }
+        }
+    }
+}
diff --git a/Oobe/Oobe.Common/Layouts/OneButtonLayout.cs b/Oobe/Oobe.Common/Layouts/OneButtonLayout.cs
new file mode 100644 (file)
index 0000000..8889427
--- /dev/null
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2020 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+using Oobe.Common.Styles;
+
+namespace Oobe.Common.Layouts
+{
+    /// <summary>
+    /// OOBE Layout with single center-positioned Button
+    /// </summary>
+    public class OneButtonLayout : BasePageLayout
+    {
+        /// <summary>
+        /// Constructs new OneButtonLayout object
+        /// </summary>
+        public OneButtonLayout() : base()
+        {
+            NextButton = new Button(ButtonStyles.Next);
+            NextButton.PositionUsesPivotPoint = true;
+            NextButton.PivotPoint = new Position(0.5f, 1.0f);
+            NextButton.ParentOrigin = new Position(0.5f, 0.936f);
+            NextButton.SetFontStyle(new PropertyMap().AddRegularFontStyle());
+
+            Add(NextButton);
+        }
+
+        /// <summary>
+        /// NextButton
+        /// </summary>
+        public Button NextButton { get; private set; }
+    }
+}
diff --git a/Oobe/Oobe.Common/Layouts/TwoButtonLayout.cs b/Oobe/Oobe.Common/Layouts/TwoButtonLayout.cs
new file mode 100644 (file)
index 0000000..161952b
--- /dev/null
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2020 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+using Oobe.Common.Styles;
+
+namespace Oobe.Common.Layouts
+{
+    /// <summary>
+    /// OOBE Layout with two Buttons, positioned at left and right bottom.
+    /// </summary>
+    public class TwoButtonLayout : BasePageLayout
+    {
+        /// <summary>
+        /// Constructs new TwoButtonLayout object
+        /// </summary>
+        public TwoButtonLayout() : base()
+        {
+            NextButton = new Button(ButtonStyles.Next);
+            NextButton.PositionUsesPivotPoint = true;
+            NextButton.PivotPoint = new Position(1.0f, 1.0f);
+            NextButton.ParentOrigin = new Position(0.95f, 0.936f);
+            NextButton.SetFontStyle(new PropertyMap().AddRegularFontStyle());
+
+            PreviousButton = new Button(ButtonStyles.Previous);
+            PreviousButton.PositionUsesPivotPoint = true;
+            PreviousButton.PivotPoint = new Position(0.0f, 1.0f);
+            PreviousButton.ParentOrigin = new Position(0.05f, 0.936f);
+            PreviousButton.SetFontStyle(new PropertyMap().AddRegularFontStyle());
+
+            Add(NextButton);
+            Add(PreviousButton);
+        }
+
+        /// <summary>
+        /// NextButton
+        /// </summary>
+        public Button NextButton { get; private set; }
+
+        /// <summary>
+        /// PreviousButton
+        /// </summary>
+        public Button PreviousButton { get; private set; }
+    }
+}
+
index 04fee52b116dd4ab04a168725bd0cdff8f981453..93e57a46054388799d37e933ea6da445ee9c1fb9 100644 (file)
@@ -26,6 +26,7 @@ using Oobe.Common.Resources;
 using System.Linq;
 using System.Globalization;
 using System;
+using Oobe.Common.Layouts;
 
 namespace Oobe.Language
 {
@@ -44,22 +45,11 @@ namespace Oobe.Language
 
         public override View CreateView(IProcessNavigation nav)
         {
-            View container = new View();
+            var container = new TwoButtonLayout();
 
-            TextLabel title = new TextLabel();
-            title.TranslatableText = "CHOOSE_LANGUAGE";
-            title.Position2D = new Position2D(0, 104);
-            title.Size2D = new Size2D(0, 48);
-            title.WidthResizePolicy = ResizePolicyType.FillToParent;
-            title.TextColor = new Color(0, 20.0f / 255.0f, 71.0f / 255.0f, 1.0f);
-            title.HorizontalAlignment = HorizontalAlignment.Center;
-            title.Ellipsis = false;
-            title.PixelSize = 40.0f;
-            title.FontFamily = "BreezeSans";
-            title.FontStyle = new PropertyMap().AddLightFontStyle();
+            container.Title.TranslatableText = "CHOOSE_LANGUAGE";
 
             var carousel = new CarouselPicker(CarouselPickerStyles.Default);
-            carousel.Position2D = new Position2D(412, 242);
             carousel.Size2D = new Size2D(360, 249);
 
             foreach (LanguageInfo info in manager.Languages)
@@ -72,9 +62,7 @@ namespace Oobe.Language
             int currentIndex = manager.Languages.FindIndex(x => x == manager.CurrentLanguage);
             carousel.SelectedItemIndex = currentIndex;
 
-            Button btn = new Button(ButtonStyles.Next);
-            btn.Position2D = new Position2D(888, 512);
-            btn.ClickEvent += (obj, args) =>
+            container.NextButton.ClickEvent += (obj, args) =>
             {
                 if (carousel.SelectedItemIndex >= 0 && carousel.SelectedItemIndex < manager.Languages.Count)
                 {
@@ -83,7 +71,6 @@ namespace Oobe.Language
                 }
                 nav.Next();
             };
-            btn.SetFontStyle(new PropertyMap().AddRegularFontStyle());
 
             carousel.SelectedItemChanged += (sender, args) =>
             {
@@ -91,14 +78,13 @@ namespace Oobe.Language
                 {
                     string language = manager.Languages[carousel.SelectedItemIndex].Code.Replace("_", "-");
                     var culture = CultureInfo.CreateSpecificCulture(language);
-                    title.Text = Translations.ResourceManager.GetString("CHOOSE_LANGUAGE", culture);
-                    btn.Text = Translations.ResourceManager.GetString("CONTINUE", culture);
+                    container.Title.Text = Translations.ResourceManager.GetString("CHOOSE_LANGUAGE", culture);
+                    container.NextButton.Text = Translations.ResourceManager.GetString("CONTINUE", culture);
                 }
             };
 
-            container.Add(title);
-            container.Add(btn);
-            container.Add(carousel);
+            container.PreviousButton.Hide();
+            container.Content = carousel;
 
             // workaround issue with ScrollableBase not properly scrolling
             // to nth page during creation
index 30acf937d8e53a0547961969ae6014c60ce2deed..6cb11a7cb5abfbb3d61efa7d54a088e6e94fd0eb 100644 (file)
@@ -21,6 +21,7 @@ using Oobe.Common.Interfaces;
 using Tizen.NUI.Components;
 using Oobe.Region.Model;
 using Oobe.Common.Controls;
+using Oobe.Common.Layouts;
 
 namespace Oobe.Region
 {
@@ -39,22 +40,11 @@ namespace Oobe.Region
 
         public override View CreateView(IProcessNavigation nav)
         {
-            View container = new View();
+            var container = new TwoButtonLayout();
 
-            TextLabel title = new TextLabel();
-            title.TranslatableText = "CHOOSE_REGION";
-            title.Position2D = new Position2D(0, 104);
-            title.Size2D = new Size2D(0, 48);
-            title.WidthResizePolicy = ResizePolicyType.FillToParent;
-            title.TextColor = new Color(0, 20.0f/255.0f, 71.0f/255.0f, 1.0f);
-            title.HorizontalAlignment = HorizontalAlignment.Center;
-            title.Ellipsis = false;
-            title.PixelSize = 40.0f;
-            title.FontFamily = "BreezeSans";
-            title.FontStyle = new PropertyMap().AddLightFontStyle();
+            container.Title.TranslatableText = "CHOOSE_REGION";
 
             var carousel = new CarouselPicker(CarouselPickerStyles.Default);
-            carousel.Position2D = new Position2D(412, 242);
             carousel.Size2D = new Size2D(360, 249);
 
             foreach (RegionInfo info in manager.Regions)
@@ -64,9 +54,7 @@ namespace Oobe.Region
                 carousel.AddItem(item);
             }
 
-            Button next = new Button(ButtonStyles.Next);
-            next.Position2D = new Position2D(888, 512);
-            next.ClickEvent += (obj, args) => {
+            container.NextButton.ClickEvent += (obj, args) => {
                 if (carousel.SelectedItemIndex >= 0 && carousel.SelectedItemIndex < manager.Regions.Count)
                 {
                     var region = manager.Regions[carousel.SelectedItemIndex];
@@ -74,19 +62,12 @@ namespace Oobe.Region
                 }
                 nav.Next();
             };
-            next.SetFontStyle(new PropertyMap().AddRegularFontStyle());
 
-            Button prev = new Button(ButtonStyles.Previous);
-            prev.Position2D = new Position2D(56, 512);
-            prev.ClickEvent += (obj, args) => {
+            container.PreviousButton.ClickEvent += (obj, args) => {
                 nav.Previous();
             };
-            prev.SetFontStyle(new PropertyMap().AddRegularFontStyle());
 
-            container.Add(carousel);
-            container.Add(title);
-            container.Add(prev);
-            container.Add(next);
+            container.Content = carousel;
 
             return container;
          }
index fc50d798f952980fe15ec70f9b9694d1ab1f6a58..326cacebe5482888852af95712d6c33dde400a06 100644 (file)
@@ -21,14 +21,14 @@ using Tizen.NUI.BaseComponents;
 using Tizen.NUI.Components;
 using Oobe.Terms.Model;
 using Oobe.Terms.Styles;
+using Oobe.Common.Layouts;
 
 namespace Oobe.Terms.Views
 {
-    public class TermsView : View
+    public class TermsView : TwoButtonLayout
     {
         private TermsProvider termsProvider;
 
-        private Button nextButton;
         private TextLabel agreeLabel;
         private Switch agreeSwitch;
         private TapGestureDetector tapGestureDetector;
@@ -41,19 +41,10 @@ namespace Oobe.Terms.Views
         public TermsView(IProcessNavigation nav, TermsProvider terms)
         {
             termsProvider = terms;
-
             tapGestureDetector = new TapGestureDetector();
 
-            TextLabel title = new TextLabel();
-            title.TranslatableText = "TERMS_AND_CONDITIONS";
-            title.Position2D = new Position2D(0, 40);
-            title.HorizontalAlignment = HorizontalAlignment.Center;
-            title.Size2D = new Size2D(0, 50);
-            title.WidthResizePolicy = ResizePolicyType.FillToParent;
-            title.TextColor = new Color(0, 20.0f / 255.0f, 71.0f / 255.0f, 1.0f);
-            title.PixelSize = 40.0f;
-            title.FontFamily = "BreezeSans";
-            title.FontStyle = new PropertyMap().AddLightFontStyle();
+            Title.ParentOrigin = new Position(0.5f, 0.064f);
+            Title.TranslatableText = "TERMS_AND_CONDITIONS";
 
             View bounding = new View();
             bounding.BackgroundImage = NUIApplication.Current.DirectoryInfo.Resource + "Rectangle 861.svg";
@@ -90,24 +81,18 @@ namespace Oobe.Terms.Views
                 }
             };
 
-            nextButton = new Button(ButtonStyles.Next);
-            nextButton.Position2D = new Position2D(888, 512);
-            nextButton.State = States.Disabled;
-            nextButton.IsEnabled = false;
-            nextButton.ClickEvent += (obj, args) =>
+            NextButton.State = States.Disabled;
+            NextButton.IsEnabled = false;
+            NextButton.ClickEvent += (obj, args) =>
             {
                 terms.AcceptTerms();
                 nav.Next();
             };
-            nextButton.SetFontStyle(new PropertyMap().AddRegularFontStyle());
 
-            Button prev = new Button(ButtonStyles.Previous);
-            prev.Position2D = new Position2D(56, 512);
-            prev.ClickEvent += (obj, args) =>
+            PreviousButton.ClickEvent += (obj, args) =>
             {
                 nav.Previous();
             };
-            prev.SetFontStyle(new PropertyMap().AddRegularFontStyle());
 
             TextLabel guide = new TextLabel(TextLabelStyles.GuideTextLabelStyle);
             guide.Position2D = new Position2D(160, 440);
@@ -128,9 +113,6 @@ namespace Oobe.Terms.Views
             agreeLabel.TranslatableText = "I_HAVE_READ_AND_AGREE_TO_TERMS_AND_CONDITIONS";
             agreeLabel.Position2D = new Position2D(160, 462);
 
-            this.Add(title);
-            this.Add(prev);
-            this.Add(nextButton);
             this.Add(bounding);
             this.Add(scroller);
             this.Add(agreeSwitch);
@@ -168,14 +150,14 @@ namespace Oobe.Terms.Views
                 if (nextEnabled == value) return;
                 if (value)
                 {
-                    nextButton.State = States.Normal;
-                    nextButton.IsEnabled = true;
+                    NextButton.State = States.Normal;
+                    NextButton.IsEnabled = true;
                     agreeSwitch.IsSelected = true;
                 }
                 else
                 {
-                    nextButton.State = States.Disabled;
-                    nextButton.IsEnabled = false;
+                    NextButton.State = States.Disabled;
+                    NextButton.IsEnabled = false;
                     agreeSwitch.IsSelected = false;
                 }
                 nextEnabled = value;
index cbf5ac960e672e7473bccb87f041dd3999ee496a..3028e97372960cc168b8b2b29a02e0199cbc1a4d 100644 (file)
@@ -19,6 +19,7 @@ using Oobe.Common.Styles;
 using Tizen.NUI;\r
 using Tizen.NUI.BaseComponents;\r
 using Tizen.NUI.Components;\r
+using Oobe.Common.Layouts;
 \r
 namespace Oobe.Welcome\r
 {\r
@@ -26,21 +27,11 @@ namespace Oobe.Welcome
     {\r
         public override View CreateView(IProcessNavigation nav)\r
         {\r
-            View container = new View();\r
+            var container = new OneButtonLayout();\r
 \r
-            TextLabel title = new TextLabel();\r
-            title.TranslatableText = "WELCOME_TITLE";\r
-            title.Position2D = new Position2D(0, 137);\r
-            title.Size2D = new Size2D(0, 50);\r
-            title.WidthResizePolicy = ResizePolicyType.FillToParent;
-            title.TextColor = new Color(0, 20.0f/255.0f, 71.0f/255.0f, 1.0f);\r
-            title.PixelSize = 40.0f;\r
-            title.HorizontalAlignment = HorizontalAlignment.Center;\r
-            title.FontFamily = "BreezeSans";\r
-            title.FontStyle = new PropertyMap().AddLightFontStyle();\r
+            container.Title.TranslatableText = "WELCOME_TITLE";\r
 \r
             TextLabel content = new TextLabel();\r
-            content.Position2D = new Position2D(80, 209);\r
             content.Size2D = new Size2D(1026, 166);\r
             content.TextColor = new Color(0, 12.0f/255.0f, 43.0f/255.0f, 1.0f);\r
             content.PixelSize = 22.0f;\r
@@ -49,17 +40,12 @@ namespace Oobe.Welcome
             content.MultiLine = true;\r
             content.Text = "There should be some description or information about Tizen IoT. There should be some description or information about Tizen IoT. There should be some description or information about Tizen IoT. There should be some description or information about Tizen IoT. There should be some description or information about Tizen IoT. There should be some description or information about Tizen IoT. There should be some description or information about Tizen IoT. There should be some description or information about Tizen IoT.";\r
 \r
-            Button next = new Button(ButtonStyles.Next);\r
-            next.Position2D = new Position2D(472, 512);\r
-            next.TranslatableText = "GET_STARTED";\r
-            next.ClickEvent += (obj, args) => {\r
+            container.NextButton.TranslatableText = "GET_STARTED";\r
+            container.NextButton.ClickEvent += (obj, args) => {\r
                 nav.Finish();\r
             };\r
-            next.SetFontStyle(new PropertyMap().AddRegularFontStyle());\r
 \r
-            container.Add(title);\r
-            container.Add(next);\r
-            container.Add(content);\r
+            container.Content = content;
 \r
             return container;\r
         }\r
index e29b54aa5c9a7d09fbc6f5937a4ac17bd9e0421b..f7c477e2742f7853d17db5a52a239977662eac5e 100644 (file)
@@ -23,6 +23,7 @@ using Tizen.Network.WiFi;
 using System;
 using System.Collections.Generic;
 using Oobe.Common.Styles;
+using Oobe.Common.Layouts;
 
 namespace Oobe.Wifi
 {
@@ -35,48 +36,20 @@ namespace Oobe.Wifi
         {
             DisposeView();
 
-            var view = new View()
-            {
-                Layout = new AbsoluteLayout()
-            };
+            var view = new TwoButtonLayout();
 
-            view.Add(new TextLabel()
-            {
-                TranslatableText = "CHOOSE_WIFI_NETWORK",
-                Position2D = new Position2D(0, 40),
-                Size = new Size(0, 50),
-                WidthResizePolicy = ResizePolicyType.FillToParent,
-                PixelSize = 40.0f,
-                TextColor = new Color(0, 0x14 / 255.0f, 0x47 / 255.0f, 1.0f),
-                FontFamily = "BreezeSans",
-                FontStyle = new PropertyMap().AddLightFontStyle(),
-                HorizontalAlignment = HorizontalAlignment.Center,
-            });
+            view.Title.ParentOrigin = new Position(0.5f, 0.064f);
+            view.Title.TranslatableText = "CHOOSE_WIFI_NETWORK";
 
             wifiView = new WifiView();
-            wifiView.View.Position2D = new Position2D(352, 112);
             wifiView.View.Size = new Size(480, 416);
-            view.Add(wifiView.View);
 
-            var prev = new Button(Common.Styles.ButtonStyles.Previous)
-            {
-                Position = new Position(56, 512),
-                Size2D = new Size2D(240, 72),
-            };
-            Oobe.Common.Styles.ButtonsExtensions.SetFontStyle(prev, new PropertyMap().AddRegularFontStyle());
-            prev.ClickEvent += (s, e) => nav.Previous();
-            view.Add(prev);
+            view.Content = wifiView.View;
 
-            var next = new Button()
-            {
-                Position = new Position(888, 512),
-                Size2D = new Size2D(240, 72),
-            };
-            next.SetFontStyle(new PropertyMap().AddRegularFontStyle());
-            next.ClickEvent += (s, e) => nav.Next();
-            view.Add(next);
+            view.PreviousButton.ClickEvent += (s, e) => nav.Previous();
+            view.NextButton.ClickEvent += (s, e) => nav.Next();
 
-            void applyStyle(bool isConnected) => next.ApplyStyle(isConnected
+            void applyStyle(bool isConnected) => view.NextButton.ApplyStyle(isConnected
                 ? Common.Styles.ButtonStyles.Next
                 : Common.Styles.ButtonStyles.Skip);
             applyStyle(WiFiManager.ConnectionState == WiFiConnectionState.Connected);
index 7cc14bff3125039c462f99bacf7585d2d1541a56..771bb44e9d228b2ae1d98b7847528a907aad4bf8 100644 (file)
@@ -31,27 +31,40 @@ namespace Oobe.Views
         private Animation dimEffectAnimation;
         private Pagination pagination;
         private const int TransitionTime = 750;
+        private readonly Extents stackMargin = new Extents(48, 48, 48, 48);
 
         public MainView(Window win)
         {
-            View backImage = new View();
-            backImage.BackgroundImage = NUIApplication.Current.DirectoryInfo.Resource + "0_BG_dark.svg";
-            backImage.WidthResizePolicy = ResizePolicyType.FillToParent;
-            backImage.HeightResizePolicy = ResizePolicyType.FillToParent;
-
-            stack = new ViewStack();
-            stack.ScrollDuration = TransitionTime;
-            stack.Position2D = new Position2D(48, 48);
-            stack.Size2D = new Size2D(1185, 625);
-            stack.PagesRightPadding = 48;
-            stack.PagesLeftPadding = (int)(0.5f * stack.Size2D.Width);
-            stack.ClippingMode = ClippingModeType.Disabled;
+            View backImage = new View{
+                BackgroundImage = NUIApplication.Current.DirectoryInfo.Resource + "0_BG_dark.svg",
+                WidthResizePolicy = ResizePolicyType.FillToParent,
+                HeightResizePolicy = ResizePolicyType.FillToParent,
+            };
+
+            Size2D stackSize = new Size2D(
+                    win.WindowSize.Width - stackMargin.Start - stackMargin.End,
+                    win.WindowSize.Height - stackMargin.Top - stackMargin.Bottom
+                    );
+
+            // For testing other resolutions
+            // stackSize.Width = 1280 - stackMargin.Start - stackMargin.End;
+            // stackSize.Height = 720 - stackMargin.Top - stackMargin.Bottom;
+
+            stack = new ViewStack(){
+                ScrollDuration = TransitionTime,
+                Position2D = new Position2D(stackMargin.Start, stackMargin.Top),
+                Size2D = stackSize,
+                PagesRightPadding = stackMargin.Start,
+                PagesLeftPadding = (int)(0.5f * stackSize.Width),
+                ClippingMode = ClippingModeType.Disabled,
+            };
+
             dimEffectAnimation = new Animation(TransitionTime);
 
             pagination = new Pagination();
             pagination.PositionUsesPivotPoint = true;
-            pagination.PivotPoint = new Position(0.5f, 0.0f);
-            pagination.Position2D = new Position2D(640, 690);
+            pagination.PivotPoint = new Position(0.5f, 1.0f);
+            pagination.ParentOrigin = new Position(0.5f, 0.98f);
             pagination.Size2D = new Size2D(500, 12);
             pagination.IndicatorSize = new Size(12, 12);
             pagination.IndicatorImageURL = new Selector<string>()