Dev/new animations

.editorconfig

@@ -324,4 +324,7 @@ dotnet_diagnostic.SA1652.severity = none
 
 dotnet_diagnostic.SA1629.severity = none # DocumentationTextMustEndWithAPeriod: Let's enable this rule back when we shift to WinUI3 (v8.x). If we do it now, it would mean more than 400 file changes.
 dotnet_diagnostic.SA1413.severity = none # UseTrailingCommasInMultiLineInitializers: This would also mean a lot of changes at the end of all multiline initializers. It's also debatable if we want this or not.
-dotnet_diagnostic.SA1314.severity = none # TypeParameterNamesMustBeginWithT: We do have a few templates that don't start with T. We need to double check that changing this is not a breaking change. If not, we can re-enable this.
+dotnet_diagnostic.SA1314.severity = none # TypeParameterNamesMustBeginWithT: We do have a few templates that don't start with T. We need to double check that changing this is not a breaking change. If not, we can re-enable this.
+dotnet_diagnostic.SA1000.severity = none # Hide warnings when using the new() expression from C# 9.
+dotnet_diagnostic.SA1313.severity = none # Hide warnings for record parameters.
+dotnet_diagnostic.SA1101.severity = none # Hide warnings when accessing properties without "this".

Microsoft.Toolkit.Uwp.SampleApp/Models/Sample.cs

@@ -16,8 +16,6 @@
 using System.Text.Json.Serialization;
 using System.Text.RegularExpressions;
 using System.Threading.Tasks;
-using Microsoft.Toolkit.Graph.Converters;
-using Microsoft.Toolkit.Graph.Providers;
 using Microsoft.Toolkit.Uwp.Helpers;
 using Microsoft.Toolkit.Uwp.Input.GazeInteraction;
 using Microsoft.Toolkit.Uwp.SampleApp.Models;
@@ -660,16 +658,16 @@ private static Type LookForTypeByName(string typeName)
             }
 
             // Search in Microsoft.Toolkit.Graph.Controls
-            var graphControlsProxyType = typeof(UserToPersonConverter);
-            assembly = graphControlsProxyType.GetTypeInfo().Assembly;
-
-            foreach (var typeInfo in assembly.ExportedTypes)
-            {
-                if (typeInfo.Name == typeName)
-                {
-                    return typeInfo;
-                }
-            }
+            //var graphControlsProxyType = typeof(UserToPersonConverter);
+            //assembly = graphControlsProxyType.GetTypeInfo().Assembly;
+
+            //foreach (var typeInfo in assembly.ExportedTypes)
+            //{
+            //    if (typeInfo.Name == typeName)
+            //    {
+            //        return typeInfo;
+            //    }
+            //}
 
             // Search in Microsoft.Toolkit.Uwp.UI.Animations
             var animationsProxyType = EasingType.Default;

Microsoft.Toolkit.Uwp.SampleApp/Pages/About.xaml.cs

@@ -151,8 +151,7 @@ private async Task Init()
                         From = 0,
                         To = 1,
                         Duration = TimeSpan.FromMilliseconds(300),
-                        Delay = TimeSpan.FromMilliseconds(counter++ * delay),
-                        SetInitialValueBeforeDelay = true
+                        Delay = TimeSpan.FromMilliseconds(counter++ * delay)
                     });
                 }
             }

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Activities/InvokeActionsActivity.bind

