Added animations to the widgets (#2213)

Author: yaira2

Files/UserControls/Widgets/DrivesWidget.xaml

@@ -2,8 +2,10 @@
     x:Class="Files.DrivesWidget"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
     xmlns:local="using:Files"
     xmlns:local2="using:Files.Filesystem"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -37,7 +39,13 @@
             </muxc:ItemsRepeater.Layout>
             <muxc:ItemsRepeater.ItemTemplate>
                 <DataTemplate x:DataType="local2:DriveItem">
-                    <Grid>
+                    <Grid
+                        extensions:VisualExtensions.CenterPoint="80,45,0"
+                        PointerEntered="GridScaleUp"
+                        PointerExited="GridScaleNormal">
+                        <animations:Implicit.Animations>
+                            <animations:ScaleAnimation Duration="0:0:0.5" />
+                        </animations:Implicit.Animations>
                         <Grid.Resources>
                             <ResourceDictionary>
                                 <ResourceDictionary.ThemeDictionaries>
@@ -67,7 +75,6 @@
                             Style="{StaticResource ButtonRevealStyle}"
                             Tag="{x:Bind Path}"
                             ToolTipService.ToolTip="{x:Bind Text}">
-
                             <Grid
                                 Margin="12"
                                 HorizontalAlignment="Stretch"

Files/UserControls/Widgets/DrivesWidget.xaml.cs

@@ -2,8 +2,10 @@
 using Files.View_Models;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
+using System.Numerics;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Hosting;
 
 namespace Files
 {
@@ -28,5 +30,21 @@ private void Button_Click(object sender, RoutedEventArgs e)
 
             App.CurrentInstance.InstanceViewModel.IsPageTypeNotHome = true; // show controls that were hidden on the home page
         }
+
+        private void GridScaleUp(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            // Source for the scaling: https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Implicit%20Animations/ImplicitAnimationsPage.xaml.cs
+            // Search for "Scale Element".
+            var element = sender as UIElement;
+            var visual = ElementCompositionPreview.GetElementVisual(element);
+            visual.Scale = new Vector3(1.03f, 1.03f, 1);
+        }
+
+        private void GridScaleNormal(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            var element = sender as UIElement;
+            var visual = ElementCompositionPreview.GetElementVisual(element);
+            visual.Scale = new Vector3(1);
+        }
     }
 }

Files/UserControls/Widgets/LibraryCards.xaml

@@ -2,8 +2,10 @@
     x:Class="Files.LibraryCards"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
     xmlns:local="using:Files"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
@@ -27,7 +29,13 @@
             </muxc:ItemsRepeater.Layout>
             <muxc:ItemsRepeater.ItemTemplate>
                 <DataTemplate x:DataType="local:FavoriteLocationItem">
-                    <Grid>
+                    <Grid
+                        extensions:VisualExtensions.CenterPoint="80,45,0"
+                        PointerEntered="GridScaleUp"
+                        PointerExited="GridScaleNormal">
+                        <animations:Implicit.Animations>
+                            <animations:ScaleAnimation Duration="0:0:0.5" />
+                        </animations:Implicit.Animations>
                         <Grid.Resources>
                             <ResourceDictionary>
                                 <ResourceDictionary.ThemeDictionaries>

Files/UserControls/Widgets/LibraryCards.xaml.cs

@@ -1,8 +1,10 @@
 using Files.View_Models;
 using Microsoft.Toolkit.Uwp.Extensions;
 using System.Collections.Generic;
+using System.Numerics;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Hosting;
 
 namespace Files
 {
@@ -23,6 +25,22 @@ public LibraryCards()
             foreach (var item in itemsAdded) { item.AutomationProperties = item.Text; }
         }
 
+        private void GridScaleUp(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            // Source for the scaling: https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Implicit%20Animations/ImplicitAnimationsPage.xaml.cs
+            // Search for "Scale Element".
+            var element = sender as UIElement;
+            var visual = ElementCompositionPreview.GetElementVisual(element);
+            visual.Scale = new Vector3(1.03f, 1.03f, 1);
+        }
+
+        private void GridScaleNormal(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            var element = sender as UIElement;
+            var visual = ElementCompositionPreview.GetElementVisual(element);
+            visual.Scale = new Vector3(1);
+        }
+
         private void Button_Click(object sender, RoutedEventArgs e)
         {
             string NavigationPath = ""; // path to navigate