Animatable tile brush

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

@@ -832,9 +832,6 @@
     <Compile Include="SamplePages\MarkdownTextBlock\MarkdownTextBlockPage.xaml.cs">
       <DependentUpon>MarkdownTextBlockPage.xaml</DependentUpon>
     </Compile>
-    <Compile Include="SamplePages\TileControl\TileControlPage.xaml.cs">
-      <DependentUpon>TileControlPage.xaml</DependentUpon>
-    </Compile>
     <Compile Include="SamplePages\RadialProgressBar\RadialProgressBarPage.xaml.cs">
       <DependentUpon>RadialProgressBarPage.xaml</DependentUpon>
     </Compile>
@@ -1245,10 +1242,6 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
-    <Page Include="SamplePages\TileControl\TileControlPage.xaml">
-      <Generator>MSBuild:Compile</Generator>
-      <SubType>Designer</SubType>
-    </Page>
     <Page Include="SamplePages\RadialProgressBar\RadialProgressBarPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TileControl/TileControl.bind

@@ -2,75 +2,34 @@
       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:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+      xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
+      xmlns:i="using:Microsoft.Xaml.Interactivity"
+      xmlns:b="using:Microsoft.Xaml.Interactions.Core" 
+      xmlns:tb="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
       mc:Ignorable="d">
 
-  <Page.Resources>
-    <Style x:Name="TextBlockStyle" TargetType="TextBlock">
-      <Setter Property="FontSize" Value="40" />
-      <Setter Property="FontFamily" Value="Segoe UI" />
-      <Setter Property="FontWeight" Value="Light" />
-      <Setter Property="Foreground" Value="White" />
-      <Setter Property="Margin" Value="48" />
-    </Style>
-    <Style x:Name="BorderStyle" TargetType="Border">
-      <Setter Property="HorizontalAlignment" Value="Center" />
-      <Setter Property="VerticalAlignment" Value="Center" />
-      <Setter Property="Background" Value="#40000000" />
-    </Style>
-  </Page.Resources>
-
-  <Grid>
-
-    <Grid.RowDefinitions>
-      <RowDefinition Height="Auto" />
-      <RowDefinition />
-      <RowDefinition Height="Auto" />
-      <RowDefinition />
-    </Grid.RowDefinitions>
-
-    <TextBlock Margin="10,20"
-                   HorizontalAlignment="Center"
-                   FontSize="20"
-                   Text="TileControl can be used to highlight computer activity:" />
-
-    <controls:TileControl Grid.Row="1"
-                          AnimationDuration="@[Animation Duration:Slider:30:0-100]"
-                          AnimationStepX="@[Animation StepX:Slider:1:0-3]"
-                          AnimationStepY="@[Animation StepY:Slider:1:0-3]"
-                          Background="{ThemeResource Brush-Grey-04}"
-                          ImageAlignment="@[Image Alignment:Enum:ImageAlignment.None]"
-                          ImageSource="ms-appx:///SamplePages/TileControl/Animations.png"
-                          IsAnimated="@[Is Animated:Bool:True]@"
-                          OffsetX="@[OffsetX:Slider:0:0-150]"
-                          OffsetY="@[OffsetY:Slider:0:0-150]"
-                          ScrollOrientation="@[Scroll Orientation:Enum:ScrollOrientation.Both]">
-      <Border Style="{StaticResource BorderStyle}">
-        <TextBlock Style="{StaticResource TextBlockStyle}" Text="Simple Content"/>
-      </Border>
-    </controls:TileControl>
-
-    <TextBlock Grid.Row="2"
-                   Margin="10,20"
-                   HorizontalAlignment="Center"
-                   FontSize="20"
-                   Text="It can also be used for background painting:" />
-
-    <controls:TileControl Grid.Row="3"
-                          Background="{ThemeResource Brush-Grey-04}"
-                          ImageSource="ms-appx:///SamplePages/TileControl/Animations.png"
-                          ParallaxSpeedRatio="@[Parallax Speed Ratio:DoubleSlider:1.2:1-3]"
-                          ScrollViewerContainer="{Binding ElementName=FlipView, Mode=OneTime}">
-      <FlipView x:Name="FlipView">
-
-        <Border Style="{StaticResource BorderStyle}">
-          <TextBlock Style="{StaticResource TextBlockStyle}" Text="Parallax with FlipView &gt;"/>
-        </Border>
-
-        <Border Style="{StaticResource BorderStyle}">
-          <TextBlock Style="{StaticResource TextBlockStyle}" Text="&lt; Parallax with FlipView"/>
-        </Border>
-      </FlipView>
-    </controls:TileControl>
+  <Grid Background="LightBlue">
+    <media:UIElementExtensions.VisualFactory>
+      <media:SurfaceBrushFactory x:Name="SurfaceBrush"
+                                 Source="ms-appx:///SamplePages/TileControl/Animations.png"
+                                 Stretch="None">
+        <media:BorderEffect ExtendX="Mirror" ExtendY="Wrap"/>
+      </media:SurfaceBrushFactory>
+    </media:UIElementExtensions.VisualFactory>
+    <ani:Explicit.Animations>
+      <ani:AnimationSet x:Name="Scroll">
+        <ani:AnimationScope Duration="0:0:5"> <!-- Adjust the time to adjust the speed of the scrolling. -->
+          <!-- Since we Mirrored the effect, we have to double the size of the surface for a smooth transition. -->
+          <ani:OffsetBrushAnimation From="0" To="160,160" Target="{Binding ElementName=SurfaceBrush}"
+                                    Repeat="Forever" EasingType="Linear"/>
+        </ani:AnimationScope>
+      </ani:AnimationSet>
+    </ani:Explicit.Animations>
+    <i:Interaction.Behaviors>
+      <b:EventTriggerBehavior EventName="Loaded">
+        <tb:StartAnimationAction Animation="{Binding ElementName=Scroll}"/>
+      </b:EventTriggerBehavior>
+    </i:Interaction.Behaviors>
   </Grid>
 </Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml

