From a2bf6b7e80bde3f17e7a70273cb3136d7fecadbf Mon Sep 17 00:00:00 2001
From: Heonjae Jang <heonjae.jang@samsung.com>
Date: Thu, 25 May 2017 18:02:11 +0900
Subject: Change Animation in TVHome

Change-Id: I63cc71df474636e0ace7c01f115402ec5fd29c58
Signed-off-by: Heonjae Jang <heonjae.jang@samsung.com>
---
 TVHome/TVHome/Controls/MainPanelButton.xaml   |   3 +-
 TVHome/TVHome/ViewModels/MainPageViewModel.cs | 163 +++++++-------------------
 TVHome/TVHome/Views/MainPage.xaml             |   8 +-
 TVHome/TVHome/Views/MainPage.xaml.cs          |  36 ++++--
 TVHome/TVHome/Views/MainPanel.xaml            |  11 +-
 TVHome/TVHome/Views/MainPanel.xaml.cs         |  46 +++++++-
 TVHome/TVHome/Views/Panel.cs                  |  10 +-
 TVHome/TVHome/Views/SubPanel.xaml             |   4 +-
 TVHome/TVHome/Views/SubPanel.xaml.cs          |  65 ++++++----
 TVHome/TVHome/Views/SubThumbnailPanel.xaml    |  10 +-
 TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs |  73 ++++++++----
 11 files changed, 215 insertions(+), 214 deletions(-)

diff --git a/TVHome/TVHome/Controls/MainPanelButton.xaml b/TVHome/TVHome/Controls/MainPanelButton.xaml
index 9f017d4..5306d7d 100755
--- a/TVHome/TVHome/Controls/MainPanelButton.xaml
+++ b/TVHome/TVHome/Controls/MainPanelButton.xaml
@@ -4,7 +4,8 @@
                       xmlns:Controls="clr-namespace:TVHome.Controls"
                       x:Class="TVHome.Controls.MainPanelButton"
                       HorizontalOptions="Center"
-                      VerticalOptions="Center">
+                      VerticalOptions="Center"
+                      Status="{Binding Status}">
         <Image x:Name="ButtonBgImage"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
diff --git a/TVHome/TVHome/ViewModels/MainPageViewModel.cs b/TVHome/TVHome/ViewModels/MainPageViewModel.cs
index 3e5b88f..3990937 100755
--- a/TVHome/TVHome/ViewModels/MainPageViewModel.cs
+++ b/TVHome/TVHome/ViewModels/MainPageViewModel.cs
@@ -30,11 +30,11 @@ namespace TVHome.ViewModels
     /// </summary>
     public enum HomeStatus
     {
-        Default = 0,
-        MainPanelFocused,
+        MainPanelFocused = 0,
         SubPanelFocused,
-        UnPin,
+        ShowOptions,
         Move,
+        Iconified
     };
 
     /// <summary>
