A animation helper that morphs between two controls

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -565,6 +565,10 @@
     <Compile Include="SamplePages\TokenizingTextBox\TokenizingTextBoxPage.xaml.cs">
       <DependentUpon>TokenizingTextBoxPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="SamplePages\TransitionHelper\CustomTextScalingCalculator.cs" />
+    <Compile Include="SamplePages\TransitionHelper\TransitionHelperPage.xaml.cs">
+      <DependentUpon>TransitionHelperPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\Triggers\FullScreenModeStateTriggerPage.xaml.cs">
       <DependentUpon>FullScreenModeStateTriggerPage.xaml</DependentUpon>
     </Compile>
@@ -647,6 +651,9 @@
     <Content Include="SamplePages\Animations\Shadows\AnimatedCardShadowXaml.bind" />
     <Content Include="SamplePages\KeyDownTriggerBehavior\KeyDownTriggerBehaviorXaml.bind" />
     <Content Include="SamplePages\RichSuggestBox\RichSuggestBoxCode.bind" />
+    <Content Include="SamplePages\TransitionHelper\TransitionHelperCode.bind" />
+    <Content Include="SamplePages\TransitionHelper\TransitionHelperXaml.bind" />
+    <Content Include="SamplePages\Animations\Actions\StartTransitionActionXaml.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">
@@ -1111,6 +1118,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Content>
+    <Page Include="SamplePages\TransitionHelper\TransitionHelperPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SamplePages\Triggers\FullScreenModeStateTriggerPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
@@ -1500,7 +1511,11 @@
       <Name>Visual C++ 2015 Runtime for Universal Windows Platform Apps</Name>
     </SDKReference>
   </ItemGroup>
-  <ItemGroup />
+  <ItemGroup>
+    <Reference Include="System.Numerics">
+      <HintPath>C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.7.2\System.Numerics.dll</HintPath>
+    </Reference>
+  </ItemGroup>
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
     <VisualStudioVersion>14.0</VisualStudioVersion>
   </PropertyGroup>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Actions/StartTransitionActionXaml.bind

@@ -0,0 +1,84 @@
+<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+      xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
+      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+    <Page.Resources>
+        <ani:TransitionHelper x:Key="MyTransitionHelper">
+            <ani:TransitionConfig Id="icon"
+                                  ScaleMode="Scale" />
+            <ani:TransitionConfig Id="name"
+                                  ScaleMode="ScaleY" />
+        </ani:TransitionHelper>
+    </Page.Resources>
+    <StackPanel Margin="50,20"
+                Spacing="20">
+        <StackPanel Orientation="Horizontal"
+                    Spacing="16">
+            <Button Content="Start Transition">
+                <interactivity:Interaction.Behaviors>
+                    <interactions:EventTriggerBehavior EventName="Click">
+                        <behaviors:StartTransitionAction Source="{Binding ElementName=FirstControl}"
+                                                         Target="{Binding ElementName=SecondControl}"
+                                                         Transition="{StaticResource MyTransitionHelper}" />
+                    </interactions:EventTriggerBehavior>
+                </interactivity:Interaction.Behaviors>
+            </Button>
+            <Button Content="Reverse Transition">
+                <interactivity:Interaction.Behaviors>
+                    <interactions:EventTriggerBehavior EventName="Click">
+                        <behaviors:ReverseTransitionAction Transition="{StaticResource MyTransitionHelper}" />
+                    </interactions:EventTriggerBehavior>
+                </interactivity:Interaction.Behaviors>
+            </Button>
+        </StackPanel>
+        <Grid>
+            <Grid x:Name="FirstControl"
+                  VerticalAlignment="Top">
+                <StackPanel Orientation="Horizontal"
+                            Spacing="10">
+                    <Border Width="50"
+                            Height="50"
+                            Padding="8"
+                            ani:TransitionHelper.Id="icon"
+                            Background="Gray"
+                            CornerRadius="25">
+                        <Image Source="ms-appx:///Assets/ToolkitLogo.png" />
+                    </Border>
+                    <TextBlock VerticalAlignment="Center"
+                               ani:TransitionHelper.Id="name">
+                        Windows Community Toolkit
+                    </TextBlock>
+                </StackPanel>
+            </Grid>
+            <Grid x:Name="SecondControl"
+                  MaxWidth="400"
+                  VerticalAlignment="Top"
+                  Visibility="Collapsed">
+                <StackPanel Spacing="20">
+                    <Border Width="80"
+                            Height="80"
+                            Padding="8"
+                            ani:TransitionHelper.Id="icon"
+                            Background="Gray"
+                            CornerRadius="8">
+                        <Image Source="ms-appx:///Assets/ToolkitLogo.png" />
+                    </Border>
+                    <TextBlock ani:TransitionHelper.Id="name"
+                               FontSize="24"
+                               FontWeight="SemiBold">
+                        Windows Community Toolkit
+                    </TextBlock>
+                    <TextBlock ani:TransitionHelper.CoordinatedTarget="name"
+                               TextWrapping="Wrap">
+                        The Windows Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer patterns when building experiences for Windows.
+                    </TextBlock>
+                </StackPanel>
+            </Grid>
+        </Grid>
+    </StackPanel>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TransitionHelper/CustomTextScalingCalculator.cs

