Add Marginal View

Change-Id: If0d7004c1c6ce13bdea2c51527633174cd7fc85d

diff --git a/Oobe/Oobe.Common/Utils/ScreenSizeUtils.cs b/Oobe/Oobe.Common/Utils/ScreenSizeUtils.cs
index 23db12f..e4a0870 100644 (file)
--- a/Oobe/Oobe.Common/Utils/ScreenSizeUtils.cs
+++ b/Oobe/Oobe.Common/Utils/ScreenSizeUtils.cs
@@ -23,6 +23,8 @@ namespace Oobe.Common.Utils
     /// </summary>
     public static class ScreenSizeUtils
     {
+        private static Size defaultWhiteBoxSize = IsPortrait ? new Size(952, 1792) : new Size(1792, 952);
+
         /// <summary>
         /// Gets a value indicating whether the screen has portrait mode.
         /// </summary>
@@ -31,6 +33,27 @@ namespace Oobe.Common.Utils
             get => Window.Instance.Size.Height > Window.Instance.Size.Width;
         }
 
+        /// <summary>
+        /// Gets or sets the white box size.
+        /// </summary>
+        public static Size WhiteBoxSize { get; set; }
+
+        /// <summary>
+        /// Gets the ratio of the screen width to the default screen width.
+        /// </summary>
+        public static float XRatio
+        {
+            get => WhiteBoxSize.Width / defaultWhiteBoxSize.Width;
+        }
+
+        /// <summary>
+        /// Gets the ratio of the screen height to the default screen height.
+        /// </summary>
+        public static float YRatio
+        {
+            get => WhiteBoxSize.Height / defaultWhiteBoxSize.Height;
+        }
+
         public static float GetFootnoteFontSizeScaleMaxLarge()
         {
             switch (SystemSettings.FontSize)

diff --git a/Oobe/Oobe/Managers/ProcessManager.cs b/Oobe/Oobe/Managers/ProcessManager.cs
index 88295c2..107523d 100644 (file)
--- a/Oobe/Oobe/Managers/ProcessManager.cs
+++ b/Oobe/Oobe/Managers/ProcessManager.cs
@@ -104,7 +104,6 @@ namespace Oobe
             backgroundContainer.Add(background);
             Window.Instance.Add(backgroundContainer);
 
-
             Window.Instance.Add(ui);
             started = true;
         }