@@ -0,0 +1,54 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:mediaactions="using:Microsoft.Xaml.Interactions.Media"
+    xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    mc:Ignorable="d">
+
+  <Button Background="Gray" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
+    <ani:Explicit.Animations>
+      <ani:AnimationSet x:Name="MoveAnimation" IsSequential="True">
+        <ani:StartAnimationActivity Animation="{Binding ElementName=FadeOutAnimation}"/>
+        <ani:InvokeActionsActivity>
+          <interactions:ChangePropertyAction TargetObject="{Binding ElementName=MyText}" PropertyName="Foreground" Value="Purple"/>
+          <mediaactions:PlaySoundAction Source="Assets/Llama.mp3"/>
+        </ani:InvokeActionsActivity>
+        <ani:StartAnimationActivity Delay="0:0:2" Animation="{Binding ElementName=FadeInAnimation}"/>
+      </ani:AnimationSet>
+    </ani:Explicit.Animations>
+
+    <TextBlock x:Name="MyText" Text="🦙 Text">
+      <ani:Explicit.Animations>
+        <ani:AnimationSet x:Name="FadeOutAnimation">
+          <ani:OpacityAnimation From="1"
+                                To="0"
+                                Duration="0:0:1"
+                                Delay="0"
+                                EasingType="Linear"
+                                EasingMode="EaseOut"/>
+        </ani:AnimationSet>
+        <ani:AnimationSet x:Name="FadeInAnimation">
+          <ani:OpacityAnimation From="0"
+                                To="1"
+                                Duration="0:0:1"
+                                Delay="0"
+                                EasingType="Linear"
+                                EasingMode="EaseOut"/>
+        </ani:AnimationSet>
+      </ani:Explicit.Animations>
+    </TextBlock>
+
+    <interactivity:Interaction.Behaviors>
+      <interactions:EventTriggerBehavior EventName="Click">
+        <interactions:ChangePropertyAction TargetObject="{Binding ElementName=MyText}" PropertyName="Foreground" Value="White"/>
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=MoveAnimation}"/>
+      </interactions:EventTriggerBehavior>
+    </interactivity:Interaction.Behaviors>
+  </Button>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Activities/StartAnimationActivity.bind

@@ -0,0 +1,50 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    mc:Ignorable="d">
+
+  <Button Background="Gray" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
+    <ani:Explicit.Animations>
+      <ani:AnimationSet x:Name="MoveAnimation" IsSequential="True">
+        <ani:TranslationAnimation Duration="0:0:3" To="0,32,0" From="0,0,0" />
+        <ani:StartAnimationActivity Delay="0:0:3" Animation="{Binding ElementName=FadeOutAnimation}"/>
+        <ani:StartAnimationActivity Delay="0:0:3" Animation="{Binding ElementName=FadeInAnimation}"/>
+        <ani:TranslationAnimation Duration="0:0:1" To="0,0,0" From="0,32,0" />
+      </ani:AnimationSet>
+    </ani:Explicit.Animations>
+
+    <Image Source="ms-appx:///Assets/ToolkitLogo.png" Height="100" Width="100">
+      <ani:Explicit.Animations>
+        <ani:AnimationSet x:Name="FadeOutAnimation">
+          <ani:OpacityAnimation From="1"
+                                To="0"
+                                Duration="0:0:1"
+                                Delay="0"
+                                EasingType="Linear"
+                                EasingMode="EaseOut"/>
+        </ani:AnimationSet>
+        <ani:AnimationSet x:Name="FadeInAnimation">
+          <ani:OpacityAnimation From="0"
+                                To="1"
+                                Duration="0:0:1"
+                                Delay="0"
+                                EasingType="Linear"
+                                EasingMode="EaseOut"/>
+        </ani:AnimationSet>
+      </ani:Explicit.Animations>
+    </Image>
+
+    <interactivity:Interaction.Behaviors>
+      <interactions:EventTriggerBehavior EventName="Click">
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=MoveAnimation}"/>
+      </interactions:EventTriggerBehavior>
+    </interactivity:Interaction.Behaviors>
+  </Button>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/BlurBehaviorCode.bind

@@ -0,0 +1,14 @@
+// XAML UIElement
+<Image x:Name="ToolkitLogo" Source="ms-appx:///Assets/Square150x150Logo.png" Height="100" Width="100" >
+
+// C# - Blur can be applied to any UIElement. In this case it is an image called ToolkitLogo.
+using Microsoft.Toolkit.Uwp.UI.Animations;
+
+// Create and attacha a sprite visual with an animatable blur effect
+var sprite = await PipelineBuilder
+    .FromBackdrop()
+    .Blur(0, out EffectAnimation<float> blurAnimation)
+    .AttachAsync(ToolkitLogo, ToolkitLogo);
+
+// Start the animation on the applied brush
+blurAnimation(sprite.Brush, 32, TimeSpan.FromSeconds(3));

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/BlurBehaviorXaml.bind

