[NUI] Add TextFieldLayout and TextEditorLayout
authorJaehyun Cho <jae_hyun.cho@samsung.com>
Wed, 15 Dec 2021 09:54:12 +0000 (18:54 +0900)
committerdongsug-song <35130733+dongsug-song@users.noreply.github.com>
Wed, 19 Jan 2022 05:29:33 +0000 (14:29 +0900)
In DALi, the default HeightResizePolicy of TextField and TextEditor is
FillToParent.
Because of this, TextField and TextEditor fill their parent's height by
default although text is null string.

If TextField and TextEditor's parent has Layout, then their sizes should
be calculated based on their Width/HeightSpecification.

To calculate TextField and TextEditor's size based on their
Width/HeightSpecification, TextFieldLayout and TextEditor are added.

src/Tizen.NUI/src/public/BaseComponents/TextEditor.cs
src/Tizen.NUI/src/public/BaseComponents/TextEditorEvent.cs
src/Tizen.NUI/src/public/BaseComponents/TextField.cs
src/Tizen.NUI/src/public/BaseComponents/TextFieldEvent.cs
test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/TextEditorLayoutTest.cs [new file with mode: 0755]
test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/TextFieldLayoutTest.cs [new file with mode: 0755]

index ae8085c..b824b29 100755 (executable)
@@ -2405,6 +2405,18 @@ namespace Tizen.NUI.BaseComponents
             Interop.TextEditor.DeleteTextEditor(swigCPtr);
         }
 
+        internal override LayoutItem CreateDefaultLayout()
+        {
+            return new TextEditorLayout();
+        }
+
+        internal void SetTextWithoutTextChanged(string text)
+        {
+            invokeTextChanged = false;
+            Tizen.NUI.Object.SetProperty((System.Runtime.InteropServices.HandleRef)SwigCPtr, TextEditor.Property.TEXT, new Tizen.NUI.PropertyValue(text));
+            invokeTextChanged = true;
+        }
+
         private string SetTranslatable(string textEditorSid)
         {
             string translatableText = null;
@@ -2603,5 +2615,65 @@ namespace Tizen.NUI.BaseComponents
         {
             GrabHandleColor = new Color(r, g, b, a);
         }
+
+        private class TextEditorLayout : LayoutItem
+        {
+            protected override void OnMeasure(MeasureSpecification widthMeasureSpec, MeasureSpecification heightMeasureSpec)
+            {
+                // Padding will be automatically applied by DALi TextEditor.
+                var totalWidth = widthMeasureSpec.Size.AsDecimal();
+                var totalHeight = heightMeasureSpec.Size.AsDecimal();
+                var minSize = Owner.MinimumSize;
+                var maxSize = Owner.MaximumSize;
+                var naturalSize = Owner.GetNaturalSize();
+
+                if (((TextEditor)Owner).Text.Length == 0)
+                {
+                    // Calculate height of TextEditor by setting Text with " ".
+                    // By calling SetTextWithoutTextChanged, TextChanged callback is not called for this.
+                    ((TextEditor)Owner).SetTextWithoutTextChanged(" ");
+
+                    // Store original WidthSpecification to restore it after setting ResizePolicy.
+                    var widthSpecification = Owner.WidthSpecification;
+
+                    // In DALi's Size logic, if Width or Height is set to be 0, then
+                    // ResizePolicy is not changed to Fixed.
+                    // This causes Size changes after NUI Layout's OnMeasure is finished.
+                    // e.g. TextEditor's Width fills to its parent although Text is null and
+                    //      WidthSpecification is WrapContent.
+                    // To prevent the Size changes, WidthResizePolicy is set to be Fixed
+                    // in advance if Text is null.
+                    Owner.WidthResizePolicy = ResizePolicyType.Fixed;
+
+                    // Restore WidthSpecification because ResizePolicy changes WidthSpecification.
+                    Owner.WidthSpecification = widthSpecification;
+
+                    naturalSize = Owner.GetNaturalSize();
+
+                    // Restore TextEditor's Text after calculating height of TextEditor.
+                    // By calling SetTextWithoutTextChanged, TextChanged callback is not called for this.
+                    ((TextEditor)Owner).SetTextWithoutTextChanged("");
+                }
+
+                if (widthMeasureSpec.Mode != MeasureSpecification.ModeType.Exactly)
+                {
+                    totalWidth = Math.Min(Math.Max(naturalSize.Width, minSize.Width), maxSize.Width);
+                }
+
+                if (heightMeasureSpec.Mode != MeasureSpecification.ModeType.Exactly)
+                {
+                    totalHeight = Math.Min(Math.Max(naturalSize.Height, minSize.Height), maxSize.Height);
+                }
+
+                widthMeasureSpec = new MeasureSpecification(new LayoutLength(totalWidth), MeasureSpecification.ModeType.Exactly);
+                heightMeasureSpec = new MeasureSpecification(new LayoutLength(totalHeight), MeasureSpecification.ModeType.Exactly);
+
+                MeasuredSize.StateType childWidthState = MeasuredSize.StateType.MeasuredSizeOK;
+                MeasuredSize.StateType childHeightState = MeasuredSize.StateType.MeasuredSizeOK;
+
+                SetMeasuredDimensions(ResolveSizeAndState(new LayoutLength(totalWidth), widthMeasureSpec, childWidthState),
+                                      ResolveSizeAndState(new LayoutLength(totalHeight), heightMeasureSpec, childHeightState));
+            }
+        }
     }
 }
