From: jjie.choi <jjie.choi@samsung.com>
Date: Wed, 19 Apr 2017 12:15:17 +0000 (+0900)
Subject: Add animation for IamgeTab item focus.
X-Git-Tag: accepted/tizen/unified/20170811.133302~152
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=914a352a7c58cf7afffa3d9f6d530cc4b51444cd;p=profile%2Ftv%2Fapps%2Fdotnet%2Fmediahub.git

Add animation for IamgeTab item focus.

Change-Id: I7993a21e96e76da8ac69aa66555fb2a20143b0b8
Signed-off-by: jjie.choi <jjie.choi@samsung.com>
---

diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/ImageGroup.xaml b/TVMediaHub/TVMediaHub.Tizen/Views/ImageGroup.xaml
index df2ca8b..42d3d27 100644
--- a/TVMediaHub/TVMediaHub.Tizen/Views/ImageGroup.xaml
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/ImageGroup.xaml
@@ -21,9 +21,6 @@
           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.915}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.085}">
         <Grid.RowDefinitions>
-            <RowDefinition Height="1*"/>
-            <RowDefinition Height="1*"/>
-            <RowDefinition Height="1*"/>
         </Grid.RowDefinitions>
     </Grid>
 
diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/ImageGroup.xaml.cs b/TVMediaHub/TVMediaHub.Tizen/Views/ImageGroup.xaml.cs
index b73f95a..d03b75b 100644
--- a/TVMediaHub/TVMediaHub.Tizen/Views/ImageGroup.xaml.cs
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/ImageGroup.xaml.cs
@@ -19,6 +19,7 @@ using System.Collections.Generic;
 using System.ComponentModel;
 using System.Windows.Input;
 using TVMediaHub.Tizen.Models;
+using TVMediaHub.Tizen.Utils;
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
@@ -72,10 +73,14 @@ namespace TVMediaHub.Tizen.Views
             Margin = new Thickness(0, 0, Utils.SizeUtils.GetWidthSize(60), 0);
             GroupTitle.FontSize = Utils.SizeUtils.GetFontSize(30);
             GroupTitle.HeightRequest = Utils.SizeUtils.GetHeightSize(50);
-            GroupContentArea.HeightRequest = Utils.SizeUtils.GetHeightSize(544);
-            GroupContentArea.RowSpacing = Utils.SizeUtils.GetHeightSize(-22);
-            GroupContentArea.ColumnSpacing = Utils.SizeUtils.GetWidthSize(-22);
-            GroupTitle.Margin = new Thickness(Utils.SizeUtils.GetWidthSize(22), 0, 0, 0);
+            GroupContentArea.RowSpacing = Utils.SizeUtils.GetHeightSize(-150);
+            GroupContentArea.ColumnSpacing = Utils.SizeUtils.GetWidthSize(-150);
+            GroupContentArea.RowDefinitions.Add(new RowDefinition { Height = SizeUtils.GetHeightSize(332) });
+            GroupContentArea.RowDefinitions.Add(new RowDefinition { Height = SizeUtils.GetHeightSize(332) });
+            GroupContentArea.RowDefinitions.Add(new RowDefinition { Height = SizeUtils.GetHeightSize(332) });
+
+            GroupContentArea.Margin = new Thickness(SizeUtils.GetWidthSize(-64), SizeUtils.GetHeightSize(-64), SizeUtils.GetWidthSize(-64), SizeUtils.GetHeightSize(-64));
+
         }
 
         public void SetClickCommand(ICommand command)
diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/ImageItem.xaml b/TVMediaHub/TVMediaHub.Tizen/Views/ImageItem.xaml
index 3f9a01d..4c04718 100755
--- a/TVMediaHub/TVMediaHub.Tizen/Views/ImageItem.xaml
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/ImageItem.xaml
@@ -3,52 +3,33 @@
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="TVMediaHub.Tizen.Views.ImageItem"
                 xmlns:Utils="clr-namespace:TVMediaHub.Tizen.Utils"
+                xmlns:Views="clr-namespace:TVMediaHub.Tizen.Views"
                 ImageInfo="{Binding Information}"
                 IsDeleteMode="{Binding IsDeleteStatus}">
-        <Utils:NinePatch x:Name="ImgFocused"
-                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8824}"
-                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8824}"
-                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.0588}"
-                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.0588}"
-                         Source="ic_tizen_media_thumbnail_gradient_focused.9.png"
-                         IsVisible="False"
-                         BorderLeft="10"
-                         BorderTop="10"
-                         BorderRight="10"
-                         BorderBottom="10"/>
+    <Utils:NinePatch x:Name="ImgFocused"
+                     Source="ic_tizen_media_thumbnail_gradient_focused.9.png"
+                     IsVisible="False"/>
+    <Views:CustomImageControl x:Name="ImageArea">
         <Image x:Name="ContentImage"
