[NUI] Add Borderline Properties
authorEunki, Hong <eunkiki.hong@samsung.com>
Thu, 13 May 2021 09:12:56 +0000 (18:12 +0900)
committerdongsug-song <35130733+dongsug-song@users.noreply.github.com>
Fri, 21 May 2021 07:37:43 +0000 (16:37 +0900)
Add borderline properies for view
 - BorderlineWidth (float, default = 0.0f)
   : Width of the borderline
 - BorderlineColor (Vector4, default = Color.Black)
   : Color of the borderline
 - BorderlineOffset (float, default = 0.0f)
   : Relative position offset from 'Real' borderline of visual.
     == 0.0f then half is inside, and half is outside of visual.
     == -1.0f then all borderline will be rendered inside of visual.
     == 1.0f then all borderline will be rendered outside of visual.

These three properties are animatable

If it is ImageView, this property only allow to ImageView.Property.IMAGE.
Otherwise, allow to View.Property.BACKGROUND.

Also, current version only works when Border is not setup.

Signed-off-by: Eunki, Hong <eunkiki.hong@samsung.com>
src/Tizen.NUI/src/internal/Common/PropertyHelper.cs
src/Tizen.NUI/src/public/BaseComponents/ImageView.cs
src/Tizen.NUI/src/public/BaseComponents/Style/ViewStyle.cs
src/Tizen.NUI/src/public/BaseComponents/Style/ViewStyleBindableProperty.cs
src/Tizen.NUI/src/public/BaseComponents/View.cs
src/Tizen.NUI/src/public/BaseComponents/ViewBindableProperty.cs
src/Tizen.NUI/src/public/BaseComponents/ViewInternal.cs
src/Tizen.NUI/src/public/ViewProperty/BackgroundExtraData.cs
src/Tizen.NUI/src/public/Visuals/VisualConstants.cs
src/Tizen.NUI/src/public/Visuals/VisualMaps.cs

index 2f5bf71..7a11812 100755 (executable)
@@ -42,6 +42,12 @@ namespace Tizen.NUI
             { "cornerRadius",           new VisualPropertyData(ImageView.Property.IMAGE, Visual.Property.CornerRadius, null, null,
                                         new VisualPropertyData(View.Property.SHADOW, Visual.Property.CornerRadius, null, null,
                                         new VisualPropertyData(View.Property.BACKGROUND, Visual.Property.CornerRadius, null, null))) },
+            { "borderlineWidth",        new VisualPropertyData(ImageView.Property.IMAGE, Visual.Property.BorderlineWidth, ObjectIntToFloat, null,
+                                        new VisualPropertyData(View.Property.BACKGROUND, Visual.Property.BorderlineWidth, ObjectIntToFloat, null)) },
+            { "borderlineColor",        new VisualPropertyData(ImageView.Property.IMAGE, Visual.Property.BorderlineColor, null, null,
+                                        new VisualPropertyData(View.Property.BACKGROUND, Visual.Property.BorderlineColor, null, null)) },
+            { "borderlineOffset",       new VisualPropertyData(ImageView.Property.IMAGE, Visual.Property.BorderlineOffset, null, null,
+                                        new VisualPropertyData(View.Property.BACKGROUND, Visual.Property.BorderlineOffset, null, null)) },
             { "imageShadow.Offset",     new VisualPropertyData(View.Property.SHADOW, (int)VisualTransformPropertyType.Offset) },
             { "shadow.CornerRadius",    new VisualPropertyData(View.Property.SHADOW, Visual.Property.CornerRadius, ObjectIntToFloat) },
         };
index b55758d..bfe5020 100755 (executable)
@@ -1119,6 +1119,32 @@ namespace Tizen.NUI.BaseComponents
             UpdateImage(0, null);
         }
 