@@ -0,0 +1,42 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+    xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
+    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    mc:Ignorable="d">
+
+  <Button Background="Gray" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
+    <media:UIElementExtensions.VisualFactory>
+      <media:PipelineVisualFactory>
+        <media:BlurEffect x:Name="ImageBlurEffect" IsAnimatable="True"/>
+      </media:PipelineVisualFactory>
+    </media:UIElementExtensions.VisualFactory>
+    <ani:Explicit.Animations>
+      <ani:AnimationSet x:Name="BlurAnimation">
+        <ani:BlurEffectAnimation From="0"
+                                 To="32"
+                                 Duration="0:0:3"
+                                 EasingType="Linear"
+                                 EasingMode="EaseOut"
+                                 Target="{Binding ElementName=ImageBlurEffect}"/>
+      </ani:AnimationSet>
+    </ani:Explicit.Animations>
+
+    <Image Source="ms-appx:///Assets/ToolkitLogo.png" Height="100" Width="100"/>
+
+    <interactivity:Interaction.Behaviors>
+      <interactions:EventTriggerBehavior EventName="Loaded">
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=BlurAnimation}"/>
+      </interactions:EventTriggerBehavior>
+      <interactions:EventTriggerBehavior EventName="Click">
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=BlurAnimation}"/>
+      </interactions:EventTriggerBehavior>
+    </interactivity:Interaction.Behaviors>
+  </Button>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/OffsetBehaviorCode.bind

@@ -0,0 +1,12 @@
+// XAML UIElement
+<Image x:Name="ToolkitLogo" Source="ms-appx:///Assets/Square150x150Logo.png" Height="100" Width="100" >
+
+// C# - Offset can be applied to any UIElement. In this case it is an image called ToolkitLogo.
+using Microsoft.Toolkit.Uwp.UI.Animations;
+
+// Create and start the animation. Note that animating the offset will
+// change how the item is also positioned within its parent item. If you
+// want to animate the position of an element with respect to its original
+// relative position to its parent, use a translation animation instead.
+await AnimationBuilder.Create().Offset(to: new Vector2(20, 30), duration: TimeSpan.FromSeconds(3)).StartAsync(ToolkitLogo);
+

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/OffsetBehaviorXaml.bind

@@ -0,0 +1,35 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    mc:Ignorable="d">
+
+  <Button Background="Gray" Width="200" Height="200" VerticalAlignment="Top">
+    <ani:Explicit.Animations>
+      <ani:AnimationSet x:Name="OffsetAnimation">
+        <ani:OffsetAnimation From="0"
+                             To="100,100,0"
+                             Duration="0:0:3"
+                             EasingType="Linear"
+                             EasingMode="EaseOut"/>
+      </ani:AnimationSet>
+    </ani:Explicit.Animations>
+
+    <Image Source="ms-appx:///Assets/ToolkitLogo.png" Height="100" Width="100"/>
+
+    <interactivity:Interaction.Behaviors>
+      <interactions:EventTriggerBehavior EventName="Loaded">
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=OffsetAnimation}"/>
+      </interactions:EventTriggerBehavior>
+      <interactions:EventTriggerBehavior EventName="Click">
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=OffsetAnimation}"/>
+      </interactions:EventTriggerBehavior>
+    </interactivity:Interaction.Behaviors>
+  </Button>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Rotate/RotateBehaviorCode.bind → Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/RotateBehaviorCode.bind

@@ -4,7 +4,4 @@
 // C# - Rotate can be applied to any UIElement. In this case it is an image called ToolkitLogo.
 using Microsoft.Toolkit.Uwp.UI.Animations;
 
-await ToolkitLogo.Rotate(value: 90.0f,
-						 centerX: 0.5f,
-						 centerY: 0.0f,
-						 duration: 10, delay: 0).StartAsync();
+await AnimationBuilder.Create().RotationInDegrees(to: 90, duration: TimeSpan.FromSeconds(3)).StartAsync(ToolkitLogo);

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/RotateBehaviorXaml.bind