@@ -53,6 +53,31 @@ namespace TVHome.ViewModels
     /// </summary>
     public class MainPageViewModel : INotifyPropertyChanged, IHomeViewModel
     {
+        /// <summary>
+        /// Gets or set CurrentStatus of HomeStatus
+        /// </summary>
+        public HomeStatus CurrentStatus { get; private set; }
+
+        private HomeMenuItem selectedMenuName = HomeMenuItem.Apps;
+        /// <summary>
+        /// Gets or set SelectedMenuName of HomeMenuItem
+        /// </summary>
+        public HomeMenuItem SelectedMenuName
+        {
+            get
+            {
+                return selectedMenuName;
+            }
+            set
+            {
+                if(selectedMenuName != value)
+                {
+                    selectedMenuName = value;
+                    ChangeSelectedPanelName(value, true);
+                }
+            }
+        }
+
         /// <summary>
         /// Gets or set MainList for MainPanel
         /// </summary>
@@ -76,7 +101,7 @@ namespace TVHome.ViewModels
         /// <summary>
         /// A command for executing when MainPanel is focused.
         /// </summary>
-        public Command MainPanelFocusedCommand { get; set; }
+        public Command ChangeStatusCommand { get; set; }
 
         /// <summary>
         /// A command for executing when SubPanel is focused.
@@ -113,16 +138,6 @@ namespace TVHome.ViewModels
         /// </summary>
         public Command OnClearAllCommand { get; set; }
 
-        /// <summary>
-        /// Gets or set CurrentStatus of HomeStatus
-        /// </summary>
-        public HomeStatus CurrentStatus { get; private set; }
-
-        /// <summary>
-        /// Gets or set SelectedMenuName of HomeMenuItem
-        /// </summary>
-        public HomeMenuItem SelectedMenuName { get; private set; }
-
         /// <summary>
         /// A flag indicates whether "No recent info" in Recent SubPanel to be displayed or not
         /// </summary>
@@ -133,74 +148,6 @@ namespace TVHome.ViewModels
         /// </summary>
         public event PropertyChangedEventHandler PropertyChanged;
 
-        /// <summary>
-        /// Main panel icon's width
-        /// </summary>
-        public int MainPanelIconWidth
-        {
-            get
-            {
-                return SizeUtils.GetWidthSize(236);
-            }
-        }
-
-        /// <summary>
-        /// Sub panel's padding size
-        /// </summary>
-        public Thickness SubPanelPadding
-        {
-            get
-            {
-                int lr = SizeUtils.GetWidthSize(74);
-                return new Thickness(lr, 0, lr, SizeUtils.GetWidthSize(26));
-            }
-        }
-
-        /// <summary>
-        /// Apps, Settings sub panel's spacing size
-        /// </summary>
-        public int SubPanelSpacing
-        {
-            get
-            {
-                // TODO : set proper size
-                return SizeUtils.GetWidthSize(34);
-            }
-        }
-
-        /// <summary>
-        /// Recent sub panel's spacing size
-        /// </summary>
-        public double SubThumbPanelSpacing
-        {
-            get
-            {
-                // TODO : set proper size
-                return SizeUtils.GetWidthSizeDouble(27.5);
-            }
-        }
-
-        /// <summary>
-        /// Information text font size.
-        /// </summary>
-        public int NoContentInformationFontSize
-        {
-            get
-            {
-                return SizeUtils.GetFontSize(28);
-            }
-        }
-
-        /// <summary>
-        /// Sub thumbnail panel's padding size
-        /// </summary>
-        public Thickness SubThumbNailPanelPadding
-        {
-            get
-            {
-                return new Thickness(SizeUtils.GetWidthSize(96), SizeUtils.GetWidthSize(32));
-            }
-        }
 
         /// <summary>
         /// Constructor
@@ -241,10 +188,16 @@ namespace TVHome.ViewModels
                         MakeRecentButtons();
                         break;
                     case TVHomeStatus.OnSleep:
-                        ChangeCurrentStatus(HomeStatus.Default, true);
+                        ChangeCurrentStatus(HomeStatus.MainPanelFocused, true);
                         break;
                 }
             });
+            PropertyChanged += MainPageViewModelPropertyChanged;
+        }
+
+        private void MainPageViewModelPropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            DebuggingUtils.Dbg(e.PropertyName);
         }
 
         /// <summary>
@@ -252,7 +205,8 @@ namespace TVHome.ViewModels
         /// </summary>
         private void InitStatus()
         {
-            ChangeCurrentStatus(HomeStatus.Default, true);
+            ChangeSelectedPanelName(HomeMenuItem.Apps, true);
+            ChangeCurrentStatus(HomeStatus.MainPanelFocused, true);
         }
 
         /// <summary>
@@ -260,26 +214,9 @@ namespace TVHome.ViewModels
         /// </summary>
         private void InitCommands()
         {
-            MainPanelFocusedCommand = new Command<HomeMenuItem>((key) =>
-            {
-                DebuggingUtils.Dbg(key.ToString());
-                ChangeCurrentStatus(HomeStatus.MainPanelFocused);
-                ChangeSelectedPanelName(key);
-            });
-
-            SubPanelFocusedCommand = new Command(() =>
-            {
-                ChangeCurrentStatus(HomeStatus.SubPanelFocused);
-            });
-
-            SetMoveStatusCommand = new Command(() =>
-            {
-                ChangeCurrentStatus(HomeStatus.Move);
-            });
-
-            SetUnpinStatusCommand = new Command(() =>
+            ChangeStatusCommand = new Command<HomeStatus>((status) =>
             {
-                ChangeCurrentStatus(HomeStatus.UnPin);
+                ChangeCurrentStatus(status);
             });
 
             OnMoveCommand = new Command<List<View>>((moveList) =>
@@ -531,25 +468,7 @@ namespace TVHome.ViewModels
                 CurrentStatus.CompareTo(newStatus) != 0)
             {
                 CurrentStatus = newStatus;
-                if (CurrentStatus.CompareTo(HomeStatus.Default) == 0)
-                {
-                    foreach (HomeMenuAppShortcutInfo item in MainList)
-                    {
-                        if (item.CurrentStateDescription.Label.CompareTo("Apps") == 0)
-                        {
-                            DebuggingUtils.Dbg(item.CurrentStateDescription.Label + " To Focused");
-                            item.ChangeStatus("focused");
-                        }
-                        else
-                        {
-                            DebuggingUtils.Dbg(item.CurrentStateDescription.Label + " To Default");
-                            item.ChangeStatus("default");
-                        }
-                    }
-
-                    ChangeSelectedPanelName(HomeMenuItem.Apps, isForceUpdate);
-                }
-                else if (CurrentStatus.CompareTo(HomeStatus.MainPanelFocused) == 0)
+                if (CurrentStatus.CompareTo(HomeStatus.MainPanelFocused) == 0)
                 {
                     HomeMenuItem index = HomeMenuItem.Recent;
                     foreach (HomeMenuAppShortcutInfo item in MainList)
diff --git a/TVHome/TVHome/Views/MainPage.xaml b/TVHome/TVHome/Views/MainPage.xaml
index 984104b..dd41bbe 100755
--- a/TVHome/TVHome/Views/MainPage.xaml
+++ b/TVHome/TVHome/Views/MainPage.xaml
@@ -27,14 +27,14 @@
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.22}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6537}"
-                       OnFocusedCommand="{Binding MainPanelFocusedCommand}"
+                       ChangeStatusCommand="{Binding ChangeStatusCommand}"
                        ItemsSource="{Binding MainList}"/>
 
       <Views:SubThumbnailPanel x:Name="RecentSubPanel"
                       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.224}"
                       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.89}"