+        internal override void ApplyBorderline()
+        {
+            // Ignore BACKGROUND borderline property. only apply borderline to IMAGE.
+            if (backgroundExtraData != null)
+            {
+                var borderlineColor = backgroundExtraData.BorderlineColor == null ? new PropertyValue(Color.Black) : new PropertyValue(backgroundExtraData.BorderlineColor);
+
+                // Apply to the image visual
+                PropertyMap imageMap = new PropertyMap();
+                PropertyValue imageValue = Tizen.NUI.Object.GetProperty(SwigCPtr, ImageView.Property.IMAGE);
+                if (imageValue.Get(imageMap) && !imageMap.Empty())
+                {
+                    imageMap[Visual.Property.BorderlineWidth] = new PropertyValue(backgroundExtraData.BorderlineWidth);
+                    imageMap[Visual.Property.BorderlineColor] = borderlineColor;
+                    imageMap[Visual.Property.BorderlineOffset] = new PropertyValue(backgroundExtraData.BorderlineOffset);
+                    var temp = new PropertyValue(imageMap);
+                    Tizen.NUI.Object.SetProperty(SwigCPtr, ImageView.Property.IMAGE, temp);
+                    temp.Dispose();
+                }
+                imageMap.Dispose();
+                imageValue.Dispose();
+                borderlineColor.Dispose();
+            }
+            UpdateImage(0, null);
+        }
+
         internal ResourceLoadingStatusType GetResourceStatus()
         {
             return (ResourceLoadingStatusType)Interop.View.GetVisualResourceStatus(this.SwigCPtr, Property.IMAGE);
index fec83f8..fbc62c9 100755 (executable)
@@ -48,6 +48,9 @@ namespace Tizen.NUI.BaseComponents
         private Extents margin;
         private bool? themeChangeSensitive;
         private Vector4 cornerRadius;
+        private float? borderlineWidth;
+        private Color borderlineColor;
+        private float? borderlineOffset;
 
         private Selector<ImageShadow> imageShadow;
         private Selector<Shadow> boxShadow;
@@ -419,6 +422,40 @@ namespace Tizen.NUI.BaseComponents
         }
 
         /// <summary>
+        /// The width for the borderline of the View.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public float? BorderlineWidth
+        {
+            get => (float?)GetValue(BorderlineWidthProperty);
+            set => SetValue(BorderlineWidthProperty, value);
+        }
+
+        /// <summary>
+        /// The color for the borderline of the View.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public Color BorderlineColor
+        {
+            get => (Color)GetValue(BorderlineColorProperty);
+            set => SetValue(BorderlineColorProperty, value);
+        }
+
+        /// <summary>
+        /// The Relative offset for the borderline of the View.
+        /// recommand [-1.0f to 1.0f] range.
+        /// If -1.0f, borderline draw inside of View.
+        /// If 1.0f, borderline draw outside of View.
+        /// If 0.0f, borderline draw half at inside and half at outside.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public float? BorderlineOffset
+        {
+            get => (float?)GetValue(BorderlineOffsetProperty);
+            set => SetValue(BorderlineOffsetProperty, value);
+        }
+
+        /// <summary>
         /// The ThemeChangeSensitive value of the View.
         /// </summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
@@ -525,6 +562,8 @@ namespace Tizen.NUI.BaseComponents
                 position?.Dispose();
                 size?.Dispose();
                 sizeModeFactor?.Dispose();
+                cornerRadius?.Dispose();
+                borderlineColor?.Dispose();
             }
 
             disposed = true;
index 1dba1f3..1253462 100755 (executable)
@@ -385,6 +385,27 @@ namespace Tizen.NUI.BaseComponents
             defaultValueCreator: (bindable) => ((ViewStyle)bindable).cornerRadiusPolicy
         );
 
+        /// <summary> Bindable property of BorderlineWidth. Please do not open it. </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty BorderlineWidthProperty = BindableProperty.Create(nameof(BorderlineWidth), typeof(float?), typeof(ViewStyle), null, propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            ((ViewStyle)bindable).borderlineWidth = (float?)newValue;
+        }, defaultValueCreator: (bindable) => ((ViewStyle)bindable).borderlineWidth);
+
+        /// <summary> Bindable property of BorderlineColor. Please do not open it. </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty BorderlineColorProperty = BindableProperty.Create(nameof(BorderlineColor), typeof(Vector4), typeof(ViewStyle), null, propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            ((ViewStyle)bindable).borderlineColor = (Vector4)newValue;
+        }, defaultValueCreator: (bindable) => ((ViewStyle)bindable).borderlineColor ?? Tizen.NUI.Color.Black);
+
+        /// <summary> Bindable property of BorderlineOffset. Please do not open it. </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty BorderlineOffsetProperty = BindableProperty.Create(nameof(BorderlineOffset), typeof(float?), typeof(ViewStyle), null, propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            ((ViewStyle)bindable).borderlineOffset = (float?)newValue;
+        }, defaultValueCreator: (bindable) => ((ViewStyle)bindable).borderlineOffset);
+
         /// <summary> Bindable property of ThemeChangeSensitive. Please do not open it. </summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly BindableProperty ThemeChangeSensitiveProperty = BindableProperty.Create(nameof(ThemeChangeSensitive), typeof(bool?), typeof(ViewStyle), null,