@@ -46,6 +46,7 @@
                 <controls:Case IsDefault="True" />
             </controls:CaseCollection>
         </controls:SwitchPresenter>
+        <media:SurfaceBrushFactory x:Key="SurfaceBrushFactory" />
     </Page.Resources>
 
     <Grid>
@@ -60,12 +61,16 @@
                 <ani:SaturationEffectAnimation />
                 <ani:AnimationScope />
                 <ani:ExposureEffectAnimation />
+                <ani:OffsetBrushAnimation />
+                <ani:RotationAngleInDegreesBrushAnimation />
+                <ani:ScaleBrushAnimation />
             </ani:AnimationSet>
         </ani:Explicit.Animations>
         <media:UIElementExtensions.VisualFactory>
             <media:PipelineVisualFactory>
                 <media:OpacityEffect />
                 <media:ExposureEffect />
+                <media:BorderEffect />
             </media:PipelineVisualFactory>
         </media:UIElementExtensions.VisualFactory>
 

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -205,11 +205,10 @@
       },
       {
         "Name": "TileControl",
-        "Type": "TileControlPage",
         "Subcategory": "Layout",
         "About": "A ContentControl that show an image repeated many times.The control can be synchronized with a Scrollviewer and animated easily",
         "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls.Core/TileControl",
-        "XamlCodeFile": "TileControl.bind",
+        "XamlCodeFile": "/SamplePages/TileControl/TileControl.bind",
         "Icon": "/SamplePages/TileControl/TileControl.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TileControl.md"
       },

Microsoft.Toolkit.Uwp.UI.Controls.Core/TileControl/TileControl.cs

@@ -22,6 +22,7 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     /// A ContentControl that show an image repeated many times.
     /// The control can be synchronized with a ScrollViewer and animated easily.
     /// </summary>