-                      OnFocusedCommand="{Binding SubPanelFocusedCommand}"
+                      ChangeStatusCommand="{Binding ChangeStatusCommand}"
                       OnClearVMCommand="{Binding OnClearCommand}"
                       OnClearAllVMCommand="{Binding OnClearAllCommand}"
                       ItemsSource="{Binding RecentList}"
@@ -44,7 +44,7 @@
                       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2370}"
                       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8833}"
-                      OnFocusedCommand="{Binding SubPanelFocusedCommand}"
+                      ChangeStatusCommand="{Binding ChangeStatusCommand}"
                       OnMoveVMCommand="{Binding OnMoveCommand}"
                       OnUnpinVMCommand="{Binding OnUnpinCommand}"
                       ItemsSource="{Binding AppList}" />
@@ -53,7 +53,7 @@
                       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2370}"
                       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8833}"
-                      OnFocusedCommand="{Binding SubPanelFocusedCommand}"
+                      ChangeStatusCommand="{Binding ChangeStatusCommand}"
                       ItemsSource="{Binding SettingsList}" />
     </RelativeLayout>
   </ContentPage.Content>
diff --git a/TVHome/TVHome/Views/MainPage.xaml.cs b/TVHome/TVHome/Views/MainPage.xaml.cs
index 8479f6e..9daf994 100755
--- a/TVHome/TVHome/Views/MainPage.xaml.cs
+++ b/TVHome/TVHome/Views/MainPage.xaml.cs
@@ -22,7 +22,6 @@ using Xamarin.Forms.PlatformConfiguration.TizenSpecific;
 
 namespace TVHome.Views
 {
-    using System.Runtime.CompilerServices;
     using Tizen = Xamarin.Forms.PlatformConfiguration.Tizen;
     /// <summary>
     /// A custom view for displaying main page of TV Home
@@ -46,7 +45,7 @@ namespace TVHome.Views
         /// <summary>
         /// Identifies the SelectedMenuName bindable property
         /// </summary>
-        public static readonly BindableProperty SelectedMenuNameProperty = BindableProperty.Create("SelectedMenuName", typeof(HomeMenuItem), typeof(MainPage), default(HomeMenuItem));
+        public static readonly BindableProperty SelectedMenuNameProperty = BindableProperty.Create("SelectedMenuName", typeof(HomeMenuItem), typeof(MainPage), default(HomeMenuItem), defaultBindingMode: BindingMode.TwoWay);
 
         /// <summary>
         /// Gets or sets selected HomeMenuItem
@@ -184,10 +183,15 @@ namespace TVHome.Views
                         break;
                 }
             });
