Modify Apps icon animation when icon is focused for demo

Change-Id: Ia2ee17c41fcfa32bd4b940ce229ef55e2d8cb9f8
Signed-off-by: Hyerim Kim <rimi.kim@samsung.com>

diff --git a/TVApps/TVApps/Controls/AppItemCell.xaml b/TVApps/TVApps/Controls/AppItemCell.xaml
old mode 100644 (file)
new mode 100755 (executable)
index c72977f..622b938
--- a/TVApps/TVApps/Controls/AppItemCell.xaml
+++ b/TVApps/TVApps/Controls/AppItemCell.xaml
@@ -2,29 +2,40 @@
 <ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="TVApps.Controls.AppItemCell">
-  <AbsoluteLayout Margin="13,13,13,13">
-    <Button x:Name="ItemBackgroundButton"
-            Opacity="0"
-            AbsoluteLayout.LayoutBounds="0,0,210,290"/>
-    <BoxView x:Name="ItemBackgroundBox"
-             AbsoluteLayout.LayoutBounds="0,0,210,290"
-             Color="{Binding IconColor}"/>
-    <Grid AbsoluteLayout.LayoutBounds="10,10,190,270">
-      <Grid.RowDefinitions>
-        <RowDefinition Height="4*" />
-        <RowDefinition Height="1*" />
-      </Grid.RowDefinitions>
-      <Grid.RowSpacing>0</Grid.RowSpacing>
-      <Grid.ColumnSpacing>0</Grid.ColumnSpacing>
-      <Image Grid.Row="0"
-               Grid.Column="0"
-               Source="{Binding IconUrl}"/>
-      <Label Grid.Row="1"
-             Grid.Column="0"
-             TextColor="#FFFFFF"
-             HorizontalTextAlignment="Center"
-             Text="{Binding Title}"
-             FontSize="40"/>
-    </Grid>
-  </AbsoluteLayout>
+  <RelativeLayout BackgroundColor="#000000">
+    <BoxView x:Name="ButtonBox"
+             WidthRequest="240"
+             HeightRequest="266"
+             Opacity="0"/>
+    <Image x:Name="ButtonImage"
+          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.6165}"
+          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.6833}"
+          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.0977}"
+          RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.1583}"
+          Source="{Binding IconUrl}" />
+    <Label x:Name="ButtonTitle"
+           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.78195}"
+           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.1167}"
+           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.7667}"
+           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.1203}"
+           Opacity="1"
+           FontSize="58"
+           TextColor="White"
+           LineBreakMode="TailTruncation"
+           HorizontalTextAlignment="Center"
+           Text="{Binding Title}" />
+      <Image x:Name="PinnedIcon"
+          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.075}"
+          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0.075}"
+          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.78195}"
+          RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonTitle, Property=Width, Factor=0}"
+          Source="{Binding IconUrl}"
+          Opacity="0"/>
+      <Button x:Name = "ButtonFocusArea"
+            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
+            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
+            Focused="OnFocused"
+            Unfocused="OnUnFocused"
+            Opacity="0" />
+  </RelativeLayout>
 </ViewCell>

diff --git a/TVApps/TVApps/Controls/AppItemCell.xaml.cs b/TVApps/TVApps/Controls/AppItemCell.xaml.cs
old mode 100644 (file)
new mode 100755 (executable)
index 18b0e2c..f132bd6
--- a/TVApps/TVApps/Controls/AppItemCell.xaml.cs
+++ b/TVApps/TVApps/Controls/AppItemCell.xaml.cs
@@ -26,34 +26,21 @@ namespace TVApps.Controls
     /// </summary>
     public partial class AppItemCell : ViewCell
     {
-        Color itemBackgroundColor;
         public AppItemCell()
         {
-            Random r = new Random();
             InitializeComponent();
-            itemBackgroundColor = Color.Default;
-            ItemBackgroundBox.PropertyChanged += OnItemBackgroundColorChange;
-            ItemBackgroundButton.Focused += ItemButton_Focused;
-            ItemBackgroundButton.Unfocused += ItemButton_Unfocused;
         }
 
-        private void OnItemBackgroundColorChange(object sender, PropertyChangedEventArgs e)
+        private void OnFocused(object sender, EventArgs e)
         {
-            if (e.PropertyName == "Color")
-            {
-                itemBackgroundColor = ItemBackgroundBox.Color;
-                ItemBackgroundBox.PropertyChanged -= OnItemBackgroundColorChange;
-            }
+            ButtonImage.ScaleTo(1.32, 300);
+            ButtonTitle.TranslateTo(0, 26, 300);
         }
 
-        private void ItemButton_Focused(object sender, FocusEventArgs e)
+        private void OnUnFocused(object sender, EventArgs e)
         {
-            ItemBackgroundBox.Color = Color.Blue;
-        }
-
-        private void ItemButton_Unfocused(object sender, FocusEventArgs e)
-        {
-            ItemBackgroundBox.Color = itemBackgroundColor;
+            ButtonImage.ScaleTo(1.0, 300);
+            ButtonTitle.TranslateTo(0, 0, 300);
         }
     }
 }

diff --git a/TVApps/TVApps/Controls/AppListView.xaml b/TVApps/TVApps/Controls/AppListView.xaml
old mode 100644 (file)
new mode 100755 (executable)
index 2ff16fd..71e66b0
--- a/TVApps/TVApps/Controls/AppListView.xaml
+++ b/TVApps/TVApps/Controls/AppListView.xaml
@@ -18,11 +18,11 @@
   </Controls:AppListView.ItemTemplate>
 
   <Grid x:Name="AppListGrid"
-        HorizontalOptions="Start"
-        Padding="60,60,60,60">
+        HorizontalOptions="Start">
     <Grid.RowDefinitions>
-      <RowDefinition Height="1*" />
-      <RowDefinition Height="1*" />
+      <RowDefinition Height="4863*" />
+      <RowDefinition Height="274*" />
+      <RowDefinition Height="4863*" />
     </Grid.RowDefinitions>
     <Grid.RowSpacing>0</Grid.RowSpacing>
     <Grid.ColumnSpacing>0</Grid.ColumnSpacing>
@@ -32,8 +32,9 @@
                  Orientation="Horizontal"
                  HorizontalOptions="Start"
                  Spacing="0"/>
+    <BoxView Grid.Row="1"/>
     <StackLayout x:Name="AppLowerList"
-                 Grid.Row="1"
+                 Grid.Row="2"
                  Orientation="Horizontal"
                  HorizontalOptions="Start"
                  Spacing="0"/>

diff --git a/TVApps/TVApps/Views/MainPage.xaml b/TVApps/TVApps/Views/MainPage.xaml
old mode 100644 (file)
new mode 100755 (executable)
index 8e33a02..35c2b20
--- a/TVApps/TVApps/Views/MainPage.xaml
+++ b/TVApps/TVApps/Views/MainPage.xaml
@@ -37,8 +37,8 @@
     <Grid.RowDefinitions>
       <RowDefinition Height="2685*" />
       <RowDefinition Height="83*" />
-      <RowDefinition Height="5964*" />
-      <RowDefinition Height="83*" />
+      <RowDefinition Height="5074*" />
+      <RowDefinition Height="0981*" />
       <RowDefinition Height="1185*" />
     </Grid.RowDefinitions>
     <Grid.RowSpacing>0</Grid.RowSpacing>