-               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8824}"
-               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8824}"
-               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.0588}"
-               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.0588}"
-               BackgroundColor="Black"
-               Aspect="Fill"
                Source="{Binding ThumbnailPath}"/>
-        <Utils:NinePatch x:Name="ImgDimmed"
-                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8824}"
-                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8824}"
-                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.0588}"
-                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.0588}"
-                         Source="img_tizen_dimmed_opacity85.9.png"
-                         BorderLeft="10"
-                         BorderTop="10"
-                         BorderRight="10"
-                         BorderBottom="10"
-                         IsVisible="False" />
-        <Image x:Name="ImgCheck"
-               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.471}"
-               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.471}"
-               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.255}"
-               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.255}"
+    </Views:CustomImageControl>
+    <Utils:NinePatch x:Name="ImgDimmed"
+                     Source="img_tizen_dimmed_opacity85.9.png"
+                     IsVisible="False" />
+    <Image x:Name="ImgCheck"
+               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.289}"
+               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.289}"
+               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.355}"
+               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.355}"
                Source="ic_tizen_apps_launcher_pinmark.png"
                IsVisible="False" />
     <Button x:Name="Button"
-                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8235}"
-                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8235}"
-                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1176}"
-                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.1176}"
-                Opacity="0"
-                Clicked="OnItemClicked"
-                Focused="OnItemFocused"
-                Unfocused="OnItemUnfocused"/>
+                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.482}"
+                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.482}"
+                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.229}"
+                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.229}"
+            Opacity="0"
+            Clicked="OnItemClicked"
+            Focused="OnItemFocused"
+            Unfocused="OnItemUnfocused"/>
 </RelativeLayout>
\ No newline at end of file
diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/ImageItem.xaml.cs b/TVMediaHub/TVMediaHub.Tizen/Views/ImageItem.xaml.cs
index f9a914d..dd8bbcf 100755
--- a/TVMediaHub/TVMediaHub.Tizen/Views/ImageItem.xaml.cs
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/ImageItem.xaml.cs
@@ -16,6 +16,7 @@
 
 using System;
 using System.ComponentModel;
+using System.Threading.Tasks;
 using Tizen.Content.MediaContent;
 using TVMediaHub.Tizen.Utils;
 using Xamarin.Forms;
@@ -32,8 +33,18 @@ namespace TVMediaHub.Tizen.Views
             SELECTED,
         };
 
-        private Rectangle NormalBounds;
-        private Rectangle FocusedBounds;
+        private bool IsLoaded = false;
+
+        private Rectangle ImageAreaNormalBounds;
+        private Rectangle ImageAreaFocusedBounds;
+
+        private Rectangle ImageBounds;
+        private Rectangle ImageFocusedBounds;
+
+        private Rectangle ShadowBounds;
+
+        //private Rectangle NormalBounds;
+        //private Rectangle FocusedBounds;
 
         public EventHandler OnFocusedEventHandler;
         public EventHandler OnUnfocusedEventHandler;
@@ -80,15 +91,32 @@ namespace TVMediaHub.Tizen.Views
 
         private void InitializeSize()
         {
-            WidthRequest = SizeUtils.GetHeightSize(204);
-            HeightRequest = SizeUtils.GetHeightSize(204);
+            WidthRequest = SizeUtils.GetHeightSize(332);
+            HeightRequest = SizeUtils.GetHeightSize(332);
+
+
+            ImageBounds = new Rectangle(SizeUtils.GetWidthSize(-76), SizeUtils.GetHeightSize(-76), SizeUtils.GetWidthSize(332), SizeUtils.GetHeightSize(332));
+            ImageFocusedBounds = new Rectangle(SizeUtils.GetWidthSize(-64), SizeUtils.GetHeightSize(-64), SizeUtils.GetWidthSize(332), SizeUtils.GetHeightSize(332));
+
+            ImageAreaNormalBounds = new Rectangle(SizeUtils.GetWidthSize(76), SizeUtils.GetHeightSize(76), SizeUtils.GetWidthSize(180), SizeUtils.GetHeightSize(180));
+            ImageAreaFocusedBounds = new Rectangle(SizeUtils.GetWidthSize(64), SizeUtils.GetHeightSize(64), SizeUtils.GetWidthSize(204), SizeUtils.GetHeightSize(204));
+
+            ShadowBounds = new Rectangle(0, 0, SizeUtils.GetWidthSize(332), SizeUtils.GetHeightSize(332));
+
+            ImgFocused.BorderLeft = SizeUtils.GetWidthSize(20);
+            ImgFocused.BorderRight = SizeUtils.GetWidthSize(20);
+            ImgFocused.BorderTop = SizeUtils.GetHeightSize(20);
+            ImgFocused.BorderBottom = SizeUtils.GetHeightSize(20);
+
+            ImgDimmed.BorderLeft = SizeUtils.GetWidthSize(20);
+            ImgDimmed.BorderRight = SizeUtils.GetWidthSize(20);
+            ImgDimmed.BorderTop = SizeUtils.GetHeightSize(20);
+            ImgDimmed.BorderBottom = SizeUtils.GetHeightSize(20);
 
-            NormalBounds = new Rectangle(SizeUtils.GetWidthSize(12), SizeUtils.GetHeightSize(12), SizeUtils.GetWidthSize(180), SizeUtils.GetHeightSize(180));
-            FocusedBounds = new Rectangle(0, 0, SizeUtils.GetWidthSize(204), SizeUtils.GetHeightSize(204));
 
         }
 
