[NUI] : Scrollbar thumb support image and update styles

Change thumb View to ImageView to support image and color properly.

Add new property for thumb images on Scrollbar and ScrollbarStyle.
- ThumbVerticalImageUrl
- ThumbHorizontalImageUrl

Add new image resource for thumb image.
- nui_component_default_scroll_vbar.#.png
- nui_component_default_scroll_hbar.#.png

Now color can be color of background for thumb when image is not
existed, or color of image if url is existed.

diff --git a/src/Tizen.NUI.Components/Controls/Scrollbar.cs b/src/Tizen.NUI.Components/Controls/Scrollbar.cs
index 799f7c3..20a5b51 100755 (executable)
--- a/src/Tizen.NUI.Components/Controls/Scrollbar.cs
+++ b/src/Tizen.NUI.Components/Controls/Scrollbar.cs
@@ -57,8 +57,8 @@ namespace Tizen.NUI.Components
         /// <summary>Bindable property of ThumbColor</summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly BindableProperty ThumbColorProperty = BindableProperty.Create(nameof(ThumbColor), typeof(Color), typeof(Scrollbar), null,
-            propertyChanged: (bindable, oldValue, newValue) => ((Scrollbar)bindable).thumbView.BackgroundColor = (Color)newValue,
-            defaultValueCreator: (bindable) => ((Scrollbar)bindable).thumbView.BackgroundColor
+            propertyChanged: (bindable, oldValue, newValue) => ((Scrollbar)bindable).UpdateThumbColor((Color)newValue),
+            defaultValueCreator: (bindable) => ((Scrollbar)bindable).thumbColor
         );
 
         /// <summary>Bindable property of TrackPadding</summary>
@@ -68,8 +68,23 @@ namespace Tizen.NUI.Components
             defaultValueCreator: (bindable) => ((Scrollbar)bindable).trackPadding
         );
 
+        /// <summary>Bindable property of ThumbVerticalImageUrl</summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty ThumbVerticalImageUrlProperty = BindableProperty.Create(nameof(ThumbVerticalImageUrl), typeof(string), typeof(Scrollbar), null,
+            propertyChanged: (bindable, oldValue, newValue) => ((Scrollbar)bindable).UpdateThumbImage((string)newValue, false),
+            defaultValueCreator: (bindable) => ((Scrollbar)bindable).thumbVerticalImageUrl
+        );
+
+        /// <summary>Bindable property of ThumbHorizontalImageUrl</summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty ThumbHorizontalImageUrlProperty = BindableProperty.Create(nameof(ThumbHorizontalImageUrl), typeof(string), typeof(Scrollbar), null,
+            propertyChanged: (bindable, oldValue, newValue) => ((Scrollbar)bindable).UpdateThumbImage((string)newValue, true),
+            defaultValueCreator: (bindable) => ((Scrollbar)bindable).thumbHorizontalImageUrl
+        );
+
+
         private View trackView;
-        private View thumbView;
+        private ImageView thumbView;
         private Animation thumbPositionAnimation;
         private Animation thumbSizeAnimation;
         private Animation opacityAnimation;
@@ -78,7 +93,11 @@ namespace Tizen.NUI.Components
         private float previousPosition;
         private float trackThickness = 6.0f;
         private float thumbThickness = 6.0f;
+        private string thumbVerticalImageUrl;
+        private string thumbHorizontalImageUrl;
+        private Color thumbColor;
         private PaddingType trackPadding = new PaddingType(4, 4, 4, 4);
+        private bool isHorizontal;
 
         #endregion Fields
 
@@ -177,6 +196,26 @@ namespace Tizen.NUI.Components
             set => SetValue(TrackPaddingProperty, value);
         }
 
+        /// <summary>
+        /// The image url of the vertical thumb.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public string ThumbVerticalImageUrl
+        {
+            get => (string)GetValue(ThumbVerticalImageUrlProperty);
+            set => SetValue(ThumbVerticalImageUrlProperty, value);
+        }
+
+        /// <summary>
+        /// The image url of the horizontal thumb.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public string ThumbHorizontalImageUrl
+        {
+            get => (string)GetValue(ThumbHorizontalImageUrlProperty);
+            set => SetValue(ThumbHorizontalImageUrlProperty, value);
+        }
+
         /// <inheritdoc/>
         [EditorBrowsable(EditorBrowsableState.Never)]
         public override float ScrollPosition
@@ -235,7 +274,7 @@ namespace Tizen.NUI.Components
             };
             Add(trackView);
 