index 1e13dda..d74abb3 100755 (executable)
@@ -484,6 +484,83 @@ namespace Tizen.NUI.BaseComponents
         }
 
         /// <summary>
+        /// The width for the borderline of the View.
+        /// This will draw borderline at background.
+        /// Note that, an image background may not have borderline if it uses a Border property.
+        /// </summary>
+        /// <remarks>
+        /// <para>
+        /// Animatable - This property can be animated using <c>Animation</c> class.
+        /// </para>
+        /// </remarks>
+        /// This will be public opened after ACR done. Before ACR, need to be hidden as inhouse API.
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public float BorderlineWidth
+        {
+            get
+            {
+                return (float)GetValue(BorderlineWidthProperty);
+            }
+            set
+            {
+                SetValue(BorderlineWidthProperty, value);
+                NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// The color for the borderline of the View.
+        /// It is Color.Black by default.
+        /// </summary>
+        /// <remarks>
+        /// <para>
+        /// Animatable - This property can be animated using <c>Animation</c> class.
+        /// </para>
+        /// </remarks>
+        /// This will be public opened after ACR done. Before ACR, need to be hidden as inhouse API.
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public Color BorderlineColor
+        {
+            get
+            {
+                return (Color)GetValue(BorderlineColorProperty);
+            }
+            set
+            {
+                SetValue(BorderlineColorProperty, value);
+                NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// The Relative offset for the borderline of the View.
+        /// recommand [-1.0f to 1.0f] range.
+        /// If -1.0f, borderline draw inside of View.
+        /// If 1.0f, borderline draw outside of View.
+        /// If 0.0f, borderline draw half at inside and half at outside.
+        /// It is 0.0f by default.
+        /// </summary>
+        /// <remarks>
+        /// <para>
+        /// Animatable - This property can be animated using <c>Animation</c> class.
+        /// </para>
+        /// </remarks>
+        /// This will be public opened after ACR done. Before ACR, need to be hidden as inhouse API.
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public float BorderlineOffset
+        {
+            get
+            {
+                return (float)GetValue(BorderlineOffsetProperty);
+            }
+            set
+            {
+                SetValue(BorderlineOffsetProperty, value);
+                NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
         /// The current state of the view.
         /// </summary>
         /// <since_tizen> 3 </since_tizen>
index bae584a..81b27b2 100755 (executable)
@@ -1566,7 +1566,7 @@ namespace Tizen.NUI.BaseComponents
         defaultValueCreator: (bindable) =>
         {
             var view = (View)bindable;
-            return view.backgroundExtraData == null ? 0 : view.backgroundExtraData.CornerRadius;
+            return view.backgroundExtraData == null ? 0.0f : view.backgroundExtraData.CornerRadius;
         });
 
         /// <summary>
@@ -1590,6 +1590,54 @@ namespace Tizen.NUI.BaseComponents
         });
 
         /// <summary>
+        /// BorderlineWidth Property
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty BorderlineWidthProperty = BindableProperty.Create(nameof(BorderlineWidth), typeof(float), typeof(View), default(float), propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            var view = (View)bindable;
+            (view.backgroundExtraData ?? (view.backgroundExtraData = new BackgroundExtraData())).BorderlineWidth = (float)newValue;
+            view.ApplyBorderline();
+        },
+        defaultValueCreator: (bindable) =>
+        {
+            var view = (View)bindable;
+            return view.backgroundExtraData == null ? 0.0f : view.backgroundExtraData.BorderlineWidth;
+        });
+
+        /// <summary>
+        /// BorderlineColor Property
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty BorderlineColorProperty = BindableProperty.Create(nameof(BorderlineColor), typeof(Color), typeof(View), null, propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            var view = (View)bindable;
+            (view.backgroundExtraData ?? (view.backgroundExtraData = new BackgroundExtraData())).BorderlineColor = (Color)newValue;
+            view.ApplyBorderline();
+        },
+        defaultValueCreator: (bindable) =>
+        {
+            var view = (View)bindable;
+            return view.backgroundExtraData == null ? Color.Black : view.backgroundExtraData.BorderlineColor;
+        });
+
+        /// <summary>
+        /// BorderlineOffset Property
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty BorderlineOffsetProperty = BindableProperty.Create(nameof(BorderlineOffset), typeof(float), typeof(View), default(float), propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            var view = (View)bindable;
+            (view.backgroundExtraData ?? (view.backgroundExtraData = new BackgroundExtraData())).BorderlineOffset = (float)newValue;
+            view.ApplyBorderline();
+        },
+        defaultValueCreator: (bindable) =>
+        {
+            var view = (View)bindable;
+            return view.backgroundExtraData == null ? 0.0f : view.backgroundExtraData.BorderlineOffset;
+        });
+
+        /// <summary>
         /// EnableControlState property
         /// </summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
