From: Heonjae Jang <heonjae.jang@samsung.com>
Date: Fri, 3 Mar 2017 07:46:15 +0000 (+0900)
Subject: Change Panel and Panel Buttons
X-Git-Tag: submit/tizen/20170808.015446~222
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=5e3463be4e590be995d77d8ff83be8f5da40faf5;p=profile%2Ftv%2Fapps%2Fdotnet%2Fhome.git

Change Panel and Panel Buttons
1. Create Abstract Class "Panel"
2. ~Panel Generalize Panel
3. Change Animation Panel, Panel Buttons

Change-Id: I48d3ebbf9b9ba44699bed2fc511e889a8df4e368
---

diff --git a/TVHome/TVHome/Controls/SubPanelButton.xaml b/TVHome/TVHome/Controls/SubPanelButton.xaml
index 5da7f34..d238c9d 100644
--- a/TVHome/TVHome/Controls/SubPanelButton.xaml
+++ b/TVHome/TVHome/Controls/SubPanelButton.xaml
@@ -3,7 +3,7 @@
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       xmlns:Controls="clr-namespace:TVHome.Controls"
                       x:Class="TVHome.Controls.SubPanelButton">
-    <RelativeLayout Opacity="0.3">
+    <RelativeLayout Opacity="0.38">
         <BoxView x:Name = "ButtonBox"
                  RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                  RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.94}"
@@ -20,7 +20,7 @@
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.94}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8}"
-               Opacity="0"
+               Opacity="0.5"
                TextColor="White"
                LineBreakMode="TailTruncation"
                HorizontalTextAlignment="Center"
diff --git a/TVHome/TVHome/Controls/SubPanelButton.xaml.cs b/TVHome/TVHome/Controls/SubPanelButton.xaml.cs
index 5d18a81..bf923c3 100644
--- a/TVHome/TVHome/Controls/SubPanelButton.xaml.cs
+++ b/TVHome/TVHome/Controls/SubPanelButton.xaml.cs
@@ -38,7 +38,7 @@ namespace TVHome.Controls
                 OnClickedCommand.Execute("");
             }
 
-            await View.FadeTo(0.9, 300);
+            await View.FadeTo(0.99, 300);
         }
 
         public override async void OnFocused(object sender, FocusEventArgs e)
@@ -50,17 +50,18 @@ namespace TVHome.Controls
 
 #pragma warning disable CS4014
             ButtonTitle.FadeTo(0.8, 300);
-            ButtonTitle.FadeTo(0.99, 300);
+            View.FadeTo(0.8, 300);
 #pragma warning restore CS4014
-            await View.FadeTo(0.6, 300);
+            await View.ScaleTo(1.3, 300);
         }
 
         public override async void OnUnfocused(object sender, FocusEventArgs e)
         {
 #pragma warning disable CS4014
-            ButtonTitle.FadeTo(0, 300);
+            ButtonTitle.FadeTo(0.6, 300);
+            View.FadeTo(0.6, 300);
 #pragma warning restore CS4014
-            await View.FadeTo(0.3, 300);
+            await View.ScaleTo(1, 300);
         }
     }
 }
\ No newline at end of file
diff --git a/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml.cs b/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml.cs
index 8a3ce27..5e81e77 100644
--- a/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml.cs
+++ b/TVHome/TVHome/Controls/SubPanelThumbnailButton.xaml.cs
@@ -63,9 +63,9 @@ namespace TVHome.Controls
             //Animation.Commit(ThumbnailTitle, "FocusedAnimation", 16, 300);
 
 #pragma warning disable CS4014
-            ThumbnailTitle.FadeTo(0.99, 300);
+            ThumbnailTitle.FadeTo(0.8, 300);
 #pragma warning restore CS4014
-            await View.FadeTo(0.6, 300);
+            await View.FadeTo(0.8, 300);
         }
 
         public override async void OnUnfocused(object sender, FocusEventArgs e)
