Add a MosaicControl to repeat an image

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

@@ -251,6 +251,8 @@
     <Content Include="SamplePages\MasterDetailsView\MasterDetailsView.png" />
     <Content Include="SamplePages\Microsoft Graph Service\OfficeLogo.png" />
     <Content Include="SamplePages\Microsoft Graph Service\user.png" />
+    <Content Include="SamplePages\MosaicControl\Animations.png" />
+    <Content Include="SamplePages\MosaicControl\MosaicControl.png" />
     <Content Include="SamplePages\Offset\OffsetBehavior.png" />
     <Content Include="SamplePages\PrintHelper\PrintHelper.png" />
     <Content Include="SamplePages\PullToRefreshListView\PullToRefreshListView.png" />
@@ -328,6 +330,9 @@
     <Content Include="SamplePages\SystemInformation\SystemInformationCode.bind" />
     <Content Include="SamplePages\DispatcherHelper\DispatcherHelperCode.bind" />
     <Content Include="SamplePages\TextBoxMask\TextBoxMask.bind" />
+    <Content Include="SamplePages\MosaicControl\MosaicControl.bind">
+      <SubType>Designer</SubType>
+    </Content>
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">
@@ -376,6 +381,9 @@
     <Compile Include="SamplePages\Blur\BlurBehaviorPage.xaml.cs">
       <DependentUpon>BlurBehaviorPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="SamplePages\MosaicControl\MosaicControlPage.xaml.cs">
+      <DependentUpon>MosaicControlPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\ScrollHeader\ScrollHeaderPage.xaml.cs">
       <DependentUpon>ScrollHeaderPage.xaml</DependentUpon>
     </Compile>
@@ -530,6 +538,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="SamplePages\MosaicControl\MosaicControlPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SamplePages\ScrollHeader\ScrollHeaderPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

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

@@ -0,0 +1,71 @@
+<Page
+    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.FlipTilePage"
+    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:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    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 Background="{StaticResource Brush-Grey-01}">
+
+    <Grid.RowDefinitions>
+      <RowDefinition></RowDefinition>
+      <RowDefinition Height="6"></RowDefinition>
+      <RowDefinition></RowDefinition>
+    </Grid.RowDefinitions>
+
+    <controls:MosaicControl
+      ImageSource         ="ms-appx:///SamplePages/MosaicControl/Animations.png"
+      OffsetX             ="@[OffsetX:Slider:0:0-150]"
+      OffsetY             ="@[OffsetY:Slider:0:0-150]"
+
+      IsAnimated          ="@[IsAnimated:Bool:False]"
+      AnimationStepX      ="@[AnimationStepX:Slider:1:0-3]"
+      AnimationStepY      ="@[AnimationStepY:Slider:1:0-3]"
+      AnimationDuration   ="@[AnimationDuration:Slider:30:0-100]"
+
+      ScrollOrientation   ="@[ScrollOrientation:Enum:ScrollOrientation.Both]" 
+      ImageAlignment      ="@[ImageAlignment:Enum:ImageAlignment.None]"
+
+      ParallaxSpeedRatio  ="@[ParallaxSpeedRatio:DoubleSlider:1.2:1-3]"
+
+      Grid.Row="0"
+      Background="{StaticResource Brush-Grey-04}"
+      >
+      <Border Style="{StaticResource BorderStyle}">
+        <TextBlock Style="{StaticResource TextBlockStyle}" Text="Simple Content"></TextBlock>
+      </Border>
+    </controls:MosaicControl>
+
+    <controls:MosaicControl Grid.Row="2" Background="{StaticResource Brush-Grey-04}" ImageSource="ms-appx:///SamplePages/MosaicControl/Animations.png" ScrollViewerContainer="{x:Bind FlipView, Mode=OneTime}">
+      <FlipView x:Name="FlipView">
+
+        <Border Style="{StaticResource BorderStyle}">
+          <TextBlock Style="{StaticResource TextBlockStyle}" Text="Synchronized with FlipView &gt;"></TextBlock>
+        </Border>
+
+        <Border Style="{StaticResource BorderStyle}">
+          <TextBlock Style="{StaticResource TextBlockStyle}" Text="&lt; Synchronized with FlipView"></TextBlock>
+        </Border>
+
+      </FlipView>
+    </controls:MosaicControl>
+
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MosaicControl/MosaicControlPage.xaml