@@ -1796,6 +1844,9 @@ namespace Tizen.NUI.BaseComponents
             map.Add(ImageVisualProperty.URL, new PropertyValue(value))
                .Add(Visual.Property.CornerRadius, new PropertyValue(backgroundExtraData.CornerRadius == null ? new PropertyValue() : new PropertyValue(backgroundExtraData.CornerRadius)))
                .Add(Visual.Property.CornerRadiusPolicy, new PropertyValue((int)(backgroundExtraData.CornerRadiusPolicy)))
+               .Add(Visual.Property.BorderlineWidth, new PropertyValue(backgroundExtraData.BorderlineWidth))
+               .Add(Visual.Property.BorderlineColor, new PropertyValue(backgroundExtraData.BorderlineColor == null ? new PropertyValue(Color.Black) : new PropertyValue(backgroundExtraData.BorderlineColor)))
+               .Add(Visual.Property.BorderlineOffset, new PropertyValue(backgroundExtraData.BorderlineOffset))
                .Add(ImageVisualProperty.SynchronousLoading, new PropertyValue(backgroundImageSynchronosLoading));
 
             if (backgroundExtraData.BackgroundImageBorder != null)
@@ -1861,9 +1912,13 @@ namespace Tizen.NUI.BaseComponents
             PropertyMap map = new PropertyMap();
 
             map.Add(Visual.Property.Type, new PropertyValue((int)Visual.Type.Color))
-                .Add(ColorVisualProperty.MixColor, new PropertyValue(value))
-                .Add(Visual.Property.CornerRadius, new PropertyValue(new PropertyValue(backgroundExtraData.CornerRadius == null ? new PropertyValue() : new PropertyValue(backgroundExtraData.CornerRadius))))
-                .Add(Visual.Property.CornerRadiusPolicy, new PropertyValue((int)(backgroundExtraData.CornerRadiusPolicy)));
+               .Add(ColorVisualProperty.MixColor, new PropertyValue(value))
+               .Add(Visual.Property.CornerRadius, new PropertyValue(new PropertyValue(backgroundExtraData.CornerRadius == null ? new PropertyValue() : new PropertyValue(backgroundExtraData.CornerRadius))))
+               .Add(Visual.Property.CornerRadiusPolicy, new PropertyValue((int)(backgroundExtraData.CornerRadiusPolicy)))
+               .Add(Visual.Property.BorderlineWidth, new PropertyValue(backgroundExtraData.BorderlineWidth))
+               .Add(Visual.Property.BorderlineColor, new PropertyValue(backgroundExtraData.BorderlineColor == null ? new PropertyValue(Color.Black) : new PropertyValue(backgroundExtraData.BorderlineColor)))
+               .Add(Visual.Property.BorderlineOffset, new PropertyValue(backgroundExtraData.BorderlineOffset));
 
             Tizen.NUI.Object.SetProperty((System.Runtime.InteropServices.HandleRef)SwigCPtr, View.Property.BACKGROUND, new PropertyValue(map));
         }