@@ -85,9 +85,9 @@ namespace TVHome.Controls
             //Animation.Commit(ThumbnailTitle, "UnfocusedAnimation", 16, 300);
 
 #pragma warning disable CS4014
-            ThumbnailTitle.FadeTo(0, 300);
+            ThumbnailTitle.FadeTo(0.6, 300);
 #pragma warning restore CS4014
-            await View.FadeTo(0.3, 300);
+            await View.FadeTo(0.6, 300);
         }
     }
 }
\ No newline at end of file
diff --git a/TVHome/TVHome/Models/SettingShortcutFactory.cs b/TVHome/TVHome/Models/SettingShortcutFactory.cs
index e9aaed3..00edc96 100644
--- a/TVHome/TVHome/Models/SettingShortcutFactory.cs
+++ b/TVHome/TVHome/Models/SettingShortcutFactory.cs
@@ -41,7 +41,7 @@ namespace TVHome.Models
                                 new StateDescription
                                 {
                                     Label = "WiFi ON",
-                                    IconPath = "wifion.png",
+                                    IconPath = "AppIcon.png",
                                     Action = new WiFiOffAction(),
                                 }
                             },
@@ -50,7 +50,7 @@ namespace TVHome.Models
                                 new StateDescription
                                 {
                                     Label = "WiFi OFF",
-                                    IconPath = "wifioff.png",
+                                    IconPath = "AppIcon.png",
                                     Action = new WiFiOnAction(),
                                 }
                             },
@@ -59,7 +59,7 @@ namespace TVHome.Models
                                 new StateDescription
                                 {
                                     Label = "WiFi Launch",
-                                    IconPath = "wifilaunch.png",
+                                    IconPath = "AppIcon.png",
                                     Action = new WiFiLaunchAction(),
                                 }
                             },
@@ -78,7 +78,7 @@ namespace TVHome.Models
                                 new StateDescription
                                 {
                                     Label = "BT ON",
-                                    IconPath = "bton.png",
+                                    IconPath = "AppIcon.png",
                                     Action = new BTOffAction(),
                                 }
                             },
@@ -87,7 +87,7 @@ namespace TVHome.Models
                                 new StateDescription
                                 {
                                     Label = "BT OFF",
-                                    IconPath = "btoff.png",
+                                    IconPath = "AppIcon.png",
                                     Action = new BTOnAction(),
                                 }
                             },
@@ -96,7 +96,7 @@ namespace TVHome.Models
                                 new StateDescription
                                 {
                                     Label = "BT Launch",
-                                    IconPath = "btlaunch.png",
+                                    IconPath = "AppIcon.png",
                                     Action = new BTLaunchAction(),
                                 }
                             },
diff --git a/TVHome/TVHome/TVHome.csproj b/TVHome/TVHome/TVHome.csproj
index ad71daf..fe007c3 100644
--- a/TVHome/TVHome/TVHome.csproj
+++ b/TVHome/TVHome/TVHome.csproj
@@ -93,9 +93,13 @@
     <Compile Include="Views\MainPanel.xaml.cs">
       <DependentUpon>MainPanel.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\Panel.cs" />
     <Compile Include="Views\SubPanel.xaml.cs">
       <DependentUpon>SubPanel.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\SubThumbnailPanel.xaml.cs">
+      <DependentUpon>SubThumbnailPanel.xaml</DependentUpon>
+    </Compile>
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="Views\MainPanel.xaml">
@@ -152,6 +156,12 @@
       <SubType>Designer</SubType>
     </None>
   </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="Views\SubThumbnailPanel.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+      <SubType>Designer</SubType>
+    </EmbeddedResource>
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\Portable\$(TargetFrameworkVersion)\Microsoft.Portable.CSharp.targets" />
   <Import Project="..\..\packages\Xamarin.Forms.2.3.3.193\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets" Condition="Exists('..\..\packages\Xamarin.Forms.2.3.3.193\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets')" />
   <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