@@ -0,0 +1,41 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:ex="using:Microsoft.Toolkit.Uwp.UI.Extensions"
+    mc:Ignorable="d">
+
+  <Button Background="Gray"
+          Width="200"
+          Height="200"
+          HorizontalAlignment="Center"
+          VerticalAlignment="Center"
+          ex:VisualExtensions.NormalizedCenterPoint="0.5">
+    <ani:Explicit.Animations>
+      <ani:AnimationSet x:Name="RotateAnimation">
+        <ani:RotationInDegreesAnimation From="0"
+                                        To="360"
+                                        Duration="0:0:3"
+                                        EasingType="Linear"
+                                        EasingMode="EaseOut"/>
+      </ani:AnimationSet>
+    </ani:Explicit.Animations>
+
+    <Image Source="ms-appx:///Assets/ToolkitLogo.png" Height="100" Width="100"/>
+
+    <interactivity:Interaction.Behaviors>
+      <interactions:EventTriggerBehavior EventName="Loaded">
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=RotateAnimation}"/>
+      </interactions:EventTriggerBehavior>
+      <interactions:EventTriggerBehavior EventName="Click">
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=RotateAnimation}"/>
+      </interactions:EventTriggerBehavior>
+    </interactivity:Interaction.Behaviors>
+  </Button>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/SaturationBehaviorCode.bind

@@ -0,0 +1,14 @@
+// XAML UIElement
+<Image x:Name="ToolkitLogo" Source="ms-appx:///Assets/Square150x150Logo.png" Height="100" Width="100" >
+
+// C# - Saturation can be applied to any UIElement. In this case it is an image called ToolkitLogo.
+using Microsoft.Toolkit.Uwp.UI.Animations;
+
+// Create and attacha a sprite visual with an animatable blur effect
+var sprite = await PipelineBuilder
+    .FromBackdrop()
+    .Saturation(0, out EffectAnimation<float> saturationAnimation)
+    .AttachAsync(ToolkitLogo, ToolkitLogo);
+
+// Start the animation on the applied brush
+saturationAnimation(sprite.Brush, 1, TimeSpan.FromSeconds(3));

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/SaturationBehaviorXaml.bind

@@ -0,0 +1,42 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+    xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
+    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    mc:Ignorable="d">
+
+  <Button Padding="0" Background="Gray" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
+    <media:UIElementExtensions.VisualFactory>
+      <media:PipelineVisualFactory>
+        <media:SaturationEffect x:Name="ImageSaturationEffect" Value="1" IsAnimatable="True"/>
+      </media:PipelineVisualFactory>
+    </media:UIElementExtensions.VisualFactory>
+    <ani:Explicit.Animations>
+      <ani:AnimationSet x:Name="SaturationAnimation">
+        <ani:SaturationEffectAnimation From="0"
+                                       To="1"
+                                       Duration="0:0:3"
+                                       EasingType="Linear"
+                                       EasingMode="EaseOut"
+                                       Target="{Binding ElementName=ImageSaturationEffect}"/>
+      </ani:AnimationSet>
+    </ani:Explicit.Animations>
+
+    <Image Source="ms-appx:///Assets/Photos/BigFourSummerHeat.jpg" />
+
+    <interactivity:Interaction.Behaviors>
+      <interactions:EventTriggerBehavior EventName="Loaded">
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=SaturationAnimation}"/>
+      </interactions:EventTriggerBehavior>
+      <interactions:EventTriggerBehavior EventName="Click">
+        <behaviors:StartAnimationAction Animation="{Binding ElementName=SaturationAnimation}"/>
+      </interactions:EventTriggerBehavior>
+    </interactivity:Interaction.Behaviors>
+  </Button>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Scale/ScaleBehaviorCode.bind → Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Behaviors/ScaleBehaviorCode.bind

@@ -4,8 +4,4 @@
 // C# - Scale can be applied to any UIElement. In this case it is an image called ToolkitLogo.
 using Microsoft.Toolkit.Uwp.UI.Animations;
 
-await ToolkitLogo.Scale(centerX: 0.5f,
-						centerY: 0.0f,
-						scaleX: 2.0f,
-						scaleY: 0.1f,
-						duration: 10, delay: 0).StartAsync();
+await AnimationBuilder.Create().Scale(to: new Vector2(1.4f), duration: TimeSpan.FromSeconds(3)).StartAsync(ToolkitLogo);