[NUI] apply Tizen 7.0 UX on CollectionView and Scrollbar and add samples.
authoreverLEEst(SangHyeon Lee) <dltkdgus1764@gmail.com>
Wed, 20 Apr 2022 06:37:15 +0000 (23:37 -0700)
committerTaehyub Kim <taehyub.kim@samsung.com>
Tue, 3 May 2022 09:00:21 +0000 (02:00 -0700)
15 files changed:
src/Tizen.NUI.Components/Controls/RecyclerView/Item/DefaultGridItem.cs
src/Tizen.NUI.Components/Controls/RecyclerView/Item/DefaultLinearItem.cs
src/Tizen.NUI.Components/Controls/RecyclerView/Item/RecyclerViewItem.Internal.cs
src/Tizen.NUI.Components/Controls/RecyclerView/Item/RecyclerViewItem.cs
src/Tizen.NUI.Components/Controls/Scrollbar.cs
src/Tizen.NUI.Components/Style/ScrollbarStyle.cs
src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
test/Tizen.NUI.StyleGuide/Examples/DefaultGridItemExample.cs [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/Examples/DefaultLinearItemExample.cs [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/Examples/DefaultTitleItemExample.cs [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/res/icon/icon_arrow_down.svg [new file with mode: 0755]
test/Tizen.NUI.StyleGuide/res/icon/icon_arrow_up.svg [new file with mode: 0755]
test/Tizen.NUI.StyleGuide/res/images/grid_01.jpg [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/res/images/grid_02.jpg [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/res/images/grid_03.jpg [new file with mode: 0644]

index e691019..499f1e9 100755 (executable)
@@ -358,6 +358,7 @@ namespace Tizen.NUI.Components
 
             if (itemBadge)
             {
+                itemBadge.RaiseAbove(itemImage);
                 RelativeLayout.SetLeftTarget(itemBadge, itemImage);
                 RelativeLayout.SetLeftRelativeOffset(itemBadge, 1.0F);
                 RelativeLayout.SetRightTarget(itemBadge, itemImage);
@@ -428,6 +429,8 @@ namespace Tizen.NUI.Components
                         RelativeLayout.SetBottomRelativeOffset(itemLabel, 1.0F);
                         RelativeLayout.SetVerticalAlignment(itemLabel, RelativeLayout.Alignment.End);
 
+                        Console.WriteLine("Item Label Inside Bottom!");
+
                         RelativeLayout.SetTopTarget(itemImage, this);
                         RelativeLayout.SetTopRelativeOffset(itemImage, 0.0F);
                         RelativeLayout.SetBottomTarget(itemImage, this);
@@ -494,6 +497,7 @@ namespace Tizen.NUI.Components
             Layout = new RelativeLayout();
             layoutChanged = true;
             LayoutDirectionChanged += OnLayoutDirectionChanged;
+            EnableControlStatePropagation = true;
         }
 
         /// <summary>
index f09d29f..ec6a0da 100755 (executable)
@@ -129,7 +129,7 @@ namespace Tizen.NUI.Components
                     // Tizen.Log.Error("IconUrl only can set Icon is ImageView");
                     return;
                 }
-                (Icon as ImageView).ResourceUrl = value; 
+                (Icon as ImageView).ResourceUrl = value;
             }
         }
         */
@@ -377,7 +377,7 @@ namespace Tizen.NUI.Components
             {
                 HorizontalAlignment = HorizontalAlignment.Begin,
                 VerticalAlignment = VerticalAlignment.Center,
-                AccessibilityHidden = true
+                AccessibilityHidden = true,
             };
         }
 
@@ -543,6 +543,7 @@ namespace Tizen.NUI.Components
             var seperator = Seperator;
             layoutChanged = true;
             LayoutDirectionChanged += OnLayoutDirectionChanged;
+            EnableControlStatePropagation = true;
         }
 
         private void OnLayoutDirectionChanged(object sender, LayoutDirectionChangedEventArgs e)