index 19fe227..eecd9e9 100755 (executable)
@@ -1046,6 +1046,7 @@ namespace Tizen.NUI.BaseComponents
             // Apply to the background visual
             PropertyMap backgroundMap = new PropertyMap();
             PropertyValue background = Tizen.NUI.Object.GetProperty(SwigCPtr, View.Property.BACKGROUND);
+
             if (background.Get(backgroundMap) && !backgroundMap.Empty())
             {
                 backgroundMap[Visual.Property.CornerRadius] = cornerRadius;
@@ -1056,7 +1057,6 @@ namespace Tizen.NUI.BaseComponents
             }
             backgroundMap.Dispose();
             background.Dispose();
-            cornerRadius.Dispose();
 
             // Apply to the shadow visual
             PropertyMap shadowMap = new PropertyMap();
@@ -1071,6 +1071,31 @@ namespace Tizen.NUI.BaseComponents
             }
             shadowMap.Dispose();
             shadow.Dispose();
+            cornerRadius.Dispose();
+        }
+
+        /// TODO open as a protected level
+        internal virtual void ApplyBorderline()
+        {
+            if (backgroundExtraData == null) return;
+
+            var borderlineColor = backgroundExtraData.BorderlineColor == null ? new PropertyValue(Color.Black) : new PropertyValue(backgroundExtraData.BorderlineColor);
+
+            // Apply to the background visual
+            PropertyMap backgroundMap = new PropertyMap();
+            PropertyValue background = Tizen.NUI.Object.GetProperty(SwigCPtr, View.Property.BACKGROUND);
+            if (background.Get(backgroundMap) && !backgroundMap.Empty())
+            {
+                backgroundMap[Visual.Property.BorderlineWidth] = new PropertyValue(backgroundExtraData.BorderlineWidth);
+                backgroundMap[Visual.Property.BorderlineColor] = borderlineColor;
+                backgroundMap[Visual.Property.BorderlineOffset] = new PropertyValue(backgroundExtraData.BorderlineOffset);
+                var temp = new PropertyValue(backgroundMap);
+                Tizen.NUI.Object.SetProperty(SwigCPtr, View.Property.BACKGROUND, temp);
+                temp.Dispose();
+            }
+            backgroundMap.Dispose();
+            background.Dispose();
+            borderlineColor.Dispose();
         }
 
         /// <summary>
index 6eb3fa9..b158d6a 100755 (executable)
@@ -27,12 +27,17 @@ namespace Tizen.NUI
         private bool disposed = false;
         internal BackgroundExtraData()
         {
+            BorderlineColor = Tizen.NUI.Color.Black;
         }
 
         internal BackgroundExtraData(BackgroundExtraData other)
         {
             BackgroundImageBorder = other.BackgroundImageBorder;
             CornerRadius = other.CornerRadius;
+            CornerRadiusPolicy = other.CornerRadiusPolicy;
+            BorderlineWidth = other.BorderlineWidth;
+            BorderlineColor = other.BorderlineColor;
+            BorderlineOffset = other.BorderlineOffset;
         }
 
         private Rectangle backgroundImageBorder;
@@ -52,6 +57,15 @@ namespace Tizen.NUI
         /// </summary>
         internal VisualTransformPolicyType CornerRadiusPolicy { get; set; } = VisualTransformPolicyType.Absolute;
 
+        /// <summary></summary>
+        internal float BorderlineWidth { get; set; }
+
+        /// <summary></summary>
+        internal Color BorderlineColor { get; set; }
+
+        /// <summary></summary>
+        internal float BorderlineOffset { get; set; }
+
         [EditorBrowsable(EditorBrowsableState.Never)]
         protected virtual void Dispose(bool disposing)
         {
@@ -62,6 +76,8 @@ namespace Tizen.NUI
             if (disposing)
             {
                 backgroundImageBorder?.Dispose();
+                CornerRadius?.Dispose();
+                BorderlineColor?.Dispose();
             }
             disposed = true;
         }
