TV Apps - Change layout, animation properties in Apps List, AppItemCell
authorHeonjae Jang <heonjae.jang@samsung.com>
Mon, 27 Mar 2017 08:50:55 +0000 (17:50 +0900)
committerChulSeung Kim <charles0.kim@samsung.com>
Thu, 8 Jun 2017 09:34:50 +0000 (18:34 +0900)
Change-Id: I86011efa4be94250c2aec4528657102562a69cde

TVApps/TVApps/Controls/AppItemCell.xaml
TVApps/TVApps/Controls/AppItemCell.xaml.cs
TVApps/TVApps/Controls/AppListView.xaml
TVApps/TVApps/Controls/NinePatchImage.xaml.cs
TVApps/TVApps/Controls/TVButton.xaml.cs
TVHome/TVHome.TizenTV/bin/Debug/TVHome.TizenTV.tpk

index dd81677c72504ad8c2b683bb3638825815e5383e..f5fd525051ae3f6edaa9737a3c7f10da7814de63 100755 (executable)
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           x:Class="TVApps.Controls.AppItemCell">
 
-  <RelativeLayout BackgroundColor="#000000"
-             HeightRequest="793"
-             WidthRequest="557">
-    <Image x:Name="ButtonImage"
-           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4795}"
-           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6833}"
-           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2923}"
-           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.1583}"
-           Source="{Binding CurrentStateDescription.IconPath}" />
-    <Image x:Name="DimImage"
-           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonImage, Property=Height, Factor=1}"
-           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonImage, Property=Width, Factor=1}"
-           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2923}"
-           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.1583}"
-           Source="img_tizen_apps_list_dimmed_check.png"
-           Opacity="0"
-           Scale="0" />
-    <Image x:Name="CheckImage"
-           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonImage, Property=Height, Factor=0.5853}"
-           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonImage, Property=Width, Factor=0.5853}"
-           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.3918}"
-           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3}"
-           Source="ic_tizen_apps_launcher_pinmark.png"
-           Opacity="0" />
-    <Grid x:Name="TextArea"
-          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.1333}"
-          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
-          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8245}">
-      <Grid.RowDefinitions>
-        <RowDefinition Height="6*" />
-        <RowDefinition Height="18*" />
-        <RowDefinition Height="8*" />
-      </Grid.RowDefinitions>
-      <Grid.ColumnDefinitions>
-        <ColumnDefinition Width="*" />
-        <ColumnDefinition Width="42" />
-        <ColumnDefinition Width="Auto" />
-        <ColumnDefinition Width="42" />
-        <ColumnDefinition Width="*" />
-      </Grid.ColumnDefinitions>
-      <Grid.RowSpacing>0</Grid.RowSpacing>
-      <Grid.ColumnSpacing>10</Grid.ColumnSpacing>
-      <Image x:Name="PinnedIcon"
-             Grid.Row="1"
-             Grid.Column="1"
-             Source="ic_tizen_apps_launcher_checkmark.png"
-             Opacity="0"/>
-      <Label x:Name="ButtonTitle"
-             Grid.Row="0"
-             Grid.RowSpan="3"
-             Grid.Column="2"
-             Opacity="1"
-             FontSize="56"
-             TextColor="White"
-             LineBreakMode="TailTruncation"
-             HorizontalTextAlignment="Center"
-             Text="{Binding CurrentStateDescription.Label}" />
-      <BoxView Grid.Row="1"
-               Grid.Column="3"
+    <RelativeLayout
+               HeightRequest="793"
+               WidthRequest="557">
+        <Image x:Name="ButtonImage"
+               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4795}"
+               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6833}"
+               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2923}"
+               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.1583}"
+               Source="{Binding CurrentStateDescription.IconPath}" />
+        <Image x:Name="DimImage"
+               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonImage, Property=Height, Factor=1}"
+               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonImage, Property=Width, Factor=1}"
+               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2923}"
+               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.1583}"
+               Source="img_tizen_apps_list_dimmed_check.png"
+               Opacity="0"
+               Scale="0" />
+        <Image x:Name="CheckImage"
+               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonImage, Property=Height, Factor=0.5853}"
+               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonImage, Property=Width, Factor=0.5853}"
+               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.3918}"
+               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3}"
+               Source="ic_tizen_apps_launcher_pinmark.png"
                Opacity="0" />