-        private void OnItemClicked(object sender, EventArgs e)
+    private void OnItemClicked(object sender, EventArgs e)
         {
             if (IsDeleteMode)
             {
@@ -167,21 +195,39 @@ namespace TVMediaHub.Tizen.Views
         }
 
 
-        private void OnItemFocused(object sender, FocusEventArgs e)
+        private async void OnItemFocused(object sender, FocusEventArgs e)
         {
-            //ContentImage.LayoutTo(FocusedBounds, 300);
-            //ImgFocused.LayoutTo(FocusedBounds, 300);
-            ContentImage.ScaleTo(1.2, 300);
-            ImgFocused.ScaleTo(1.15, 300);
+            IsLoaded = true;
             OnFocusedEventHandler?.Invoke(sender, e);
+            await Task.Delay(167);
+#pragma warning disable CS4014
+            ContentImage.ScaleTo(1.3, 167);
+            ImgFocused.LayoutTo(ImageAreaFocusedBounds, 500);
+            ContentImage.LayoutTo(ImageFocusedBounds, 500);
+#pragma warning restore CS4014
+            await ImageArea.LayoutTo(ImageAreaFocusedBounds, 500);
         }
-        private void OnItemUnfocused(object sender, FocusEventArgs e)
+        private async void OnItemUnfocused(object sender, FocusEventArgs e)
         {
-            //ContentImage.LayoutTo(NormalBounds, 300);
-            //ImgFocused.LayoutTo(NormalBounds, 300);
-            ContentImage.ScaleTo(1.0, 300);
-            ImgFocused.ScaleTo(1.0, 300);
+            IsLoaded = true;
             OnFocusedEventHandler?.Invoke(sender, e);
+#pragma warning disable CS4014
+            ContentImage.ScaleTo(1.0, 167);
+            ImgFocused.LayoutTo(ImageAreaNormalBounds, 167);
+            ContentImage.LayoutTo(ImageBounds, 167);
+#pragma warning restore CS4014
+            await ImageArea.LayoutTo(ImageAreaNormalBounds, 167);
+        }
+
+        protected override void LayoutChildren(double x, double y, double width, double height)
+        {
+            base.LayoutChildren(x, y, width, height);
+            if (IsLoaded == false)
+            {
+                ImageArea.Layout(ImageAreaNormalBounds);
+                ContentImage.Layout(ImageBounds);
+                ImgFocused.Layout(ImageAreaNormalBounds);
+            }
         }
     }
 }
diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/ImageTab.xaml.cs b/TVMediaHub/TVMediaHub.Tizen/Views/ImageTab.xaml.cs
index cbcc4f7..7216e31 100755
--- a/TVMediaHub/TVMediaHub.Tizen/Views/ImageTab.xaml.cs
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/ImageTab.xaml.cs
@@ -174,7 +174,7 @@ namespace TVMediaHub.Tizen.Views
 
         private void InitializeSize()
         {
-            ImageTabScrollView.Margin = new Thickness(Utils.SizeUtils.GetWidthSize(96), Utils.SizeUtils.GetHeightSize(74), 0, Utils.SizeUtils.GetHeightSize(84));
+            ImageTabScrollView.Margin = new Thickness(Utils.SizeUtils.GetWidthSize(96), Utils.SizeUtils.GetHeightSize(74), 0, 0);
         }
 
         private void GetImageData()
diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/VideoGroup.xaml.cs b/TVMediaHub/TVMediaHub.Tizen/Views/VideoGroup.xaml.cs
index 5217bd1..6069d37 100644
--- a/TVMediaHub/TVMediaHub.Tizen/Views/VideoGroup.xaml.cs
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/VideoGroup.xaml.cs
@@ -73,8 +73,8 @@ namespace TVMediaHub.Tizen.Views
 
             GroupContentArea.Margin = new Thickness(SizeUtils.GetWidthSize(-64), SizeUtils.GetHeightSize(-64), SizeUtils.GetWidthSize(-64), SizeUtils.GetHeightSize(-64));
 
-            GroupContentArea.RowSpacing = -150.0;
-            GroupContentArea.ColumnSpacing = -150.0;
+            GroupContentArea.RowSpacing = SizeUtils.GetWidthSize(-150);
+            GroupContentArea.ColumnSpacing = SizeUtils.GetWidthSize(-150);
         }
 
         private void VideoGroupPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)