index 1133423..05d28f1 100755 (executable)
@@ -72,7 +72,7 @@ namespace Tizen.NUI.Components
         [EditorBrowsable(EditorBrowsableState.Never)]
         protected override bool HandleControlStateOnTouch(Touch touch)
         {
-            if (!IsEnabled || null == touch || null == BindingContext)
+            if (!IsEnabled || null == touch)
             {
                 return false;
             }
@@ -98,31 +98,32 @@ namespace Tizen.NUI.Components
 
                         if (!clicked) return true;
 
-                        if (IsSelectable)
+                        if (IsSelectable && BindingContext != null && ParentItemsView is CollectionView colView)
                         {
-                            if (ParentItemsView is CollectionView colView)
+                            switch (colView.SelectionMode)
                             {
-                                switch (colView.SelectionMode)
-                                {
-                                    case ItemSelectionMode.Single:
-                                        colView.SelectedItem = IsSelected ? null : BindingContext;
-                                        break;
-                                    case ItemSelectionMode.SingleAlways:
-                                        if (colView.SelectedItem != BindingContext)
-                                        {
-                                            colView.SelectedItem = BindingContext;
-                                        }
-                                        break;
-                                    case ItemSelectionMode.Multiple:
-                                        var selectedItems = colView.SelectedItems;
-                                        if (selectedItems.Contains(BindingContext)) selectedItems.Remove(BindingContext);
-                                        else selectedItems.Add(BindingContext);
-                                        break;
-                                    case ItemSelectionMode.None:
-                                        break;
-                                }
+                                case ItemSelectionMode.Single:
+                                    colView.SelectedItem = IsSelected ? null : BindingContext;
+                                    break;
+                                case ItemSelectionMode.SingleAlways:
+                                    if (colView.SelectedItem != BindingContext)
+                                    {
+                                        colView.SelectedItem = BindingContext;
+                                    }
+                                    break;
+                                case ItemSelectionMode.Multiple:
+                                    var selectedItems = colView.SelectedItems;
+                                    if (selectedItems.Contains(BindingContext)) selectedItems.Remove(BindingContext);
+                                    else selectedItems.Add(BindingContext);
+                                    break;
+                                case ItemSelectionMode.None:
+                                    break;
                             }
                         }
+                        else if (IsSelectable)
+                        {
+                            IsSelected = !IsSelected;
+                        }
 
                         if (clicked)
                         {
index 901675b..edec1db 100755 (executable)
@@ -182,7 +182,7 @@ namespace Tizen.NUI.Components
         {
             bool clicked = false;
 
-            if (!IsEnabled || null == key || null == BindingContext)
+            if (!IsEnabled || null == key)
             {
                 return false;
             }
@@ -203,30 +203,30 @@ namespace Tizen.NUI.Components
 
                     IsPressed = false;
 
-                    if (IsSelectable)
+                    if (IsSelectable && BindingContext != null && ParentItemsView is CollectionView colView)
                     {
-                        // Extension : Extension?.SetTouchInfo(touch);
-                        if (ParentItemsView is CollectionView colView)
+                        switch (colView.SelectionMode)
                         {
-                            switch (colView.SelectionMode)
-                            {
-                                case ItemSelectionMode.Single:
-                                    colView.SelectedItem = IsSelected ? null : BindingContext;
-                                    break;
-                                case ItemSelectionMode.SingleAlways:
-                                    if (colView.SelectedItem != BindingContext)
-                                        colView.SelectedItem = BindingContext;
-                                    break;
-                                case ItemSelectionMode.Multiple:
-                                    var selectedItems = colView.SelectedItems;
-                                    if (selectedItems.Contains(BindingContext)) selectedItems.Remove(BindingContext);
-                                    else selectedItems.Add(BindingContext);
-                                    break;
-                                case ItemSelectionMode.None:
-                                    break;
-                            }
+                            case ItemSelectionMode.Single:
+                                colView.SelectedItem = IsSelected ? null : BindingContext;
+                                break;
+                            case ItemSelectionMode.SingleAlways:
+                                if (colView.SelectedItem != BindingContext)
+                                    colView.SelectedItem = BindingContext;
+                                break;
+                            case ItemSelectionMode.Multiple:
+                                var selectedItems = colView.SelectedItems;
+                                if (selectedItems.Contains(BindingContext)) selectedItems.Remove(BindingContext);
+                                else selectedItems.Add(BindingContext);
+                                break;
+                            case ItemSelectionMode.None:
+                                break;
                         }
                     }
+                    else if (IsSelectable)
+                    {
+                        IsSelected = !IsSelected;
+                    }
 
                     if (clicked)
                     {
index d5629ad..a18fcec 100755 (executable)
@@ -270,15 +270,15 @@ namespace Tizen.NUI.Components
             trackView = new View()
             {
                 PositionUsesPivotPoint = true,
-                BackgroundColor = new Color(1.0f, 1.0f, 1.0f, 0.15f),
                 AccessibilityHidden = true
             };
             Add(trackView);
 
-            thumbView = new ImageView()
+            var scrollbarStyle = ViewStyle as ScrollbarStyle;
+
+            thumbView = new ImageView(scrollbarStyle?.Thumb)
             {
                 PositionUsesPivotPoint = true,
-                BackgroundColor = new Color(0.6f, 0.6f, 0.6f, 1.0f)
             };
             Add(thumbView);
 
@@ -459,6 +459,10 @@ namespace Tizen.NUI.Components
         public override void ApplyStyle(ViewStyle viewStyle)
         {
             base.ApplyStyle(viewStyle);
+            if (viewStyle is ScrollbarStyle scrollbarStyle)
+            {
+                thumbView?.ApplyStyle(scrollbarStyle.Thumb);
+            }
         }
 
         /// <inheritdoc/>
@@ -675,7 +679,7 @@ namespace Tizen.NUI.Components
             }
 
             public override Position CalculateThumbScrollPosition(Size trackSize, Position thumbCurrentPosition, PaddingType trackPadding)
-            { 
+            {
                 return new Position(trackPadding.Item1 + (IsScrollable() ? (trackSize.Width * (Math.Min(Math.Max(currentPosition, 0.0f), contentLength - visibleLength)) / contentLength) : 0.0f), thumbCurrentPosition.Y);
             }
         }
index 0f90326..efd8a18 100644 (file)
@@ -217,6 +217,14 @@ namespace Tizen.NUI.Components
             set => SetValue(ThumbHorizontalImageUrlProperty, value);
         }
 
+        /// <summary>
+        /// The ImageViewStyle of Thumb. internal usage only.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        internal ImageViewStyle Thumb
+        {
+            get; set;
+        }
 
         #endregion Properties
     }
index 058bbe9..b3b158a 100755 (executable)
@@ -285,19 +285,25 @@ namespace Tizen.NUI.Components
             // Scrollbar base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Scrollbar", new ScrollbarStyle()
             {
-                TrackThickness = 12,
-                ThumbThickness = 12,
+                TrackThickness = 8,
+                ThumbThickness = 8,
                 TrackColor = new Color(0f, 0f, 0f, 0f),
-                ThumbColor = new Color("#0A0E4A"),
+                ThumbColor = new Color("#FFFEFE"),
                 TrackPadding = 4,
-                ThumbVerticalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_vbar.#.png",
-                ThumbHorizontalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_hbar.#.png",
+                //7.0 UX no require image resource.
+                Thumb = new ImageViewStyle()
+                {
+                    CornerRadius = 4.0f,
+                    BoxShadow = new Shadow(8.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 2.0f)),
+                }
+                //ThumbVerticalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_vbar.#.png",
+                //ThumbHorizontalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_hbar.#.png",
             });
 
             // LinearLayouter base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.LinearLayouter", new ViewStyle()
             {
-                Padding = new Extents(64, 64, 0, 0)
+                Padding = new Extents(0, 0, 0, 0)
             });
 
             // GridLayouter base style