-    </Grid>
+        <Grid x:Name="TextArea"
+              RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.0936}"
+              RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
+              RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8244}">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="6*" />
+                <RowDefinition Height="18*" />
+                <RowDefinition Height="8*" />
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="42" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="42" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowSpacing>0</Grid.RowSpacing>
+            <Grid.ColumnSpacing>10</Grid.ColumnSpacing>
+            <Image x:Name="PinnedIcon"
+                   Grid.Row="1"
+                   Grid.Column="1"
+                   Source="ic_tizen_apps_launcher_checkmark.png"
+                   Opacity="0"/>
+            <Label x:Name="ButtonTitle"
+                   Grid.Row="0"
+                   Grid.RowSpan="3"
+                   Grid.Column="2"
+                   Opacity="1"
+                   FontSize="56"
+                   TextColor="White"
+                   LineBreakMode="TailTruncation"
+                   HorizontalTextAlignment="Center"
+                   VerticalTextAlignment="End"
+                   Text="{Binding CurrentStateDescription.Label}" />
+            <BoxView Grid.Row="1"
+                     Grid.Column="3"
+                     Opacity="0" />
+        </Grid>
 
-    <!-- TODO: This BoxView is temporary code for Long Press test -->
-    <BoxView x:Name="ItemDim"
-             Color="Black"
-             Opacity="0.0"
-             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
-             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
+        <!-- TODO: This BoxView is temporary code for Long Press test -->
+        <BoxView x:Name="ItemDim"
+                 Color="Black"
+                 Opacity="0.0"
+                 RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.7369}"
+                 RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
+                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2631}"/>
 
-    <Button x:Name = "ButtonFocusArea"
-            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
-            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
-            Focused="OnFocused"
-            Unfocused="OnUnFocused"
-            Clicked="OnClicked"
-            Opacity="0" />
+        <Button x:Name = "ButtonFocusArea"
+                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
+                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
+                Focused="OnFocused"
+                Unfocused="OnUnFocused"
+                Clicked="OnClicked"
+                Opacity="0" />
 
-    <Grid x:Name="OptionMenuArea"
-          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4235}"
-          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8666}"
-          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
-          RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.0667}">
-      <Grid.RowDefinitions>
-        <RowDefinition Height="*" />
-        <RowDefinition Height="*" />
-      </Grid.RowDefinitions>
-      <Grid.RowSpacing>0</Grid.RowSpacing>
-      <Button x:Name="OptionMenuPinToggleButton"
-              Grid.Row="0"
-              Command="{Binding OptionMenuPinToggleCommand}"
-              Text="UNPIN" />
-      <Button x:Name="OptionMenuDeleteButton"
-              Grid.Row="1"
-              Command="{Binding OptionMenuDeleteCommand}"
-              Text="DELETE" />
-    </Grid>
+        <Grid x:Name="OptionMenuArea"
+              RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4235}"
+              RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8666}"
+              RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
+              RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.0667}">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+            <Grid.RowSpacing>0</Grid.RowSpacing>
+            <Button x:Name="OptionMenuPinToggleButton"
+                    Grid.Row="0"
+                    Command="{Binding OptionMenuPinToggleCommand}"
+                    Text="UNPIN" />
+            <Button x:Name="OptionMenuDeleteButton"
+                    Grid.Row="1"
+                    Command="{Binding OptionMenuDeleteCommand}"
+                    Text="DELETE" />
+        </Grid>
 
-  </RelativeLayout>
+    </RelativeLayout>
 </ViewCell>
 
