Adding Composition XAML Helpers

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

@@ -401,7 +401,7 @@
     <Content Include="SamplePages\NetworkHelper\NetworkHelperCode.bind" />
     <Content Include="SamplePages\PrintHelper\PrintHelperCode.bind" />
     <Content Include="SamplePages\SystemInformation\SystemInformationCode.bind" />
-    <Content Include="SamplePages\DispatcherHelper\DispatcherHelperCode.bind" />
+    <Content Include="SamplePages\Connected Animations\ConnectedAnimationsCode.bind" />
     <Content Include="SamplePages\ParallaxService\ParallaxPage.bind" />
     <Content Include="SamplePages\Loading\LoadingCode.bind" />
     <Content Include="SamplePages\ReorderGridAnimation\ReorderGrid.bind" />
@@ -433,7 +433,7 @@
     <Content Include="SamplePages\Carousel\CarouselCode.bind" />
     <Content Include="SamplePages\AlignmentGrid\AlignmentGridXaml.bind" />
     <Content Include="SamplePages\FocusTracker\FocusTrackerXaml.bind" />
-    <Content Include="SamplePages\TextToolbar\TextToolbar.bind" />
+    <Content Include="SamplePages\Visual Extensions\VisualExtensionsCode.bind" />
     <Content Include="SamplePages\TextToolbar\TextToolbarCode.bind" />
     <Content Include="SamplePages\BluetoothLEHelper\BluetoothLEHelperCode.bind" />
     <Content Include="SamplePages\OrbitView\OrbitViewXaml.bind" />
@@ -442,6 +442,9 @@
     <Content Include="SamplePages\InAppNotification\InAppNotificationXaml.bind" />
     <Content Include="SamplePages\ListViewBase\ListViewBaseCode.bind" />
     <Content Include="SamplePages\PullToRefreshListView\PullToRefreshListViewXaml.bind" />
+    <Content Include="SamplePages\Implicit Animations\ImplicitAnimationsCode.bind" />
+    <Content Include="SamplePages\DispatcherHelper\DispatcherHelperCode.bind" />
+    <Content Include="SamplePages\TextToolbar\TextToolbar.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">
@@ -477,6 +480,21 @@
       <DependentUpon>BluetoothLEHelperPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="Common\IXamlRenderListener.cs" />
+    <Compile Include="SamplePages\Connected Animations\ConnectedAnimationsPage.xaml.cs">
+      <DependentUpon>ConnectedAnimationsPage.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="SamplePages\Connected Animations\Pages\FirstPage.xaml.cs">
+      <DependentUpon>FirstPage.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="SamplePages\Connected Animations\Pages\SecondPage.xaml.cs">
+      <DependentUpon>SecondPage.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="SamplePages\Connected Animations\Pages\ThirdPage.xaml.cs">
+      <DependentUpon>ThirdPage.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="SamplePages\Implicit Animations\ImplicitAnimationsPage.xaml.cs">
+      <DependentUpon>ImplicitAnimationsPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\InAppNotification\InAppNotificationPage.xaml.cs">
       <DependentUpon>InAppNotificationPage.xaml</DependentUpon>
     </Compile>
@@ -664,6 +682,9 @@
       <DependentUpon>ImageExPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="SamplePages\Twitter Service\TwitterTemplateSelector.cs" />
+    <Compile Include="SamplePages\Visual Extensions\VisualExtensionsPage.xaml.cs">
+      <DependentUpon>VisualExtensionsPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\WeatherLiveTileAndToast\WeatherLiveTileAndToastPage.xaml.cs">
       <DependentUpon>WeatherLiveTileAndToastPage.xaml</DependentUpon>
     </Compile>
@@ -738,10 +759,30 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="SamplePages\Connected Animations\ConnectedAnimationsPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="SamplePages\Connected Animations\Pages\FirstPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="SamplePages\Connected Animations\Pages\SecondPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="SamplePages\Connected Animations\Pages\ThirdPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SamplePages\FocusTracker\FocusTrackerPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="SamplePages\Implicit Animations\ImplicitAnimationsPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="SamplePages\InAppNotification\InAppNotificationPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -950,6 +991,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="SamplePages\Visual Extensions\VisualExtensionsPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="SamplePages\WeatherLiveTileAndToast\WeatherLiveTileAndToastPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

Microsoft.Toolkit.Uwp.SampleApp/Models/Sample.cs

@@ -96,6 +96,8 @@ public string CodeUrl
 
         public string XamlCodeFile { get; set; }
 
+        public bool DisableXamlEditorRendering { get; set; }
+
         public string XamlCode { get; private set; }
 
         public string DocumentationUrl { get; set; }

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Connected Animations/ConnectedAnimationsCode.bind