+    [Obsolete("The TileControl will be removed in a future update. Please look at the TilesBrush for static backgrounds, animating a SurfaceBrushFactory element for a scrolling tiled background, or the ParallaxView element for background effects for a container being scrolled.")]
     public partial class TileControl : ContentControl
     {
         /// <summary>

Microsoft.Toolkit.Uwp.UI.Media/Animations/Abstract/EffectAnimation{TEffect,TValue,TKeyFrame}.cs

@@ -23,7 +23,7 @@ namespace Microsoft.Toolkit.Uwp.UI.Animations
     /// </typeparam>
     /// <typeparam name="TKeyFrame">The actual type of keyframe values in use.</typeparam>
     public abstract class EffectAnimation<TEffect, TValue, TKeyFrame> : Animation<TValue, TKeyFrame>
-        where TEffect : class, IPipelineEffect
+        where TEffect : class, IBrushEffect
         where TKeyFrame : unmanaged
     {
         /// <summary>

Microsoft.Toolkit.Uwp.UI.Media/Animations/Brushes/AnchorPointBrushAnimation.cs

@@ -0,0 +1,25 @@
+// 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.Media;
+using Windows.UI.Composition;
+
+namespace Microsoft.Toolkit.Uwp.UI.Animations
+{
+    /// <summary>
+    /// An anchor point animation working on a <see cref="SurfaceBrushFactory"/>.
+    /// </summary>
+    public sealed class AnchorPointBrushAnimation : EffectAnimation<SurfaceBrushFactory, string, Vector2>
+    {
+        /// <inheritdoc/>
+        protected override string ExplicitTarget => nameof(CompositionSurfaceBrush.AnchorPoint);
+
+        /// <inheritdoc/>
+        protected override (Vector2?, Vector2?) GetParsedValues()
+        {
+            return (To?.ToVector2(), From?.ToVector2());
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Media/Animations/Brushes/CenterPointBrushAnimation.cs

@@ -0,0 +1,25 @@
+// 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.Media;
+using Windows.UI.Composition;
+
+namespace Microsoft.Toolkit.Uwp.UI.Animations
+{
+    /// <summary>
+    /// A center point animation working on a <see cref="SurfaceBrushFactory"/>.
+    /// </summary>
+    public sealed class CenterPointBrushAnimation : EffectAnimation<SurfaceBrushFactory, string, Vector2>
+    {
+        /// <inheritdoc/>
+        protected override string ExplicitTarget => nameof(CompositionSurfaceBrush.CenterPoint);
+
+        /// <inheritdoc/>
+        protected override (Vector2?, Vector2?) GetParsedValues()
+        {
+            return (To?.ToVector2(), From?.ToVector2());
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Media/Animations/Brushes/OffsetBrushAnimation.cs

@@ -0,0 +1,25 @@
+// 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.Media;
+using Windows.UI.Composition;
+
+namespace Microsoft.Toolkit.Uwp.UI.Animations
+{
+    /// <summary>
+    /// An offset animation working on a <see cref="SurfaceBrushFactory"/>.
+    /// </summary>
+    public sealed class OffsetBrushAnimation : EffectAnimation<SurfaceBrushFactory, string, Vector2>
+    {
+        /// <inheritdoc/>
+        protected override string ExplicitTarget => nameof(CompositionSurfaceBrush.Offset);
+
+        /// <inheritdoc/>
+        protected override (Vector2?, Vector2?) GetParsedValues()
+        {
+            return (To?.ToVector2(), From?.ToVector2());
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Media/Animations/Brushes/RotationAngleInDegreesBrushAnimation.cs

@@ -0,0 +1,24 @@
+// 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 Microsoft.Toolkit.Uwp.UI.Media;
+using Windows.UI.Composition;
+
+namespace Microsoft.Toolkit.Uwp.UI.Animations
+{
+    /// <summary>
+    /// A rotation animation working on a <see cref="SurfaceBrushFactory"/>.
+    /// </summary>
+    public sealed class RotationAngleInDegreesBrushAnimation : EffectAnimation<SurfaceBrushFactory, double?, double>
+    {
+        /// <inheritdoc/>
+        protected override string ExplicitTarget => nameof(CompositionSurfaceBrush.RotationAngleInDegrees);
+
+        /// <inheritdoc/>
+        protected override (double?, double?) GetParsedValues()
+        {
+            return (To, From);
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Media/Animations/Brushes/RotationBrushAnimation.cs

@@ -0,0 +1,24 @@
+// 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 Microsoft.Toolkit.Uwp.UI.Media;
+using Windows.UI.Composition;
+
+namespace Microsoft.Toolkit.Uwp.UI.Animations
+{
+    /// <summary>
+    /// A rotation animation working on a <see cref="SurfaceBrushFactory"/>.
+    /// </summary>
+    public sealed class RotationBrushAnimation : EffectAnimation<SurfaceBrushFactory, double?, double>
+    {
+        /// <inheritdoc/>
+        protected override string ExplicitTarget => nameof(CompositionSurfaceBrush.RotationAngle);
+
+        /// <inheritdoc/>
+        protected override (double?, double?) GetParsedValues()
+        {
+            return (To, From);
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Media/Animations/Brushes/ScaleBrushAnimation.cs

@@ -0,0 +1,25 @@
+// 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.Media;
+using Windows.UI.Composition;
+
+namespace Microsoft.Toolkit.Uwp.UI.Animations
+{
+    /// <summary>
+    /// A scale animation working on a <see cref="SurfaceBrushFactory"/>.
+    /// </summary>
+    public sealed class ScaleBrushAnimation : EffectAnimation<SurfaceBrushFactory, string, Vector2>
+    {
+        /// <inheritdoc/>
+        protected override string ExplicitTarget => nameof(CompositionSurfaceBrush.Scale);
+
+        /// <inheritdoc/>
+        protected override (Vector2?, Vector2?) GetParsedValues()
+        {
+            return (To?.ToVector2(), From?.ToVector2());
+        }
+    }
+}