index 8dd75e78fbc8bcfc53f422a3f2577531ea6d631e..53c007dcfc23533d76c827819c406ce2f4a0f5ca 100755 (executable)
@@ -22,15 +22,15 @@ using Xamarin.Forms;
 
 namespace TVApps.Controls
 {
-    /// <summary>
-    /// hahaha
-    /// </summary>
     public enum IconSize
     {
         Normal = 0,
         Focused,
     };
 
+    /// <summary>
+    /// Custom Control for Apps List Item Template
+    /// </summary>
     public partial class AppItemCell : ViewCell
     {
         public ICommand OnClickedCommand { get; set; }
@@ -95,7 +95,7 @@ namespace TVApps.Controls
                 // TODO : Change Animation (Add Pin Contents Item : Unselected)
                 CheckImage.FadeTo((IsChecked) ? 0.99 : 0.0, 300);
                 DimImage.FadeTo((IsChecked) ? 0.99 : 0.0, 300);
-                DimImage.TranslateTo(0.0, (IsChecked) ? 2.0 : 0.0, 300);
+                DimImage.TranslateTo(0.0, (IsChecked) ? 4.64 : 0.0, 300);
                 DimImage.ScaleTo((IsChecked) ? 1.32 : 0.0, 300);
 
                 return;
@@ -114,16 +114,16 @@ namespace TVApps.Controls
         public void ChangeIconSize(IconSize size)
         {
             ButtonImage.ScaleTo((size == IconSize.Normal) ? 1.0 : 1.32, 50);
-            ButtonImage.TranslateTo(0.0, (size == IconSize.Normal) ? 0.0 : 2.0, 100);
-            TextArea.TranslateTo(0.0, (size == IconSize.Normal) ? 0.0 : 26.0, 50);
+            ButtonImage.TranslateTo(0.0, (size == IconSize.Normal) ? 0.0 : 4.64, 100);
+            TextArea.TranslateTo(0.0, (size == IconSize.Normal) ? 0.0 : 64.93, 50);
         }
 
         public void ShowOptionMenu(bool isShow)
         {
-            ButtonImage.TranslateTo(0, (isShow) ? -90 : 0, 100);
-            TextArea.TranslateTo(0, (isShow) ? -90 : 0, 100);
+            ButtonImage.TranslateTo(0, (isShow) ? -208.7 : 0, 100);
+            TextArea.TranslateTo(0, (isShow) ? -208.7 : 0, 100);
             TextArea.FadeTo((isShow) ? 0.0 : 0.99, 100);
-            OptionMenuArea.TranslateTo(0, (isShow) ? -144 : 0, 100);
+            OptionMenuArea.TranslateTo(0, (isShow) ? -333.91 : 0, 100);
         }
 
         private void ButtonTitle_PropertyChanged(object sender, PropertyChangedEventArgs e)
@@ -154,8 +154,8 @@ namespace TVApps.Controls
             if (IsChecked)
             {
                 DimImage.ScaleTo(1.32, 300);
-                DimImage.TranslateTo(0.0, 2.0, 300);
-                CheckImage.TranslateTo(0.0, 2.0, 300);
+                DimImage.TranslateTo(0.0, 4.64, 300);
+                CheckImage.TranslateTo(0.0, 4.64, 300);
             }
         }
 
index 7e55ce574bda0ba0143522afee1cdf21ce3d31c6..28658d3bc670831d859097d23d581f5a59c5a264 100755 (executable)
@@ -13,7 +13,7 @@
                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}">
 
         <StackLayout x:Name="AppUpperList"
-                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4772}"
+                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5197}"
                      RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
                      RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
                      Orientation="Horizontal"
@@ -22,8 +22,8 @@
                      Spacing="37"/>
 
         <StackLayout x:Name="AppLowerList"
-                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4772}"
-                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=AppUpperList, Property=Height, Factor=1, Constant=20}"
+                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5197}"
+                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=AppUpperList, Property=Height, Factor=1, Constant=-148.4}"
                      RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
                      Orientation="Horizontal"
                      HorizontalOptions="Start"
index b572a1f900e7d4ab993a4e673ce5f500f363979d..4d333bc0a5070a8dfbe3681685e04303295349f7 100644 (file)
@@ -9,6 +9,10 @@ using Xamarin.Forms.Xaml;
 
 namespace TVApps.Controls
 {
+
+    /// <summary>
+    /// Custom Control for Nine Patch Image
+    /// </summary>
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class NinePatchImage : Image
     {
index 36970bcdf376203a2b1f87faac8d7ec5663c8c78..10594ae63ade085c58b53f2a4b90fa63fb54326f 100644 (file)
@@ -145,6 +145,7 @@ namespace TVApps.Controls
         {
             BackgroundImage.Source = ButtonImagePressed;
         }
+
         protected override void LayoutChildren(double x, double y, double width, double height)
         {
             base.LayoutChildren(x, y, width, height);
index 3b296d740f5c7a20291fff2792689543ae07133c..3619b034a9e5562bc6a1c6d3a0507738c24c9a63 100644 (file)
Binary files a/TVHome/TVHome.TizenTV/bin/Debug/TVHome.TizenTV.tpk and b/TVHome/TVHome.TizenTV/bin/Debug/TVHome.TizenTV.tpk differ