1. In catalog model the MainCategory property name is renamed as Name

2. In category tile/List page, catalog tile/list page item is tapped the selected item sending is by using behavior. So SfListViewTapBehavior is newly added.
 3. In DetailPage the rotator template is set.

Author: YogeshwaranCM

EssentialUIKit/Behaviors/ECommerce/FrameTapBehavior.cs

@@ -0,0 +1,81 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Threading.Tasks;
+using Xamarin.Forms;
+
+namespace EssentialUIKit.Behaviors.ECommerce
+{
+    /// <summary>
+    /// This class extends the behavior of the frame to invoke a command when an event occurs.
+    /// </summary>
+    public class FrameTapBehavior : Behavior<Frame>
+    {
+        #region Fields
+
+        TapGestureRecognizer tapGestureRecognizer;
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the CommandParameterProperty, and it is a bindable property.
+        /// </summary>
+        public static readonly BindableProperty CommandParameterProperty =
+            BindableProperty.Create("CommandParameter", typeof(object), typeof(FrameTapBehavior));
+
+        /// <summary>
+        /// Gets or sets the CommandParameter.
+        /// </summary>
+        public object CommandParameter
+        {
+            get { return GetValue(CommandParameterProperty); }
+            set { this.SetValue(CommandParameterProperty, value); }
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when added frame to the page.
+        /// </summary>
+        /// <param name="bindableFrame">The Frame</param>
+        protected override void OnAttachedTo(Frame bindableFrame)
+        {
+            base.OnAttachedTo(bindableFrame);
+            tapGestureRecognizer = new TapGestureRecognizer();
+            tapGestureRecognizer.Tapped += TapGestureRecognizer_Tapped;
+            bindableFrame.GestureRecognizers.Add(tapGestureRecognizer);
+        }
+
+        /// <summary>
+        /// Invoked when frame is tapped.
+        /// </summary>
+        /// <param name="sender">The sender</param>
+        /// <param name="e">EventArgs</param>
+        private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
+        {
+            Application.Current.Resources.TryGetValue("Gray-200", out var retVal);
+            ((Frame)sender).BackgroundColor = (Color)retVal;
+
+            await Task.Delay(100);
+
+            ((Frame)sender).BackgroundColor = Color.Transparent;
+        }
+
+        /// <summary>
+        /// Invoked when exit from the view
+        /// </summary>
+        /// <param name="bindableFrame">The Frame</param>
+        protected override void OnDetachingFrom(Frame bindableFrame)
+        {
+            base.OnDetachingFrom(bindableFrame);
+            tapGestureRecognizer.Tapped -= TapGestureRecognizer_Tapped;
+        }
+
+        #endregion
+    }
+
+}

EssentialUIKit/Behaviors/SfListViewTapBehavior.cs

@@ -0,0 +1,72 @@
+using Syncfusion.ListView.XForms;
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows.Input;
+using Xamarin.Forms;
+
+namespace EssentialUIKit.Behaviors
+{
+    /// <summary>
+    /// This class extends the behavior of the SfListView to invoke a command when an event occurs.
+    /// </summary>
+    public class SfListViewTapBehavior : Behavior<SfListView>
+    {
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the CommandProperty, and it is a bindable property.
+        /// </summary>
+        public static readonly BindableProperty CommandProperty =
+            BindableProperty.Create("Command", typeof(ICommand), typeof(SfListViewTapBehavior));
+
+        /// <summary>
+        /// Gets or sets the Command.
+        /// </summary>
+        public ICommand Command
+        {
+            get { return (ICommand)GetValue(CommandProperty); }
+            set { this.SetValue(CommandProperty, value); }
+        }
+
+        #endregion
+
+        #region Method
+
+        /// <summary>
+        /// Invoked when added sflistview to the page.
+        /// </summary>
+        /// <param name="bindableListView">The SfListView</param>
+        protected override void OnAttachedTo(SfListView bindableListView)
+        {
+            base.OnAttachedTo(bindableListView);
+            bindableListView.ItemTapped += BindableListView_ItemTapped;
+        }
+
+        /// <summary>
+        /// Invoked when tapping the listview item.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">ItemTappedEventArgs</param>
+        private void BindableListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e)
+        {
+            if (this.Command == null)
+                return;
+            if (this.Command.CanExecute(e.ItemData))
+                this.Command.Execute((e.ItemData));
+        }
+
+        /// <summary>
+        /// Invoked when exit from the page.
+        /// </summary>
+        /// <param name="bindableListView">The SfListView</param>
+        protected override void OnDetachingFrom(SfListView bindableListView)
+        {
+            base.OnDetachingFrom(bindableListView);
+            bindableListView.ItemTapped -= BindableListView_ItemTapped;
+        }
+
+        #endregion
+    }
+
+}

EssentialUIKit/Data/ecommerce.json