-            PageMainPanel.OnItemSelectedHandler += (id) =>
+            PageMainPanel.OnItemFocusedHandler += (selectedItem) =>
             {
-                DebuggingUtils.Dbg("Selected Item " + id);
-                switch (id)
+                SelectedMenuName = selectedItem;
+                DebuggingUtils.Dbg("test" + SelectedMenuName);
+            };
+
+            PageMainPanel.OnItemSelectedHandler += (selectedItem) =>
+            {
+                switch (selectedItem)
                 {
                     case HomeMenuItem.Recent:
                         RecentSubPanel.FocusPanel();
@@ -248,10 +252,12 @@ namespace TVHome.Views
             Button appsMainPanelButton = PageMainPanel.GetButtonToFocusing(1);
             Button settingMainPanelButton = PageMainPanel.GetButtonToFocusing(2);
 
+            recentMainPanelButton.On<Tizen>().SetNextFocusLeftView(recentMainPanelButton);
             recentMainPanelButton.On<Tizen>().SetNextFocusRightView(appsMainPanelButton);
             appsMainPanelButton.On<Tizen>().SetNextFocusLeftView(recentMainPanelButton);
             appsMainPanelButton.On<Tizen>().SetNextFocusRightView(settingMainPanelButton);
             settingMainPanelButton.On<Tizen>().SetNextFocusLeftView(appsMainPanelButton);
+            settingMainPanelButton.On<Tizen>().SetNextFocusRightView(settingMainPanelButton);
         }
 
         /// <summary>
@@ -262,6 +268,11 @@ namespace TVHome.Views
             List<View> recentSubPanelButtons = new List<View>(RecentSubPanel.GetSubPanelButtons());
             Button recentMainPanelButton = PageMainPanel.GetButtonToFocusing(0);
 
+            if (recentSubPanelButtons.Count > 1)
+            {
+                recentMainPanelButton.On<Tizen>().SetNextFocusDownView(recentSubPanelButtons[0].FindByName<Button>("ButtonFocusArea"));
+            }
+
             foreach (var item in recentSubPanelButtons)
             {
                 item.FindByName<Button>("ButtonFocusArea").On<Tizen>().SetNextFocusUpView(recentMainPanelButton);
@@ -287,15 +298,19 @@ namespace TVHome.Views
         private void InitializeAppsSubPanelButtonFocusChain()
         {
             List<View> appsSubPanelButtons = new List<View>(AppsSubPanel.GetSubPanelButtons());
-
+            DebuggingUtils.Dbg("test" + appsSubPanelButtons.Count);
             Button appsMainPanelButton = PageMainPanel.GetButtonToFocusing(1);
 
+            if (appsSubPanelButtons.Count > 2)
+            {
+                appsMainPanelButton.On<Tizen>().SetNextFocusDownView(appsSubPanelButtons[1].FindByName<Button>("ButtonFocusArea"));
+            }
+
             foreach (var item in appsSubPanelButtons)
             {
                 item.FindByName<Button>("ButtonFocusArea").On<Tizen>().SetNextFocusUpView(appsMainPanelButton);
             }
 
-
             for (var i = 0; i < appsSubPanelButtons.Count; i++)
             {
                 if (i != 0)
@@ -318,6 +333,11 @@ namespace TVHome.Views
             List<View> settingSubPanelButtons = new List<View>(SettingsSubPanel.GetSubPanelButtons());
             Button settingMainPanelButton = PageMainPanel.GetButtonToFocusing(2);
 
+            if (settingSubPanelButtons.Count > 2)
+            {
+                settingMainPanelButton.On<Tizen>().SetNextFocusDownView(settingSubPanelButtons[1].FindByName<Button>("ButtonFocusArea"));
+            }
+
             foreach (var item in settingSubPanelButtons)
             {
                 item.FindByName<Button>("ButtonFocusArea").On<Tizen>().SetNextFocusUpView(settingMainPanelButton);
@@ -350,7 +370,7 @@ namespace TVHome.Views
             switch (status)
             {
                 case HomeStatus.MainPanelFocused:
-                    PageMainPanel.ShowPanel();
+                    PageMainPanel.FocusPanel();
                     SelectMenu(SelectedMenuName);
                     break;
                 case HomeStatus.SubPanelFocused:
diff --git a/TVHome/TVHome/Views/MainPanel.xaml b/TVHome/TVHome/Views/MainPanel.xaml
index 5ab1ad3..ae58e7b 100755
--- a/TVHome/TVHome/Views/MainPanel.xaml
+++ b/TVHome/TVHome/Views/MainPanel.xaml
@@ -3,14 +3,5 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:Views="clr-namespace:TVHome.Views"
              x:Class="TVHome.Views.MainPanel">
-    <Grid x:Name="PanelButtonGrid">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*" />
-            <ColumnDefinition Width="{Binding MainPanelIconWidth}" />
-            <ColumnDefinition Width="{Binding MainPanelIconWidth}" />
-            <ColumnDefinition Width="{Binding MainPanelIconWidth}" />
-            <ColumnDefinition Width="*" />
-        </Grid.ColumnDefinitions>
-        <Grid.ColumnSpacing>-94</Grid.ColumnSpacing>
-    </Grid>
+    <Grid x:Name="PanelButtonGrid" />
 </Views:Panel>
\ No newline at end of file
diff --git a/TVHome/TVHome/Views/MainPanel.xaml.cs b/TVHome/TVHome/Views/MainPanel.xaml.cs
index ac6ac45..e0306dd 100755
--- a/TVHome/TVHome/Views/MainPanel.xaml.cs
+++ b/TVHome/TVHome/Views/MainPanel.xaml.cs
@@ -19,9 +19,7 @@ using TVHome.Controls;
 using LibTVRefCommonPortable.DataModels;
 using TVHome.ViewModels;
 using Xamarin.Forms;
-using System.Threading.Tasks;
 using LibTVRefCommonPortable.Utils;
-using System;
 
 namespace TVHome.Views
 {
@@ -30,13 +28,29 @@ namespace TVHome.Views
     /// </summary>
     public partial class MainPanel : Panel
     {
+        public delegate void FocusEventHandler(HomeMenuItem item);
         public delegate void SelectEventHandler(HomeMenuItem item);
 
+        /// <summary>
+        /// A EventHandler for Item focused event
+        /// </summary>
+        public FocusEventHandler OnItemFocusedHandler;
+
         /// <summary>
         /// A EventHandler for Item selected event
         /// </summary>
         public SelectEventHandler OnItemSelectedHandler;
 
+        /// <summary>
+        /// Main panel icon's width
+        /// </summary>
+        private int mainPanelIconWidth = SizeUtils.GetWidthSize(236);
+
+        /// <summary>
+        /// Main panel icon's width
+        /// </summary>
+        private int mainPanelColumnSpacing = SizeUtils.GetWidthSize(-94);
+
         /// <summary>
         /// MainPanel icon's transition height value when it focused.
         /// </summary>
@@ -48,9 +62,23 @@ namespace TVHome.Views
         public MainPanel()
         {
             InitializeComponent();
+            InitializeSize();
             PropertyChanged += OnItemsSourcePropertyChanged;
         }
 
+        private void InitializeSize()
+        {
+            PanelButtonGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
+            PanelButtonGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(mainPanelIconWidth) });
+            PanelButtonGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(mainPanelIconWidth) });
+            PanelButtonGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(mainPanelIconWidth) });
+            PanelButtonGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
+
+            PanelButtonGrid.ColumnSpacing = mainPanelColumnSpacing;
+
+            PanelButtonGrid.ForceLayout();
+        }
+
         /// <summary>
         /// An event handler for handling property changed event
         /// </summary>
@@ -73,8 +101,9 @@ namespace TVHome.Views
                 HomeMenuItem ItemName = menuIndex;
                 button.OnFocusedCommand = new Command(() =>
                 {
+                    ChangeStatusCommand?.Execute(HomeStatus.MainPanelFocused);
+                    OnItemFocusedHandler?.Invoke(ItemName);
                     FocusPanel();
-                    OnFocusedCommand.Execute(ItemName);
                 });
                 button.OnClickedCommand = new Command(() =>
                 {
@@ -113,9 +142,14 @@ namespace TVHome.Views
         /// <summary>
         /// A method for translating when panel is focused
         /// </summary>
-        public override async void FocusPanel()
+        public override void FocusPanel()
         {
-            await this.TranslateTo(0, 0, 300);
+            AnimationExtensions.AbortAnimation(this, "PanelAnimation");
+            var currentTranslationY = TranslationY;
+            Animation animation = new Animation();
+            Animation translateAnimation = new Animation(v => TranslationY = (currentTranslationY * (1 - v)));
+            animation.Add(0, 1, translateAnimation);
+            animation.Commit(this, "PanelAnimation", length: 300);
         }
 
         /// <summary>
@@ -131,7 +165,7 @@ namespace TVHome.Views
         /// </summary>
         public void SelectPanel()
         {
-            AnimationExtensions.AbortAnimation(this,"PanelAnimation");
+            AnimationExtensions.AbortAnimation(this, "PanelAnimation");
             var currentTranslationY = TranslationY;
             var diff = selectTransitionHeight - currentTranslationY;
             Animation animation = new Animation();
diff --git a/TVHome/TVHome/Views/Panel.cs b/TVHome/TVHome/Views/Panel.cs
index 1c8b1f8..61e9bbe 100755
--- a/TVHome/TVHome/Views/Panel.cs
+++ b/TVHome/TVHome/Views/Panel.cs
@@ -28,17 +28,17 @@ namespace TVHome.Views
     public abstract class Panel : ContentView
     {
         /// <summary>
-        /// Identifies the OnFocusedCommand bindable property
+        /// Identifies the ChangeStatusCommand bindable property
         /// </summary>
-        public static readonly BindableProperty OnFocusedCommandProperty = BindableProperty.Create("OnFocusedCommand", typeof(ICommand), typeof(MainPanel));
+        public static readonly BindableProperty ChangeStatusCommandProperty = BindableProperty.Create("ChangeStatusCommand", typeof(ICommand), typeof(MainPanel));
 
         /// <summary>
         /// A command is executed when panel is focused
         /// </summary>
-        public ICommand OnFocusedCommand
+        public ICommand ChangeStatusCommand
         {
-            get { return (ICommand)GetValue(OnFocusedCommandProperty); }
-            set { SetValue(OnFocusedCommandProperty, value); }
+            get { return (ICommand)GetValue(ChangeStatusCommandProperty); }
+            set { SetValue(ChangeStatusCommandProperty, value); }
         }
 
         /// <summary>
diff --git a/TVHome/TVHome/Views/SubPanel.xaml b/TVHome/TVHome/Views/SubPanel.xaml
index 9e89e08..8a0115c 100755
--- a/TVHome/TVHome/Views/SubPanel.xaml
+++ b/TVHome/TVHome/Views/SubPanel.xaml
@@ -7,9 +7,7 @@
               Orientation="Horizontal"
               HorizontalOptions="Center">
     <StackLayout x:Name="PanelButtonStack"
-                 Orientation="Horizontal"
-                 Padding="{Binding SubPanelPadding}"
-                 Spacing="{Binding SubPanelSpacing}">
+                 Orientation="Horizontal">
     </StackLayout>
   </ScrollView>
 </Views:Panel>
\ No newline at end of file
diff --git a/TVHome/TVHome/Views/SubPanel.xaml.cs b/TVHome/TVHome/Views/SubPanel.xaml.cs
index 283fb96..630dd7e 100755
--- a/TVHome/TVHome/Views/SubPanel.xaml.cs
+++ b/TVHome/TVHome/Views/SubPanel.xaml.cs
@@ -23,6 +23,7 @@ using System.Windows.Input;
 using System.Collections.Generic;
 using LibTVRefCommonPortable.Utils;
 using System;
+using TVHome.ViewModels;
 
 namespace TVHome.Views
 {
@@ -72,9 +73,17 @@ namespace TVHome.Views
 
             ButtonList = new List<PanelButton>();
             ButtonViewList = new List<View>();
+
+            InitializeSize();
             PropertyChanged += OnItemsSourcePropertyChanged;
         }
 
+        private void InitializeSize()
+        {
+            PanelButtonStack.Spacing = SizeUtils.GetWidthSize(34);
+            PanelButtonStack.Padding = new Thickness(SizeUtils.GetWidthSize(74), 0, SizeUtils.GetWidthSize(74), SizeUtils.GetWidthSize(26));
+        }
+
         /// <summary>
         /// A method for handling when menu key is pressed
         /// </summary>
@@ -176,8 +185,8 @@ namespace TVHome.Views
                 button.BindingContext = item;
                 button.OnFocusedCommand = new Command(() =>
                 {
+                    ChangeStatusCommand?.Execute(HomeStatus.SubPanelFocused);
                     FocusPanel();
-
                     if (SizeUtils.GetWidthSize((int)button.X) - SizeUtils.GetWidthSize((int)PanelScrollView.ScrollX) < 0)
                     {
                         ScrollToLeft();
@@ -265,7 +274,7 @@ namespace TVHome.Views
         /// <summary>
         /// A method for hiding the panel
         /// </summary>
-        public override async void HidePanel()
+        public override void HidePanel()
         {
             isFocused = false;
             foreach (var item in PanelButtonStack.Children)
@@ -273,19 +282,24 @@ namespace TVHome.Views
                 item.IsEnabled = false;
             }
 
-#pragma warning disable CS4014
             PanelScrollView.ScrollToAsync(0, 0, true);
-            this.TranslateTo(0, selectTransitionHeight, 300);
-#pragma warning restore CS4014
-            await this.FadeTo(0, 300);
+            AnimationExtensions.AbortAnimation(this, "PanelAnimation");
+            var currentTranslationY = TranslationY;
+            var diff = selectTransitionHeight - currentTranslationY;
+            var currentOpacity = Opacity;
+            Animation animation = new Animation();
+            Animation translateAnimation = new Animation(v => TranslationY = (currentTranslationY + diff * v));
+            Animation fadeAnimation = new Animation(v => Opacity = currentOpacity * (1 - v));
+            animation.Add(0, 1, translateAnimation);
+            animation.Add(0, 1, fadeAnimation);
+            animation.Commit(this, "PanelAnimation", length: 300);
         }
 
         /// <summary>
         /// A method for showing the panel
         /// </summary>
-        public override async void ShowPanel()
+        public override void ShowPanel()
         {
-#pragma warning disable CS4014
             isFocused = false;
             foreach (var item in PanelButtonStack.Children)
             {
@@ -294,28 +308,28 @@ namespace TVHome.Views
                 //item.FindByName<Image>("ButtonDimmedImage").ScaleTo(1.0, 300);
             }
 
-            this.TranslateTo(0, 0, 300);
-#pragma warning restore CS4014
-            await this.FadeTo(1, 300);
+            AnimationExtensions.AbortAnimation(this, "PanelAnimation");
+            var currentTranslationY = TranslationY;
+            var currentOpacity = Opacity;
+            var diff = 1 - currentOpacity;
+            Animation animation = new Animation();
+            Animation translateAnimation = new Animation(v => TranslationY = (currentTranslationY * (1 - v)));
+            Animation fadeAnimation = new Animation(v => Opacity = currentOpacity + diff * v);
+            animation.Add(0, 1, translateAnimation);
+            animation.Add(0, 1, fadeAnimation);
+            animation.Commit(this, "PanelAnimation", length: 300);
         }
 
         /// <summary>
         /// A method for handling panel focused event
         /// </summary>
-        public override async void FocusPanel()
+        public override void FocusPanel()
         {
             if (isFocused)
             {
-                if (!isMoveMode)
-                {
-                    OnFocusedCommand.Execute("");
-                }
-
                 return;
             }
 
-            OnFocusedCommand.Execute("");
-
             isFocused = true;
             var button = PanelButtonStack.Children[1];
             button.FindByName<Button>("ButtonFocusArea").Focus();
@@ -326,10 +340,15 @@ namespace TVHome.Views
                 item.FindByName<Image>("ButtonDimmedImage").Opacity = 0;
             }
 
-            await Task.Delay(300);
-#pragma warning disable CS4014
-            this.TranslateTo(0, -selectTransitionHeight, 300);
-#pragma warning restore CS4014
+            AnimationExtensions.AbortAnimation(this, "PanelAnimation");
+            var currentTranslationY = TranslationY;
+            var diff = -selectTransitionHeight - currentTranslationY;
+            DebuggingUtils.Dbg("" + currentTranslationY);
+            DebuggingUtils.Dbg("" + (currentTranslationY + diff));
+            Animation animation = new Animation();
+            Animation translateAnimation = new Animation(v => TranslationY = (currentTranslationY + diff * v));
+            animation.Add(0.5, 1, translateAnimation);
+            animation.Commit(this, "PanelAnimation", length: 600);
         }
 
         /// <summary>
diff --git a/TVHome/TVHome/Views/SubThumbnailPanel.xaml b/TVHome/TVHome/Views/SubThumbnailPanel.xaml
index be5b262..2dfb598 100755
--- a/TVHome/TVHome/Views/SubThumbnailPanel.xaml
+++ b/TVHome/TVHome/Views/SubThumbnailPanel.xaml
@@ -14,11 +14,8 @@
                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}" >
             <StackLayout x:Name="PanelButtonStack"
-                        Orientation="Horizontal"
-                        Padding="{Binding SubThumbNailPanelPadding}"
-                        Spacing="{Binding SubThumbPanelSpacing}"
-                        IsVisible="true">
-            </StackLayout>
+                         Orientation="Horizontal"
+                         IsVisible="true" />
         </ScrollView>
         <RelativeLayout x:Name="NoContentInfo"
                         IsVisible="false"
@@ -34,7 +31,7 @@
                     BorderTop="2"
                     BorderBottom="2"
                     BorderLeft="2"
-                    BorderRight="2"/>
+                    BorderRight="2" />
             <Label x:Name="NoContentInfoText"
                   RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=NoContentInfo ,Property=Height, Factor=0.3}"
                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=NoContentInfo ,Property=Width, Factor=0.354167}"
@@ -44,7 +41,6 @@
                   VerticalTextAlignment="Center"
                   Text="No Content to display"
                   FontFamily="BreezeSans"
-                  FontSize="{Binding NoContentInformationFontSize}"
                   TextColor="White" />
         </RelativeLayout>
     </RelativeLayout>
diff --git a/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs b/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs
index 0e9de65..d0d9275 100755
--- a/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs
+++ b/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs
@@ -19,15 +19,13 @@ using TVHome.Controls;
 using LibTVRefCommonPortable.DataModels;
 using Xamarin.Forms;
 using System.Threading.Tasks;
-using Tizen.Xamarin.Forms.Extension;
 using LibTVRefCommonPortable.Utils;
 using System.Collections.Generic;
 using Xamarin.Forms.PlatformConfiguration.TizenSpecific;
 
 namespace TVHome.Views
 {
-    using System;
-    using System.Threading;
+    using TVHome.ViewModels;
     using Tizen = Xamarin.Forms.PlatformConfiguration.Tizen;
     /// <summary>
     /// SubThumnailPanel in Main Page for Recent
@@ -64,6 +62,7 @@ namespace TVHome.Views
         public SubThumbnailPanel()
         {
             InitializeComponent();
+            InitializeSize();
             isFocused = false;
             PropertyChanged += OnItemsSourcePropertyChanged;
             NoContentInfoText.On<Tizen>().SetFontWeight(FontWeight.Light);
@@ -71,6 +70,14 @@ namespace TVHome.Views
             ButtonList = new List<PanelButton>();
         }
 
+        private void InitializeSize()
+        {
+            PanelButtonStack.Spacing = SizeUtils.GetWidthSizeDouble(27.5);
+            PanelButtonStack.Padding = new Thickness(SizeUtils.GetWidthSize(96), SizeUtils.GetWidthSize(32));
+
+            NoContentInfoText.FontSize = SizeUtils.GetFontSize(28);
+        }
+
         /// <summary>
         /// A method for handling when menu key is pressed
         /// </summary>
@@ -120,6 +127,7 @@ namespace TVHome.Views
                     button.BindingContext = item;
                     button.OnFocusedCommand = new Command(() =>
                     {
+                        ChangeStatusCommand?.Execute(HomeStatus.SubPanelFocused);
                         FocusPanel();
                         if (SizeUtils.GetWidthSize((int)button.X) - SizeUtils.GetWidthSize((int)PanelScrollView.ScrollX) < 0)
                         {
@@ -190,14 +198,12 @@ namespace TVHome.Views
         /// <summary>
         /// A method for hiding the panel
         /// </summary>
-        public override async void HidePanel()
+        public override void HidePanel()
         {
             if (NoContentInfo.IsVisible)
             {
-#pragma warning disable CS4014
-                this.TranslateTo(0, 1, 0);
-#pragma warning restore CS4014
-                await this.FadeTo(0, 0);
+                TranslationY = 0;
+                Opacity = 0;
             }
             else
             {
@@ -206,23 +212,30 @@ namespace TVHome.Views
                 {
                     item.IsEnabled = false;
                 }
-#pragma warning disable CS4014
+
                 PanelScrollView.ScrollToAsync(0, 0, true);
-                this.TranslateTo(0, selectTransitionHeight, 300);
-#pragma warning restore CS4014
-                await this.FadeTo(0, 300);
+                AnimationExtensions.AbortAnimation(this, "PanelAnimation");
+                var currentTranslationY = TranslationY;
+                var diff = selectTransitionHeight - currentTranslationY;
+                var currentOpacity = Opacity;
+                Animation animation = new Animation();
+                Animation translateAnimation = new Animation(v => TranslationY = (currentTranslationY + diff * v));
+                Animation fadeAnimation = new Animation(v => Opacity = currentOpacity * (1 - v));
+                animation.Add(0, 1, translateAnimation);
+                animation.Add(0, 1, fadeAnimation);
+                animation.Commit(this, "PanelAnimation", length: 300);
             }
         }
 
         /// <summary>
         /// A method for showing the panel
         /// </summary>
-        public override async void ShowPanel()
+        public override void ShowPanel()
         {
             if (NoContentInfo.IsVisible)
             {
                 NoContentInfo.IsEnabled = false;
-                await this.FadeTo(1, 0);
+                Opacity = 1;
             }
             else
             {
@@ -232,37 +245,47 @@ namespace TVHome.Views
                     item.IsEnabled = true;
                     item.FindByName<Xamarin.Forms.Image>("ThumnailDimLayer").Opacity = 1;
                 }
-#pragma warning disable CS4014
-                this.TranslateTo(0, 0, 300);
-#pragma warning restore CS4014
-                await this.FadeTo(1, 300);
+
+                AnimationExtensions.AbortAnimation(this, "PanelAnimation");
+                var currentTranslationY = TranslationY;
+                var currentOpacity = Opacity;
+                var diff = 1 - currentOpacity;
+                Animation animation = new Animation();
+                Animation translateAnimation = new Animation(v => TranslationY = (currentTranslationY * (1 - v)));
+                Animation fadeAnimation = new Animation(v => Opacity = currentOpacity + diff * v);
+                animation.Add(0, 1, translateAnimation);
+                animation.Add(0, 1, fadeAnimation);
+                animation.Commit(this, "PanelAnimation", length: 300);
             }
         }
 
         /// <summary>
         /// A method for handling panel focused event
         /// </summary>
-        public override async void FocusPanel()
+        public override void FocusPanel()
         {
             if (isFocused || ShowNoContentsInfo)
             {
                 return;
             }
 
-            OnFocusedCommand.Execute("");
+            isFocused = true;
+
             foreach (var item in PanelButtonStack.Children)
             {
                 item.FindByName<Xamarin.Forms.Image>("ThumnailDimLayer").Opacity = 0;
             }
 
-            isFocused = true;
             var button = PanelButtonStack.Children[0];
             button.FindByName<Button>("ButtonFocusArea").Focus();
 
-            await Task.Delay(300);
-#pragma warning disable CS4014
-            this.TranslateTo(0, -selectTransitionHeight, 300);
-#pragma warning restore CS4014
+            AnimationExtensions.AbortAnimation(this, "PanelAnimation");
+            var currentTranslationY = TranslationY;
+            var diff = -selectTransitionHeight - currentTranslationY;
+            Animation animation = new Animation();
+            Animation translateAnimation = new Animation(v => TranslationY = (currentTranslationY + diff * v));
+            animation.Add(0.5, 1, translateAnimation);
+            animation.Commit(this, "PanelAnimation", length: 600);
         }
 
         /// <summary>
-- 
cgit v1.2.3