@@ -0,0 +1,95 @@
+<!-- Frame -->
+
+<Page ...
+  xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations">
+
+  <!-- Page 1 -->
+    <Grid>
+      <Border Height="100" 
+        Width="100" 
+        Background="Purple" 
+        VerticalAlignment="Center" 
+        HorizontalAlignment="Center" 
+        animations:Connected.Key="item"></Border>
+    </Grid>
+  <!-- /Page -->
+
+
+  <!-- Page 2 -->
+    <Grid>
+      <Grid.RowDefinitions>
+        <RowDefinition Height="Auto"></RowDefinition>
+        <RowDefinition Height="*"></RowDefinition>
+      </Grid.RowDefinitions>
+
+      <StackPanel Orientation="Horizontal">
+
+        <Border x:Name="HeroElement"
+          Height="300" 
+          Width="300"
+          Background="Purple"
+          animations:Connected.Key="item"></Border>
+
+        <StackPanel x:Name="HeroDetailsElement" 
+          Margin="20,0" 
+          VerticalAlignment="Bottom" 
+          MaxWidth="500" 
+          animations:Connected.AnchorElement="{x:Bind HeroElement}">
+
+          <TextBlock Text="Header" FontSize="50"></TextBlock>
+          <TextBlock TextWrapping="WrapWholeWords">Lorem ipsum ...</TextBlock>
+        </StackPanel>
+
+      </StackPanel>
+
+      <GridView x:Name="listView" 
+        Margin="0, 40, 0, 0" 
+        SelectionMode="None" 
+        Grid.Row="1"
+        ItemClick="ListView_ItemClick" 
+        IsItemClickEnabled="True"
+        animations:Connected.ListItemElementName="ItemThumbnail"
+        animations:Connected.ListItemKey="listItem">
+        <GridView.ItemTemplate>
+          <DataTemplate x:DataType="data:Item">
+            <StackPanel>
+              <Border x:Name="ItemThumbnail" Background="Purple" Height="200" Width="200"></Border>
+              <TextBlock Text="{x:Bind Title}"></TextBlock>
+            </StackPanel>
+          </DataTemplate>
+        </GridView.ItemTemplate>
+      </GridView>
+
+    </Grid>
+  <!-- /Page -->
+
+
+  <!-- Page 3-->
+    <StackPanel>
+      <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+
+        <StackPanel x:Name="HeroDetailsElement" 
+          Margin="20,0" 
+          VerticalAlignment="Bottom" 
+          MaxWidth="500" 
+          animations:Connected.AnchorElement="{x:Bind ItemHeroElement}">
+
+          <TextBlock Text="{x:Bind item.Title}" 
+            FontSize="50"></TextBlock>
+
+          <TextBlock TextWrapping="WrapWholeWords">Lorem ipsum ...</TextBlock>
+
+        </StackPanel>
+
+        <Border x:Name="ItemHeroElement" 
+          Height="300" Width="300" 
+          Background="Purple" 
+          animations:Connected.Key="listItem"></Border>
+      </StackPanel>
+
+      <TextBlock Margin="0,40" 
+        TextWrapping="WrapWholeWords">Lorem Ipsum ...</TextBlock>
+    </StackPanel>
+  <!-- /Page -->
+
+<!-- /Frame -->

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Connected Animations/ConnectedAnimationsPage.xaml

@@ -0,0 +1,36 @@
+<Page
+    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ConnectedAnimationsPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
+    mc:Ignorable="d">
+
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="40">
+
+        <Border BorderBrush="Gray" BorderThickness="1">
+
+            <Grid>
+
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"></RowDefinition>
+                    <RowDefinition Height="*"></RowDefinition>
+                </Grid.RowDefinitions>
+                <Border Background="{StaticResource SystemControlBackgroundAccentBrush}">
+                    <StackPanel  VerticalAlignment="Top" Orientation="Horizontal" Height="30">
+                        <Button x:Name="BackButton" Click="BackButton_Click" Visibility="Collapsed" Foreground="White">Back</Button>
+                        <TextBlock Margin="10,0" VerticalAlignment="Center" Foreground="White">My Connected Animations App
+                            <animations:Implicit.Animations>
+                                <animations:OffsetAnimation Duration="0:0:0.3"></animations:OffsetAnimation>
+                            </animations:Implicit.Animations>
+                        </TextBlock>
+                    </StackPanel>
+                </Border>
+                <Frame Grid.Row="1" Navigated="Frame_Navigated" Navigating="RootFrame_Navigating" x:Name="RootFrame"></Frame>
+            </Grid>
+        </Border>
+
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Connected Animations/ConnectedAnimationsPage.xaml.cs

@@ -0,0 +1,51 @@
+// ******************************************************************
+// 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.SamplePages.ConnectedAnimations.Pages;
+using Microsoft.Toolkit.Uwp.UI.Animations;
+using Windows.Foundation;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class ConnectedAnimationsPage : Page
+    {
+        public ConnectedAnimationsPage()
+        {
+            this.InitializeComponent();
+            RootFrame.Navigate(typeof(FirstPage));
+        }
+
+        private void Frame_Navigated(object sender, NavigationEventArgs e)
+        {
+            BackButton.Visibility = RootFrame.CanGoBack ? Visibility.Visible : Visibility.Collapsed;
+        }
+
+        private void RootFrame_Navigating(object sender, NavigatingCancelEventArgs e)
+        {
+            if (e.SourcePageType == RootFrame.SourcePageType)
+            {
+                e.Cancel = true;
+            }
+        }
+
+        private void BackButton_Click(object sender, RoutedEventArgs e)
+        {
+            RootFrame.GoBack();
+        }
+    }
+}

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Connected Animations/Pages/FirstPage.xaml

@@ -0,0 +1,22 @@
+<Page
+    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ConnectedAnimations.Pages.FirstPage"
+    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:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
+    mc:Ignorable="d">
+
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="20">
+
+        <TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Center">This is the first page, Click/Tap the box to navigate to the next page</TextBlock>
+
+        <Border Height="100" 
+                Width="100" 
+                Background="Purple" 
+                VerticalAlignment="Center" 
+                HorizontalAlignment="Center" 
+                animations:Connected.Key="item" 
+                Tapped="Border_Tapped"></Border>
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Connected Animations/Pages/FirstPage.xaml.cs

@@ -0,0 +1,33 @@
+// ******************************************************************
+// 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 Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Input;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ConnectedAnimations.Pages
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class FirstPage : Page
+    {
+        public FirstPage()
+        {
+            this.InitializeComponent();
+        }
+
+        private void Border_Tapped(object sender, TappedRoutedEventArgs e)
+        {
+            Frame.Navigate(typeof(SecondPage));
+        }
+    }
+}