@@ -0,0 +1,77 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.MosaicControlPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      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 Background="{StaticResource Brush-Grey-01}">
+
+        <Grid.RowDefinitions>
+            <RowDefinition></RowDefinition>
+            <RowDefinition Height="6"></RowDefinition>
+            <RowDefinition></RowDefinition>
+        </Grid.RowDefinitions>
+
+        <controls:MosaicControl 
+
+            ImageSource="ms-appx:///SamplePages/MosaicControl/Animations.png"
+            OffsetX             ="{Binding OffsetX.Value,Mode=OneWay}"
+            OffsetY             ="{Binding OffsetY.Value,Mode=OneWay}"
+
+            IsAnimated          ="{Binding IsAnimated.Value,Mode=TwoWay}"
+            AnimationStepX      ="{Binding AnimationStepX.Value,Mode=OneWay}"
+            AnimationStepY      ="{Binding AnimationStepY.Value,Mode=OneWay}"
+            AnimationDuration   ="{Binding AnimationDuration.Value,Mode=OneWay}"
+
+            ScrollOrientation   ="{Binding ScrollOrientation.Value, Mode=TwoWay}" 
+            ImageAlignment      ="{Binding ImageAlignment.Value,Mode=TwoWay}"                  
+
+            Grid.Row="0" 
+            Background="{StaticResource Brush-Grey-04}" 
+            >
+            <Border Style="{StaticResource BorderStyle}">
+                <TextBlock Style="{StaticResource TextBlockStyle}" Text="Simple Content"></TextBlock>
+            </Border>
+        </controls:MosaicControl>
+
+        <controls:MosaicControl 
+
+            ImageSource="ms-appx:///SamplePages/MosaicControl/Animations.png" 
+            ScrollViewerContainer   ="{x:Bind FlipView, Mode=OneTime}"
+            ParallaxSpeedRatio        ="{Binding ParallaxSpeedRatio.Value, Mode=OneWay}"
+
+            Grid.Row="2" 
+            Background="{StaticResource Brush-Grey-04}" 
+            >
+            <FlipView x:Name="FlipView">
+
+                <Border Style="{StaticResource BorderStyle}">
+                    <TextBlock Style="{StaticResource TextBlockStyle}" Text="Parallax with FlipView &gt;"></TextBlock>
+                </Border>
+
+                <Border Style="{StaticResource BorderStyle}">
+                    <TextBlock Style="{StaticResource TextBlockStyle}" Text="&lt; Parallax with FlipView"></TextBlock>
+                </Border>
+
+            </FlipView>
+        </controls:MosaicControl>
+
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MosaicControl/MosaicControlPage.xaml.cs

@@ -0,0 +1,37 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+using Microsoft.Toolkit.Uwp.SampleApp.Models;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    public sealed partial class MosaicControlPage
+    {
+        public MosaicControlPage()
+        {
+            InitializeComponent();
+        }
+
+        protected override async void OnNavigatedTo(NavigationEventArgs e)
+        {
+            base.OnNavigatedTo(e);
+
+            var propertyDesc = e.Parameter as PropertyDescriptor;
+
+            if (propertyDesc != null)
+            {
+                DataContext = propertyDesc.Expando;
+            }
+        }
+    }
+}

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

@@ -122,6 +122,14 @@
         "CodeUrl": "https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TextBoxMask",
         "XamlCodeFile": "TextBoxMask.bind",
         "Icon": "/SamplePages/TextBoxMask/TextBoxMask.png"
+      },
+      {
+        "Name": "MosaicControl",
+        "Type": "MosaicControlPage",
+        "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/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/MosaicControl",
+        "XamlCodeFile": "MosaicControl.bind",
+        "Icon": "/SamplePages/MosaicControl/MosaicControl.png"
       }
     ]
   },

Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj

@@ -72,6 +72,7 @@
     <Compile Include="MasterDetailsView\MasterDetailsView.Properties.cs" />
     <Compile Include="BladeView\BladeItem.Events.cs" />
     <Compile Include="MasterDetailsView\MasterDetailsViewState.cs" />
+    <Compile Include="MosaicControl\MosaicControl.cs" />
     <Compile Include="SlidableListItem\SwipeStatus.cs" />
     <Compile Include="SlidableListItem\SwipeStatusChangedEventArgs.cs" />
     <Compile Include="TextBoxMask\TextBoxMask.cs" />
@@ -135,6 +136,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="MosaicControl\MosaicControl.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="ScrollHeader\ScrollHeader.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>