-            thumbView = new View()
+            thumbView = new ImageView()
             {
                 PositionUsesPivotPoint = true,
                 BackgroundColor = new Color(0.6f, 0.6f, 0.6f, 1.0f)
@@ -250,6 +289,7 @@ namespace Tizen.NUI.Components
         [EditorBrowsable(EditorBrowsableState.Never)]
         public override void Initialize(float contentLength, float viewportLength, float currentPosition, bool isHorizontal = false)
         {
+            this.isHorizontal = isHorizontal;
             if (isHorizontal)
             {
                 calculator = new HorizontalCalculator(contentLength > 0.0f ? contentLength : 0.0f, viewportLength, currentPosition);
@@ -475,6 +515,43 @@ namespace Tizen.NUI.Components
             thumbView.Size = calculator.CalculateThumbSize(ThumbThickness, trackView.Size);
             thumbView.Position = calculator.CalculateThumbPaddingPosition(trackView.Size, thumbView.Size, thumbView.Position, trackPadding);
         }
+        private void UpdateThumbColor(Color color)
+        {
+            thumbColor = color;
+            if (thumbView.ResourceUrl != "")
+            {
+                thumbView.Color = color;
+                thumbView.BackgroundColor = Color.Transparent;
+            }
+            else
+            {
+                thumbView.BackgroundColor = color;
+            }
+        }
+
+        private void UpdateThumbImage(string url, bool isHorizontal)
+        {
+            if (isHorizontal)
+            {
+                thumbHorizontalImageUrl = url;
+                if (this.isHorizontal)
+                {
+                    thumbView.ResourceUrl = url;
+                    thumbView.Color = thumbColor;
+                    thumbView.BackgroundColor = Color.Transparent;
+                }
+            }
+            else
+            {
+                thumbVerticalImageUrl = url;
+                if (!this.isHorizontal)
+                {
+                    thumbView.ResourceUrl = url;
+                    thumbView.Color = thumbColor;
+                    thumbView.BackgroundColor = Color.Transparent;
+                }
+            }
+        }
 
         private Animation EnsureThumbPositionAnimation()
         {

diff --git a/src/Tizen.NUI.Components/Style/ScrollbarStyle.cs b/src/Tizen.NUI.Components/Style/ScrollbarStyle.cs
index 5077566..0f90326 100644 (file)
--- a/src/Tizen.NUI.Components/Style/ScrollbarStyle.cs
+++ b/src/Tizen.NUI.Components/Style/ScrollbarStyle.cs
@@ -83,11 +83,35 @@ namespace Tizen.NUI.Components
             return ((ScrollbarStyle)bindable).trackPadding;
         });
 
+        /// <summary>Bindable property of ThumbBackgroundImageVertical</summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty ThumbVerticalImageUrlProperty = BindableProperty.Create(nameof(ThumbVerticalImageUrl), typeof(string), typeof(ScrollbarStyle), null, propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            ((ScrollbarStyle)bindable).thumbVerticalImageUrl = ((string)newValue);
+        },
+        defaultValueCreator: (bindable) =>
+        {
+            return ((ScrollbarStyle)bindable).thumbVerticalImageUrl;
+        });
+
+        /// <summary>Bindable property of ThumbBackgroundImageUrl</summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty ThumbHorizontalImageUrlProperty = BindableProperty.Create(nameof(ThumbHorizontalImageUrl), typeof(string), typeof(ScrollbarStyle), null, propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            ((ScrollbarStyle)bindable).thumbHorizontalImageUrl = ((string)newValue);
+        },
+        defaultValueCreator: (bindable) =>
+        {
+            return ((ScrollbarStyle)bindable).thumbHorizontalImageUrl;
+        });
+
         private float? trackThickness;
         private float? thumbThickness;
         private Color trackColor;
         private Color thumbColor;
         private Extents trackPadding;
+        private string thumbVerticalImageUrl;
+        private string thumbHorizontalImageUrl;
 
         #endregion Fields
 
@@ -173,6 +197,27 @@ namespace Tizen.NUI.Components
             set => SetValue(TrackPaddingProperty, value);
         }
 
+        /// <summary>
+        /// The image url of the vertical thumb.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public string ThumbVerticalImageUrl
+        {
+            get => (string)GetValue(ThumbVerticalImageUrlProperty);
+            set => SetValue(ThumbVerticalImageUrlProperty, value);
+        }
+
+        /// <summary>
+        /// The image url of the horizontal thumb.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public string ThumbHorizontalImageUrl
+        {
+            get => (string)GetValue(ThumbHorizontalImageUrlProperty);
+            set => SetValue(ThumbHorizontalImageUrlProperty, value);
+        }
+
+
         #endregion Properties
     }
 }

diff --git a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
index fd608c6..0ef5d40 100755 (executable)
--- a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
+++ b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
@@ -244,11 +244,13 @@ namespace Tizen.NUI.Components
 
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Scrollbar", new ScrollbarStyle()
             {
-                TrackThickness = 6,
-                ThumbThickness = 6,
-                TrackColor = new Color(1, 1, 1, 0.15f),
-                ThumbColor = new Color(0.6f, 0.6f, 0.6f, 1.0f),
-                TrackPadding = 4
+                TrackThickness = 14,
+                ThumbThickness = 14,
+                TrackColor = new Color(0f, 0f, 0f, 0f),
+                ThumbColor = new Color("#0A0E4AFF"),
+                TrackPadding = 4,
+                ThumbVerticalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_vbar.#.png",
+                ThumbHorizontalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_hbar.#.png",
             });
 
             theme.AddStyleWithoutClone("Tizen.NUI.Components.RecyclerViewItem", new RecyclerViewItemStyle()

diff --git a/src/Tizen.NUI.Components/res/nui_component_default_scroll_hbar.#.png b/src/Tizen.NUI.Components/res/nui_component_default_scroll_hbar.#.png
new file mode 100644 (file)
index 0000000..1c70ce2
Binary files /dev/null and b/src/Tizen.NUI.Components/res/nui_component_default_scroll_hbar.#.png differ

diff --git a/src/Tizen.NUI.Components/res/nui_component_default_scroll_vbar.#.png b/src/Tizen.NUI.Components/res/nui_component_default_scroll_vbar.#.png
new file mode 100644 (file)
index 0000000..a55a5a3
Binary files /dev/null and b/src/Tizen.NUI.Components/res/nui_component_default_scroll_vbar.#.png differ