index 45f5cc4..38ab071 100755 (executable)
@@ -75,6 +75,8 @@ namespace Tizen.NUI.BaseComponents
         [UnmanagedFunctionPointer(CallingConvention.StdCall)]
         private delegate void InputFilteredCallbackDelegate(IntPtr textEditor, InputFilterType type);
 
+        private bool invokeTextChanged = true;
+
         /// <summary>
         /// An event for the TextChanged signal which can be used to subscribe or unsubscribe the event handler
         /// provided by the user. The TextChanged signal is emitted when the text changes.<br />
@@ -355,7 +357,7 @@ namespace Tizen.NUI.BaseComponents
 
         private void OnTextChanged(IntPtr textEditor)
         {
-            if (textEditorTextChangedEventHandler != null)
+            if (textEditorTextChangedEventHandler != null && invokeTextChanged)
             {
                 TextChangedEventArgs e = new TextChangedEventArgs();
 
index 712fa96..384bcdd 100755 (executable)
@@ -2444,6 +2444,18 @@ namespace Tizen.NUI.BaseComponents
             Interop.TextField.DeleteTextField(swigCPtr);
         }
 
+        internal override LayoutItem CreateDefaultLayout()
+        {
+            return new TextFieldLayout();
+        }
+
+        internal void SetTextWithoutTextChanged(string text)
+        {
+            invokeTextChanged = false;
+            Tizen.NUI.Object.SetProperty((System.Runtime.InteropServices.HandleRef)SwigCPtr, TextField.Property.TEXT, new Tizen.NUI.PropertyValue(text));
+            invokeTextChanged = true;
+        }
+
         private string SetTranslatable(string textFieldSid)
         {
             string translatableText = null;
@@ -2646,5 +2658,65 @@ namespace Tizen.NUI.BaseComponents
         {
             GrabHandleColor = new Color(r, g, b, a);
         }
+
+        private class TextFieldLayout : LayoutItem
+        {
+            protected override void OnMeasure(MeasureSpecification widthMeasureSpec, MeasureSpecification heightMeasureSpec)
+            {
+                // Padding will be automatically applied by DALi TextField.
+                var totalWidth = widthMeasureSpec.Size.AsDecimal();
+                var totalHeight = heightMeasureSpec.Size.AsDecimal();
+                var minSize = Owner.MinimumSize;
+                var maxSize = Owner.MaximumSize;
+                var naturalSize = Owner.GetNaturalSize();
+
+                if (((TextField)Owner).Text.Length == 0)
+                {
+                    // Calculate height of TextField by setting Text with " ".
+                    // By calling SetTextWithoutTextChanged, TextChanged callback is not called for this.
+                    ((TextField)Owner).SetTextWithoutTextChanged(" ");
+
+                    // Store original WidthSpecification to restore it after setting ResizePolicy.
+                    var widthSpecification = Owner.WidthSpecification;
+
+                    // In DALi's Size logic, if Width or Height is set to be 0, then
+                    // ResizePolicy is not changed to Fixed.
+                    // This causes Size changes after NUI Layout's OnMeasure is finished.
+                    // e.g. TextField's Width fills to its parent although Text is null and
+                    //      WidthSpecification is WrapContent.
+                    // To prevent the Size changes, WidthResizePolicy is set to be Fixed
+                    // in advance if Text is null.
+                    Owner.WidthResizePolicy = ResizePolicyType.Fixed;
+
+                    // Restore WidthSpecification because ResizePolicy changes WidthSpecification.
+                    Owner.WidthSpecification = widthSpecification;
+
+                    naturalSize = Owner.GetNaturalSize();
+
+                    // Restore TextField's Text after calculating height of TextField.
+                    // By calling SetTextWithoutTextChanged, TextChanged callback is not called for this.
+                    ((TextField)Owner).SetTextWithoutTextChanged("");
+                }
+
+                if (widthMeasureSpec.Mode != MeasureSpecification.ModeType.Exactly)
+                {
+                    totalWidth = Math.Min(Math.Max(naturalSize.Width, minSize.Width), maxSize.Width);
+                }
+
+                if (heightMeasureSpec.Mode != MeasureSpecification.ModeType.Exactly)
+                {
+                    totalHeight = Math.Min(Math.Max(naturalSize.Height, minSize.Height), maxSize.Height);
+                }
+
+                widthMeasureSpec = new MeasureSpecification(new LayoutLength(totalWidth), MeasureSpecification.ModeType.Exactly);
+                heightMeasureSpec = new MeasureSpecification(new LayoutLength(totalHeight), MeasureSpecification.ModeType.Exactly);
+
+                MeasuredSize.StateType childWidthState = MeasuredSize.StateType.MeasuredSizeOK;
+                MeasuredSize.StateType childHeightState = MeasuredSize.StateType.MeasuredSizeOK;
+
+                SetMeasuredDimensions(ResolveSizeAndState(new LayoutLength(totalWidth), widthMeasureSpec, childWidthState),
+                                      ResolveSizeAndState(new LayoutLength(totalHeight), heightMeasureSpec, childHeightState));
+            }
+        }
     }
 }
index 3471105..2e9dd2b 100755 (executable)
@@ -65,6 +65,8 @@ namespace Tizen.NUI.BaseComponents
         [UnmanagedFunctionPointer(CallingConvention.StdCall)]
         private delegate void SelectionClearedCallbackDelegate(IntPtr textField);
 
+        private bool invokeTextChanged = true;
+
         /// <summary>
         /// The TextChanged event.
         /// </summary>
