Fixed VisualExtensions.Translation underlying target property

Author: Sergio0694

Microsoft.Toolkit.Uwp.UI/Extensions/VisualExtensions.cs

@@ -2,6 +2,7 @@
 // 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.Globalization;
 using System.Numerics;
 using Windows.UI.Composition;
 using Windows.UI.Xaml;
@@ -115,10 +116,10 @@ public static void SetOffset(DependencyObject obj, string value)
         }
 
         /// <summary>
-        /// Gets the <see cref="Visual.TransformMatrix"/>.<see cref="Matrix4x4.Translation"/> property of a <see cref="UIElement"/> in a <see cref="string"/> form.
+        /// Gets the <c>"Translation"</c> property of the underlying <see cref="Visual"/> object for a <see cref="UIElement"/>, in <see cref="string"/> form.
         /// </summary>
         /// <param name="obj">The <see cref="DependencyObject"/> instance.</param>
-        /// <returns>A <see cref="Vector3"/> <see cref="string"/> representation of the <see cref="Visual.TransformMatrix"/>.<see cref="Matrix4x4.Translation"/> property.</returns>
+        /// <returns>The <see cref="string"/> representation of the <c>"Translation"</c> property property.</returns>
         public static string GetTranslation(DependencyObject obj)
         {
             if (!DesignTimeHelpers.IsRunningInLegacyDesignerMode && obj is UIElement element)
@@ -130,10 +131,10 @@ public static string GetTranslation(DependencyObject obj)
         }
 
         /// <summary>
-        /// Sets the <see cref="Visual.TransformMatrix"/>.<see cref="Matrix4x4.Translation"/> property of a <see cref="UIElement"/> in a <see cref="string"/> form.
+        /// Sets the <c>"Translation"</c> property of the underlying <see cref="Visual"/> object for a <see cref="UIElement"/>, in <see cref="string"/> form.
         /// </summary>
         /// <param name="obj">The <see cref="DependencyObject"/> instance.</param>
-        /// <param name="value">The <see cref="string"/> representation of the <see cref="Vector3"/> to be set.</param>
+        /// <param name="value">The <see cref="string"/> representation of the <c>"Translation"</c> property property to be set.</param>
         public static void SetTranslation(DependencyObject obj, string value)
         {
             if (!DesignTimeHelpers.IsRunningInLegacyDesignerMode && obj is UIElement element)
@@ -549,19 +550,33 @@ private static void SetOffsetForElement(string value, UIElement element)
 
         private static string GetTranslationForElement(UIElement element)
         {
-            return GetVisual(element).TransformMatrix.Translation.ToString();
+            CompositionGetValueStatus result = GetVisual(element).Properties.TryGetVector3("Translation", out Vector3 translation);
+
+            return result switch
+            {
+                // The ("G", CultureInfo.InvariantCulture) combination produces a string with the default numeric
+                // formatting style, and using ',' as component separator, so that the resulting text can safely
+                // be parsed back if needed with the StringExtensions.ToVector3(string) extension, which uses
+                // the invariant culture mode by default so that the syntax will always match that from XAML.
+                CompositionGetValueStatus.Succeeded => translation.ToString("G", CultureInfo.InvariantCulture),
+                _ => "<0, 0, 0>"
+            };
         }
 
         private static void SetTranslationForElement(string value, UIElement element)
         {
             ElementCompositionPreview.SetIsTranslationEnabled(element, true);
 
-            Visual visual = GetVisual(element);
-            Matrix4x4 transform = visual.TransformMatrix;
-
-            transform.Translation = value.ToVector3();
-
-            visual.TransformMatrix = transform;
+            // The "Translation" attached property refers to the "hidden" property that is enabled
+            // through "ElementCompositionPreview.SetIsTranslationEnabled". The value for this property
+            // is not available directly on the Visual class and can only be accessed through its property
+            // set. Note that this "Translation" value is not the same as Visual.TransformMatrix.Translation.
+            // In fact, the latter doesn't require to be explicitly enabled and is actually combined with
+            // this at runtime (ie. the whole transform matrix is combined with the additional translation
+            // from the "Translation" property, if any), and the two can be set and animated independently.
+            // In this case we're just interested in the "Translation" property, which is more commonly used
+            // as it can also be animated directly with a Vector3 animation instead of a Matrix4x4 one.
+            GetVisual(element).Properties.InsertVector3("Translation", value.ToVector3());
         }
 
         private static double GetOpacityForElement(UIElement element)

UnitTests/UnitTests.UWP/UI/Extensions/Test_VisualExtensions.cs

@@ -8,13 +8,28 @@
 using Windows.UI.Xaml.Controls;
 using Microsoft.Toolkit.Uwp.UI;
 using System.Numerics;
+using Windows.UI.Composition;
+using Microsoft.Toolkit.Uwp.UI.Animations;
 
 namespace UnitTests.UWP.UI
 {
     [TestClass]
     [TestCategory("Test_VisualExtensions")]
     public class Test_VisualExtensions : VisualUITestBase
     {
+        [TestMethod]
+        public async Task GetDefaultTranslation()
+        {
+            await App.DispatcherQueue.EnqueueAsync(() =>
+            {
+                var button = new Button();
+
+                string text = VisualExtensions.GetTranslation(button);
+
+                Assert.AreEqual(text, "<0, 0, 0>");
+            });
+        }
+
         [TestMethod]
         public async Task SetAndGetTranslation()
         {
@@ -27,11 +42,41 @@ await App.DispatcherQueue.EnqueueAsync(async () =>
 
                 await SetTestContentAsync(grid);
 
-                Assert.AreEqual(button.GetVisual().TransformMatrix.Translation, new Vector3(80, 20, 0));
+                var success = button.GetVisual().Properties.TryGetVector3("Translation", out Vector3 translation);
+
+                Assert.AreEqual(success, CompositionGetValueStatus.Succeeded);
+                Assert.AreEqual(translation, new Vector3(80, 20, 0));
+
+                string text = VisualExtensions.GetTranslation(button);
+
+                Assert.AreEqual(text, new Vector3(80, 20, 0).ToString());
+            });
+        }
+
+        [TestMethod]
+        public async Task SetAndAnimateTranslation()
+        {
+            await App.DispatcherQueue.EnqueueAsync(async () =>
+            {
+                var button = new Button();
+                var grid = new Grid() { Children = { button } };
+
+                VisualExtensions.SetTranslation(button, "80, 20, 0");
+
+                await SetTestContentAsync(grid);
+
+                await AnimationBuilder.Create()
+                    .Translation(to: new Vector3(11, 22, 0))
+                    .StartAsync(button);
+
+                var success = button.GetVisual().Properties.TryGetVector3("Translation", out Vector3 translation);
+
+                Assert.AreEqual(success, CompositionGetValueStatus.Succeeded);
+                Assert.AreEqual(translation, new Vector3(11, 22, 0));
 
-                string translation = VisualExtensions.GetTranslation(button);
+                string text = VisualExtensions.GetTranslation(button);
 
-                Assert.AreEqual(translation, new Vector3(80, 20, 0).ToString());
+                Assert.AreEqual(text, new Vector3(11, 22, 0).ToString());
             });
         }
     }