diff --git a/TVHome/TVHome/Views/MainPage.xaml b/TVHome/TVHome/Views/MainPage.xaml
index 5415809..9f4169e 100755
--- a/TVHome/TVHome/Views/MainPage.xaml
+++ b/TVHome/TVHome/Views/MainPage.xaml
@@ -30,22 +30,22 @@
                              RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.390625}"
                              ItemsSource="{Binding MainList}"/>
 
-            <Views:SubPanel x:Name="RecentSubPanel"
-                            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.18}"
+            <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.94}"
+                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.89}"
                             ItemsSource="{Binding RecentList}" >
-                <Views:SubPanel.ItemTemplate>
+                <Views:SubThumbnailPanel.ItemTemplate>
                     <DataTemplate>
                         <Controls:SubPanelThumbnailButton/>
                     </DataTemplate>
-                </Views:SubPanel.ItemTemplate>
-            </Views:SubPanel>
+                </Views:SubThumbnailPanel.ItemTemplate>
+            </Views:SubThumbnailPanel>
 
             <Views:SubPanel x:Name="AppsSubPanel"
-                            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.18}"
+                            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.94}"
+                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.89}"
                             ItemsSource="{Binding AppList}">
                 <Views:SubPanel.ItemTemplate>
                     <DataTemplate>
@@ -55,9 +55,9 @@
             </Views:SubPanel>
 
             <Views:SubPanel x:Name="SettingsSubPanel"
-                            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.18}"
+                            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.94}"
+                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.89}"
                             ItemsSource="{Binding SettingsList}">
                 <Views:SubPanel.ItemTemplate>
                     <DataTemplate>