@@ -316,7 +318,7 @@ namespace Tizen.NUI.BaseComponents
 
         private void OnTextChanged(IntPtr textField)
         {
-            if (textFieldTextChangedEventHandler != null)
+            if (textFieldTextChangedEventHandler != null && invokeTextChanged)
             {
                 TextChangedEventArgs e = new TextChangedEventArgs();
 
diff --git a/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/TextEditorLayoutTest.cs b/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/TextEditorLayoutTest.cs
new file mode 100755 (executable)
index 0000000..562c554
--- /dev/null
@@ -0,0 +1,645 @@
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace Tizen.NUI.Samples
+{
+    public class TextEditorLayoutTest : IExample
+    {
+        private Window window;
+        private ScrollableBase rootView;
+
+        public void Activate()
+        {
+            window = NUIApplication.GetDefaultWindow();
+
+            rootView = new ScrollableBase()
+            {
+                ScrollingDirection = ScrollableBase.Direction.Vertical,
+                HideScrollbar = false,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            window.Add(rootView);
+
+            var mainView = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    CellPadding = new Size2D(0, 20),
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            rootView.Add(mainView);
+
+            var absoluteViewTitle = new TextLabel()
+            {
+                Text = "AbsoluteLayout",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(absoluteViewTitle);
+
+            var absoluteView = new View()
+            {
+                Layout = new AbsoluteLayout(),
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = 300,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(absoluteView);
+
+            var absoluteTopText = new TextEditor()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            absoluteTopText.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"AbsoluteLayout Top Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            absoluteView.Add(absoluteTopText);
+
+            var absoluteCenterText = new TextEditor()
+            {
+                Text = "Center\nNew Line",
+                BackgroundColor = Color.Blue,
+                ParentOrigin = new Position(0.5f, 0.5f, 0.5f),
+                PivotPoint = new Position(0.5f, 0.5f, 0.5f),
+                PositionUsesPivotPoint = true,
+            };
+            absoluteCenterText.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"AbsoluteLayout Center Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            absoluteView.Add(absoluteCenterText);
+
+            var absoluteBottomText = new TextEditor()
+            {
+                Text = "Bottom\nNew Line",
+                BackgroundColor = Color.Green,
+                ParentOrigin = new Position(0.5f, 1.0f, 0.5f),
+                PivotPoint = new Position(0.5f, 1.0f, 0.5f),
+                PositionUsesPivotPoint = true,
+            };
+            absoluteBottomText.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"AbsoluteLayout Bottom Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            absoluteView.Add(absoluteBottomText);
+
+            var linearViewTitle = new TextLabel()
+            {
+                Text = "LinearLayout",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(linearViewTitle);
+
+            var linearView = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    CellPadding = new Size2D(10, 0),
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(linearView);
+
+            var linearLeft = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    CellPadding = new Size2D(0, 10),
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            linearView.Add(linearLeft);
+
+            var linearLeftText1 = new TextEditor()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearLeftText1.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Left default size Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            linearLeft.Add(linearLeftText1);
+
+            var linearLeftText2 = new TextEditor()
+            {
+                PixelSize = 16,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearLeftText2.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Left PixelSize 16 Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            linearLeft.Add(linearLeftText2);
+
+            var linearLeftText3 = new TextEditor()
+            {
+                PixelSize = 64,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearLeftText3.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Left PixelSize 64 Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            linearLeft.Add(linearLeftText3);
+
+            var linearLeftText4 = new TextEditor()
+            {
+                BackgroundColor = Color.Red,
+            };
+            linearLeftText4.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Left Text with WrapContent WidthSpecification has been changed to \"{args.TextEditor.Text}\".");
+            };
+            linearLeft.Add(linearLeftText4);
+
+            var linearRight = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    CellPadding = new Size2D(0, 10),
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            linearView.Add(linearRight);
+
+            var linearRightText1 = new TextEditor()
+            {
+                Text = "Default\nNew Line",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearRightText1.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Right default size Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            linearRight.Add(linearRightText1);
+
+            var linearRightText2 = new TextEditor()
+            {
+                Text = "16\nNew Line",
+                PixelSize = 16,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearRightText2.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Right PixelSize 16 Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            linearRight.Add(linearRightText2);
+
+            var linearRightText3 = new TextEditor()
+            {
+                Text = "64\nNew Line",
+                PixelSize = 64,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearRightText3.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Right PixelSize 64 Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            linearRight.Add(linearRightText3);
+
+            var linearRightText4 = new TextEditor()
+            {
+                Text = "WrapContent\nNew Line",
+                BackgroundColor = Color.Red,
+            };
+            linearRightText4.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Right Text with WrapContent WidthSpecification has been changed to \"{args.TextEditor.Text}\".");
+            };
+            linearRight.Add(linearRightText4);
+
+            var gridViewTitle = new TextLabel()
+            {
+                Text = "GridLayout",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(gridViewTitle);
+
+            var gridView = new View()
+            {
+                Layout = new GridLayout()
+                {
+                    Rows = 5,
+                    Columns = 2,
+                    RowSpacing = 10,
+                    ColumnSpacing = 10,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(gridView);
+
+            var gridCol1Text1 = new TextEditor()
+            {
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text1.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 default size Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text1, 0);
+            GridLayout.SetColumn(gridCol1Text1, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text1, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol1Text1, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol1Text1);
+
+            var gridCol1Text2 = new TextEditor()
+            {
+                PixelSize = 16,
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text2.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 PixelSize 16 Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text2, 1);
+            GridLayout.SetColumn(gridCol1Text2, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text2, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol1Text2, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol1Text2);
+
+            var gridCol1Text3 = new TextEditor()
+            {
+                PixelSize = 64,
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text3.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 PixelSize 64 Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text3, 2);
+            GridLayout.SetColumn(gridCol1Text3, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text3, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol1Text3, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol1Text3);
+
+            var gridCol1Text4 = new TextEditor()
+            {
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text4.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 Text with Fill has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text4, 3);
+            GridLayout.SetColumn(gridCol1Text4, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text4, GridLayout.StretchFlags.Fill);
+            GridLayout.SetVerticalStretch(gridCol1Text4, GridLayout.StretchFlags.Fill);
+            gridView.Add(gridCol1Text4);
+
+            var gridCol1Text5 = new TextEditor()
+            {
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text5.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 Text with Expand has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text5, 4);
+            GridLayout.SetColumn(gridCol1Text5, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text5, GridLayout.StretchFlags.Expand);
+            GridLayout.SetVerticalStretch(gridCol1Text5, GridLayout.StretchFlags.Expand);
+            gridView.Add(gridCol1Text5);
+
+            var gridCol2Text1 = new TextEditor()
+            {
+                Text = "Default\nNew Line",
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text1.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 default size Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text1, 0);
+            GridLayout.SetColumn(gridCol2Text1, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text1, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol2Text1, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text1);
+
+            var gridCol2Text2 = new TextEditor()
+            {
+                Text = "16\nNew Line",
+                PixelSize = 16,
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text2.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 PixelSize 16 Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text2, 1);
+            GridLayout.SetColumn(gridCol2Text2, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text2, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol2Text2, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text2);
+
+            var gridCol2Text3 = new TextEditor()
+            {
+                Text = "64\nNew Line",
+                PixelSize = 64,
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text3.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 PixelSize 64 Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text3, 2);
+            GridLayout.SetColumn(gridCol2Text3, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text3, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol2Text3, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text3);
+
+            var gridCol2Text4 = new TextEditor()
+            {
+                Text = "Fill\nNew Line",
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text4.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 Text with Fill has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text4, 3);
+            GridLayout.SetColumn(gridCol2Text4, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text4, GridLayout.StretchFlags.Fill);
+            GridLayout.SetVerticalStretch(gridCol2Text4, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text4);
+
+            var gridCol2Text5 = new TextEditor()
+            {
+                Text = "Expand\nNew Line",
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text5.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 Text with Expand has been changed to \"{args.TextEditor.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text5, 4);
+            GridLayout.SetColumn(gridCol2Text5, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text5, GridLayout.StretchFlags.Expand);
+            GridLayout.SetVerticalStretch(gridCol2Text5, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text5);
+
+            var relativeViewTitle = new TextLabel()
+            {
+                Text = "RelativeLayout",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(relativeViewTitle);
+
+            var relativeView = new View()
+            {
+                Layout = new RelativeLayout(),
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(relativeView);
+
+            var relTopText = new TextEditor()
+            {
+                Text = "Top with Fill\nNew Line",
+                HorizontalAlignment = HorizontalAlignment.Center,
+                BackgroundColor = Color.Red,
+            };
+            relTopText.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Top Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            RelativeLayout.SetTopRelativeOffset(relTopText, 0.0f);
+            RelativeLayout.SetBottomRelativeOffset(relTopText, 0.0f);
+            RelativeLayout.SetLeftRelativeOffset(relTopText, 0.0f);
+            RelativeLayout.SetRightRelativeOffset(relTopText, 1.0f);
+            RelativeLayout.SetFillHorizontal(relTopText, true);
+            relativeView.Add(relTopText);
+
+            var relLeftText = new TextEditor()
+            {
+                Text = "Left\nNew Line",
+                BackgroundColor = Color.Green,
+            };
+            relLeftText.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Left Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            RelativeLayout.SetTopTarget(relLeftText, relTopText);
+            RelativeLayout.SetTopRelativeOffset(relLeftText, 1.0f);
+            RelativeLayout.SetBottomTarget(relLeftText, relTopText);
+            RelativeLayout.SetBottomRelativeOffset(relLeftText, 1.0f);
+            RelativeLayout.SetLeftRelativeOffset(relLeftText, 0.0f);
+            RelativeLayout.SetRightRelativeOffset(relLeftText, 0.0f);
+            relativeView.Add(relLeftText);
+
+            var relRightText = new TextEditor()
+            {
+                Text = "Right\nNew Line",
+                BackgroundColor = Color.Blue,
+            };
+            relRightText.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Right Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            RelativeLayout.SetTopTarget(relRightText, relTopText);
+            RelativeLayout.SetTopRelativeOffset(relRightText, 1.0f);
+            RelativeLayout.SetBottomTarget(relRightText, relTopText);
+            RelativeLayout.SetBottomRelativeOffset(relRightText, 1.0f);
+            RelativeLayout.SetLeftRelativeOffset(relRightText, 1.0f);
+            RelativeLayout.SetRightRelativeOffset(relRightText, 1.0f);
+            RelativeLayout.SetHorizontalAlignment(relRightText, RelativeLayout.Alignment.End);
+            relativeView.Add(relRightText);
+
+            var relBottomText = new TextEditor()
+            {
+                Text = "Bottom\nNew Line",
+                BackgroundColor = Color.Yellow,
+            };
+            relBottomText.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Bottom Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            RelativeLayout.SetTopRelativeOffset(relBottomText, 1.0f);
+            RelativeLayout.SetBottomRelativeOffset(relBottomText, 1.0f);
+            RelativeLayout.SetLeftTarget(relBottomText, relLeftText);
+            RelativeLayout.SetLeftRelativeOffset(relBottomText, 1.0f);
+            RelativeLayout.SetRightTarget(relBottomText, relRightText);
+            RelativeLayout.SetRightRelativeOffset(relBottomText, 0.0f);
+            RelativeLayout.SetHorizontalAlignment(relBottomText, RelativeLayout.Alignment.Center);
+            RelativeLayout.SetVerticalAlignment(relBottomText, RelativeLayout.Alignment.End);
+            relativeView.Add(relBottomText);
+
+            var relCenterText = new TextEditor()
+            {
+                BackgroundColor = Color.Purple,
+            };
+            relCenterText.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Center Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            RelativeLayout.SetTopTarget(relCenterText, relTopText);
+            RelativeLayout.SetTopRelativeOffset(relCenterText, 1.0f);
+            RelativeLayout.SetBottomTarget(relCenterText, relBottomText);
+            RelativeLayout.SetBottomRelativeOffset(relCenterText, 0.0f);
+            RelativeLayout.SetLeftTarget(relCenterText, relLeftText);
+            RelativeLayout.SetLeftRelativeOffset(relCenterText, 1.0f);
+            RelativeLayout.SetRightTarget(relCenterText, relRightText);
+            RelativeLayout.SetRightRelativeOffset(relCenterText, 0.0f);
+            RelativeLayout.SetFillHorizontal(relCenterText, true);
+            relativeView.Add(relCenterText);
+
+            var flexRowViewTitle = new TextLabel()
+            {
+                Text = "FlexLayout with Row Direction",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(flexRowViewTitle);
+
+            var flexRowView = new View()
+            {
+                Layout = new FlexLayout()
+                {
+                    Direction = FlexLayout.FlexDirection.Row,
+                    WrapType = FlexLayout.FlexWrapType.Wrap,
+                    Alignment = FlexLayout.AlignmentType.Center,
+                    ItemsAlignment = FlexLayout.AlignmentType.Center,
+                    Justification = FlexLayout.FlexJustification.SpaceEvenly,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(flexRowView);
+
+            var flexRowText1 = new TextEditor()
+            {
+                Text = "TextEditor\nNew Line",
+                BackgroundColor = Color.Red,
+            };
+            flexRowText1.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Row First Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            flexRowView.Add(flexRowText1);
+
+            var flexRowText2 = new TextEditor()
+            {
+                Text = "TextEditor\nNew Line",
+                BackgroundColor = Color.Green,
+            };
+            flexRowText2.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Row Second Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            flexRowView.Add(flexRowText2);
+
+            var flexRowText3 = new TextEditor()
+            {
+                Text = "TextEditor\nNew Line",
+                BackgroundColor = Color.Blue,
+            };
+            flexRowText3.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Row Third Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            flexRowView.Add(flexRowText3);
+
+            var flexRowText4 = new TextEditor()
+            {
+                Text = "TextEditor\nNew Line",
+                BackgroundColor = Color.Yellow,
+            };
+            flexRowText4.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Row Fourth Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            flexRowView.Add(flexRowText4);
+
+            var flexColViewTitle = new TextEditor()
+            {
+                Text = "FlexLayout with Column Direction",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(flexColViewTitle);
+
+            var flexColView = new View()
+            {
+                Layout = new FlexLayout()
+                {
+                    Direction = FlexLayout.FlexDirection.Column,
+                    WrapType = FlexLayout.FlexWrapType.Wrap,
+                    Alignment = FlexLayout.AlignmentType.Center,
+                    ItemsAlignment = FlexLayout.AlignmentType.Center,
+                    Justification = FlexLayout.FlexJustification.SpaceEvenly,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = 300,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(flexColView);
+
+            var flexColText1 = new TextEditor()
+            {
+                Text = "TextEditor\nNew Line",
+                BackgroundColor = Color.Red,
+            };
+            flexColText1.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Column First Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            flexColView.Add(flexColText1);
+
+            var flexColText2 = new TextEditor()
+            {
+                Text = "TextEditor\nNew Line",
+                BackgroundColor = Color.Green,
+            };
+            flexColText2.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Column Second Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            flexColView.Add(flexColText2);
+
+            var flexColText3 = new TextEditor()
+            {
+                Text = "TextEditor\nNew Line",
+                BackgroundColor = Color.Blue,
+            };
+            flexColText3.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Column Third Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            flexColView.Add(flexColText3);
+
+            var flexColText4 = new TextEditor()
+            {
+                Text = "TextEditor\nNew Line",
+                BackgroundColor = Color.Yellow,
+            };
+            flexColText4.TextChanged += (object sender, TextEditor.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Column Fourth Text has been changed to \"{args.TextEditor.Text}\".");
+            };
+            flexColView.Add(flexColText4);
+        }
+
+        public void Deactivate()
+        {
+            window.Remove(rootView);
+            rootView.Dispose();
+            rootView = null;
+            window = null;
+        }
+    }
+}
diff --git a/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/TextFieldLayoutTest.cs b/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/TextFieldLayoutTest.cs
new file mode 100755 (executable)
index 0000000..c867072
--- /dev/null
@@ -0,0 +1,645 @@
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace Tizen.NUI.Samples
+{
+    public class TextFieldLayoutTest : IExample
+    {
+        private Window window;
+        private ScrollableBase rootView;
+
+        public void Activate()
+        {
+            window = NUIApplication.GetDefaultWindow();
+
+            rootView = new ScrollableBase()
+            {
+                ScrollingDirection = ScrollableBase.Direction.Vertical,
+                HideScrollbar = false,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            window.Add(rootView);
+
+            var mainView = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    CellPadding = new Size2D(0, 20),
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            rootView.Add(mainView);
+
+            var absoluteViewTitle = new TextLabel()
+            {
+                Text = "AbsoluteLayout",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(absoluteViewTitle);
+
+            var absoluteView = new View()
+            {
+                Layout = new AbsoluteLayout(),
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = 150,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(absoluteView);
+
+            var absoluteTopText = new TextField()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            absoluteTopText.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"AbsoluteLayout Top Text has been changed to \"{args.TextField.Text}\".");
+            };
+            absoluteView.Add(absoluteTopText);
+
+            var absoluteCenterText = new TextField()
+            {
+                Text = "Center",
+                BackgroundColor = Color.Blue,
+                ParentOrigin = new Position(0.5f, 0.5f, 0.5f),
+                PivotPoint = new Position(0.5f, 0.5f, 0.5f),
+                PositionUsesPivotPoint = true,
+            };
+            absoluteCenterText.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"AbsoluteLayout Center Text has been changed to \"{args.TextField.Text}\".");
+            };
+            absoluteView.Add(absoluteCenterText);
+
+            var absoluteBottomText = new TextField()
+            {
+                Text = "Bottom",
+                BackgroundColor = Color.Green,
+                ParentOrigin = new Position(0.5f, 1.0f, 0.5f),
+                PivotPoint = new Position(0.5f, 1.0f, 0.5f),
+                PositionUsesPivotPoint = true,
+            };
+            absoluteBottomText.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"AbsoluteLayout Bottom Text has been changed to \"{args.TextField.Text}\".");
+            };
+            absoluteView.Add(absoluteBottomText);
+
+            var linearViewTitle = new TextLabel()
+            {
+                Text = "LinearLayout",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(linearViewTitle);
+
+            var linearView = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    CellPadding = new Size2D(10, 0),
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(linearView);
+
+            var linearLeft = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    CellPadding = new Size2D(0, 10),
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            linearView.Add(linearLeft);
+
+            var linearLeftText1 = new TextField()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearLeftText1.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Left default size Text has been changed to \"{args.TextField.Text}\".");
+            };
+            linearLeft.Add(linearLeftText1);
+
+            var linearLeftText2 = new TextField()
+            {
+                PixelSize = 16,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearLeftText2.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Left PixelSize 16 Text has been changed to \"{args.TextField.Text}\".");
+            };
+            linearLeft.Add(linearLeftText2);
+
+            var linearLeftText3 = new TextField()
+            {
+                PixelSize = 64,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearLeftText3.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Left PixelSize 64 Text has been changed to \"{args.TextField.Text}\".");
+            };
+            linearLeft.Add(linearLeftText3);
+
+            var linearLeftText4 = new TextField()
+            {
+                BackgroundColor = Color.Red,
+            };
+            linearLeftText4.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Left Text with WrapContent WidthSpecification has been changed to \"{args.TextField.Text}\".");
+            };
+            linearLeft.Add(linearLeftText4);
+
+            var linearRight = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    CellPadding = new Size2D(0, 10),
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            linearView.Add(linearRight);
+
+            var linearRightText1 = new TextField()
+            {
+                Text = "Default",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearRightText1.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Right default size Text has been changed to \"{args.TextField.Text}\".");
+            };
+            linearRight.Add(linearRightText1);
+
+            var linearRightText2 = new TextField()
+            {
+                Text = "16",
+                PixelSize = 16,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearRightText2.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Right PixelSize 16 Text has been changed to \"{args.TextField.Text}\".");
+            };
+            linearRight.Add(linearRightText2);
+
+            var linearRightText3 = new TextField()
+            {
+                Text = "64",
+                PixelSize = 64,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            linearRightText3.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Right PixelSize 64 Text has been changed to \"{args.TextField.Text}\".");
+            };
+            linearRight.Add(linearRightText3);
+
+            var linearRightText4 = new TextField()
+            {
+                Text = "WrapContent",
+                BackgroundColor = Color.Red,
+            };
+            linearRightText4.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"LinearLayout Right Text with WrapContent WidthSpecification has been changed to \"{args.TextField.Text}\".");
+            };
+            linearRight.Add(linearRightText4);
+
+            var gridViewTitle = new TextLabel()
+            {
+                Text = "GridLayout",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(gridViewTitle);
+
+            var gridView = new View()
+            {
+                Layout = new GridLayout()
+                {
+                    Rows = 5,
+                    Columns = 2,
+                    RowSpacing = 10,
+                    ColumnSpacing = 10,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(gridView);
+
+            var gridCol1Text1 = new TextField()
+            {
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text1.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 default size Text has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text1, 0);
+            GridLayout.SetColumn(gridCol1Text1, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text1, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol1Text1, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol1Text1);
+
+            var gridCol1Text2 = new TextField()
+            {
+                PixelSize = 16,
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text2.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 PixelSize 16 Text has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text2, 1);
+            GridLayout.SetColumn(gridCol1Text2, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text2, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol1Text2, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol1Text2);
+
+            var gridCol1Text3 = new TextField()
+            {
+                PixelSize = 64,
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text3.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 PixelSize 64 Text has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text3, 2);
+            GridLayout.SetColumn(gridCol1Text3, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text3, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol1Text3, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol1Text3);
+
+            var gridCol1Text4 = new TextField()
+            {
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text4.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 Text with Fill has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text4, 3);
+            GridLayout.SetColumn(gridCol1Text4, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text4, GridLayout.StretchFlags.Fill);
+            GridLayout.SetVerticalStretch(gridCol1Text4, GridLayout.StretchFlags.Fill);
+            gridView.Add(gridCol1Text4);
+
+            var gridCol1Text5 = new TextField()
+            {
+                BackgroundColor = Color.Green,
+            };
+            gridCol1Text5.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 1 Text with Expand has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol1Text5, 4);
+            GridLayout.SetColumn(gridCol1Text5, 0);
+            GridLayout.SetHorizontalStretch(gridCol1Text5, GridLayout.StretchFlags.Expand);
+            GridLayout.SetVerticalStretch(gridCol1Text5, GridLayout.StretchFlags.Expand);
+            gridView.Add(gridCol1Text5);
+
+            var gridCol2Text1 = new TextField()
+            {
+                Text = "Default",
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text1.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 default size Text has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text1, 0);
+            GridLayout.SetColumn(gridCol2Text1, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text1, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol2Text1, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text1);
+
+            var gridCol2Text2 = new TextField()
+            {
+                Text = "16",
+                PixelSize = 16,
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text2.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 PixelSize 16 Text has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text2, 1);
+            GridLayout.SetColumn(gridCol2Text2, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text2, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol2Text2, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text2);
+
+            var gridCol2Text3 = new TextField()
+            {
+                Text = "64",
+                PixelSize = 64,
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text3.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 PixelSize 64 Text has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text3, 2);
+            GridLayout.SetColumn(gridCol2Text3, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text3, GridLayout.StretchFlags.ExpandAndFill);
+            GridLayout.SetVerticalStretch(gridCol2Text3, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text3);
+
+            var gridCol2Text4 = new TextField()
+            {
+                Text = "Fill",
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text4.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 Text with Fill has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text4, 3);
+            GridLayout.SetColumn(gridCol2Text4, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text4, GridLayout.StretchFlags.Fill);
+            GridLayout.SetVerticalStretch(gridCol2Text4, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text4);
+
+            var gridCol2Text5 = new TextField()
+            {
+                Text = "Expand",
+                BackgroundColor = Color.Green,
+            };
+            gridCol2Text5.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"GridLayout Column 2 Text with Expand has been changed to \"{args.TextField.Text}\".");
+            };
+            GridLayout.SetRow(gridCol2Text5, 4);
+            GridLayout.SetColumn(gridCol2Text5, 1);
+            GridLayout.SetHorizontalStretch(gridCol2Text5, GridLayout.StretchFlags.Expand);
+            GridLayout.SetVerticalStretch(gridCol2Text5, GridLayout.StretchFlags.ExpandAndFill);
+            gridView.Add(gridCol2Text5);
+
+            var relativeViewTitle = new TextLabel()
+            {
+                Text = "RelativeLayout",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(relativeViewTitle);
+
+            var relativeView = new View()
+            {
+                Layout = new RelativeLayout(),
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(relativeView);
+
+            var relTopText = new TextField()
+            {
+                Text = "Top with Fill",
+                HorizontalAlignment = HorizontalAlignment.Center,
+                BackgroundColor = Color.Red,
+            };
+            relTopText.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Top Text has been changed to \"{args.TextField.Text}\".");
+            };
+            RelativeLayout.SetTopRelativeOffset(relTopText, 0.0f);
+            RelativeLayout.SetBottomRelativeOffset(relTopText, 0.0f);
+            RelativeLayout.SetLeftRelativeOffset(relTopText, 0.0f);
+            RelativeLayout.SetRightRelativeOffset(relTopText, 1.0f);
+            RelativeLayout.SetFillHorizontal(relTopText, true);
+            relativeView.Add(relTopText);
+
+            var relLeftText = new TextField()
+            {
+                Text = "Left",
+                BackgroundColor = Color.Green,
+            };
+            relLeftText.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Left Text has been changed to \"{args.TextField.Text}\".");
+            };
+            RelativeLayout.SetTopTarget(relLeftText, relTopText);
+            RelativeLayout.SetTopRelativeOffset(relLeftText, 1.0f);
+            RelativeLayout.SetBottomTarget(relLeftText, relTopText);
+            RelativeLayout.SetBottomRelativeOffset(relLeftText, 1.0f);
+            RelativeLayout.SetLeftRelativeOffset(relLeftText, 0.0f);
+            RelativeLayout.SetRightRelativeOffset(relLeftText, 0.0f);
+            relativeView.Add(relLeftText);
+
+            var relRightText = new TextField()
+            {
+                Text = "Right",
+                BackgroundColor = Color.Blue,
+            };
+            relRightText.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Right Text has been changed to \"{args.TextField.Text}\".");
+            };
+            RelativeLayout.SetTopTarget(relRightText, relTopText);
+            RelativeLayout.SetTopRelativeOffset(relRightText, 1.0f);
+            RelativeLayout.SetBottomTarget(relRightText, relTopText);
+            RelativeLayout.SetBottomRelativeOffset(relRightText, 1.0f);
+            RelativeLayout.SetLeftRelativeOffset(relRightText, 1.0f);
+            RelativeLayout.SetRightRelativeOffset(relRightText, 1.0f);
+            RelativeLayout.SetHorizontalAlignment(relRightText, RelativeLayout.Alignment.End);
+            relativeView.Add(relRightText);
+
+            var relBottomText = new TextField()
+            {
+                Text = "Bottom",
+                BackgroundColor = Color.Yellow,
+            };
+            relBottomText.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Bottom Text has been changed to \"{args.TextField.Text}\".");
+            };
+            RelativeLayout.SetTopRelativeOffset(relBottomText, 1.0f);
+            RelativeLayout.SetBottomRelativeOffset(relBottomText, 1.0f);
+            RelativeLayout.SetLeftTarget(relBottomText, relLeftText);
+            RelativeLayout.SetLeftRelativeOffset(relBottomText, 1.0f);
+            RelativeLayout.SetRightTarget(relBottomText, relRightText);
+            RelativeLayout.SetRightRelativeOffset(relBottomText, 0.0f);
+            RelativeLayout.SetHorizontalAlignment(relBottomText, RelativeLayout.Alignment.Center);
+            RelativeLayout.SetVerticalAlignment(relBottomText, RelativeLayout.Alignment.End);
+            relativeView.Add(relBottomText);
+
+            var relCenterText = new TextField()
+            {
+                BackgroundColor = Color.Purple,
+            };
+            relCenterText.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"RelativeLayout Center Text has been changed to \"{args.TextField.Text}\".");
+            };
+            RelativeLayout.SetTopTarget(relCenterText, relTopText);
+            RelativeLayout.SetTopRelativeOffset(relCenterText, 1.0f);
+            RelativeLayout.SetBottomTarget(relCenterText, relBottomText);
+            RelativeLayout.SetBottomRelativeOffset(relCenterText, 0.0f);
+            RelativeLayout.SetLeftTarget(relCenterText, relLeftText);
+            RelativeLayout.SetLeftRelativeOffset(relCenterText, 1.0f);
+            RelativeLayout.SetRightTarget(relCenterText, relRightText);
+            RelativeLayout.SetRightRelativeOffset(relCenterText, 0.0f);
+            RelativeLayout.SetFillHorizontal(relCenterText, true);
+            relativeView.Add(relCenterText);
+
+            var flexRowViewTitle = new TextLabel()
+            {
+                Text = "FlexLayout with Row Direction",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(flexRowViewTitle);
+
+            var flexRowView = new View()
+            {
+                Layout = new FlexLayout()
+                {
+                    Direction = FlexLayout.FlexDirection.Row,
+                    WrapType = FlexLayout.FlexWrapType.Wrap,
+                    Alignment = FlexLayout.AlignmentType.Center,
+                    ItemsAlignment = FlexLayout.AlignmentType.Center,
+                    Justification = FlexLayout.FlexJustification.SpaceEvenly,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(flexRowView);
+
+            var flexRowText1 = new TextField()
+            {
+                Text = "TextField",
+                BackgroundColor = Color.Red,
+            };
+            flexRowText1.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Row First Text has been changed to \"{args.TextField.Text}\".");
+            };
+            flexRowView.Add(flexRowText1);
+
+            var flexRowText2 = new TextField()
+            {
+                Text = "TextField",
+                BackgroundColor = Color.Green,
+            };
+            flexRowText2.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Row Second Text has been changed to \"{args.TextField.Text}\".");
+            };
+            flexRowView.Add(flexRowText2);
+
+            var flexRowText3 = new TextField()
+            {
+                Text = "TextField",
+                BackgroundColor = Color.Blue,
+            };
+            flexRowText3.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Row Third Text has been changed to \"{args.TextField.Text}\".");
+            };
+            flexRowView.Add(flexRowText3);
+
+            var flexRowText4 = new TextField()
+            {
+                Text = "TextField",
+                BackgroundColor = Color.Yellow,
+            };
+            flexRowText4.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Row Fourth Text has been changed to \"{args.TextField.Text}\".");
+            };
+            flexRowView.Add(flexRowText4);
+
+            var flexColViewTitle = new TextField()
+            {
+                Text = "FlexLayout with Column Direction",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            mainView.Add(flexColViewTitle);
+
+            var flexColView = new View()
+            {
+                Layout = new FlexLayout()
+                {
+                    Direction = FlexLayout.FlexDirection.Column,
+                    WrapType = FlexLayout.FlexWrapType.Wrap,
+                    Alignment = FlexLayout.AlignmentType.Center,
+                    ItemsAlignment = FlexLayout.AlignmentType.Center,
+                    Justification = FlexLayout.FlexJustification.SpaceEvenly,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = 150,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(flexColView);
+
+            var flexColText1 = new TextField()
+            {
+                Text = "TextField",
+                BackgroundColor = Color.Red,
+            };
+            flexColText1.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Column First Text has been changed to \"{args.TextField.Text}\".");
+            };
+            flexColView.Add(flexColText1);
+
+            var flexColText2 = new TextField()
+            {
+                Text = "TextField",
+                BackgroundColor = Color.Green,
+            };
+            flexColText2.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Column Second Text has been changed to \"{args.TextField.Text}\".");
+            };
+            flexColView.Add(flexColText2);
+
+            var flexColText3 = new TextField()
+            {
+                Text = "TextField",
+                BackgroundColor = Color.Blue,
+            };
+            flexColText3.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Column Third Text has been changed to \"{args.TextField.Text}\".");
+            };
+            flexColView.Add(flexColText3);
+
+            var flexColText4 = new TextField()
+            {
+                Text = "TextField",
+                BackgroundColor = Color.Yellow,
+            };
+            flexColText4.TextChanged += (object sender, TextField.TextChangedEventArgs args) =>
+            {
+                global::System.Console.WriteLine($"FlexLayout with Column Fourth Text has been changed to \"{args.TextField.Text}\".");
+            };
+            flexColView.Add(flexColText4);
+        }
+
+        public void Deactivate()
+        {
+            window.Remove(rootView);
+            rootView.Dispose();
+            rootView = null;
+            window = null;
+        }
+    }
+}