Added VisualExtensions.Translation samples

Author: Sergio0694

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Visual Extensions/VisualExtensionsCode.bind

@@ -5,15 +5,49 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
+    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"
     mc:Ignorable="d">
 
-  <Grid>
+  <StackPanel Spacing="120" VerticalAlignment="Center">
+    
+    <!--This is a static element, with some Visual properties being modified through
+        the VisualExtensions class. You can modify their values to see how the position,
+        orientation and alignment of the Border element changes.-->
     <Border Height="100"
             Width="100"
             Background="Purple"
+            ui:VisualExtensions.CenterPoint="50,50,0"
+            ui:VisualExtensions.Offset="50"
             ui:VisualExtensions.Opacity="0.5"
             ui:VisualExtensions.RotationAngleInDegrees="80"
             ui:VisualExtensions.Scale="2, 0.5, 1"
-            ui:VisualExtensions.NormalizedCenterPoint="0.5" />
-  </Grid>
+            ui:VisualExtensions.NormalizedCenterPoint="0.5"
+            ui:VisualExtensions.Translation="20,12,0"/>
+    
+    <!--This Button demonstrates the VisualExtensions.Translation property in combination with a translation
+        animation. The Translation property is set to indicate the starting position of the element (relative
+        to its offset), and the animation will modify that to reach the specified translation value. Note how
+        the animation doesn't have an explicit starting value, as it will just start animating the translation
+        from the current value set via the VisualExtensions.Translation attached property.-->
+    <Button Height="120"
+            Width="360"
+            Background="Green"
+            Content="Click me!"
+            FontSize="32"
+            ui:VisualExtensions.Translation="20,-40,0">
+      <ani:Explicit.Animations>
+        <ani:AnimationSet x:Name="MoveAnimation">
+          <ani:TranslationAnimation To="480,80,0" Duration="0:0:2"/>
+        </ani:AnimationSet>
+      </ani:Explicit.Animations>
+      <interactivity:Interaction.Behaviors>
+        <interactions:EventTriggerBehavior EventName="Click">
+          <behaviors:StartAnimationAction Animation="{Binding ElementName=MoveAnimation}"/>
+        </interactions:EventTriggerBehavior>
+      </interactivity:Interaction.Behaviors>
+    </Button>
+  </StackPanel>
 </Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Visual Extensions/VisualExtensionsPage.xaml

@@ -3,11 +3,15 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
+    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:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid>
+    <StackPanel Spacing="120" VerticalAlignment="Center">
         <Border Height="100"
                 Width="100"
                 Background="Purple"
@@ -16,6 +20,25 @@
                 ui:VisualExtensions.Opacity="0.5"
                 ui:VisualExtensions.RotationAngleInDegrees="80"
                 ui:VisualExtensions.Scale="2, 0.5, 1"
-                ui:VisualExtensions.NormalizedCenterPoint="0.5"/>
-    </Grid>
+                ui:VisualExtensions.NormalizedCenterPoint="0.5"
+                ui:VisualExtensions.Translation="20,12,0"/>
+        <Button
+            Height="120"
+            Width="360"
+            Background="Green"
+            Content="Click me!"
+            FontSize="32"
+            ui:VisualExtensions.Translation="20,-40,0">
+            <ani:Explicit.Animations>
+                <ani:AnimationSet x:Name="MoveAnimation">
+                    <ani:TranslationAnimation To="480,80,0" Duration="0:0:2"/>
+                </ani:AnimationSet>
+            </ani:Explicit.Animations>
+            <interactivity:Interaction.Behaviors>
+                <interactions:EventTriggerBehavior EventName="Click">
+                    <behaviors:StartAnimationAction Animation="{Binding ElementName=MoveAnimation}"/>
+                </interactions:EventTriggerBehavior>
+            </interactivity:Interaction.Behaviors>
+        </Button>
+    </StackPanel>
 </Page>