diff --git a/TVHome/TVHome/Views/MainPage.xaml.cs b/TVHome/TVHome/Views/MainPage.xaml.cs
index 45ff941..6747528 100644
--- a/TVHome/TVHome/Views/MainPage.xaml.cs
+++ b/TVHome/TVHome/Views/MainPage.xaml.cs
@@ -31,17 +31,18 @@ namespace TVHome.Views
     public partial class MainPage : ContentPage
     {
 
-        private Dictionary<string, SubPanel> SubPanelDictionary;
-        private SubPanel currentSubPanel;
+        private Dictionary<string, Panel> SubPanelDictionary;
+        private Panel currentSubPanel;
         public ICommand ChangeSubPanelCommand;
 
         public MainPage()
         {
             InitializeComponent();
-            SubPanelDictionary = new Dictionary<string, SubPanel>();
+            SubPanelDictionary = new Dictionary<string, Panel>();
             SubPanelDictionary.Add("Recent", RecentSubPanel);
             SubPanelDictionary.Add("Apps", AppsSubPanel);
             SubPanelDictionary.Add("Settings", SettingsSubPanel);
+
             PageMainPanel.OnFocusedCommand = new Command<string>((key) =>
             {
                 DebuggingUtils.Dbg("MainPage : " + key);
@@ -53,6 +54,21 @@ namespace TVHome.Views
                 currentSubPanel = SubPanelDictionary[key];
                 currentSubPanel.ShowPanel();
             });
+
+            RecentSubPanel.OnFocusedCommand = new Command(() =>
+            {
+                PageMainPanel.SelectPanel();
+            });
+
+            AppsSubPanel.OnFocusedCommand = new Command(() =>
+            {
+                PageMainPanel.SelectPanel();
+            });
+
+            SettingsSubPanel.OnFocusedCommand = new Command(() =>
+            {
+                PageMainPanel.SelectPanel();
+            });
         }
 
         private void OnAppearing(object sender, EventArgs e)
diff --git a/TVHome/TVHome/Views/MainPanel.xaml b/TVHome/TVHome/Views/MainPanel.xaml
index 096191c..b881fff 100644
--- a/TVHome/TVHome/Views/MainPanel.xaml
+++ b/TVHome/TVHome/Views/MainPanel.xaml
@@ -1,14 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
+<Views:Panel xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:Views="clr-namespace:TVHome.Views"
              x:Class="TVHome.Views.MainPanel">
-    <ContentView.Content>
-        <Grid x:Name="PanelButtonGrid">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="1*" />
-                <ColumnDefinition Width="1*" />
-                <ColumnDefinition Width="1*" />
-            </Grid.ColumnDefinitions>
-        </Grid>
-    </ContentView.Content>
-</ContentView>
\ No newline at end of file
+    <Grid x:Name="PanelButtonGrid">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="1*" />
+            <ColumnDefinition Width="1*" />
+            <ColumnDefinition Width="1*" />
+        </Grid.ColumnDefinitions>
+    </Grid>
+</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 e4ff6ad..527e92e 100644
--- a/TVHome/TVHome/Views/MainPanel.xaml.cs
+++ b/TVHome/TVHome/Views/MainPanel.xaml.cs
@@ -29,24 +29,8 @@ namespace TVHome.Views
     /// <summary>
     /// Main Panel in Main Page
     /// </summary>
-    public partial class MainPanel : ContentView
+    public partial class MainPanel : Panel
     {
-        public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create("ItemsSource", typeof(IEnumerable<ShortcutInfo>), typeof(MainPanel));
-
-        public IEnumerable<ShortcutInfo> ItemsSource
-        {
-            get { return (IEnumerable<ShortcutInfo>)GetValue(ItemsSourceProperty); }
-            set { SetValue(ItemsSourceProperty, value); }
-        }
-
-        public static readonly BindableProperty OnFocusedCommandProperty = BindableProperty.Create("OnFocusedCommand", typeof(ICommand), typeof(MainPanel));
-
-        public ICommand OnFocusedCommand
-        {
-            get { return (ICommand)GetValue(OnFocusedCommandProperty); }
-            set { SetValue(OnFocusedCommandProperty, value); }
-        }
-
         public MainPanel()
         {
             InitializeComponent();
@@ -68,6 +52,7 @@ namespace TVHome.Views
                 button.View.BindingContext = item;
                 button.OnFocusedCommand = new Command(() =>
                 {
+                    FocusPanel();
                     OnFocusedCommand.Execute(item.StateDescriptions["default"].Label);
                 });
                 button.OnClickedCommand = new Command(() =>
@@ -80,8 +65,28 @@ namespace TVHome.Views
 
         public void InitialFocusing()
         {
-            var button = PanelButtonGrid.Children[1] as RelativeLayout;
+            var button = PanelButtonGrid.Children[1];
             button.FindByName<Button>("ButtonFocusArea").Focus();
         }
+
+        public override async void FocusPanel()
+        {
+            await PanelButtonGrid.TranslateTo(0, 0);
+        }
+
+        public override async void HidePanel()
+        {
+            await PanelButtonGrid.ScaleTo(0, 0);
+        }
+
+        public async void SelectPanel()
+        {
+            await PanelButtonGrid.TranslateTo(0, -78);
+        }
+
+        public override async void ShowPanel()
+        {
+            await PanelButtonGrid.ScaleTo(1, 0);
+        }
     }
 }
\ No newline at end of file
diff --git a/TVHome/TVHome/Views/Panel.cs b/TVHome/TVHome/Views/Panel.cs
new file mode 100644
index 0000000..6a31850
--- /dev/null
+++ b/TVHome/TVHome/Views/Panel.cs
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * 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.Collections.Generic;
+using System.ComponentModel;
+using System.Windows.Input;
+using TVHome.DataModels;
+using Xamarin.Forms;
+
+namespace TVHome.Views
+{
+    public abstract class Panel : ContentView
+    {
+        public static readonly BindableProperty OnFocusedCommandProperty = BindableProperty.Create("OnFocusedCommand", typeof(ICommand), typeof(MainPanel));
+
+        public ICommand OnFocusedCommand
+        {
+            get { return (ICommand)GetValue(OnFocusedCommandProperty); }
+            set { SetValue(OnFocusedCommandProperty, value); }
+        }
+
+        public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create("ItemsSource", typeof(IEnumerable<ShortcutInfo>), typeof(MainPanel));
+
+        public IEnumerable<ShortcutInfo> ItemsSource
+        {
+            get { return (IEnumerable<ShortcutInfo>)GetValue(ItemsSourceProperty); }
+            set { SetValue(ItemsSourceProperty, value); }
+        }
+
+        public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(SubPanel));
+
+        public DataTemplate ItemTemplate
+        {
+            get { return (DataTemplate)GetValue(ItemTemplateProperty); }
+            set { SetValue(ItemTemplateProperty, value); }
+        }
+
+        public bool isFocused;
+
+        public abstract void FocusPanel();
+        public abstract void HidePanel();
+        public abstract void ShowPanel();
+    }
+}
diff --git a/TVHome/TVHome/Views/SubPanel.xaml b/TVHome/TVHome/Views/SubPanel.xaml
index 4256e65..ea4d1c1 100644
--- a/TVHome/TVHome/Views/SubPanel.xaml
+++ b/TVHome/TVHome/Views/SubPanel.xaml
@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
+<Views:Panel xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:Views="clr-namespace:TVHome.Views"
              x:Class="TVHome.Views.SubPanel">
-    <ContentView.Content>
-        <ScrollView x:Name="PanelScrollView"
-                    Orientation="Horizontal"
-                    HorizontalOptions="Center">
-            <StackLayout x:Name="PanelButtonStack"
-                         Orientation="Horizontal"
-                         Padding="96,0,96,0">
-            </StackLayout>
-        </ScrollView>
-    </ContentView.Content>
-</ContentView>
\ No newline at end of file
+    <ScrollView x:Name="PanelScrollView"
+                Orientation="Horizontal"
+                HorizontalOptions="Center">
+        <StackLayout x:Name="PanelButtonStack"
+                     Orientation="Horizontal"
+                     Padding="96,28,96,28"
+                     Spacing="78">
+        </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 c067d11..97053cb 100644
--- a/TVHome/TVHome/Views/SubPanel.xaml.cs
+++ b/TVHome/TVHome/Views/SubPanel.xaml.cs
@@ -29,26 +29,8 @@ namespace TVHome.Views
     /// <summary>
     /// Sub Panel in Main Page
     /// </summary>
-    public partial class SubPanel : ContentView
+    public partial class SubPanel : Panel
     {
-        public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create("ItemsSource", typeof(IEnumerable<ShortcutInfo>), typeof(SubPanel));
-
-        public IEnumerable<ShortcutInfo> ItemsSource
-        {
-            get { return (IEnumerable<ShortcutInfo>)GetValue(ItemsSourceProperty); }
-            set { SetValue(ItemsSourceProperty, value); }
-        }
-
-        public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(SubPanel));
-
-        public DataTemplate ItemTemplate
-        {
-            get { return (DataTemplate)GetValue(ItemTemplateProperty); }
-            set { SetValue(ItemTemplateProperty, value); }
-        }
-
-        private bool isFocused;
-
         public SubPanel()
         {
             InitializeComponent();
@@ -64,7 +46,6 @@ namespace TVHome.Views
             }
 
             PanelButtonStack.Children.Clear();
-
             foreach (ShortcutInfo item in ItemsSource)
             {
                 var button = ItemTemplate.CreateContent() as PanelButton;
@@ -83,7 +64,7 @@ namespace TVHome.Views
             HidePanel();
         }
 
-        public async void HidePanel()
+        public override async void HidePanel()
         {
             isFocused = false;
             foreach (var item in PanelButtonStack.Children)
@@ -98,7 +79,7 @@ namespace TVHome.Views
             await this.FadeTo(0, 0);
         }
 
-        public async void ShowPanel()
+        public override async void ShowPanel()
         {
             isFocused = false;
             foreach (var item in PanelButtonStack.Children)
@@ -112,15 +93,17 @@ namespace TVHome.Views
             await this.FadeTo(0.3, 0);
         }
 
-        public async void FocusPanel()
+        public override async void FocusPanel()
         {
             if (isFocused)
             {
                 return;
             }
 
+            OnFocusedCommand.Execute("");
+
             isFocused = true;
-            var button = PanelButtonStack.Children[1] as RelativeLayout;
+            var button = PanelButtonStack.Children[1];
             button.FindByName<Button>("ButtonFocusArea").Focus();
 
 #pragma warning disable CS4014
diff --git a/TVHome/TVHome/Views/SubThumbnailPanel.xaml b/TVHome/TVHome/Views/SubThumbnailPanel.xaml
new file mode 100644
index 0000000..2dcd243
--- /dev/null
+++ b/TVHome/TVHome/Views/SubThumbnailPanel.xaml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Views:Panel xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:Views="clr-namespace:TVHome.Views"
+             x:Class="TVHome.Views.SubThumbnailPanel">
+    <ScrollView x:Name="PanelScrollView"
+                Orientation="Horizontal"
+                HorizontalOptions="Center">
+        <StackLayout x:Name="PanelButtonStack"
+                     Orientation="Horizontal"
+                     Padding="96,18,96,18">
+        </StackLayout>
+    </ScrollView>
+</Views:Panel>
\ No newline at end of file
diff --git a/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs b/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs
new file mode 100644
index 0000000..459a7b3
--- /dev/null
+++ b/TVHome/TVHome/Views/SubThumbnailPanel.xaml.cs
@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * 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.Collections.Generic;
+using System.Windows.Input;
+using System.ComponentModel;
+using TVHome.Controls;
+using TVHome.DataModels;
+using TVHome.ViewModels;
+using Xamarin.Forms;
+using TVHome.Utils;
+
+namespace TVHome.Views
+{
+    /// <summary>
+    /// Sub Panel in Main Page
+    /// </summary>
+    public partial class SubThumbnailPanel : Panel
+    {
+        public SubThumbnailPanel()
+        {
+            InitializeComponent();
+            isFocused = false;
+            PropertyChanged += OnItemsSourcePropertyChanged;
+        }
+
+        private void OnItemsSourcePropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName != "ItemsSource")
+            {
+                return;
+            }
+
+            PanelButtonStack.Children.Clear();
+            foreach (ShortcutInfo item in ItemsSource)
+            {
+                var button = ItemTemplate.CreateContent() as PanelButton;
+                button.View.BindingContext = item;
+                button.OnFocusedCommand = new Command(() =>
+                {
+                    FocusPanel();
+                });
+                button.OnClickedCommand = new Command(() =>
+                {
+                    item.DoAction();
+                });
+                PanelButtonStack.Children.Add(button.View);
+            }
+
+            HidePanel();
+        }
+
+        public override async void HidePanel()
+        {
+            isFocused = false;
+            foreach (var item in PanelButtonStack.Children)
+            {
+                item.IsEnabled = false;
+            }
+
+#pragma warning disable CS4014
+            PanelScrollView.ScrollToAsync(0, 0, true);
+            this.TranslateTo(0, 1, 0);
+#pragma warning restore CS4014
+            await this.FadeTo(0, 0);
+        }
+
+        public override async void ShowPanel()
+        {
+            isFocused = false;
+            foreach (var item in PanelButtonStack.Children)
+            {
+                item.IsEnabled = true;
+            }
+
+#pragma warning disable CS4014
+            this.TranslateTo(0, 0, 0);
+#pragma warning restore CS4014
+            await this.FadeTo(0.3, 0);
+        }
+
+        public override async void FocusPanel()
+        {
+            if (isFocused)
+            {
+                return;
+            }
+
+            OnFocusedCommand.Execute("");
+
+            isFocused = true;
+            var button = PanelButtonStack.Children[1];
+            button.FindByName<Button>("ButtonFocusArea").Focus();
+
+#pragma warning disable CS4014
+            this.TranslateTo(0, -140, 300);
+#pragma warning restore CS4014
+            await this.FadeTo(0.99, 300);
+        }
+    }
+}
\ No newline at end of file