diff --git a/Oobe/Oobe/MarginalView/MarginalView.cs b/Oobe/Oobe/MarginalView/MarginalView.cs
new file mode 100644 (file)
index 0000000..f99c15c
--- /dev/null
+++ b/Oobe/Oobe/MarginalView/MarginalView.cs
@@ -0,0 +1,168 @@
+using System;
+using System.ComponentModel;
+using System.Collections.Generic;
+using System.Linq;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+
+namespace Tizen.Jetpack
+{
+    public class MarginalView : View
+    {
+        private const float DebugOpacity = 0.4f;
+
+        private readonly View marginalContentView;
+        private readonly View sideLeft;
+        private readonly View sideRight;
+
+        private View debugLeftMargin;
+        private View debugMiddleContent;
+        private View debugRightMargin;
+        private int marginalWidth;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="MarginalView"/> class.
+        /// </summary>
+        public MarginalView()
+        {
+            WidthSpecification = LayoutParamPolicies.MatchParent;
+            HeightSpecification = LayoutParamPolicies.MatchParent;
+            ClippingMode = ClippingModeType.ClipChildren;
+            marginalWidth = MarginalViewGroupManager.GetMargin();
+
+            View container = new View()
+            {
+                Layout = new LinearLayout
+                {
+                    LinearOrientation = LinearLayout.Orientation.Horizontal,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+            };
+            base.Add(container);
+
+            marginalContentView = new View()
+            {
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            sideLeft = new View()
+            {
+                SizeWidth = 10,
+                BackgroundColor = Color.Red,
+            };
+            sideRight = new View()
+            {
+                SizeWidth = 10,
+                BackgroundColor = Color.Blue,
+            };
+            container.Add(sideLeft);
+            container.Add(marginalContentView);
+            container.Add(sideRight);
+
+            Relayout += OnRelayout;
+
+            InitDebug();
+        }
+
+        /// <summary>
+        /// Gets MarginalWidth.
+        /// </summary>
+        public int MarginalWidth => marginalWidth;
+
+        /// <summary>
+        /// Sets a value indicating whether set.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public bool IsDebugEnabled
+        {
+            set
+            {
+                if (value)
+                {
+                    debugLeftMargin.Show();
+                    debugMiddleContent.Show();
+                    debugRightMargin.Show();
+                }
+                else
+                {
+                    debugLeftMargin.Hide();
+                    debugMiddleContent.Hide();
+                    debugRightMargin.Hide();
+                }
+            }
+        }
+
+        /// <inheritdoc />
+        public override void Add(View child)
+        {
+            marginalContentView.Add(child);
+        }
+
+        /// <inheritdoc />
+        public override void Remove(View child)
+        {
+            marginalContentView.Remove(child);
+        }
+
+        private void OnRelayout(object sender, EventArgs e)
+        {
+            RelayoutMarginalContentView();
+        }
+
+        private void RelayoutMarginalContentView()
+        {
+            marginalWidth = MarginalViewGroupManager.GetMargin();
+            int margin = (Window.Instance.WindowSize.Width - marginalWidth) / 2;
+
+            sideLeft.SizeWidth = margin;
+            sideRight.SizeWidth = margin;
+        }
+
+        private void InitDebug()
+        {
+            View GetDebugContainer(Color color, string text)
+            {
+                View debugText = new TextLabel(text)
+                {
+                    PointSize = 3,
+                    TextColor = Color.Black,
+                    PositionUsesPivotPoint = true,
+                    PivotPoint = Position.PivotPointCenter,
+                    ParentOrigin = Position.ParentOriginCenter,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    MultiLine = true,
+                };
+                View debugView = new View
+                {
+                    BackgroundColor = color,
+                    Opacity = DebugOpacity,
+                    ClippingMode = ClippingModeType.ClipChildren,
+                };
+                debugView.Add(debugText);
+                debugView.Hide();
+                return debugView;
+            }
+
+            debugLeftMargin = GetDebugContainer(Color.Red, "LEFT\nMARGIN");
+            debugMiddleContent = GetDebugContainer(Color.Green, "MARGINAL\nCONTENT");
+            debugRightMargin = GetDebugContainer(Color.Blue, "RIGHT\nMARGIN");
+
+            base.Add(debugLeftMargin);
+            base.Add(debugMiddleContent);
+            base.Add(debugRightMargin);
+        }
+
+        private void RelayoutDebug(int margin, int marginalWidth)
+        {
+            debugLeftMargin.Position2D = new Position2D(0, 0);
+            debugLeftMargin.Size2D = new Size2D(margin, Size2D.Height);
+
+            debugMiddleContent.Position2D = new Position2D(margin, 0);
+            debugMiddleContent.Size2D = new Size2D(marginalWidth, Size2D.Height);
+
+            debugRightMargin.Position2D = new Position2D(margin + marginalWidth, 0);
+            debugRightMargin.Size2D = new Size2D(margin, Size2D.Height);
+        }
+    }
+}

diff --git a/Oobe/Oobe/MarginalView/MarginalViewGroupManager.cs b/Oobe/Oobe/MarginalView/MarginalViewGroupManager.cs
new file mode 100644 (file)
index 0000000..1244855
--- /dev/null
+++ b/Oobe/Oobe/MarginalView/MarginalViewGroupManager.cs
@@ -0,0 +1,356 @@
+using System.Collections.Generic;
+using System.Linq;
+using Tizen.NUI;
+
+namespace Tizen.Jetpack
+{
+    internal class MarginalViewGroupManager
+    {
+        internal class ScreenSize
+        {
+            public int Width { get; private set; }
+            public int Height { get; private set; }
+
+            public ScreenSize(int width, int height)
+            {
+                Width = width;
+                Height = height;
+            }
+            public ScreenSize(string size)
+            {
+                var split = size.Split('x');
+                Width = int.Parse(split[0]);
+                Height = int.Parse(split[1]);
+            }
+        }
+
+        internal class Group : List<ScreenSize>
+        {
+            public string Name { get; private set; }
+            public int MarginContainerWidth { get; private set; }
+
+            public Group(string name, int marginContainerWidth)
+            {
+                Name = name;
+                MarginContainerWidth = marginContainerWidth;
+            }
+        }
+
+        static MarginalViewGroupManager()
+        {
+            LandscapeGroups = new[]
+            {
+                //1024x768, 1024x800, 1024x1024, 1080x1200, 1120x832, 1152x720, 1152x768, 1152x864, 1152x900
+                new Group("A", 975)
+                {
+                    new ScreenSize("1024x768"),
+                    new ScreenSize("1024x800"),
+                    new ScreenSize("1024x1024"),
+                    new ScreenSize("1080x1200"),
+                    new ScreenSize("1120x832"),
+                    new ScreenSize("1152x720"),
+                    new ScreenSize("1152x768"),
+                    new ScreenSize("1152x864"),
+                    new ScreenSize("1152x900"),
+                },
+                //1280x720, 1280x768, 1280x800, 1280x854, 1280x960, 1280x1024, 1334x750, 1366x768, 1440x900, 1440x900, 1440x960, 1400x1050, 1440x1024, 1440x1080, 1440x1440
+                new Group("B", 1220)
+                {
+                    new ScreenSize("1280x720"),
+                    new ScreenSize("1280x768"),
+                    new ScreenSize("1280x800"),
+                    new ScreenSize("1280x854"),
+                    new ScreenSize("1280x960"),
+                    new ScreenSize("1280x1024"),
+                    new ScreenSize("1334x750"),
+                    new ScreenSize("1366x768"),
+                    new ScreenSize("1400x1050"),
+                    new ScreenSize("1440x900"),
+                    new ScreenSize("1440x900"),
+                    new ScreenSize("1440x960"),
+                    new ScreenSize("1440x1024"),
+                    new ScreenSize("1440x1080"),
+                    new ScreenSize("1440x1440"),
+                },
+                //1600x768, 1600x900, 1600x1024, 1600x1200, 1600x1280, 1680x1050, 1776x1000, 1792x1344, 1800x1440
+                new Group("C", 1525)
+                {
+                    new ScreenSize("1600x768"),
+                    new ScreenSize("1600x900"),
+                    new ScreenSize("1600x1024"),
+                    new ScreenSize("1600x1200"),
+                    new ScreenSize("1600x1280"),
+                    new ScreenSize("1680x1050"),
+                    new ScreenSize("1776x1000"),
+                    new ScreenSize("1792x1344"),
+                    new ScreenSize("1800x1440"),
+                },
+                //1856x1392, 1920x1080, 1920x1200, 1920x1280, 1920x1400, 1920x1440, 2048x1080, 2048x1152, 2048x1280, 2048x1536
+                new Group("D", 1763)
+                {
+                    new ScreenSize("1856x1392"),
+                    new ScreenSize("1920x1080"),
+                    new ScreenSize("1920x1200"),
+                    new ScreenSize("1920x1280"),
+                    new ScreenSize("1920x1400"),
+                    new ScreenSize("1920x1440"),
+                    new ScreenSize("2048x1080"),
+                    new ScreenSize("2048x1152"),
+                    new ScreenSize("2048x1280"),
+                    new ScreenSize("2048x1536"),
+                },
+                //2160x1200, 2160x1440, 2256x1504, 2280x1080, 2304x1440, 2304x1728, 2340x1080, 2400x1080, 2436x1125
+                new Group("E", 2060)
+                {
+                    new ScreenSize("2160x1200"),
+                    new ScreenSize("2160x1440"),
+                    new ScreenSize("2256x1504"),
+                    new ScreenSize("2280x1080"),
+                    new ScreenSize("2304x1440"),
+                    new ScreenSize("2304x1728"),
+                    new ScreenSize("2340x1080"),
+                    new ScreenSize("2400x1080"),
+                    new ScreenSize("2436x1125"),
+                },
+                //2520x1080, 2538x1080, 2560x1080, 2560x1440, 2560x1600, 2560x1700, 2560x1800, 2560x1920, 2560x2048, 2732x2048, 2736x1824, 2800x2100
+                new Group("F", 2394)
+                {
+                    new ScreenSize("2520x1080"),
+                    new ScreenSize("2538x1080"),
+                    new ScreenSize("2560x1080"),
+                    new ScreenSize("2560x1440"),
+                    new ScreenSize("2560x1600"),
+                    new ScreenSize("2560x1700"),
+                    new ScreenSize("2560x1800"),
+                    new ScreenSize("2560x1920"),
+                    new ScreenSize("2560x2048"),
+                    new ScreenSize("2732x2048"),
+                    new ScreenSize("2736x1824"),
+                    new ScreenSize("2800x2100"),
+                },
+                //2880x1440, 2880x1620, 2880x1800, 2880x900, 2960x1440, 3000x2000, 3072x1920, 3200x1800, 3200x2048, 3200x2400, 3240x2160
+                new Group("G", 2740)
+                {
+                    new ScreenSize("2880x1440"),
+                    new ScreenSize("2880x1620"),
+                    new ScreenSize("2880x1800"),
+                    new ScreenSize("2880x900"),
+                    new ScreenSize("2960x1440"),
+                    new ScreenSize("3000x2000"),
+                    new ScreenSize("3072x1920"),
+                    new ScreenSize("3200x1800"),
+                    new ScreenSize("3200x2048"),
+                    new ScreenSize("3200x2400"),
+                    new ScreenSize("3240x2160"),
+                },
+                //3440x1440, 3840x1600, 3840x2160, 3840x2400
+                new Group("H", 3268)
+                {
+                    new ScreenSize("3440x1440"),
+                    new ScreenSize("3840x1600"),
+                    new ScreenSize("3840x2160"),
+                    new ScreenSize("3840x2400"),
+                },
+                //4096x2160, 4096x2304, 4096x3072, 4480x2520, 4500x3000
+                new Group("I", 3891)
+                {
+                    new ScreenSize("4096x2160"),
+                    new ScreenSize("4096x2304"),
+                    new ScreenSize("4096x3072"),
+                    new ScreenSize("4480x2520"),
+                    new ScreenSize("4500x3000"),
+                },
+                //5120x2160, 5120x2880, 5120x3200, 5120x4096
+                new Group("J", 4864)
+                {
+                    new ScreenSize("5120x2160"),
+                    new ScreenSize("5120x2880"),
+                    new ScreenSize("5120x3200"),
+                    new ScreenSize("5120x4096"),
+                },
+                //6016x3384, 6400x4096, 6400x4800, 6480x3240
+                new Group("K", 5715)
+                {
+                    new ScreenSize("6016x3384"),
+                    new ScreenSize("6400x4096"),
+                    new ScreenSize("6400x4800"),
+                    new ScreenSize("6480x3240"),
+                },
+                //7680x4320, 7680x4800, 8192x4320, 8192x4608, 8192x8192
+                new Group("L", 7296)
+                {
+                    new ScreenSize("7680x4320"),
+                    new ScreenSize("7680x4800"),
+                    new ScreenSize("8192x4320"),
+                    new ScreenSize("8192x4608"),
+                    new ScreenSize("8192x8192"),
+                },
+            };
+            PortraitGroups = new[]
+            {
+                //720x1152, 720x1280, 750x1334, 768x1024, 768x1152, 768x1280, 768x1366, 768x1600, 800x1024, 800x1280
+                new Group("A", 684)
+                {
+                    new ScreenSize("720x1152"),
+                    new ScreenSize("720x1280"),
+                    new ScreenSize("750x1334"),
+                    new ScreenSize("768x1024"),
+                    new ScreenSize("768x1152"),
+                    new ScreenSize("768x1280"),
+                    new ScreenSize("768x1366"),
+                    new ScreenSize("768x1600"),
+                    new ScreenSize("800x1024"),
+                    new ScreenSize("800x1280"),
+                },
+                //832x1120, 854x1280, 864x1152, 900x1152, 900x1440, 900x1440, 900x1600, 900x2880
+                new Group("B", 790)
+                {
+                    new ScreenSize("832x1120"),
+                    new ScreenSize("854x1280"),
+                    new ScreenSize("864x1152"),
+                    new ScreenSize("900x1152"),
+                    new ScreenSize("900x1440"),
+                    new ScreenSize("900x1440"),
+                    new ScreenSize("900x1600"),
+                    new ScreenSize("900x2880"),
+                },
+                //960x1280, 960x1440, 1000x1776, 1024x1024, 1024x1280, 1024x1440, 1024x1600, 1050x1400, 1050x1680, 1080x1440, 1080x1920, 1080x2048, 1080x2280, 1080x2340, 1080x2400, 1080x2520, 1080x2538, 1080x2560
+                new Group("C", 915)
+                {
+                    new ScreenSize("960x1280"),
+                    new ScreenSize("960x1440"),
+                    new ScreenSize("1000x1776"),
+                    new ScreenSize("1024x1280"),
+                    new ScreenSize("1024x1440"),
+                    new ScreenSize("1024x1600"),
+                    new ScreenSize("1050x1400"),
+                    new ScreenSize("1050x1680"),
+                    new ScreenSize("1080x1200"),
+                    new ScreenSize("1080x1440"),
+                    new ScreenSize("1080x1920"),
+                    new ScreenSize("1080x2048"),
+                    new ScreenSize("1080x2280"),
+                    new ScreenSize("1080x2340"),
+                    new ScreenSize("1080x2400"),
+                    new ScreenSize("1080x2520"),
+                    new ScreenSize("1080x2538"),
+                    new ScreenSize("1080x2560"),
+                },
+                //1125x2436, 1152x2048, 1200x1080, 1200x1600, 1200x1920, 1200x2160
+                new Group("D", 1069)
+                {
+                    new ScreenSize("1125x2436"),
+                    new ScreenSize("1152x2048"),
+                    new ScreenSize("1200x1600"),
+                    new ScreenSize("1200x1920"),
+                    new ScreenSize("1200x2160"),
+                },
+                //1280x1600, 1280x1920, 1280x2048, 1344x1792, 1392x1856, 1400x1920, 1440x1440, 1440x1800, 1440x1920, 1440x2160, 1440x2304, 1440x2560, 1440x2880, 1440x2960, 1440x3440
+                new Group("E", 1220)
+                {
+                    new ScreenSize("1280x1600"),
+                    new ScreenSize("1280x1920"),
+                    new ScreenSize("1280x2048"),
+                    new ScreenSize("1344x1792"),
+                    new ScreenSize("1392x1856"),
+                    new ScreenSize("1400x1920"),
+                    new ScreenSize("1440x1800"),
+                    new ScreenSize("1440x1920"),
+                    new ScreenSize("1440x2160"),
+                    new ScreenSize("1440x2304"),
+                    new ScreenSize("1440x2560"),
+                    new ScreenSize("1440x2880"),
+                    new ScreenSize("1440x2960"),
+                    new ScreenSize("1440x3440"),
+                },
+                //1504x2256, 1536x2048, 1600x2560, 1600x3840, 1620x2880
+                new Group("F", 1429)
+                {
+                    new ScreenSize("1504x2256"),
+                    new ScreenSize("1536x2048"),
+                    new ScreenSize("1600x2560"),
+                    new ScreenSize("1600x3840"),
+                    new ScreenSize("1620x2880"),
+                },
+                //1700x2560, 1728x2304, 1800x2560, 1800x2880, 1800x3200, 1824x2736, 1920x2560, 1920x3072
+                new Group("G", 1623)
+                {
+                    new ScreenSize("1700x2560"),
+                    new ScreenSize("1728x2304"),
+                    new ScreenSize("1800x2560"),
+                    new ScreenSize("1800x2880"),
+                    new ScreenSize("1800x3200"),
+                    new ScreenSize("1824x2736"),
+                    new ScreenSize("1920x2560"),
+                    new ScreenSize("1920x3072"),
+                },
+                //2000x3000, 2048x2560, 2048x2732, 2048x3200, 2100x2800, 2160x3240, 2160x3840, 2160x4096, 2160x5120
+                new Group("H", 1900)
+                {
+                    new ScreenSize("2000x3000"),
+                    new ScreenSize("2048x2560"),
+                    new ScreenSize("2048x2732"),
+                    new ScreenSize("2048x3200"),
+                    new ScreenSize("2100x2800"),
+                    new ScreenSize("2160x3240"),
+                    new ScreenSize("2160x3840"),
+                    new ScreenSize("2160x4096"),
+                    new ScreenSize("2160x5120"),
+                },
+                //2304x4096, 2400x3200, 2400x3840, 2520x4480
+                new Group("I", 2189)
+                {
+                    new ScreenSize("2304x4096"),
+                    new ScreenSize("2400x3200"),
+                    new ScreenSize("2400x3840"),
+                    new ScreenSize("2520x4480"),
+                },
+                //2880x5120, 3000x4500, 3072x4096, 3200x5120, 3240x6480
+                new Group("J", 2740)
+                {
+                    new ScreenSize("2880x5120"),
+                    new ScreenSize("3000x4500"),
+                    new ScreenSize("3072x4096"),
+                    new ScreenSize("3200x5120"),
+                    new ScreenSize("3240x6480"),
+                },
+                //3384x6016
+                new Group("K", 3215)
+                {
+                    new ScreenSize("3384x6016"),
+                },
+                //4096x5120, 4096x6400, 4320x7680, 4320x8192, 4320x10240, 4608x8192
+                new Group("L", 3895)
+                {
+                    new ScreenSize("4096x5120"),
+                    new ScreenSize("4096x6400"),
+                    new ScreenSize("4320x7680"),
+                    new ScreenSize("4320x8192"),
+                    new ScreenSize("4608x8192"),
+                },
+                //4800x6400, 4800x7680
+                new Group("M", 4560)
+                {
+                    new ScreenSize("4800x6400"),
+                    new ScreenSize("4800x7680"),
+                },
+                new Group("N", 7782)
+                {
+                    new ScreenSize("8192x8192"),
+                },
+            };
+        }
+        public static IList<Group> LandscapeGroups { get; private set; }
+        public static IList<Group> PortraitGroups { get; private set; }
+
+        public static int GetMargin()
+        {
+            int width = Window.Instance.WindowSize.Width;
+            int height = Window.Instance.WindowSize.Height;
+
+            var groups = width > height ? LandscapeGroups : PortraitGroups;
+            var group = groups.FirstOrDefault(g => g.Any(s => s.Width == width));
+            return group?.MarginContainerWidth ?? width;
+        }
+    }
+}

diff --git a/Oobe/Oobe/Views/MainView.cs b/Oobe/Oobe/Views/MainView.cs
index 7ba7e89..79119be 100644 (file)
--- a/Oobe/Oobe/Views/MainView.cs
+++ b/Oobe/Oobe/Views/MainView.cs
@@ -18,6 +18,7 @@ using Oobe.Common.Utils;
 using Tizen.NUI;
 using Tizen.NUI.BaseComponents;
 using Tizen.NUI.Components;
+using Tizen.Jetpack;
 
 namespace Oobe.Views
 {
@@ -27,6 +28,7 @@ namespace Oobe.Views
     public class MainView : View
     {
         private const int TransitionTime = 750;
+        private MarginalView marginalView;
         private ScalableUI.OrientationalView orientational;
         private Pagination pagination;
         private bool firstPushed = false;
@@ -40,16 +42,23 @@ namespace Oobe.Views
             ParentOrigin = Tizen.NUI.ParentOrigin.Center;
             PivotPoint = Tizen.NUI.PivotPoint.Center;
 
-            Tizen.Log.Debug("oobe", $"this.Size: {this.Size.Width} {this.Size.Height}");
+            Layout = new LinearLayout
+            {
+                LinearOrientation = LinearLayout.Orientation.Vertical,
+            };
 
+            marginalView = new MarginalView();
+            DetermineWhiteBoxSize();
+
+            Tizen.Log.Debug("oobe", $"White box size: {ScreenSizeUtils.WhiteBoxSize.Width}x{ScreenSizeUtils.WhiteBoxSize.Height}");
             orientational = new ScalableUI.OrientationalView
             {
-                Size = SpUtils.ToPixels(ScreenSizeUtils.IsPortrait ? new Size2D(952, 1792) : new Size2D(1792, 952)),
+                Size = ScreenSizeUtils.WhiteBoxSize,
                 Position2D = new Position2D(0, 0),
                 ScrollDuration = TransitionTime,
             };
 
-            Add(orientational);
+            marginalView.Add(orientational);
 
             pagination = new Pagination();
             pagination.PositionUsesPivotPoint = true;
@@ -64,7 +73,9 @@ namespace Oobe.Views
             };
             pagination.IndicatorSpacing = 12;
 
-            Add(pagination);
+            marginalView.Add(pagination);
+
+            Add(marginalView);
         }
 
         public int PagesCount
@@ -89,10 +100,19 @@ namespace Oobe.Views
             }
         }
 
+        private void DetermineWhiteBoxSize()
+        {
+            var marginWidth = (Window.Instance.WindowSize.Width - marginalView.MarginalWidth) / 2;
+
+            float boxHeight = Window.Instance.WindowSize.Height - (2 * marginWidth);
+            ScreenSizeUtils.WhiteBoxSize = new Size(marginalView.MarginalWidth, boxHeight);
+        }
+
         public void Push(View view)
         {
             view.HeightResizePolicy = ResizePolicyType.FillToParent;
             view.WidthResizePolicy = ResizePolicyType.FillToParent;
+            view.Size = ScreenSizeUtils.WhiteBoxSize;
 
             if (firstPushed)
             {