@@ -0,0 +1,29 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Numerics;
+using Microsoft.Toolkit.Uwp.UI;
+using Microsoft.Toolkit.Uwp.UI.Animations.Helpers;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    public sealed class CustomTextScalingCalculator : IScalingCalculator
+    {
+        /// <inheritdoc/>
+        public Vector2 GetScaling(UIElement source, UIElement target)
+        {
+            var sourceTextElement = source?.FindDescendantOrSelf<TextBlock>();
+            var targetTextElement = target?.FindDescendantOrSelf<TextBlock>();
+            if (sourceTextElement is not null && targetTextElement is not null)
+            {
+                var scale = targetTextElement.FontSize / sourceTextElement.FontSize;
+                return new Vector2((float)scale);
+            }
+
+            return new Vector2(1);
+        }
+    }
+}

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TransitionHelper/TransitionHelperCode.bind

@@ -0,0 +1,35 @@
+// Create a TransitionHelper.
+var transitionHelper = new TransitionHelper();
+
+// Configure the elements that need to be connected by animation, if the elements use the default configuration, they do not need to be listed here.
+transitionHelper.Configs = new List<TransitionConfig>
+    {
+        new()
+        {
+            Id = "background",
+            ScaleMode = ScaleMode.Scale
+        },
+        new()
+        {
+            Id = "image",
+            ScaleMode = ScaleMode.Scale
+        },
+        new()
+        {
+            Id = "name",
+            ScaleMode = ScaleMode.ScaleY
+        },
+        new()
+        {
+            Id = "desc",
+            EnableClipAnimation = true
+        },
+    };
+transitionHelper.Source = FirstControl;
+transitionHelper.Target = SecondControl;
+
+// Animate.
+await transitionHelper.AnimateAsync();
+
+// Reverse.
+await transitionHelper.ReverseAsync();

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TransitionHelper/TransitionHelperPage.xaml

@@ -0,0 +1,40 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.TransitionHelperPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+      xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
+      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+      xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+    <Page.Resources>
+        <local:CustomTextScalingCalculator x:Key="test" />
+    </Page.Resources>
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <Grid Padding="50,20">
+            <TextBlock Text="Click the arrow button to view the animation." />
+            <!--
+                The use of animations:TransitionHelper.Id and StartTransitionAction/ReverseTransitionAction here is meaningless,
+                but it seems that if you do not declare it in advance,
+                the sample app will not be able to recognize them
+            -->
+            <Button ani:TransitionHelper.Id="test"
+                    Visibility="Collapsed">
+                <interactivity:Interaction.Behaviors>
+                    <interactions:EventTriggerBehavior EventName="Click">
+                        <behaviors:StartTransitionAction />
+                        <behaviors:ReverseTransitionAction />
+                    </interactions:EventTriggerBehavior>
+                </interactivity:Interaction.Behaviors>
+            </Button>
+        </Grid>
+        <Grid x:Name="XamlRoot"
+              Grid.Row="1" />
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TransitionHelper/TransitionHelperPage.xaml.cs

@@ -0,0 +1,20 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.UI.Xaml;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    public sealed partial class TransitionHelperPage : IXamlRenderListener
+    {
+        public TransitionHelperPage()
+        {
+            InitializeComponent();
+        }
+
+        public void OnXamlRendered(FrameworkElement control)
+        {
+        }
+    }
+}