@@ -327,86 +333,107 @@ namespace Tizen.NUI.Components
             // DefaultLinearItem base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultLinearItem", new DefaultLinearItemStyle()
             {
-                SizeHeight = 108,
-                Padding = new Extents(64, 64, 18, 17),
+                SizeHeight = 64,
+                Padding = new Extents(20, 20, 0, 0),
                 Margin = new Extents(0, 0, 0, 0),
-                BackgroundColor = new Selector<Color>()
-                {
-                    Normal = new Color(1, 1, 1, 1),
-                    Pressed = new Color(0.85f, 0.85f, 0.85f, 1),
-                    Disabled = new Color(0.70f, 0.70f, 0.70f, 1),
-                    Selected = new Color(0.85f, 0.85f, 0.85f, 1),
-                },
                 Label = new TextLabelStyle()
                 {
-                    PixelSize = 32,
+                    PixelSize = 24,
                     Ellipsis = true,
-                    FontFamily = "BreezeSans", //FXIME Font Weight is Light
-                    TextColor = new Color("#001447"),
+                    FontFamily = "SamsungOneUI600",
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
                     ThemeChangeSensitive = false
                 },
                 SubLabel = new TextLabelStyle()
                 {
-                    PixelSize = 28,
+                    PixelSize = 20,
                     Ellipsis = true,
-                    FontFamily = "BreezeSans",
-                    TextColor = new Color("#001447"),
+                    FontFamily = "SamsungOneUI400",
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
                     ThemeChangeSensitive = false
                 },
                 Icon = new ViewStyle()
                 {
-                    Margin = new Extents(0, 32, 0, 0)
+                    Margin = new Extents(0, 24, 0, 0)
                 },
                 Extra = new ViewStyle()
                 {
-                    Margin = new Extents(32, 0, 0, 0)
-                },
-                Seperator = new ViewStyle()
-                {
-                    SizeHeight = 1,
-                    Margin = new Extents(64, 64, 0, 0),
-                    BackgroundColor = new Color("#C3CAD2"),
+                    Margin = new Extents(24, 0, 0, 0)
                 },
             });
 
             // DefaultGridItem base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultGridItem", new DefaultGridItemStyle()
             {
+                ClippingMode = ClippingModeType.ClipChildren,
                 Padding = new Extents(0, 0, 0, 0),
                 Margin = new Extents(5, 5, 5, 5),
+                CornerRadius = 12.0f,
+                BackgroundColor = new Selector<Color>()
+                {
+                    Normal = new Color("#FAFAFA"),
+                    Pressed = new Color(1f, 0.38f, 0, 0.2f),
+                    Disabled = new Color("#FAFAFA"),
+                    Selected = new Color(1f, 0.38f, 0, 0.2f),
+                },
+                Image = new ImageViewStyle()
+                {
+                    //FIXME: Clip mode is not working on CornerRadius.
+                    CornerRadius = 12.0f,
+                    ClippingMode = ClippingModeType.ClipChildren,
+                },
                 Label = new TextLabelStyle()
                 {
-                    SizeHeight = 60,
-                    PixelSize = 24,
+                    SizeHeight = 24,
+                    PixelSize = 16,
+                    FontFamily = "SamsungOneUI400",
                     LineWrapMode = LineWrapMode.Character,
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
                     ThemeChangeSensitive = false
                 },
                 Badge = new ViewStyle()
                 {
-                    Margin = new Extents(5, 5, 5, 5),
+                    Margin = new Extents(0, 0, 0, 0),
                 },
+                BoxShadow = new Shadow(12.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 4.0f)),
             });
 
             // DefaultTitleItem base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultTitleItem", new DefaultTitleItemStyle()
             {
-                SizeHeight = 60,
-                Padding = new Extents(64, 64, 12, 12),
+                SizeHeight = 48,
+                Padding = new Extents(20, 20, 0, 0),
                 Margin = new Extents(0, 0, 0, 0),
-                BackgroundColor = new Selector<Color>()
-                {
-                    Normal = new Color("#EEEEF1"),
-                },
+                BackgroundColor = Color.Transparent,
                 Label = new TextLabelStyle()
                 {
-                    PixelSize = 28,
+                    PixelSize = 24,
                     Ellipsis = true,
-                    TextColor = new Color("#001447"),
+                    FontFamily = "SamsungOneUI400",
+                    TextColor = new Color("#090E217F"),
                     ThemeChangeSensitive = false
                 },
                 Icon = new ViewStyle()
                 {
-                    Margin = new Extents(40, 0, 0, 0)
+                    Margin = new Extents(24, 0, 0, 0)
                 },
                 Seperator = new ViewStyle()
                 {
diff --git a/test/Tizen.NUI.StyleGuide/Examples/DefaultGridItemExample.cs b/test/Tizen.NUI.StyleGuide/Examples/DefaultGridItemExample.cs
new file mode 100644 (file)
index 0000000..f9c2e61
--- /dev/null
@@ -0,0 +1,129 @@
+/*
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using System;
+using System.ComponentModel;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace Tizen.NUI.StyleGuide
+{
+    // IExample inehrited class will be automatically added in the main examples list.
+    internal class DefaultGridItemExample : ContentPage, IExample
+    {
+        private Window window;
+        public void Activate()
+        {
+        }
+        public void Deactivate()
+        {
+            window = null;
+        }
+        DefaultGridItem CreateItem(int width, int height, string resource = null, string text = null)
+        {
+            var item = new DefaultGridItem()
+            {
+                WidthSpecification = width,
+                HeightSpecification = height,
+                LabelOrientationType = DefaultGridItem.LabelOrientation.InsideBottom,
+            };
+            item.Image.ResourceUrl = resource;
+            item.Image.WidthResizePolicy = ResizePolicyType.FillToParent;
+            item.Image.HeightResizePolicy = ResizePolicyType.FillToParent;
+            if (text != null) item.Text = text;
+            return item;
+        }
+
+        void CreateItems(View parent, int width, int height, string resource = null, string text = null)
+        {
+            var horizBox = new ScrollableBase()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = height + 30,
+                ScrollingDirection = ScrollableBase.Direction.Horizontal,
+                HideScrollbar = false,
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Horizontal,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    CellPadding = new Size2D(10, 0),
+                },
+            };
+
+            var enabledItem = CreateItem(width, height, null, text);
+            horizBox.Add(enabledItem);
+
+            var disabledItem = CreateItem(width, height, null, text);
+            disabledItem.IsEnabled = false;
+            horizBox.Add(disabledItem);
+
+            var selectedItem = CreateItem(width, height, null, text);
+            selectedItem.IsSelectable = true;
+            selectedItem.IsSelected = true;
+            horizBox.Add(selectedItem);
+
+            var imageItem = CreateItem(width, height, resource, text);
+            horizBox.Add(imageItem);
+
+
+            parent.Add(horizBox);
+        }
+
+        /// Modify this method for adding other examples.
+        public DefaultGridItemExample() : base()
+        {
+            Log.Info(this.GetType().Name, $"{this.GetType().Name} is contructed\n");
+
+            WidthSpecification = LayoutParamPolicies.MatchParent;
+            HeightSpecification = LayoutParamPolicies.MatchParent;
+            // Navigator bar title is added here.
+            AppBar = new AppBar()
+            {
+                Title = "DefaultLinearItem Style",
+            };
+
+            // Example root content view.
+            // you can decorate, add children on this view.
+            var rootContent = new ScrollableBase()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                ScrollingDirection = ScrollableBase.Direction.Vertical,
+                HideScrollbar = false,
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    CellPadding = new Size2D(0, 20),
+                },
+            };
+
+            var path = Tizen.Applications.Application.Current.DirectoryInfo.Resource;
+
+            CreateItems(rootContent, 114, 114, path + "/images/grid_01.jpg");
+            CreateItems(rootContent, 114, 114, path + "/images/grid_01.jpg", "Small");
+            CreateItems(rootContent, 138, 138, path + "/images/grid_02.jpg");
+            CreateItems(rootContent, 138, 138, path + "/images/grid_02.jpg", "Medium");
+            CreateItems(rootContent, 252, 252, path + "/images/grid_03.jpg");
+            CreateItems(rootContent, 252, 252, path + "/images/grid_03.jpg", "Large");
+
+            Content = rootContent;
+        }
+    }
+}
diff --git a/test/Tizen.NUI.StyleGuide/Examples/DefaultLinearItemExample.cs b/test/Tizen.NUI.StyleGuide/Examples/DefaultLinearItemExample.cs
new file mode 100644 (file)
index 0000000..398b10c
--- /dev/null
@@ -0,0 +1,110 @@
+/*
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using System;
+using System.ComponentModel;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace Tizen.NUI.StyleGuide
+{
+    // IExample inehrited class will be automatically added in the main examples list.
+    internal class DefaultLinearItemExample : ContentPage, IExample
+    {
+        private Window window;
+        public void Activate()
+        {
+        }
+        public void Deactivate()
+        {
+            window = null;
+        }
+        DefaultLinearItem CreateItem(string text, string subText = null, bool icon = false, bool extra = false)
+        {
+            var item = new DefaultLinearItem()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                Text = text,
+            };
+            if (subText != null) item.SubText = subText;
+            if (icon) item.Icon = new CheckBox();
+            if (extra) item.Extra = new RadioButton();
+            return item;
+        }
+
+        void CreateItems(View parent, string text, string subText = null, bool icon = false, bool extra = false)
+        {
+            var enabledItem = CreateItem("Enabled "+ text, subText, icon, extra);
+            enabledItem.Clicked += (object obj, ClickedEventArgs ev) =>
+            {
+                Log.Info(this.GetType().Name, "Enabled Item Clicked\n");
+            };
+            parent.Add(enabledItem);
+
+            var disabledItem = CreateItem("Disabled "+ text, subText, icon, extra);
+            disabledItem.IsEnabled = false;
+            parent.Add(disabledItem);
+
+            var selectedItem = CreateItem("Selected "+ text, subText, icon, extra);
+            selectedItem.IsSelectable = true;
+            selectedItem.IsSelected = true;
+            selectedItem.Clicked += (object obj, ClickedEventArgs ev) =>
+            {
+                selectedItem.Text = (selectedItem.IsSelected?"Selected ":"Unselected ") + text;
+            };
+            parent.Add(selectedItem);
+        }
+
+        /// Modify this method for adding other examples.
+        public DefaultLinearItemExample() : base()
+        {
+            Log.Info(this.GetType().Name, $"{this.GetType().Name} is contructed\n");
+
+            WidthSpecification = LayoutParamPolicies.MatchParent;
+            HeightSpecification = LayoutParamPolicies.MatchParent;
+            // Navigator bar title is added here.
+            AppBar = new AppBar()
+            {
+                Title = "DefaultLinearItem Style",
+            };
+
+            // Example root content view.
+            // you can decorate, add children on this view.
+            var rootContent = new ScrollableBase()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                ScrollingDirection = ScrollableBase.Direction.Vertical,
+                HideScrollbar = false,
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    CellPadding = new Size2D(10, 20),
+                },
+            };
+
+            CreateItems(rootContent, "Label Only");
+            CreateItems(rootContent, "Label and SubLabel", "Lorem ipsum dolor sit amet, consectetur adipiscing elit");
+            CreateItems(rootContent, "Label and Icon", null, true);
+            CreateItems(rootContent, "Label and Extra", null, false, true);
+
+            Content = rootContent;
+        }
+    }
+}
diff --git a/test/Tizen.NUI.StyleGuide/Examples/DefaultTitleItemExample.cs b/test/Tizen.NUI.StyleGuide/Examples/DefaultTitleItemExample.cs
new file mode 100644 (file)
index 0000000..d3082d9
--- /dev/null
@@ -0,0 +1,109 @@
+/*
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using System;
+using System.ComponentModel;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace Tizen.NUI.StyleGuide
+{
+    // IExample inehrited class will be automatically added in the main examples list.
+    internal class DefaultTitleItemExample : ContentPage, IExample
+    {
+        private Window window;
+        public void Activate()
+        {
+        }
+        public void Deactivate()
+        {
+            window = null;
+        }
+
+        /// Modify this method for adding other examples.
+        public DefaultTitleItemExample() : base()
+        {
+            Log.Info(this.GetType().Name, $"{this.GetType().Name} is contructed\n");
+
+            WidthSpecification = LayoutParamPolicies.MatchParent;
+            HeightSpecification = LayoutParamPolicies.MatchParent;
+            // Navigator bar title is added here.
+            AppBar = new AppBar()
+            {
+                Title = "DefaultTitleItemExample Style",
+            };
+
+            // Example root content view.
+            // you can decorate, add children on this view.
+            var rootContent = new ScrollableBase()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                ScrollingDirection = ScrollableBase.Direction.Vertical,
+                HideScrollbar = false,
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    CellPadding = new Size2D(10, 20),
+                },
+            };
+
+            var item = new DefaultTitleItem()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                Text = "Title Item",
+            };
+            rootContent.Add(item);
+
+            var path = Tizen.Applications.Application.Current.DirectoryInfo.Resource;
+
+            var arrowStyle = new ButtonStyle()
+            {
+                IsSelectable = true,
+                Size = new Size(40, 40),
+                ItemHorizontalAlignment = HorizontalAlignment.Center,
+                ItemVerticalAlignment = VerticalAlignment.Center,
+                Icon = new ImageViewStyle()
+                {
+                    ResourceUrl = new Selector<string>()
+                    {
+                        Normal = path + "/icon/icon_arrow_down.svg",
+                        Pressed = path + "/icon/icon_arrow_up.svg",
+                        Selected = path + "/icon/icon_arrow_up.svg",
+                    }
+                }
+            };
+
+            var itemWithArrow = new DefaultTitleItem()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                Text = "Title Item With Arrow",
+                EnableControlStatePropagation = true,
+                Icon = new Button(arrowStyle)
+                {
+                    EnableControlStatePropagation = true,
+                },
+                IsSelectable = true,
+            };
+            rootContent.Add(itemWithArrow);
+
+            Content = rootContent;
+        }
+    }
+}
diff --git a/test/Tizen.NUI.StyleGuide/res/icon/icon_arrow_down.svg b/test/Tizen.NUI.StyleGuide/res/icon/icon_arrow_down.svg
new file mode 100755 (executable)
index 0000000..cdd73c5
--- /dev/null
@@ -0,0 +1,3 @@
+<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 1L9 9L0.999999 0.999999" stroke="#17234D" stroke-width="2"/>
+</svg>
diff --git a/test/Tizen.NUI.StyleGuide/res/icon/icon_arrow_up.svg b/test/Tizen.NUI.StyleGuide/res/icon/icon_arrow_up.svg
new file mode 100755 (executable)
index 0000000..190edf8
--- /dev/null
@@ -0,0 +1,3 @@
+<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 10L9 2L17 10" stroke="#17234D" stroke-width="2"/>
+</svg>
diff --git a/test/Tizen.NUI.StyleGuide/res/images/grid_01.jpg b/test/Tizen.NUI.StyleGuide/res/images/grid_01.jpg
new file mode 100644 (file)
index 0000000..c50ccb3
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/images/grid_01.jpg differ
diff --git a/test/Tizen.NUI.StyleGuide/res/images/grid_02.jpg b/test/Tizen.NUI.StyleGuide/res/images/grid_02.jpg
new file mode 100644 (file)
index 0000000..04aea8a
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/images/grid_02.jpg differ
diff --git a/test/Tizen.NUI.StyleGuide/res/images/grid_03.jpg b/test/Tizen.NUI.StyleGuide/res/images/grid_03.jpg
new file mode 100644 (file)
index 0000000..22f3050
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/images/grid_03.jpg differ