@@ -97,7 +97,7 @@
   "categories": [
     {
       "icon": "Electronics.png",
-      "maincategory": "Electronics",
+      "name": "Electronics",
       "subcategories": [
 
         "Laptops",
@@ -110,7 +110,7 @@
     },
     {
       "icon": "Fashion.png",
-      "maincategory": "Fashion",
+      "name": "Fashion",
       "subcategories": [
 
         "Shirts",
@@ -123,7 +123,7 @@
     },
     {
       "icon": "HomeFurniture.png",
-      "maincategory": "Home and Furniture",
+      "name": "Home and Furniture",
       "subcategories": [
 
         "Diwans",
@@ -134,7 +134,7 @@
     },
     {
       "icon": "PersonalCare.png",
-      "maincategory": "Personal Care",
+      "name": "Personal Care",
       "subcategories": [
 
         "Laptops",
@@ -147,7 +147,7 @@
     },
     {
       "icon": "Books.png",
-      "maincategory": "Books",
+      "name": "Books",
       "subcategories": [
 
         "Laptops",
@@ -160,7 +160,7 @@
     },
     {
       "icon": "Clothes.png",
-      "maincategory": "Clothes",
+      "name": "Clothes",
       "subcategories": [
 
         "Laptops",
@@ -173,7 +173,7 @@
     },
     {
       "icon": "MobilePhones.png",
-      "maincategory": "Mobile Phones",
+      "name": "Mobile Phones",
       "subcategories": [
 
         "Laptops",
@@ -186,7 +186,7 @@
     },
     {
       "icon": "Accessories.png",
-      "maincategory": "Accessories",
+      "name": "Accessories",
       "subcategories": [
 
         "Laptops",
@@ -199,7 +199,7 @@
     },
     {
       "icon": "Toys.png",
-      "maincategory": "Toys and Baby",
+      "name": "Toys and Baby",
       "subcategories": [
 
         "Laptops",

EssentialUIKit/Models/Ecommerce/Category.cs

@@ -25,10 +25,10 @@ public string Icon
         }
 
         /// <summary>
-        /// Gets or sets the property that has been bound with a label in SfExpander header, which displays the main category.
+        /// Gets or sets the property that has been bound with a label in SfExpander header, which displays the category name.
         /// </summary>
-        [DataMember(Name = "maincategory")]
-        public string MainCategory { get; set; }
+        [DataMember(Name = "name")]
+        public string Name { get; set; }
 
         /// <summary>
         /// Gets or sets the property that has been bound with a label in SfExpander content, which displays the sub category.

EssentialUIKit/ViewModels/Ecommerce/CatalogPageViewModel.cs

@@ -52,7 +52,7 @@ public CatalogPageViewModel()
             {
                 new Category
                 {
-                    MainCategory = "Gender",
+                    Name = "Gender",
                     SubCategories = new List<string>
                     {
                         "Men",
@@ -61,7 +61,7 @@ public CatalogPageViewModel()
                 },
                 new Category
                 {
-                    MainCategory = "Brand",
+                    Name = "Brand",
                     SubCategories = new List<string>
                     {
                         "Brand A",
@@ -70,7 +70,7 @@ public CatalogPageViewModel()
                 },
                 new Category
                 {
-                    MainCategory = "Categories",
+                    Name = "Categories",
                     SubCategories = new List<string>
                     {
                         "Category A",
@@ -79,7 +79,7 @@ public CatalogPageViewModel()
                 },
                 new Category
                 {
-                    MainCategory = "Color",
+                    Name = "Color",
                     SubCategories = new List<string>
                     {
                         "Maroon",
@@ -88,7 +88,7 @@ public CatalogPageViewModel()
                 },
                 new Category
                 {
-                    MainCategory = "Price",
+                    Name = "Price",
                     SubCategories = new List<string>
                     {
                         "Above 3000",
@@ -98,31 +98,31 @@ public CatalogPageViewModel()
                 },
                 new Category
                 {
-                    MainCategory = "Size",
+                    Name = "Size",
                     SubCategories = new List<string>
                     {
                         "S", "M", "L", "XL", "XXL"
                     }
                 },
                 new Category
                 {
-                    MainCategory = "Patterns",
+                    Name = "Patterns",
                     SubCategories = new List<string>
                     {
                         "Pattern 1", "Pattern 2"
                     }
                 },
                 new Category
                 {
-                    MainCategory = "Offers",
+                    Name = "Offers",
                     SubCategories = new List<string>
                     {
                         "Buy 1 Get 1", "Buy 1 Get 2"
                     }
                 },
                 new Category
                 {
-                    MainCategory = "Coupons",
+                    Name = "Coupons",
                     SubCategories = new List<string>
                     {
                         "Coupon 1", "Coupon 2"

EssentialUIKit/ViewModels/Ecommerce/CategoryPageViewModel.cs

@@ -205,12 +205,7 @@ private static void ScrollToEndClicked(object attachedObject)
         /// <param name="obj">The Object</param>
         private static async void CategorySelected(object obj)
         {
-            Application.Current.Resources.TryGetValue("Gray-F0", out var retVal);
-            ((Frame) obj).BackgroundColor = (Color) retVal;
-
-            await Task.Delay(100);
-
-            ((Frame) obj).BackgroundColor = Color.Transparent;
+            //Do Something
         }
 
         /// <summary>