index c516bfe..61487f3 100755 (executable)
@@ -500,6 +500,25 @@ namespace Tizen.NUI
             /// </summary>
             [EditorBrowsable(EditorBrowsableState.Never)]
             public static readonly int CornerRadiusPolicy = NDalic.VisualPropertyMixColor + 4;
+            /// <summary>
+            /// The borderline width of the visual.
+            /// </summary>
+            [EditorBrowsable(EditorBrowsableState.Never)]
+            public static readonly int BorderlineWidth = NDalic.VisualPropertyMixColor + 5;
+            /// <summary>
+            /// The borderline color of the visual.
+            /// </summary>
+            [EditorBrowsable(EditorBrowsableState.Never)]
+            public static readonly int BorderlineColor = NDalic.VisualPropertyMixColor + 6;
+            /// <summary>
+            /// The borderline offset of the visual.
+            /// Relative position of borderline. (percentage [-1.0f to 1.0f]).
+            /// If -1.0f, borderline draw inside of visual
+            /// If 1.0f, borderline draw outside of visual
+            /// If 0.0f, half draw inside and half draw outside of visual
+            /// </summary>
+            [EditorBrowsable(EditorBrowsableState.Never)]
+            public static readonly int BorderlineOffset = NDalic.VisualPropertyMixColor + 7;
         }
 
         /// <summary>
index 8139059..411ac71 100755 (executable)
@@ -76,11 +76,10 @@ namespace Tizen.NUI
         [System.Diagnostics.CodeAnalysis.SuppressMessage("Design", "CA1051:Do not declare visible instance fields", Justification = "<Pending>")]
         protected VisualFittingModeType? _visualFittingMode = null;
 
-        /// <summary>
-        /// The corner radius value of the visual.
-        /// </summary>
-        [EditorBrowsable(EditorBrowsableState.Never)]
         private Vector4 cornerRadius = null;
+        private float? borderlineWidth = null;
+        private Color borderlineColor = null;
+        private float? borderlineOffset = null;
 
         /// <summary>
         /// The map for visual.
@@ -626,6 +625,56 @@ namespace Tizen.NUI
             }
         }
 
+        /// <summary>
+        /// The borderline width of the visual.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public float BorderlineWidth
+        {
+            get
+            {
+                return borderlineWidth ?? (0.0f);
+            }
+            set
+            {
+                borderlineWidth = value;
+                UpdateVisual();
+            }
+        }
+
+        /// <summary>
+        /// The borderline color of the visual.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public Color BorderlineColor
+        {
+            get
+            {
+                return borderlineColor;
+            }
+            set
+            {
+                borderlineColor = value;
+                UpdateVisual();
+            }
+        }
+
+        /// <summary>
+        /// The borderline offset of the visual.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public float BorderlineOffset
+        {
+            get
+            {
+                return borderlineOffset ?? (0.0f);
+            }
+            set
+            {
+                borderlineOffset = value;
+                UpdateVisual();
+            }
+        }
         internal string Name
         {
             set;
@@ -710,6 +759,24 @@ namespace Tizen.NUI
                 _outputVisualMap.Add(Visual.Property.CornerRadius, temp);
                 temp.Dispose();
             }
+            if (borderlineWidth != null)
+            {
+                PropertyValue temp = new PropertyValue((float)borderlineWidth);
+                _outputVisualMap.Add(Visual.Property.BorderlineWidth, temp);
+                temp.Dispose();
+            }
+            if (borderlineColor != null)
+            {
+                PropertyValue temp = new PropertyValue(borderlineColor);
+                _outputVisualMap.Add(Visual.Property.BorderlineColor, temp);
+                temp.Dispose();
+            }
+            if (borderlineOffset != null)
+            {
+                PropertyValue temp = new PropertyValue((float)borderlineOffset);
+                _outputVisualMap.Add(Visual.Property.BorderlineOffset, temp);
+                temp.Dispose();
+            }
         }
 
         private void ComposingTransformMap()
@@ -772,6 +839,7 @@ namespace Tizen.NUI
                 visualSizePolicy?.Dispose();
                 visualTransformMap?.Dispose();
                 cornerRadius?.Dispose();
+                borderlineColor?.Dispose();
             }
             disposed = true;
         }